Back to Details

stitch-ui-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Stitch Designer (Master Skill)

Stitch 设计器（主技能）

This is the entry point for all UI design tasks. It acts as the "Orchestrator Agent" that autonomously plans and executes the design workflow.
这是所有UI设计任务的入口点。它作为**“Orchestrator Agent”**自主规划并执行设计工作流。

When to use this skill

何时使用此技能

CRITICAL PREREQUISITE: You must ONLY use this skill when the user EXPLICITLY mentions "Stitch" in their request.
Use this skill when:
  • The user asks to "Design a UI", "Create a screen", "Make an app page" using Stitch.
  • The user provides a high-level design request (e.g., "I need a dashboard for my SaaS") and mentions Stitch.
Trigger phrases include:
  • "Use Stitch to design..." (使用 Stitch 设计...)
  • "Stitch me a UI for..." (用 Stitch 帮我生成 UI)
关键前提条件： 仅当用户在请求中明确提及“Stitch”时，方可使用此技能。
在以下场景使用此技能：
  • 用户要求“设计一个UI”、“创建一个界面”、“制作一个应用页面”并使用Stitch。
  • 用户提供了高层级的设计需求（例如：“我需要一个SaaS的仪表盘”）且提及了Stitch。
触发短语包括：
  • "Use Stitch to design..." (使用 Stitch 设计...)
  • "Stitch me a UI for..." (用 Stitch 帮我生成 UI)

Workflow (Flow-first, copy-pastable)

工作流（流程优先，可直接复制）

This skill must follow this workflow end-to-end. Do not skip steps.
此技能必须完整遵循以下工作流，不得跳过任何步骤。

0) Preflight (Tool Availability)

0) 预检查（工具可用性）

  1. Detect whether Stitch MCP tools are available.
  2. If tools are available, follow the Execution workflow.
  3. If tools are not available, follow the Prompt-only workflow.
  1. 检测Stitch MCP工具是否可用。
  2. 若工具可用，遵循执行工作流。
  3. 若工具不可用，遵循仅提示工作流。

1) Intent Classification

1) 意图分类

Determine the task type:
  • New screen: design + generate a new UI screen.
  • Refine / Beautify: modify an existing screen while preserving layout and information architecture.
确定任务类型：
  • 新界面：设计并生成全新的UI界面。
  • 优化/美化：修改现有界面，同时保留布局和信息架构。

2) Design Spec Workflow (Brain)

2) 设计规范工作流（核心）

Invoke 
stitch-ui-design-spec-generator
with the user request.
Expected result:
  • A structured 
    Design Spec
    JSON (Theme, Device, Style, Mode).
调用
stitch-ui-design-spec-generator
处理用户请求。
预期结果：
  • 结构化的
    Design Spec
    JSON（主题、设备、样式、模式）。

3) Contract Workflow (Hard Constraints)

3) 约束工作流（硬性限制）

If the request includes a named design system / style, fetch constraints from the matching design contract tool and inject them into the final prompt.
Supported mapping (Match Priority: Specific > General):
  • uview-pro
    , 
    uviewpro
    , 
    uview pro
    -> use 
    stitch-ui-design-spec-uviewpro
    (Match this FIRST)
  • uview
    , 
    uview2
    , 
    uview2.0
    , 
    u-view
    -> use 
    stitch-ui-design-spec-uview
  • layui
    , 
    layui-vue
    , 
    layui vue
    -> use 
    stitch-ui-design-spec-layui
  • bootstrap
    , 
    bootstrap-vue
    , 
    bs-vue
    -> use 
    stitch-ui-design-spec-bootstrap
  • element
    , 
    element-plus
    , 
    el-plus
    , 
    element-ui
    -> use 
    stitch-ui-design-spec-element-plus
  • vant
    , 
    vant4
    , 
    vant-ui
    -> use 
    stitch-ui-design-spec-vant
Decision rules:
  • If the user asks for refine/beautify, or explicitly asks for selector / JSON / 
    contracts.include
    / 
    states.include
    :
    • Use 
      stitch-ui-design-spec-uview
      or 
      stitch-ui-design-spec-layui
      in selector mode.
    • Treat the returned selection JSON as internal and use the assembled prompt as the execution prompt.
  • Otherwise:
    • Use 
      stitch-ui-design-spec-uview
      or 
      stitch-ui-design-spec-layui
      in prefix mode.
    • Prepend the returned prefix to 
      [Context]
      .
若请求中包含指定的设计系统/样式，从匹配的设计约束工具中获取限制条件，并将其注入最终提示词。
支持的映射（匹配优先级：特定 > 通用）：
  • uview-pro
    , 
    uviewpro
    , 
    uview pro
    -> 使用
    stitch-ui-design-spec-uviewpro
    （优先匹配）
  • uview
    , 
    uview2
    , 
    uview2.0
    , 
    u-view
    -> 使用
    stitch-ui-design-spec-uview
  • layui
    , 
    layui-vue
    , 
    layui vue
    -> 使用
    stitch-ui-design-spec-layui
  • bootstrap
    , 
    bootstrap-vue
    , 
    bs-vue
    -> 使用
    stitch-ui-design-spec-bootstrap
  • element
    , 
    element-plus
    , 
    el-plus
    , 
    element-ui
    -> 使用
    stitch-ui-design-spec-element-plus
  • vant
    , 
    vant4
    , 
    vant-ui
    -> 使用
    stitch-ui-design-spec-vant
决策规则：
  • 若用户要求优化/美化，或明确要求选择器/JSON/
    contracts.include
    /
    states.include
    ：
    • 在选择器模式下使用
      stitch-ui-design-spec-uview
      或
      stitch-ui-design-spec-layui
      。
    • 将返回的选择JSON视为内部内容，使用组装后的提示词作为执行提示词。
  • 否则：
    • 在前缀模式下使用
      stitch-ui-design-spec-uview
      或
      stitch-ui-design-spec-layui
      。
    • 将返回的前缀添加到
      [Context]
      之前。

4) Prompt Assembly Workflow (Pen)

4) 提示词组装工作流（输出）

Invoke 
stitch-ui-prompt-architect
and output a Stitch-ready prompt using this strict structure:
text
[Context]
...

[Layout]
...

[Components]
...
调用
stitch-ui-prompt-architect
，并按照以下严格结构输出适用于Stitch的提示词：
text
[Context]
...

[Layout]
...

[Components]
...

5) Execution Workflow (Hand) — Tools Available

5) 执行工作流（操作）——工具可用

ALWAYS execute immediately (no confirmation loop):
  1. Create project: 
    create_project
  2. Generate screen: 
    generate_screen_from_text
  3. List screens: 
    list_screens
  4. Get the target screen: 
    get_screen
    (export screenshot + HTML assets)
立即执行（无确认循环）：
  1. 创建项目：
    create_project
  2. 生成界面：
    generate_screen_from_text
  3. 列出界面：
    list_screens
  4. 获取目标界面：
    get_screen
    （导出截图 + HTML资源）

6) Prompt-only Workflow — Tools Not Available

6) 仅提示工作流——工具不可用

STOP execution. Do not fake results. Output only a copy-paste prompt for the user to run in Stitch.
停止执行。不得伪造结果。仅输出供用户在Stitch中运行的可复制提示词。

Output Patterns (Strict Templates)

输出模板（严格遵循）

Use these templates to keep outputs consistent.
使用以下模板确保输出一致性。

Template A — Tools Available (Execution Report)

模板A — 工具可用（执行报告）

ALWAYS use this exact template:
markdown
undefined
必须严格使用此模板：
markdown
undefined

Stitch 设计交付

Stitch 设计交付

执行结果

执行结果

  • Project: projects/{id}
  • Screen: {screenId}
  • Project: projects/{id}
  • Screen: {screenId}

资产导出

资产导出

  • Screenshot: {from get_screen output}
  • HTML: {from get_screen output}
  • Screenshot: {from get_screen output}
  • HTML: {from get_screen output}

说明

说明

  • Prompt: 已按 
    [Context] [Layout] [Components]
    结构执行（含必要约束与布局不变式）。
undefined
  • Prompt: 已按 
    [Context] [Layout] [Components]
    结构执行（含必要约束与布局不变式）。
undefined

Template B — Tools Not Available (Prompt Only)

模板B — 工具不可用（仅提示词）

ALWAYS use this exact template:
text
[Context]
...

[Layout]
...

[Components]
...
必须严格使用此模板：
text
[Context]
...

[Layout]
...

[Components]
...

Anti-Patterns (Strict Prohibitions)

反模式（严格禁止）

  • ⛔ NO FAKE SUCCESS: If you didn't get a real API response, do not say "Project Created".
  • ⛔ NO APP SCAFFOLDING: Do not invoke any external project scaffolding skills (e.g., 
    uniappx-project-creator
    , 
    flutter-project-creater
    , 
    react-native-project-creater
    ) and do not run scripts to create codebases.
  • ⛔ NO CODING: Do not write Vue/React/HTML code in this flow. This skill is for Design Generation only.
  • ⛔ NO CONFUSION: A "Stitch Project" is a design workspace, NOT a code repository.
  • ⛔ 禁止伪造成功：若未获取真实API响应，不得声称“项目已创建”。
  • ⛔ 禁止应用脚手架：不得调用任何外部项目脚手架技能（例如
    uniappx-project-creator
    , 
    flutter-project-creater
    , 
    react-native-project-creater
    ），也不得运行脚本创建代码库。
  • ⛔ 禁止编码：在此工作流中不得编写Vue/React/HTML代码。此技能仅用于设计生成。
  • ⛔ 禁止混淆概念：“Stitch Project”是设计工作区，而非代码仓库。

Keywords

关键词

orchestrator, design agent, ui designer, master skill, design flow, stitch pilot
orchestrator, design agent, ui designer, master skill, design flow, stitch pilot

References

参考资料

  • Workflow End-to-End
  • Workflows Reference
  • 全流程工作流
  • 工作流参考