stitch-ui-prompt-architect

Stitch UI Prompt Architect

Constraint: Only use this skill when the user explicitly mentions "Stitch" or when orchestrating a Stitch design task.

This skill acts as a Senior UX Designer and Prompt Engineer. It supports two paths so that local behavior is strictly stronger than a single-path prompt skill:

• Path A — Enhance vague prompt: Transform rough or vague UI ideas into polished, Stitch-optimized prompts (specificity, UI/UX keywords, design system context, numbered structure). Use when the user gives a short or unclear prompt.
• Path B — Spec → prompt: Merge the User Request and the Design Spec (from stitch-ui-design-spec-generator) into a final sectioned Stitch prompt. Use when a structured spec already exists.

Prerequisites

• Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/ — consult for latest best practices; they may supersede or complement the patterns below.

Official Documentation (by Framework)

When injecting framework contract prefix (Path B) or translating component keywords, prefer the following authoritative docs:

Framework	Official / Guide	Components	Other
Bootstrap Vue 3	bootstrap-vue.org · docs · Vue 3	components	GitHub
Element Plus	element-plus.org (zh-CN)	design · overview	GitHub
Layui-Vue	layui-vue.com	guide · components	GitHub
Vant (Vue 3)	vant-ui.github.io	Vant zh-CN	GitHub
uView 2.0 (Vue 2)	uviewui.com	guide/demo · components	GitHub
uView Pro (Vue 3)	uviewpro.cn	guide · components · tools · layout	—

When to Use

• Path 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.
• Path B: Orchestrator has already produced a Design Spec (e.g. from stitch-ui-design-spec-generator) and needs a final [Context]/[Layout]/[Components] prompt; or user requests a prompt for a named framework (uView, Element Plus, Layui, Bootstrap, Vant).

---

Path A: Enhance Vague Prompt

Follow these steps to turn a vague idea into a Stitch-ready prompt.

Step 1: Assess the Input

Evaluate what's missing:

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 descriptors (see references/KEYWORDS.md)
Colors	Specific values or roles	Add design system or suggest
Components	UI-specific terms	Translate to proper keywords

Step 2: Check for DESIGN.md

• If DESIGN.md exists: Read it; extract design system block (palette, typography, component styles); include as "DESIGN SYSTEM (REQUIRED)" in output.
• If DESIGN.md does not exist: Add a tip at the end: "For consistent designs across multiple screens, create a DESIGN.md using the stitch-design-md skill."

Step 3: Apply Enhancements

• UI/UX keywords: Replace vague terms (e.g. "menu at the top" → "navigation bar with logo and menu items"; "button" → "primary call-to-action button"). Use references/KEYWORDS.md for component and adjective palettes.
• Vibe: Add descriptive adjectives ("modern" → "clean, minimal, with generous whitespace"; "dark mode" → "dark theme with high-contrast accents on deep backgrounds").
• Structure: Organize into numbered Page Structure (Header, Hero, Content Area, Footer, etc.).
• Colors: Format as Descriptive Name (#hex) for functional role (e.g. "Deep Ocean Blue (#1a365d) for primary buttons").

Step 4: Format Output (Path A)

Structure the enhanced prompt as:

[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: Return as text; or if the user requests, write to next-prompt.md (for stitch-loop) or a custom file.

---

Path B: Spec + Request → Sectioned Prompt

Use when you have a Design Spec (from stitch-ui-design-spec-generator) and a User Request.

Input

• User Request: e.g. "Login page with social auth".
• Design Spec: JSON with deviceType, designMode, theme, styleKeywords, etc.

Output Format (Must)

Return a single prompt with:

[Context]
...

[Layout]
...

[Components]
...

Construction Logic

1. Context & Style
Combine deviceType, designMode, theme, styleKeywords.
Example: "Mobile High-Fidelity login screen. Cyberpunk aesthetic. Dark mode with neon blue accents."

2. Design Contract Prefix (Hard Constraints)
If the user request includes a named style (e.g. "uview 风格"), prepend the corresponding contract to [Context]:

Keyword	Use skill output as prefix
uview-pro, uviewpro	stitch-ui-design-spec-uviewpro
uview, uview2	stitch-ui-design-spec-uview
element, element-plus	stitch-ui-design-spec-element-plus
vant, vant4	stitch-ui-design-spec-vant
layui, layui-vue	stitch-ui-design-spec-layui
bootstrap, bs-vue	stitch-ui-design-spec-bootstrap

3. Contract Selection JSON
When a named design system is present, generate CONTRACT_SELECTION_JSON_V1 to decide which component contracts and UI state snippets to inject (include only what the current screen needs). Schema: version, designSystem, mode, contracts.include, states.include.

4. Layout Structure

• Mobile: Header → Body (Stack) → Footer (Nav/Action).
• Desktop: Sidebar/TopNav → Main Grid → Widgets.

5. Component Details
Translate requirements into UI components (e.g. "Login" → Inputs, Primary Button, Forgot Pass link).

6. Content
Use specific copy (e.g. "Welcome back, Agent") instead of placeholder "Text".

---

Example (Path A: Vague → Enhanced)

Input: "make me a login page"

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

---

Example (Path B: Spec → Prompt)

"Mobile login screen for a Fintech App. Clean minimalist aesthetic. Light mode.
Layout: Center-aligned vertical stack.
Header: Brand logo 'PayFast' and 'Welcome' title.
Form: Input field for 'Email' with mail icon. Input field for 'Password' with eye toggle.
Actions: Full-width primary blue button 'Sign In'. 'Forgot Password?' link.
Footer: 'Create Account' link."

---

Tips

1. Path choice: Use Path A for short/vague prompts; Path B when a spec already exists or a framework name is given.
2. Be specific early for vague inputs; match intent — don’t over-design if the user wants something simple.
3. Numbered sections help Stitch understand hierarchy.
4. Design system: For multi-page consistency, use DESIGN.md (from stitch-design-md) or inject framework contract (Path B).
5. Edits: One change at a time; don’t bundle unrelated changes.

Keywords

English: Stitch, prompt, enhance, vague, design spec, DESIGN.md, next-prompt, stitch-loop, uView, Element, Layui, Bootstrap, Vant.
中文关键词： Stitch、提示词、增强、模糊需求、设计规范、DESIGN.md、next-prompt、stitch-loop、uView、Element、Layui、Bootstrap、Vant。

References

• KEYWORDS — UI/UX keyword palettes for Path A.
• Official documentation (by framework) — Authoritative docs for BootstrapVue, Element Plus, Layui-Vue, Vant, uView 2, uView Pro.

References

• Examples
• Keywords