enhance-prompt
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
- Installs
- 99
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/leonxlnx/stitch-skills --skill enhance-prompt- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads enhance-prompt automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Enhance Prompt for Stitch
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.
Prerequisites
Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
- Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/
This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
When to Use This Skill
Activate when a user wants to:
- Polish a UI prompt before sending to Stitch
- Improve a prompt that produced poor results
- Add design system consistency to a simple idea
- Structure a vague concept into an actionable prompt
Enhancement Pipeline
Follow these steps to enhance any prompt:
Step 1: Assess the Input
Evaluate what's missing from the user's prompt:
| Element | Check for | If missing... |
|---|---|---|
| Platform | "web", "mobile", "desktop" | Add based on context or ask |
| Page type | "landing page", "dashboard", "form" | Infer from description |
| Structure | Numbered sections/components | Create logical page structure |
| Visual style | Adjectives, mood, vibe | Add appropriate descriptors |
| Colors | Specific values or roles | Add design system or suggest |
| Components | UI-specific terms | Translate to proper keywords |
Step 2: Check for DESIGN.md
Look for a DESIGN.md file in the current project:
If DESIGN.md exists:
- Read the file to extract the design system block
- Include the color palette, typography, and component styles
- Format as a "DESIGN SYSTEM (REQUIRED)" section in the output
If DESIGN.md does not exist:
- Add this note at the end of the enhanced prompt:
---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md
file using the `design-md` skill. This ensures all generated pages share the
same visual language.
Step 3: Apply Enhancements
Transform the input using these techniques:
A. Add UI/UX Keywords
Replace vague terms with specific component names:
| Vague | Enhanced |
|---|---|
| "menu at the top" | "navigation bar with logo and menu items" |
| "button" | "primary call-to-action button" |
| "list of items" | "card grid layout" or "vertical list with thumbnails" |
| "form" | "form with labeled input fields and submit button" |
| "picture area" | "hero section with full-width image" |
B. Amplify the Vibe
Add descriptive adjectives to set the mood:
| Basic | Enhanced |
|---|---|
| "modern" | "clean, minimal, with generous whitespace" |
| "professional" | "sophisticated, trustworthy, with subtle shadows" |
| "fun" | "vibrant, playful, with rounded corners and bold colors" |
| "dark mode" | "dark theme with high-contrast accents on deep backgrounds" |
C. Structure the Page
Organize content into numbered sections:
**Page Structure:**
1. **Header:** Navigation with logo and menu items
2. **Hero Section:** Headline, subtext, and primary CTA
3. **Content Area:** [Describe the main content]
4. **Footer:** Links, social icons, copyright
D. Format Colors Properly
When colors are mentioned, format them as:
Descriptive Name (#hexcode) for functional role
Examples:
- "Deep Ocean Blue (#1a365d) for primary buttons and links"
- "Warm Cream (#faf5f0) for page background"
- "Soft Gray (#6b7280) for secondary text"
Step 4: Format the Output
Structure the enhanced prompt in this order:
[One-line description of the page purpose and vibe]
**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Light/Dark], [style descriptors]
- Background: [Color description] (#hex)
- Primary Accent: [Color description] (#hex) for [role]
- Text Primary: [Color description] (#hex)
- [Additional design tokens...]
**Page Structure:**
1. **[Section]:** [Description]
2. **[Section]:** [Description]
...
Output Options
Default: Return the enhanced prompt as text for the user to copy.
Optional file output: If the user requests, write to a file:
next-prompt.md— for use with thestitch-loopskill- Custom filename specified by user
Examples
Example 1: Vague Input → Structured Prompt
User input:
"make me a login page"
Enhanced output:
A clean, trustworthy login page with a centered form and subtle branding.
**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Light, minimal, professional
- Background: Clean White (#ffffff)
- Surface: Soft Gray (#f9fafb) for form card
- Primary Accent: Deep Blue (#2563eb) for submit button and links
- Text Primary: Near Black (#111827) for headings
- Text Secondary: Medium Gray (#6b7280) for labels
- Buttons: Subtly rounded (8px), full-width on form
- Cards: Gently rounded (12px), soft shadow for elevation
**Page Structure:**
1. **Header:** Minimal logo, centered
2. **Login Card:** Centered form with email, password fields, "Forgot password?" link
3. **Submit Button:** Primary blue "Sign In" button
4. **Footer:** "Don't have an account? Sign up" link
---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md
file using the `design-md` skill.
Example 2: Feature Request → Targeted Edit
User input:
"add a search bar"
Enhanced output:
Add a search bar to the header navigation.
**Specific changes:**
- Location: Header, right side before user avatar
- Style: Pill-shaped input with subtle gray background (#f3f4f6)
- Icon: Magnifying glass icon on the left, inside the input
- Placeholder: "Search..." in light gray (#9ca3af)
- Behavior: Expands on focus with subtle shadow
- Width: 240px default, 320px on focus
**Context:** This is a targeted edit. Make only this change while preserving all existing elements.
Tips for Best Results
- Be specific early — Vague inputs need more enhancement
- Match the user's intent — Don't over-design if they want simple
- Keep it structured — Numbered sections help Stitch understand hierarchy
- Include the design system — Consistency is key for multi-page projects
- One change at a time for edits — Don't bundle unrelated changes
FAQ
What does the enhance-prompt skill do?
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
How do I install enhance-prompt?
Run npx skills add https://github.com/leonxlnx/stitch-skills --skill enhance-prompt in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/enhance-prompt/ (personal) or .claude/skills/enhance-prompt/ (project).
Which AI agents can use enhance-prompt?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is enhance-prompt safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains enhance-prompt?
It is published by leonxlnx in leonxlnx/stitch-skills. It has 99 recorded installs.
More from leonxlnx/stitch-skills
remotion
leonxlnx/stitch-skills
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
react:components
leonxlnx/stitch-skills
Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
design-md
leonxlnx/stitch-skills
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
stitch-design
leonxlnx/stitch-skills
Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.
shadcn-ui
leonxlnx/stitch-skills
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available