cubetiq/stitch-prompt-enhancement

Stitch Prompt Enhancement

Purpose

Improve UI prompts before they reach Stitch. This skill turns vague product or design requests into compact structured briefs that Stitch can interpret reliably without wasting requests on low-quality prompts.

When to Use

• A user gives a vague UI or screen request
• A previous Stitch result was too generic or off-target
• A task needs design-system context injected into the prompt
• An existing screen should be edited with one or two precise changes

Instructions

1. Start from the real task, not a generic design template — Restate the actual screen, route, audience, and product goal before writing the Stitch prompt.

2. Pull the visual direction from frontend-design plus canonical design state — Use the chosen direction name, style contract, thesis set, token language, and any downstream screen brief instead of inventing an unrelated aesthetic.

3. Read docs/foundation/DESIGN.md and overlays when they exist — Use the canonical design context plus any relevant page, flow, or mobile overlay as the source of truth, then treat the Stitch-facing design mirror only as the remote copy of the resolved state.

4. Keep prompts compact and structured — Name platform, page purpose, visual style, component hierarchy, and the exact requested change. Do not dump raw repo context or large docs into the prompt.

5. Use design language Stitch understands — Prefer concrete UI terms like navigation bar, hero section, card grid, settings form, primary CTA, sticky filter rail, or mobile tab bar over vague requests like “make it nicer”.

6. For edits, ask Stitch for one or two deltas at a time — Do not bundle unrelated redesign requests into a single edit prompt once a screen already exists.

7. Inject design-system details semantically — Describe token roles and component styles in natural language backed by exact values only when needed.

8. End with a tool-ready prompt block — The output should be ready for generate_screen_from_text, edit_screens, or generate_variants without another rewriting pass.

Output Format

Deliver:

1. Prompt intent summary — page purpose, platform, and change scope
2. Stitch-ready prompt — the final compact structured prompt
3. Assumptions — only the assumptions that meaningfully affected the prompt
4. Edit mode note — if applicable, the exact deltas that should be requested instead of a full redesign

References

| File | Load when | | --- | --- | | references/prompt-structure.md | Need the preferred structure for a Stitch-ready prompt. | | ../design/references/visual-direction.md | Need the product mood and compositional voice before prompting Stitch. | | ../design/references/design-tokens.md | Need semantic token language for colors, spacing, radius, and typography. | | ../design/references/execution-contract.md | Need the modern route split before composing a prompt. |

Examples

| File | Use when | | --- | --- | | examples/01-dashboard-prompt.md | Converting a vague dashboard request into a compact structured Stitch prompt. |