enhance-prompt

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

bygoogle-labs-code· 30 skills

Installs

51k

Stars

7.8k

Forks

950

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.

›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/enhance-prompt"` 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	# 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 Blue (#2563eb) for submit button and links
154	- Text Primary: Near Black (#111827) for headings
155	- Text Secondary: Medium Gray (#6b7280) for labels
156	- Buttons: Subtly rounded (8px), full-width on form
157	- Cards: Gently rounded (12px), soft shadow for elevation
158
159	Page Structure:
160	1. Header: Minimal logo, centered
161	2. Login Card: Centered form with email, password fields, "Forgot password?" link
162	3. Submit Button: Primary blue "Sign In" button
163	4. Footer: "Don't have an account? Sign up" link
164
165	---
166	💡 Tip: For consistent designs across multiple screens, create a DESIGN.md
167	file using the `design-md` skill.
168	```
169
170	### Example 2: Feature Request → Targeted Edit
171
172	User input:
173	> "add a search bar"
174
175	Enhanced output:
176	```markdown
177	Add a search bar to the header navigation.
178
179	Specific changes:
180	- Location: Header, right side before user avatar
181	- Style: Pill-shaped input with subtle gray background (#f3f4f6)
182	- Icon: Magnifying glass icon on the left, inside the input
183	- Placeholder: "Search..." in light gray (#9ca3af)
184	- Behavior: Expands on focus with subtle shadow
185	- Width: 240px default, 320px on focus
186
187	Context: This is a targeted edit. Make only this change while preserving all existing elements.
188	```
189
190	## Tips for Best Results
191
192	1. Be specific early — Vague inputs need more enhancement
193	2. Match the user's intent — Don't over-design if they want simple
194	3. Keep it structured — Numbered sections help Stitch understand hierarchy
195	4. Include the design system — Consistency is key for multi-page projects
196	5. One change at a time for edits — Don't bundle unrelated changes

6 picks

Type

Run `npx skills use "https://github.com/google-labs-code/stitch-skills" --skill "google-labs-code/stitch-skills/enhance-prompt"` 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.

enhance-prompt

How to install enhance-prompt?

Related

enhance-prompt

How to install enhance-prompt?

Related