Stitch DESIGN.md Skill

DESIGN.md

Overview

DESIGN.md

Prerequisites

• Access to the Stitch MCP Server
• A Stitch project with at least one designed screen
• Access to the Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/

The Goal

DESIGN.md

Retrieval and Networking

1. Namespace discovery: Run

   list_tools

   to find the Stitch MCP prefix. Use this prefix (e.g.,

   mcp_stitch:

   ) for all subsequent calls.
2. Project lookup (if Project ID is not provided):
   • Call

     [prefix]:list_projects

     with

     filter: "view=owned"

     to retrieve all user projects
   • Identify the target project by title or URL pattern
   • Extract the Project ID from the

     name

     field (e.g.,

     projects/13534454087919359824

     )
3. Screen lookup (if Screen ID is not provided):
   • Call

     [prefix]:list_screens

     with the

     projectId

     (just the numeric ID, not the full path)
   • Review screen titles to identify the target screen (e.g., "Home", "Landing Page")
   • Extract the Screen ID from the screen's

     name

     field
4. Metadata fetch:
   • Call

     [prefix]:get_screen

     with both

     projectId

     and

     screenId

     (both as numeric IDs only)
   • This returns the complete screen object including:

     • screenshot.downloadUrl

       - Visual reference of the design

     • htmlCode.downloadUrl

       - Full HTML/CSS source code

     • width

       ,

       height

       ,

       deviceType

       - Screen dimensions and target platform
     • Project metadata including

       designTheme

       with color and style information
5. Asset download:
   • Use

     web_fetch

     or

     read_url_content

     to download the HTML code from

     htmlCode.downloadUrl

   • Optionally download the screenshot from

     screenshot.downloadUrl

     for visual reference
   • Parse the HTML to extract Tailwind classes, custom CSS, and component patterns
6. Project metadata extraction:
   • Call

     [prefix]:get_project

     with the project

     name

     (full path:

     projects/{id}

     ) to get:

     • designTheme

       object with color mode, fonts, roundness, custom colors
     • Project-level design guidelines and descriptions
     • Device type preferences and layout principles

Analysis & Synthesis Instructions

1. Extract Project Identity (JSON)

• Locate the Project Title
• Locate the specific Project ID (e.g., from the

  name

  field in the JSON)

2. Define the Atmosphere (Image/HTML)

3. Map the Color Palette (Tailwind Config/JSON)

• A descriptive, natural language name that conveys its character (e.g., "Deep Muted Teal-Navy")
• The specific hex code in parentheses for precision (e.g., "#294056")
• Its specific functional role (e.g., "Used for primary actions")

4. Translate Geometry & Shape (CSS/Tailwind)

border-radius

• Describe

  rounded-full

  as "Pill-shaped"
• Describe

  rounded-lg

  as "Subtly rounded corners"
• Describe

  rounded-none

  as "Sharp, squared-off edges"

5. Describe Depth & Elevation

Output Guidelines

• Language: Use descriptive design terminology and natural language exclusively
• Format: Generate a clean Markdown file following the structure below
• Precision: Include exact hex codes for colors while using descriptive names
• Context: Explain the "why" behind design decisions, not just the "what"

Output Format (DESIGN.md Structure)

# Design System: [Project Title]
**Project ID:** [Insert Project ID Here]

## 1. Visual Theme & Atmosphere
(Description of the mood, density, and aesthetic philosophy.)

## 2. Color Palette & Roles
(List colors by Descriptive Name + Hex Code + Functional Role.)

## 3. Typography Rules
(Description of font family, weight usage for headers vs. body, and letter-spacing character.)

## 4. Component Stylings
* **Buttons:** (Shape description, color assignment, behavior).
* **Cards/Containers:** (Corner roundness description, background color, shadow depth).
* **Inputs/Forms:** (Stroke style, background).

## 5. Layout Principles
(Description of whitespace strategy, margins, and grid alignment.)

Usage Example

1. Retrieve project information:

   Use the Stitch MCP Server to get the Furniture Collection project

2. Get the Home page screen details:

   Retrieve the Home page screen's code, image, and screen object information

3. Reference best practices:

   Review the Stitch Effective Prompting Guide at:
   https://stitch.withgoogle.com/docs/learn/prompting/

4. Analyze and synthesize:
   • Extract all relevant design tokens from the screen
   • Translate technical values into descriptive language
   • Organize information according to the DESIGN.md structure
5. Generate the file:
   • Create

     DESIGN.md

     in the project directory
   • Follow the prescribed format exactly
   • Ensure all color codes are accurate
   • Use evocative, designer-friendly language

Best Practices

• Be Descriptive: Avoid generic terms like "blue" or "rounded." Use "Ocean-deep Cerulean (#0077B6)" or "Gently curved edges"
• Be Functional: Always explain what each design element is used for
• Be Consistent: Use the same terminology throughout the document
• Be Visual: Help readers visualize the design through your descriptions
• Be Precise: Include exact values (hex codes, pixel values) in parentheses after natural language descriptions

Tips for Success

1. Start with the big picture: Understand the overall aesthetic before diving into details
2. Look for patterns: Identify consistent spacing, sizing, and styling patterns
3. Think semantically: Name colors by their purpose, not just their appearance
4. Consider hierarchy: Document how visual weight and importance are communicated
5. Reference the guide: Use language and patterns from the Stitch Effective Prompting Guide

Common Pitfalls to Avoid

• ❌ Using technical jargon without translation (e.g., "rounded-xl" instead of "generously rounded corners")
• ❌ Omitting color codes or using only descriptive names
• ❌ Forgetting to explain functional roles of design elements
• ❌ Being too vague in atmosphere descriptions
• ❌ Ignoring subtle design details like shadows or spacing patterns