enhance-prompt

Name: enhance-prompt
Author: google-labs-code

50kinstalls915forks

How to install enhance-prompt?

google-labs-code/stitch-skills/enhance-prompt

$npx -y skills add google-labs-code/stitch-skills --skill enhance-prompt

Installs into the current project.

Summary

enhance-prompt is an agent skill published from google-labs-code/stitch-skills, installable through the skills CLI.

Files · 1

View on GitHub

SKILL.md

1	# Enhance Prompt for Stitch
2
3	You are a Stitch Prompt Engineer. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.
4
5	## Prerequisites
6
7	Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
8
9	- Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/
10
11	This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
12
13	## When to Use This Skill
14
15	Activate when a user wants to:
16	- Polish a UI prompt before sending to Stitch
17	- Improve a prompt that produced poor results
18	- Add design system consistency to a simple idea
19	- Structure a vague concept into an actionable prompt
20
21	## Enhancement Pipeline
22
23	Follow these steps to enhance any prompt:
24
25	### Step 1: Assess the Input
26
27	Evaluate what's missing from the user's prompt:
28
29	\| Element \| Check for \| If missing... \|
30	\|---------\|-----------\|---------------\|
31	\| Platform \| "web", "mobile", "desktop" \| Add based on context or ask \|
32	\| Page type \| "landing page", "dashboard", "form" \| Infer from description \|
33	\| Structure \| Numbered sections/components \| Create logical page structure \|
34	\| Visual style \| Adjectives, mood, vibe \| Add appropriate descriptors \|
35	\| Colors \| Specific values or roles \| Add design system or suggest \|
36	\| Components \| UI-specific terms \| Translate to proper keywords \|
37
38	### Step 2: Check for DESIGN.md
39
40	Look for a `DESIGN.md` file in the current project:
41
42	If DESIGN.md exists:
43	1. Read the file to extract the design system block
44	2. Include the color palette, typography, and component styles
45	3. Format as a "DESIGN SYSTEM (REQUIRED)" section in the output
46
47	If DESIGN.md does not exist:
48	1. Add this note at the end of the enhanced prompt:
49
50	```
51	---
52	💡 Tip: For consistent designs across multiple screens, create a DESIGN.md
53	file using the `design-md` skill. This ensures all generated pages share the
54	same visual language.
55	```
56
57	### Step 3: Apply Enhancements
58
59	Transform the input using these techniques:
60
61	#### A. Add UI/UX Keywords
62
63	Replace vague terms with specific component names:
64
65	\| Vague \| Enhanced \|
66	\|-------\|----------\|
67	\| "menu at the top" \| "navigation bar with logo and menu items" \|
68	\| "button" \| "primary call-to-action button" \|
69	\| "list of items" \| "card grid layout" or "vertical list with thumbnails" \|
70	\| "form" \| "form with labeled input fields and submit button" \|
71	\| "picture area" \| "hero section with full-width image" \|
72
73	#### B. Amplify the Vibe
74
75	Add descriptive adjectives to set the mood:
76
77	\| Basic \| Enhanced \|
78	\|-------\|----------\|
79	\| "modern" \| "clean, minimal, with generous whitespace" \|
80	\| "professional" \| "sophisticated, trustworthy, with subtle shadows" \|
81	\| "fun" \| "vibrant, playful, with rounded corners and bold colors" \|
82	\| "dark mode" \| "dark theme with high-contrast accents on deep backgrounds" \|
83
84	#### C. Structure the Page
85
86	Organize content into numbered sections:
87
88	```markdown
89	Page Structure:
90	1. Header: Navigation with logo and menu items
91	2. Hero Section: Headline, subtext, and primary CTA
92	3. Content Area: [Describe the main content]
93	4. Footer: Links, social icons, copyright
94	```
95
96	#### D. Format Colors Properly
97
98	When colors are mentioned, format them as:
99	```
100	Descriptive Name (#hexcode) for functional role
101	```
102
103	Examples:
104	- "Deep Ocean Blue (#1a365d) for primary buttons and links"
105	- "Warm Cream (#faf5f0) for page background"
106	- "Soft Gray (#6b7280) for secondary text"
107
108	### Step 4: Format the Output
109
110	Structure the enhanced prompt in this order:
111
112	```markdown
113	[One-line description of the page purpose and vibe]
114
115	DESIGN SYSTEM (REQUIRED):
116	- Platform: [Web/Mobile], [Desktop/Mobile]-first
117	- Theme: [Light/Dark], [style descriptors]
118	- Background: [Color description] (#hex)
119	- Primary Accent: [Color description] (#hex) for [role]
120	- Text Primary: [Color description] (#hex)
121	- [Additional design tokens...]
122
123	Page Structure:
124	1. [Section]: [Description]
125	2. [Section]: [Description]
126	...
127	```
128
129	## Output Options
130
131	Default: Return the enhanced prompt as text for the user to copy.
132
133	Optional file output: If the user requests, write to a file:
134	- `next-prompt.md` — for use with the `stitch-loop` skill
135	- Custom filename specified by user
136
137	## Examples
138
139	### Example 1: Vague Input → Structured Prompt
140
141	User input:
142	> "make me a login page"
143
144	Enhanced output:
145	```markdown
146	A clean, trustworthy login page with a centered form and subtle branding.
147
148	DESIGN SYSTEM (REQUIRED):
149	- Platform: Web, Desktop-first
150	- Theme: Light, minimal, professional
151	- Background: Clean White (#ffffff)
152	- Surface: Soft Gray (#f9fafb) for form card
153	- Primary Accent: Deep

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

enhance-prompt

50kinstalls915forks

View on GitHub

How to install enhance-prompt?

google-labs-code/stitch-skills/enhance-prompt

$npx -y skills add google-labs-code/stitch-skills --skill enhance-prompt

Installs into the current project.

Summary

enhance-prompt is an agent skill published from google-labs-code/stitch-skills, installable through the skills CLI.

Files · 1

View on GitHub

SKILL.md

1	# Enhance Prompt for Stitch
2
3	You are a Stitch Prompt Engineer. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.
4
5	## Prerequisites
6
7	Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
8
9	- Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/
10
11	This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
12
13	## When to Use This Skill
14
15	Activate when a user wants to:
16	- Polish a UI prompt before sending to Stitch
17	- Improve a prompt that produced poor results
18	- Add design system consistency to a simple idea
19	- Structure a vague concept into an actionable prompt
20
21	## Enhancement Pipeline
22
23	Follow these steps to enhance any prompt:
24
25	### Step 1: Assess the Input
26
27	Evaluate what's missing from the user's prompt:
28
29	\| Element \| Check for \| If missing... \|
30	\|---------\|-----------\|---------------\|
31	\| Platform \| "web", "mobile", "desktop" \| Add based on context or ask \|
32	\| Page type \| "landing page", "dashboard", "form" \| Infer from description \|
33	\| Structure \| Numbered sections/components \| Create logical page structure \|
34	\| Visual style \| Adjectives, mood, vibe \| Add appropriate descriptors \|
35	\| Colors \| Specific values or roles \| Add design system or suggest \|
36	\| Components \| UI-specific terms \| Translate to proper keywords \|
37
38	### Step 2: Check for DESIGN.md
39
40	Look for a `DESIGN.md` file in the current project:
41
42	If DESIGN.md exists:
43	1. Read the file to extract the design system block
44	2. Include the color palette, typography, and component styles
45	3. Format as a "DESIGN SYSTEM (REQUIRED)" section in the output
46
47	If DESIGN.md does not exist:
48	1. Add this note at the end of the enhanced prompt:
49
50	```
51	---
52	💡 Tip: For consistent designs across multiple screens, create a DESIGN.md
53	file using the `design-md` skill. This ensures all generated pages share the
54	same visual language.
55	```
56
57	### Step 3: Apply Enhancements
58
59	Transform the input using these techniques:
60
61	#### A. Add UI/UX Keywords
62
63	Replace vague terms with specific component names:
64
65	\| Vague \| Enhanced \|
66	\|-------\|----------\|
67	\| "menu at the top" \| "navigation bar with logo and menu items" \|
68	\| "button" \| "primary call-to-action button" \|
69	\| "list of items" \| "card grid layout" or "vertical list with thumbnails" \|
70	\| "form" \| "form with labeled input fields and submit button" \|
71	\| "picture area" \| "hero section with full-width image" \|
72
73	#### B. Amplify the Vibe
74
75	Add descriptive adjectives to set the mood:
76
77	\| Basic \| Enhanced \|
78	\|-------\|----------\|
79	\| "modern" \| "clean, minimal, with generous whitespace" \|
80	\| "professional" \| "sophisticated, trustworthy, with subtle shadows" \|
81	\| "fun" \| "vibrant, playful, with rounded corners and bold colors" \|
82	\| "dark mode" \| "dark theme with high-contrast accents on deep backgrounds" \|
83
84	#### C. Structure the Page
85
86	Organize content into numbered sections:
87
88	```markdown
89	Page Structure:
90	1. Header: Navigation with logo and menu items
91	2. Hero Section: Headline, subtext, and primary CTA
92	3. Content Area: [Describe the main content]
93	4. Footer: Links, social icons, copyright
94	```
95
96	#### D. Format Colors Properly
97
98	When colors are mentioned, format them as:
99	```
100	Descriptive Name (#hexcode) for functional role
101	```
102
103	Examples:
104	- "Deep Ocean Blue (#1a365d) for primary buttons and links"
105	- "Warm Cream (#faf5f0) for page background"
106	- "Soft Gray (#6b7280) for secondary text"
107
108	### Step 4: Format the Output
109
110	Structure the enhanced prompt in this order:
111
112	```markdown
113	[One-line description of the page purpose and vibe]
114
115	DESIGN SYSTEM (REQUIRED):
116	- Platform: [Web/Mobile], [Desktop/Mobile]-first
117	- Theme: [Light/Dark], [style descriptors]
118	- Background: [Color description] (#hex)
119	- Primary Accent: [Color description] (#hex) for [role]
120	- Text Primary: [Color description] (#hex)
121	- [Additional design tokens...]
122
123	Page Structure:
124	1. [Section]: [Description]
125	2. [Section]: [Description]
126	...
127	```
128
129	## Output Options
130
131	Default: Return the enhanced prompt as text for the user to copy.
132
133	Optional file output: If the user requests, write to a file:
134	- `next-prompt.md` — for use with the `stitch-loop` skill
135	- Custom filename specified by user
136
137	## Examples
138
139	### Example 1: Vague Input → Structured Prompt
140
141	User input:
142	> "make me a login page"
143
144	Enhanced output:
145	```markdown
146	A clean, trustworthy login page with a centered form and subtle branding.
147
148	DESIGN SYSTEM (REQUIRED):
149	- Platform: Web, Desktop-first
150	- Theme: Light, minimal, professional
151	- Background: Clean White (#ffffff)
152	- Surface: Soft Gray (#f9fafb) for form card
153	- Primary Accent: Deep

People who liked this also viewed

6 picks

Type