skilld
All skills
google-labs-code avatar

/design-md

@a697ca5 official
by Google Labs Codegoogle-labs-code/stitch-skills8.4k stars
1,105

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Ask your Agent

Use this Skill: https://skilld.dev/gh/google-labs-code/stitch-skills/design-md

This session only. Nothing lands on disk.

README.md

≈319 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Stitch Design System Documentation Skill

Install

npx skills add google-labs-code/stitch-skills --skill design-md --global

Example Prompt

Analyze my Furniture Collection project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.

Skill Structure

This repository follows the Agent Skills open standard. Each skill is self-contained with its own logic, workflow, and reference materials.

design-md/
├── SKILL.md           — Core instructions & workflow
├── examples/          — Sample DESIGN.md outputs
└── README.md          — This file

How it Works

When activated, the agent follows a structured design analysis pipeline:

  1. Retrieval: Uses the Stitch MCP Server to fetch project screens, HTML code, and design metadata.
  2. Extraction: Identifies design tokens including colors, typography, spacing, and component patterns.
  3. Translation: Converts technical CSS/Tailwind values into descriptive, natural design language.
  4. Synthesis: Generates a comprehensive DESIGN.md following the semantic design system format.
  5. Alignment: Ensures output follows Stitch Effective Prompting Guide principles for optimal screen generation.

Source: SKILL.md on GitHub

Third-party checks

1 warning16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill provides a safe design analysis pipeline using an integration with the official Stitch MCP server tools. It fetches project metrics/metadata, handles translation to design documentation (DESIGN.md), and interacts strictly with a well-known service infrastructure.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: MEDIUM · 1 issue

  • Runlayer7mo

    3 files scanned · No issues

  • ZeroLeaks5mo

    1 finding · Score: 86/100

Provenance

Signed by skilld at a697ca5. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 3 days ago.

Steadyupdated 8 months ago

Capability

What it can do
Reads files Edits files
All 4 allowed tools
stitch*:*ReadWriteweb_fetch

Topics

  • stitch
  • design-systems
  • google-labs
  • markdown
  • color-palette
  • typography
  • layout
  • css
  • tailwind
  • design-documentation

README badge

README badge for google-labs-code/stitch-skills/design-md

What it does

Analyzes Stitch design projects and synthesizes their visual language into DESIGN.md files that serve as a source of truth for AI-generated screen consistency. The skill extracts color palettes, typography, component styling, and layout principles from existing screens via the Stitch MCP Server, then translates technical CSS/Tailwind values into semantic design descriptions that guide future screen generation.

Generated from the current SKILL.md.

Frequently asked

What is a DESIGN.md file and why would I create one?
A DESIGN.md file serves as the source of truth for design language in Stitch projects. It documents the semantic design system (colors, typography, components, layout) in natural language so that Stitch can generate new screens that align with your existing design.
Do I need a Stitch project to use this skill?
Yes. You need access to the Stitch MCP Server, an existing Stitch project, and at least one designed screen to analyze and extract design tokens from.
What format should colors be documented in?
Colors should include a descriptive natural language name, the exact hex code in parentheses, and their functional role — for example, 'Deep Muted Teal-Navy (#294056) used for primary actions'.
Can I use this skill with any design tool or just Stitch?
This skill is specific to Stitch projects. It uses the Stitch MCP Server to retrieve screen metadata, HTML code, and design theme information.
Does this skill generate the DESIGN.md file automatically?
No. This skill guides you through the analysis and synthesis process. You retrieve design assets from Stitch, analyze them according to the prescribed framework, and create the DESIGN.md file yourself following the provided structure and best practices.

Generated from the current SKILL.md. These answers refresh after source changes.