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:

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:

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]:

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

能力边界

✅ 适用场景

• 当你需要使用此技能对应的技术栈时
• 当项目需要遵循最佳实践时
• 当需要快速上手或深入理解核心概念时

⚠️ 需要注意

• 复杂业务逻辑需要结合具体场景调整
• 性能优化需要根据实际数据量评估

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

常见陷阱 (Gotchas)

1. 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
2. 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
3. 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
4. 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
5. 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题