skills.rest
khulnasoft-bot
khulnasoft-botCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

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

Updated Jun 27, 2026
Search Tags:#documentation#design system#design tokens#generate#mcp server#design.md#stitch
One-click install
npx skills add https://github.com/khulnasoft-bot/scalify --skill design-md-khulnasoft-bot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/khulnasoft-bot/scalify/tree/main/skills/plugins/stitch-utilities/skills/design-md
Command: npx skills add https://github.com/khulnasoft-bot/scalify --skill design-md-khulnasoft-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Documenting an existing design system from a Stitch project requires manually inspecting screens, HTML, and CSS, then translating technical values into reusable design language. This Skill automates that analysis and produces a structured DESIGN.md file that serves as a source of truth for generating consistent new screens. ## Core Features & Use Cases - Design Token Extraction: Retrieves screens, HTML code, screenshots, and designTheme metadata via the Stitch MCP Server to identify colors, typography, spacing, and component patterns. - Semantic Translation: Converts technical CSS and Tailwind values (e.g., rounded-lg, hex codes) into descriptive natural design language with exact values preserved. - Structured Output: Generates a DESIGN.md covering visual theme, color palette and roles, typography rules, component stylings, and layout principles. - Use Case: Analyze a Furniture Collection project's Home screen and produce a comprehensive DESIGN.md so future Stitch prompts generate screens aligned with the existing design language. ## Quick Start Ask the agent to analyze your Stitch project's Home screen and generate a DESIGN.md file documenting its 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 file from a Stitch project?▼

Provide the Stitch project and screen, and the skill retrieves screen metadata, HTML code, and screenshots via the Stitch MCP Server. 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 file acts as the source of truth for prompting Stitch to generate new screens that match an existing design language. It documents the visual theme, color palette with hex codes, typography rules, component stylings, and layout principles.

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 and screens, fetch screen metadata including HTML code and screenshots, and retrieve project-level designTheme information.

Can I use this skill without a Project ID or Screen ID?▼

Yes, the skill can look them up automatically. It calls list_projects to find the target project by title, then list_screens to identify the target screen, extracting the numeric IDs from the returned name fields.

What are the limitations of automated design system extraction?▼

The analysis depends on the quality of the retrieved HTML and screenshots, and requires at least one designed screen in the project. Subtle design intent may still need human review, and output should follow the Stitch Effective Prompting Guide for best results.

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
google-labs-codegoogle-labs-code
8.0k

design-md

Analyze Stitch project assets to generate a DESIGN.md design system document.

Official
Advanced
JayJihyunKimJayJihyunKim
1

design-md

Synthesize a semantic DESIGN.md from Stitch project data.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

stitch::extract-design-md

Extract a design system document from frontend source code without building the app.

Official
Advanced