design-md

Name: design-md
Author: google-labs-code

bygoogle-labs-code· 30 skills

Installs

56k

Stars

7.8k

Forks

950

How to install design-md?

google-labs-code/stitch-skills/design-md

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

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/google-labs-code/stitch-skills" --skill "google-labs-code/stitch-skills/design-md"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/google-labs-code/stitch-skills" that are relevant to the current task. Run `npx skills add "https://github.com/google-labs-code/stitch-skills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# Stitch DESIGN.md Skill
2
3	You are an expert Design Systems Lead. Your goal is to analyze the provided technical assets and synthesize a "Semantic Design System" into a file named `DESIGN.md`.
4
5	## Overview
6
7	This skill helps you create `DESIGN.md` files that serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
8
9	## Prerequisites
10
11	- Access to the Stitch MCP Server
12	- A Stitch project with at least one designed screen
13	- Access to the Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/
14
15	## The Goal
16
17	The `DESIGN.md` file will serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with the existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
18
19	## Retrieval and Networking
20
21	To analyze a Stitch project, you must retrieve screen metadata and design assets using the Stitch MCP Server tools:
22
23	1. Namespace discovery: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `mcp_stitch:`) for all subsequent calls.
24
25	2. Project lookup (if Project ID is not provided):
26	- Call `[prefix]:list_projects` with `filter: "view=owned"` to retrieve all user projects
27	- Identify the target project by title or URL pattern
28	- Extract the Project ID from the `name` field (e.g., `projects/13534454087919359824`)
29
30	3. Screen lookup (if Screen ID is not provided):
31	- Call `[prefix]:list_screens` with the `projectId` (just the numeric ID, not the full path)
32	- Review screen titles to identify the target screen (e.g., "Home", "Landing Page")
33	- Extract the Screen ID from the screen's `name` field
34
35	4. Metadata fetch:
36	- Call `[prefix]:get_screen` with both `projectId` and `screenId` (both as numeric IDs only)
37	- This returns the complete screen object including:
38	- `screenshot.downloadUrl` - Visual reference of the design
39	- `htmlCode.downloadUrl` - Full HTML/CSS source code
40	- `width`, `height`, `deviceType` - Screen dimensions and target platform
41	- Project metadata including `designTheme` with color and style information
42
43	5. Asset download:
44	- Use `web_fetch` or `read_url_content` to download the HTML code from `htmlCode.downloadUrl`
45	- Optionally download the screenshot from `screenshot.downloadUrl` for visual reference
46	- Parse the HTML to extract Tailwind classes, custom CSS, and component patterns
47
48	6. Project metadata extraction:
49	- Call `[prefix]:get_project` with the project `name` (full path: `projects/{id}`) to get:
50	- `designTheme` object with color mode, fonts, roundness, custom colors
51	- Project-level design guidelines and descriptions
52	- Device type preferences and layout principles
53
54	## Analysis & Synthesis Instructions
55
56	### 1. Extract Project Identity (JSON)
57	- Locate the Project Title
58	- Locate the specific Project ID (e.g., from the `name` field in the JSON)
59
60	### 2. Define the Atmosphere (Image/HTML)
61	Evaluate the screenshot and HTML structure to capture the overall "vibe." Use evocative adjectives to describe the mood (e.g., "Airy," "Dense," "Minimalist," "Utilitarian").
62
63	### 3. Map the Color Palette (Tailwind Config/JSON)
64	Identify the key colors in the system. For each color, provide:
65	- A descriptive, natural language name that conveys its character (e.g., "Deep Muted Teal-Navy")
66	- The specific hex code in parentheses for precision (e.g., "#294056")
67	- Its specific functional role (e.g., "Used for primary actions")
68
69	### 4. Translate Geometry & Shape (CSS/Tailwind)
70	Convert technical `border-radius` and layout values into physical descriptions:
71	- Describe `rounded-full` as "Pill-shaped"
72	- Describe `rounded-lg` as "Subtly rounded corners"
73	- Describe `rounded-none` as "Sharp, squared-off edges"
74
75	### 5. Describe Depth & Elevation
76	Explain how the UI handles layers. Describe the presence and quality of shadows (e.g., "Flat," "Whisper-soft diffused shadows," or "Heavy, high-contrast drop shadows").
77
78	## Output Guidelines
79
80	- Language: Use descriptive design terminology and natural language exclusively
81	- Format: Generate a clean Markdown file following the structure below
82	- Precision: Include exact hex codes for colors while using descriptive names
83	- Context: Explain the "why" behind design decisions, not just the "what"
84
85	## Output Format (DESIGN.md Structure)
86
87	```markdown
88	# Design System: [Project Title]
89	Project ID: [Insert Project ID Here]
90
91	## 1. Visual Theme & Atmosphere
92	(Description of the mood, density, and aesthetic philosophy.)
93
94	## 2. Color Palette & Roles
95	(List colors by Descriptive Name + Hex Code + Functional Role.)
96
97	## 3. Typography Rules
98	(Description of font family, weight usage for headers vs. body, and letter-spacing character.)
99
100	## 4. Component Stylings
101	* Buttons: (Shape description, color assignment, behavior).
102	* Cards/Containers: (Corner roundness description, background color, shadow depth).
103	* Inputs/Forms: (Stroke style, background).
104
105	## 5. Layout Principles
106	(Description of whitespace strategy, margins, and grid alignment.)
107	```
108
109	## Usage Example
110
111	To use this skill for the Furniture Collection project:
112
113	1. Retrieve project information:
114	```
115	Use the Stitch MCP Server to get the Furniture Collection project
116	```
117
118	2. Get the Home page screen details:
119	```
120	Retrieve the Home page screen's code, image, and screen object information
121	```
122
123	3. Reference best practices:
124	```
125	Review the Stitch Effective Prompting Guide at:
126	https://stitch.withgoogle.com/docs/learn/prompting/
127	```
128
129	4. Analyze and synthesize:
130	- Extract all relevant design tokens from the screen
131	- Translate technical values into descriptive language
132	- Organize information according to the DESIGN.md structure
133
134	5. Generate the file:
135	- Create `DESIGN.md` in the project directory
136	- Follow the prescribed format exactly
137	- Ensure all color codes are accurate
138	- Use evocative, designer-friendly language
139
140	## Best Practices
141
142	- Be Descriptive: Avoid generic terms like "blue" or "rounded." Use "Ocean-deep Cerulean (#0077B6)" or "Gently curved edges"
143	- Be Functional: Always explain what each design element is used for
144	- Be Consistent: Use the same terminology throughout the document
145	- Be Visual: Help readers visualize the design through your descriptions
146	- Be Precise: Include exact values (hex codes, pixel values) in parentheses after natural language descriptions
147
148	## Tips for Success
149
150	1. Start with the big picture: Understand the overall aesthetic before diving into details
151	2. Look for patterns: Identify consistent spacing, sizing, and styling patterns
152	3. Think semantically: Name colors by their purpose, not just their appearance
153	4. Consider hierarchy: Document how visual weight and importance are communicated
154	5. Reference the guide: Use language and patterns from the Stitch Effective Prompting Guide
155
156	## Common Pitfalls to Avoid
157
158	- ❌ Using technical jargon without translation (e.g., "rounded-xl" instead of "generously rounded corners")
159	- ❌ Omitting color codes or using only descriptive names
160	- ❌ Forgetting to explain functional roles of design elements
161	- ❌ Being too vague in atmosphere descriptions
162	- ❌ Ignoring subtle design details like shadows or spacing patterns

6 picks

Type

Run `npx skills use "https://github.com/google-labs-code/stitch-skills" --skill "google-labs-code/stitch-skills/design-md"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/google-labs-code/stitch-skills" that are relevant to the current task. Run `npx skills add "https://github.com/google-labs-code/stitch-skills"` and select the relevant skills, then follow their instructions.

design-md

How to install design-md?

Related

design-md

How to install design-md?

Related