Google Stitch AI

Use this skill when

• A DESIGN.md is needed to capture a Stitch project’s design language.
• A prompt needs enhancement for Stitch or similar UI generators.
• Stitch-exported HTML/CSS and screenshots need a structured summary.

Do not use this skill when

• The request needs user research, product strategy, or a full UX design brief.
• The request requires inventing a brand identity without assets or inputs.
• The request depends on cross-skill dependencies or multi-agent orchestration.

Required inputs

• Mode A (DESIGN.md): Stitch project data (exported files or offline assets), screenshots, and project title.
• Mode B (Prompt Enhancement): Draft prompt, target platform (web/mobile), and optional DESIGN.md.

Decision points

• If the request includes both a design summary and prompt refinement, complete Mode A first, then Mode B.
• If Stitch project data is provided, use it for accurate theme data.
• If only offline HTML/CSS and screenshots are provided, rely on those sources.
• If key inputs are missing (palette, typography, layout), request them before final output.

Mode A: DESIGN.md Synthesis

Workflow

1. Choose retrieval path.
   • If Stitch project data is provided, collect metadata + screen HTML/screenshot.
   • If offline, collect HTML/CSS export + screenshots + project title.
   • Output: asset bundle summary.
2. Extract visual theme details.
   • Identify primary/secondary colors, background/surface colors, text colors.
   • Capture typography (font family, weights, sizes, line heights).
   • Output: theme notes list.
3. Catalog components and states.
   • Buttons, inputs, cards, nav, modals, tables, etc.
   • Note states (hover, active, disabled) if visible.
   • Output: component inventory.
4. Draft DESIGN.md.
   • Use the template below; fill with extracted tokens and observations.
   • Output: DESIGN.md file.
5. Validate gaps.
   • If missing critical details, list follow-up questions.
   • Output: question list (if needed).

Output: DESIGN.md structure

# Design System: <Project Title>
**Project ID:** <ID>

## 1. Visual Theme & Atmosphere

## 2. Color Palette & Roles

## 3. Typography Rules

## 4. Component Stylings

Mode B: Prompt Enhancement

Workflow

1. Clarify intent and platform.
   • Identify page type, user goal, and platform (web/mobile).
   • Output: clarified intent line.
2. Pull design tokens (if available).
   • Use DESIGN.md to populate colors, typography, spacing, and components.
   • Output: token summary block.
3. Structure the prompt.
   • Purpose + vibe (one line).
   • DESIGN SYSTEM block (if available).
   • Page structure (numbered layout sections).
   • Specific changes (only if editing an existing design).
   • Output: enhanced prompt in Markdown.
4. Check for missing details.
   • Request missing platform or target audience info.
   • Output: question list (if needed).

Output contract

• Mode A: Provide DESIGN.md, plus any open questions for missing tokens.
• Mode B: Provide enhanced prompt in Markdown and state whether DESIGN.md was used.
• If DESIGN.md is missing, recommend creating it via Mode A.

Common pitfalls

• Inventing brand colors or typography without evidence
• Mixing web and mobile patterns in one prompt
• Overloading the prompt with unrelated features
• Ignoring accessibility contrast or text hierarchy

Examples

Example input → output (prompt enhancement)

Input: "Make a clean dashboard for sales KPIs."

Output (excerpt):

Purpose/Vibe: Clean, professional sales KPI dashboard for executives.

DESIGN SYSTEM
- Primary: #1F4ED8, Secondary: #93B5FF
- Typography: Inter (H1 32/40, H2 24/32, Body 16/24)

Page Structure
1. Top nav with logo, account, date range filter
2. KPI summary cards (Revenue, ARR, Churn)
3. Line chart for revenue trend
4. Table of top accounts