Menu
Transforma ideias vagas de UI em prompts polidos e otimizados para Stitch.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| name | enhance-prompt |
| description | Transforma ideias vagas de UI em prompts polidos e otimizados para Stitch. |
| source | vendored |
| upstream | https://github.com/google-labs-code/stitch-skills |
| license | MIT |
| allowed-tools | ["Read","Write"] |
| added | "2026-05-16T00:00:00.000Z" |
| vendored | "2026-06-05T00:00:00.000Z" |
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.
Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
Activate when a user wants to:
Follow these steps to enhance any prompt:
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 |
Look for a DESIGN.md file in the current project:
If DESIGN.md exists:
If DESIGN.md does not exist:
---
💡 **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.
Transform the input using these techniques:
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" |
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" |
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
When colors are mentioned, format them as:
Descriptive Name (#hexcode) for functional role
Examples:
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]
...
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 the stitch-loop skillUser 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.
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.
Use this skill whenever the user is building or scaffolding a new Flutter or Dart mobile app, adding any Flutter feature, screen, page, view model, use case, repository, or API/backend call, setting up Flutter push notifications or deep links, or mapping/refactoring an existing Flutter project toward a layered clean architecture — EVEN WHEN the user never names the architecture, rx_notifier, MVVM, clean architecture, get_it, dio, drift, or go_router. It applies the moment the work touches Flutter app structure: a request like "add a login screen", "fetch data from this endpoint", "create a settings feature", "wire up FCM", "open this screen from a notification", or "clean up my Flutter project" is in scope. This skill is THE way to produce Flutter code in this codebase shape: rx_notifier Controller view models, AbstractUseCase with Either<AppError,T> error handling, I*Repository interface/impl pairs, a tiered dio gateway, get_it dependency injection, drift TTL cache, and go_router navigation. Prefer it over a
Knowledge graph semântico da codebase via MCP. Mapeia arquitetura, analisa blast-radius de mudanças e faz code review com até 8x menos tokens. Usa Tree-sitter (24 linguagens) + SQLite.
Mantém uma knowledge base persistente no Obsidian seguindo o pattern Karpathy LLM Wiki — ingest de sources, query sobre wiki compilado, lint de saúde. Dispara quando o usuário pede "ingest", "alimenta o wiki", "atualiza wiki", "consulta wiki", "lint wiki", "/wiki-ingest", "/wiki-query", "/wiki-lint", "que sabemos sobre X", "compila X no wiki", "adiciona ao wiki", ou ao salvar uma nova source em References/.
Analisa projetos Stitch e sintetiza design system semântico em arquivos DESIGN.md.
Design system e style guide configurável para projetos frontend. Use SEMPRE que criar componentes, páginas ou UI em React/Next/Angular/Vue.
Protótipos hi-fi, demos interativos, animações e exploração de variantes de design em HTML. Anti-AI-slop.