Analyze Stitch project screens and generate DESIGN.md design system documentation.
npx skills add https://github.com/Witroch4/witdev-skills --skill design-md-witroch4
Please help me install this Agent Skill. Skill: design-md Source: https://github.com/Witroch4/witdev-skills/tree/main/design-md Command: npx skills add https://github.com/Witroch4/witdev-skills --skill design-md-witroch4
This Skill automates the creation of DESIGN.md files, transforming complex technical design assets into human-readable documentation that serves as a "source of truth" for AI design tools.
DESIGN.md file that accurately reflects the applied design language, ensuring consistency for future development and AI-assisted design.Analyze the current project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.
High-intent search queries and answers about installing and using this skill.
To generate design system documentation from code, this Skill analyzes project screens and extracts technical CSS and Tailwind values, translating them into a structured Markdown file. It synthesizes colors, typography, and spacing into natural language visual descriptions automatically.
Yes, you can extract design tokens from a Stitch project automatically by connecting to the Stitch MCP Server. This Skill retrieves project metadata and assets, identifying precise color codes and component styles to synthesize semantic documentation.
Converting CSS and Tailwind values into natural language visual descriptions is done by analyzing technical styling properties and mapping them to semantic design tokens. This process translates hex codes and spacing units into readable design system principles within a Markdown file.
Yes, you need access to the Stitch MCP Server to synthesize design system Markdown using this Skill. The server provides the necessary project metadata and asset retrieval capabilities required to analyze screens and extract accurate design tokens.
The best way to document UI themes and color palettes for AI-assisted design is to generate a DESIGN.md file serving as a source of truth. This approach translates technical code into structured Markdown, ensuring visual consistency for future AI-driven design generation.
AI design generations are inconsistent with existing UI codebases when lacking a semantic source of truth. Generating a DESIGN.md file from your project screens translates technical values into natural language, providing AI tools with precise color codes and layout principles to maintain consistency.
v1nizxConvert CSS and Tailwind values into design tokens in a Markdown file.
phoenicisfGenerate design tokens and audit UI consistency across codebases.
baasith6Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.
zivtechExtract design tokens from styling configurations to generate a standardized DESIGN.md file.