design-md

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

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/MediaAskeyDOJO/sakuteki-site --skill design-md-mediaaskeydojo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/MediaAskeyDOJO/sakuteki-site/tree/main/.skills/source/design-md
Command: npx skills add https://github.com/MediaAskeyDOJO/sakuteki-site --skill design-md-mediaaskeydojo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the process of analyzing Stitch projects and synthesizing their design language into a structured DESIGN.md file, serving as a single source of truth for design consistency.

Core Features & Use Cases

  • Semantic Design System Synthesis: Analyzes Stitch project assets (screenshots, HTML, project metadata) to extract and define design elements.
  • DESIGN.md Generation: Creates a Markdown file detailing the project's visual theme, color palette, typography, component stylings, and layout principles.
  • Use Case: A designer needs to create a new screen for a Stitch project but wants to ensure it perfectly matches the existing design. They use this Skill to generate a DESIGN.md file that outlines the project's established design system, which can then be used as a reference for prompting AI to generate the new screen.

Quick Start

Use the design-md skill to analyze the Stitch project and generate a DESIGN.md file.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I extract a design system from a Stitch project?

To extract a design system from a Stitch project, you analyze project assets like screenshots and HTML to synthesize the visual theme, color palette, typography, and layout principles into a structured DESIGN.md file.

What is a DESIGN.md file used for in visual design?

A DESIGN.md file serves as a single source of truth for design consistency, documenting a project's visual theme, color palette, typography, component stylings, and layout principles for future reference.

How do I document component stylings and typography for my design system?

You document component stylings and typography by analyzing your project's visual assets and metadata, then synthesizing these extracted design elements into a comprehensive Markdown file.

Do I need a Stitch MCP Server to generate design documentation?

Yes, you need access to Stitch MCP Server tools for data retrieval and web fetching capabilities to download assets required for analyzing the project and generating design documentation.

Can I use a generated design system to create new screens with AI?

Yes, you can use the generated DESIGN.md file outlining your established design system as a reference prompt for AI, ensuring newly generated screens perfectly match the existing visual design.

What's the best way to ensure design consistency across new UI screens?

The best way to ensure design consistency is to synthesize your existing project assets into a detailed DESIGN.md file, establishing a single source of truth for your semantic design system.