generate-design

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

7.8kstars916forks

How to install generate-design?

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

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

Installs into the current project.

Summary

Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capa

Files · 1

View on GitHub

SKILL.md

1	# Generate Design
2
3	Create new design screens from text descriptions, images, or mockups, edit
4	existing screens with prompts and design system tokens, and generate design
5	variants using Stitch MCP.
6
7	> [!NOTE]
8	> Refer to your system prompt for instruction on handling MCP tool prefixes for
9	> all tools mentioned in this skill (e.g., `list_projects`,
10	> `generate_screen_from_text`, `edit_screens`).
11
12	## 🎨 Prompt Enhancement Pipeline
13
14	Before calling any Stitch generation or editing tool, you MUST enhance the
15	user's prompt.
16
17	### 1. Analyze Context
18
19	- Project: Use `list_projects` to find the correct `projectId`. If no
20	suitable project exists, create one using `create_project`.
21	- Design System: Check if a design system exists for the project via
22	`list_design_systems`. If one exists, design tokens (colors, fonts, roundness)
23	are already applied at the project level — do NOT include any color, font, or
24	theme instructions in the generation prompt. If none exists, delegate to the
25	manage-design-system skill first before generating screens.
26
27	### 2. Refine UI/UX Terminology
28
29	Consult [Design Mappings](references/design-mappings.md) to replace vague terms.
30
31	- Vague: "Make a nice header"
32	- Professional: "Sticky navigation bar with glassmorphism effect and centered
33	logo"
34
35	Use [Prompting Keywords](references/prompt-keywords.md) for component names,
36	adjective palettes, color roles, and shape descriptions.
37
38	### 3. Structure the Final Prompt
39
40	Format the enhanced prompt for Stitch. Focus exclusively on **layout, content,
41	and structure** — never include colors, fonts, or theme instructions (these are
42	handled by the manage-design-system skill at the project level).
43
44	For new screens, use this template:
45
46	```markdown
47	[Overall purpose and user intent of the page]
48
49	PLATFORM: [Web/Mobile], [Desktop/Mobile]-first
50
51	PAGE STRUCTURE:
52	1. Header: [Description of navigation and branding]
53	2. Hero Section: [Headline, subtext, and primary CTA]
54	3. Primary Content Area: [Detailed component breakdown]
55	4. Footer: [Links and copyright information]
56	```
57
58	For edits, be specific about what to change:
59
60	- Location: "Change the [primary button] in the [hero section]..."
61	- Visuals: "...to a darker blue (#004080) and add a subtle shadow."
62	- Structure: "Add a secondary button next to the primary one with the text
63	'Learn More'."
64
65	> [!CAUTION]
66	> Do NOT include hex codes, font names, color palettes, roundness values, or
67	> any design system tokens in a generation prompt. These are applied at the
68	> project level by the manage-design-system skill and will conflict if
69	> duplicated. (For edit prompts, hex codes are acceptable for precise
70	> color adjustments.)
71
72	### 4. Present AI Insights
73
74	After any tool call, always surface the `outputComponents` (Text Description and
75	Suggestions) to the user.
76
77	See [examples/enhanced-prompt.md](examples/enhanced-prompt.md) for a full
78	before/after prompt enhancement example.
79
80	--------------------------------------------------------------------------------
81
82	## Steps
83
84	### Determine the Mode
85
86	Decide which flow to use based on the user's request:
87
88	- User wants to create from a text description → Generate from Text flow
89	- User provides an image, screenshot, or mockup → Generate from Image flow
90	- User wants to modify an existing screen → Edit flow
91	- User wants layout/color/content variations → Generate Variants flow
92
93	---
94
95	### Generate from Text Flow (New Screen)
96
97	#### 1. Enhance the User Prompt
98
99	Apply the Prompt Enhancement Pipeline above.
100
101	#### 2. Identify the Project
102
103	Use `list_projects` to find the correct `projectId` if it is not already known.
104
105	#### 3. Generate the Screen
106
107	Call the `generate_screen_from_text` tool with the enhanced prompt and the
108	`designSystem` ID (if found in Step 1).
109
110	```json
111	{
112	"projectId": "...",
113	"prompt": "[Your Enhanced Prompt]",
114	"designSystem": "assets/...", // Optional: Pass if found in Step 1
115	"deviceType": "DESKTOP" // Options: MOBILE, DESKTOP, TABLET
116	}
117	```
118
119	#### 4. Present AI Feedback
120
121	Always show the text description and suggestions from `outputComponents` to the
122	user.
123
124	#### 5. Download Design Assets
125
126	After generation, download the HTML and screenshot urls from `outputComponents`
127	to the `.stitch/designs` directory.
128
129	- Naming: Use the screen ID or a descriptive slug for the filename.
130	- Tools: Use `curl -o` via `run_command` or similar.
131	- Directory: Ensure `.stitch/designs` exists.
132
133	#### 6. Review and Refine
134
135	- If the result is not exactly as expected, continue with the Edit fl

People who liked this also viewed

6 picks

Type

generate-design

7.8kstars916forks

View on GitHub

How to install generate-design?

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

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Generate Design
2
3	Create new design screens from text descriptions, images, or mockups, edit
4	existing screens with prompts and design system tokens, and generate design
5	variants using Stitch MCP.
6
7	> [!NOTE]
8	> Refer to your system prompt for instruction on handling MCP tool prefixes for
9	> all tools mentioned in this skill (e.g., `list_projects`,
10	> `generate_screen_from_text`, `edit_screens`).
11
12	## 🎨 Prompt Enhancement Pipeline
13
14	Before calling any Stitch generation or editing tool, you MUST enhance the
15	user's prompt.
16
17	### 1. Analyze Context
18
19	- Project: Use `list_projects` to find the correct `projectId`. If no
20	suitable project exists, create one using `create_project`.
21	- Design System: Check if a design system exists for the project via
22	`list_design_systems`. If one exists, design tokens (colors, fonts, roundness)
23	are already applied at the project level — do NOT include any color, font, or
24	theme instructions in the generation prompt. If none exists, delegate to the
25	manage-design-system skill first before generating screens.
26
27	### 2. Refine UI/UX Terminology
28
29	Consult [Design Mappings](references/design-mappings.md) to replace vague terms.
30
31	- Vague: "Make a nice header"
32	- Professional: "Sticky navigation bar with glassmorphism effect and centered
33	logo"
34
35	Use [Prompting Keywords](references/prompt-keywords.md) for component names,
36	adjective palettes, color roles, and shape descriptions.
37
38	### 3. Structure the Final Prompt
39
40	Format the enhanced prompt for Stitch. Focus exclusively on **layout, content,
41	and structure** — never include colors, fonts, or theme instructions (these are
42	handled by the manage-design-system skill at the project level).
43
44	For new screens, use this template:
45
46	```markdown
47	[Overall purpose and user intent of the page]
48
49	PLATFORM: [Web/Mobile], [Desktop/Mobile]-first
50
51	PAGE STRUCTURE:
52	1. Header: [Description of navigation and branding]
53	2. Hero Section: [Headline, subtext, and primary CTA]
54	3. Primary Content Area: [Detailed component breakdown]
55	4. Footer: [Links and copyright information]
56	```
57
58	For edits, be specific about what to change:
59
60	- Location: "Change the [primary button] in the [hero section]..."
61	- Visuals: "...to a darker blue (#004080) and add a subtle shadow."
62	- Structure: "Add a secondary button next to the primary one with the text
63	'Learn More'."
64
65	> [!CAUTION]
66	> Do NOT include hex codes, font names, color palettes, roundness values, or
67	> any design system tokens in a generation prompt. These are applied at the
68	> project level by the manage-design-system skill and will conflict if
69	> duplicated. (For edit prompts, hex codes are acceptable for precise
70	> color adjustments.)
71
72	### 4. Present AI Insights
73
74	After any tool call, always surface the `outputComponents` (Text Description and
75	Suggestions) to the user.
76
77	See [examples/enhanced-prompt.md](examples/enhanced-prompt.md) for a full
78	before/after prompt enhancement example.
79
80	--------------------------------------------------------------------------------
81
82	## Steps
83
84	### Determine the Mode
85
86	Decide which flow to use based on the user's request:
87
88	- User wants to create from a text description → Generate from Text flow
89	- User provides an image, screenshot, or mockup → Generate from Image flow
90	- User wants to modify an existing screen → Edit flow
91	- User wants layout/color/content variations → Generate Variants flow
92
93	---
94
95	### Generate from Text Flow (New Screen)
96
97	#### 1. Enhance the User Prompt
98
99	Apply the Prompt Enhancement Pipeline above.
100
101	#### 2. Identify the Project
102
103	Use `list_projects` to find the correct `projectId` if it is not already known.
104
105	#### 3. Generate the Screen
106
107	Call the `generate_screen_from_text` tool with the enhanced prompt and the
108	`designSystem` ID (if found in Step 1).
109
110	```json
111	{
112	"projectId": "...",
113	"prompt": "[Your Enhanced Prompt]",
114	"designSystem": "assets/...", // Optional: Pass if found in Step 1
115	"deviceType": "DESKTOP" // Options: MOBILE, DESKTOP, TABLET
116	}
117	```
118
119	#### 4. Present AI Feedback
120
121	Always show the text description and suggestions from `outputComponents` to the
122	user.
123
124	#### 5. Download Design Assets
125
126	After generation, download the HTML and screenshot urls from `outputComponents`
127	to the `.stitch/designs` directory.
128
129	- Naming: Use the screen ID or a descriptive slug for the filename.
130	- Tools: Use `curl -o` via `run_command` or similar.
131	- Directory: Ensure `.stitch/designs` exists.
132
133	#### 6. Review and Refine
134
135	- If the result is not exactly as expected, continue with the Edit fl

People who liked this also viewed

6 picks

Type