acedergren/stitch-prompt-engineer

Enhance Prompt for Stitch

NEVER

• NEVER output colors as names ("blue", "green") — always Descriptive Name (#hexcode) for role
• NEVER skip DESIGN.md for multi-page projects — consistency requires explicit tokens across screens
• NEVER bundle unrelated enhancements in one pass — layout changes and color changes are separate asks
• NEVER ignore an outdated DESIGN.md — surface the conflict to the user before proceeding
• NEVER enhance without understanding intent — vague prompt often means unclear goal, not just poor wording
• NEVER assume platform — if "web" vs "mobile" isn't clear, ask

Decision: Single Screen vs Multi-Page

Working on multiple screens?
│
├─ YES → Find DESIGN.md in project root
│   ├─ Found → Read it; include design system block as "DESIGN SYSTEM (REQUIRED)"
│   └─ Not found → Create it with `stitch-design-system` skill first
│
└─ NO → Skip DESIGN.md; proceed directly to enhancement

Assessment Checklist

Before enhancing, identify what's missing:

| Element | If missing... | | ------------ | -------------------------------------- | | Platform | Ask or infer from context | | Page type | Infer ("landing page", "form", etc.) | | Structure | Add numbered sections | | Visual style | Add mood adjectives | | Colors | Add hex-coded design tokens | | Components | Replace vague nouns with UI vocabulary |

Vocabulary Upgrades

| 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" | | "modern" | "clean, minimal, with generous whitespace" | | "professional" | "sophisticated, trustworthy, with subtle shadows" | | "dark mode" | "dark theme with high-contrast accents on deep backgrounds" |

Output Structure

[One-line description of page purpose and vibe]

**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Light/Dark], [style descriptors]
- Background: [Name] (#hex)
- Primary Accent: [Name] (#hex) for [role]
- Text Primary: [Name] (#hex)
- Buttons: [corner radius], [width behavior]
- Cards: [corner radius], [elevation style]

**Page Structure:**
1. **[Section]:** [description]
2. **[Section]:** [description]

For targeted edits (not full-page prompts), include:

• Exact location in UI
• Style spec with hex codes
• "Context: This is a targeted edit. Make only this change."

Troubleshooting

| Symptom | Fix | | -------------------------------- | ----------------------------------------------------- | | Output doesn't match prompt | Add numbered section structure for visual hierarchy | | Colors apply inconsistently | Create/reference DESIGN.md with explicit hex tokens | | Layout breaks across screens | Add "mobile-first" or "desktop-first" explicitly | | Components look generic | Replace "modern" with specific mood adjectives | | Still poor results after enhance | Return to DESIGN.md and validate consistency first |

Output Format

Return enhanced prompt as text by default. If user requests file output: write next-prompt.md (for use with stitch-loop skill).