Analyzes Stitch project screens and generates semantic DESIGN.md design system documentation.
npx skills add https://github.com/zester4/zilmate --skill design-md-zester4
Please help me install this Agent Skill. Skill: design-md Source: https://github.com/zester4/zilmate/tree/main/.agents/skills/design-md Command: npx skills add https://github.com/zester4/zilmate --skill design-md-zester4
rounded-lg or hex codes into descriptive design language (e.g., "Subtly rounded corners", "Deep Muted Teal-Navy (#294056)") aligned with the Stitch Effective Prompting Guide. - Structured Output: Produces a DESIGN.md covering visual theme, color palette and roles, typography rules, component stylings, and layout principles. - Use Case: After designing a Furniture Collection Home screen in Stitch, run this Skill to generate a DESIGN.md so every subsequent screen prompt produces visually consistent results. ## Quick Start Analyze my Stitch project's Home screen and generate a comprehensive DESIGN.md file documenting its design system.High-intent search queries and answers about installing and using this skill.
Provide the Stitch project and target screen, and the Skill uses the Stitch MCP Server to fetch screen metadata, HTML code, and screenshots. It then extracts design tokens and writes a structured DESIGN.md covering theme, colors, typography, components, and layout.
A DESIGN.md file serves as the source of truth when prompting Stitch to generate new screens. It documents the design system in descriptive natural language with exact hex codes so generated screens align with the existing design language.
Yes, access to the Stitch MCP Server is a prerequisite. The Skill uses its tools such as list_projects, list_screens, get_screen, and get_project to retrieve screen metadata, HTML code, screenshots, and the project designTheme.
The analysis extracts the color palette with hex codes and functional roles, typography families and weights, border-radius and shape language, shadow and elevation styles, component stylings for buttons, cards, and inputs, plus layout and spacing principles.
Stitch interprets design through visual descriptions supported by specific color values rather than utility classes. Translating rounded-lg into "subtly rounded corners" and listing hex codes produces more accurate, consistent screen generation.
gonzoblascoAnalyzes Stitch projects and generates DESIGN.md files documenting semantic design systems.
google-labs-codeAnalyze Stitch project assets to generate a DESIGN.md design system document.
LionGabValidates WCAG AAA accessibility compliance for touch targets, contrast ratios, and interactive labels in apps.
khulnasoft-botAnalyzes Stitch project screens and generates DESIGN.md files documenting semantic design systems.