skills.rest
Ayoub-ouederni
Ayoub-ouederniCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Analyze Stitch project screens and generate semantic DESIGN.md design system documentation.

Updated Apr 3, 2026
Search Tags:#documentation#design system#mcp#design tokens#tailwind#generate#stitch
One-click install
npx skills add https://github.com/Ayoub-ouederni/SENTINEL --skill design-md-ayoub-ouederni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Ayoub-ouederni/SENTINEL/tree/main/.claude/skills/design-md
Command: npx skills add https://github.com/Ayoub-ouederni/SENTINEL --skill design-md-ayoub-ouederni

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually documenting a design system from an existing Stitch project is slow and inconsistent, and vague prompts cause Stitch to generate screens that drift from the established visual language. This Skill turns screen HTML, screenshots, and project metadata into a structured DESIGN.md that acts as a source of truth for future screen generation. ## Core Features & Use Cases - Design Token Extraction: Retrieves screens via the Stitch MCP Server and extracts colors, typography, spacing, corner radii, and shadow patterns from HTML and Tailwind classes. - Semantic Translation: Converts technical values like rounded-lg or hex codes into descriptive design language (e.g., "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 Home screen for a furniture collection app in Stitch, 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 DESIGN.md file documenting its full design system.

Frequently Asked Questions about design-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a DESIGN.md from a Stitch project?▼

Provide the Stitch project and screen, and the Skill uses the Stitch MCP Server to fetch the screen's HTML code, screenshot, and metadata. It then extracts design tokens and writes a structured DESIGN.md covering theme, colors, typography, components, and layout.

What is a DESIGN.md file used for in Stitch?▼

A DESIGN.md serves as the source of truth when prompting Stitch to generate new screens. It describes the design system in semantic visual language with exact hex codes so generated screens stay consistent with the existing design.

Does this Skill require the Stitch MCP Server?▼

Yes, access to the Stitch MCP Server is a prerequisite. The Skill uses its tools to list projects, list screens, fetch screen metadata, and download HTML code and screenshots for analysis.

What information does the extracted design system include?▼

The output documents visual theme and atmosphere, color palette with hex codes and functional roles, typography rules, component stylings for buttons, cards, and inputs, and layout principles including grid, whitespace, and breakpoints.

Why does the DESIGN.md use descriptive names instead of Tailwind classes?▼

Stitch interprets design through visual descriptions rather than technical class names. Terms like "subtly rounded corners" paired with exact hex codes produce more accurate screen generation than raw values like rounded-lg.

Related Skills

Explore More Design & Creative Skills→
gonzoblascogonzoblasco
1

design-md

Analyzes Stitch projects and generates DESIGN.md files documenting semantic design systems.

Community
Intermediate
datguynabeeldatguynabeel

design-md

Extract design tokens from Stitch projects and generate DESIGN.md files.

Community
Intermediate
zester4zester4
2

design-md

Analyzes Stitch project screens and generates semantic DESIGN.md design system documentation.

Community
Intermediate
cano721cano721

figma-implement-design

Translate Figma designs into UI code using the Figma MCP server.

Community
Advanced