From stitch-kit
Analyzes Stitch project screens to generate natural-language DESIGN.md with visual atmosphere, hex color palettes, typography rules, and Stitch-ready prompt snippets for multi-page design consistency.
npx claudepluginhub gabelul/stitch-kit --plugin stitch-kitThis skill is limited to using the following tools:
**Constraint:** Only use this skill when the user explicitly mentions "Stitch" or when preparing design system documentation for Stitch generation.
Analyzes Stitch projects using MCP tools to generate DESIGN.md files, semantically documenting design systems (themes, colors, shapes) for consistent UI generation.
Analyzes Stitch projects via MCP tools to synthesize semantic design systems into DESIGN.md, extracting style guides and design tokens for colors, typography, spacing from screens.
Analyzes Stitch projects via MCP Server tools to retrieve screen metadata, HTML/CSS assets, and synthesize semantic design systems into DESIGN.md files.
Share bugs, ideas, or general feedback.
Constraint: Only use this skill when the user explicitly mentions "Stitch" or when preparing design system documentation for Stitch generation.
You are an expert Design Systems Lead. Your job is to analyze Stitch project assets and synthesize a Semantic Design System into a file named DESIGN.md — written in natural language, not CSS.
| Skill | What it produces | Use it for |
|---|---|---|
stitch-design-md | Natural-language DESIGN.md | Feeding back into Stitch prompts; multi-page visual consistency; design docs |
stitch-design-system | design-tokens.css, tailwind-theme.css, DESIGN.md | Code-level theming for Next.js, Svelte, React, HTML output |
Use stitch-design-md first if you're building more Stitch screens. Use stitch-design-system when you're converting to code.
If the user pastes a Stitch design URL like https://stitch.withgoogle.com/projects/3492931393329678076?node-id=375b1aadc9cb45209bee8ad4f69af450:
projectId = segment after /projects/ and before ? (e.g. 3492931393329678076)screenId = query param node-id (e.g. 375b1aadc9cb45209bee8ad4f69af450)[prefix]:get_screen with those IDslist_tools → find the Stitch MCP prefix[prefix]:list_projects with filter: "view=owned" → select project by title → extract numeric ID[prefix]:list_screens with projects/[projectId] → pick the representative screen[prefix]:get_screen with numeric projectId and screenId[prefix]:get_project with projects/[projectId] → get full designTheme including:
colorMode, customColor, colorVariant, roundness, spacingScaleheadlineFont, bodyFont, labelFontnamedColors (40+ semantic tokens), override colorsdesignMd (auto-generated design system — if present, use as foundation for DESIGN.md)backgroundLight, backgroundDark# Download the HTML for color and Tailwind class analysis
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"
Parse the HTML for:
tailwind.config block (custom tokens)Work through these layers systematically:
name field)deviceType (MOBILE / DESKTOP / TABLET / AGNOSTIC)designTheme.headlineFont, designTheme.bodyFont, designTheme.labelFont (font roles)designTheme.roundness, designTheme.colorMode, designTheme.colorVariantdesignTheme.spacingScale (0=minimal, 1=compact, 2=normal, 3=spacious)If designTheme.description exists, use it as the starting point. If designTheme.designMd exists, it contains a full design system document — extract the creative direction, do's/don'ts, and component philosophy from it.
Then describe the aesthetic in 2–3 sentences. Go beyond generic adjectives — what does it feel like? What editorial or product category does it evoke?
Examples:
If namedColors is available from get_project: Use it as the authoritative color source. It provides 40+ semantic tokens (primary, secondary, tertiary, surface hierarchy, error states, inverse variants). Map these directly to palette documentation instead of guessing from HTML.
If backgroundLight/backgroundDark are available: Use them as the canonical background colors for light/dark modes.
For each key color, write:
[Descriptive name] ([hex]) — [functional role]
Example:
Deep Muted Teal-Navy (#294056) — Primary actions, links, active states
Warm Barely-There Cream (#FCFAFA) — Page background
Charcoal Near-Black (#2C2C2C) — Headlines and product names
Soft Warm Gray (#6B6B6B) — Body copy and metadata
Aim for 4–6 colors. Include light AND dark mode backgrounds if both present.
designTheme.font or Tailwind class)Translate Tailwind classes to descriptive language:
rounded-full → "Pill-shaped"rounded-lg (12px) → "Gently rounded corners"rounded-md (8px) → "Subtly rounded corners"rounded-none → "Sharp, squared-off edges"Describe shadow presence and style:
shadow-none → "Flat, no shadow"shadow-sm → "Whisper-soft diffused shadow"shadow-lg → "Prominent floating elevation"Use this exact structure:
# Design System: [Project Title]
**Project ID:** [numeric ID]
**Device:** [MOBILE / DESKTOP / TABLET / AGNOSTIC]
## 1. Visual Theme & Atmosphere
[2–3 sentences describing the overall aesthetic and mood]
## 2. Color Palette & Roles
- **[Descriptive Name]** ([#hex]) — [Functional role]
- **[Descriptive Name]** ([#hex]) — [Functional role]
[...4–6 colors total]
## 3. Typography Rules
**Primary Font:** [Name] — [One-line character description]
- **Display (H1):** [weight], [size range]
- **Section (H2):** [weight], [size range]
- **Body:** [weight], line-height [value], [size]
- **Labels/Captions:** [weight], [size]
## 4. Component Stylings
- **Buttons:** [shape (Xpx radius)], [color], [padding]; hover [behavior]
- **Cards/Containers:** [roundness (Xpx)], [background], [shadow]; hover [behavior]
- **Inputs/Forms:** [border style], [background], [roundness], [focus behavior]
## 5. Layout Principles
- Max content width: [value]; [grid description]; [column behavior at breakpoints]
- Base spacing unit: [4px/8px]; section margins [range]; touch targets [size]
## 6. Design System Notes for Stitch Generation
[This section is copy-paste ready for new Stitch prompts]
When creating new screens:
- **Atmosphere:** "[Quote the atmosphere description from Section 1]"
- **Colors:** Always use descriptive name + hex (e.g. "[Name] ([#hex])")
- **Shape:** "[Describe buttons and cards using the language from Section 4]"
- **Spacing:** "[Describe the whitespace/density philosophy]"
- **Font:** [Font name] — [one-line descriptor]
Tell the user what to do with it:
## DESIGN.md created
Saved to: ./DESIGN.md
**How to use it:**
1. **More Stitch screens:** Copy Section 6 into the DESIGN SYSTEM block of your next Stitch prompt.
This keeps every new screen visually consistent with your existing design.
2. **Multi-page build with stitch-loop:** Include Section 6 in every `next-prompt.md` baton file.
3. **Code conversion:** Hand off to `stitch-design-system` when you're ready to generate
`design-tokens.css` and `tailwind-theme.css` for your framework.
rounded-xl in the doc instead of translating to "generously rounded corners (12px)"examples/usage.md — Worked examplesexamples/DESIGN.md — Complete sample output for a furniture e-commerce sitedocs/color-prompt-guide.md — 8 ready-to-use color palettes for inspirationscripts/fetch-stitch.sh — Reliable HTML downloader for GCS URLs