Back to Details

recipe-front-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Context: Dedicated to the frontend design phase.
背景：专注于前端设计阶段。

Orchestrator Definition

编排器定义

Core Identity: "I am an orchestrator." (see subagents-orchestration-guide skill)
Execution Protocol:
  1. Delegate all work to sub-agents — your role is to invoke sub-agents, pass data between them, and report results
  2. Follow subagents-orchestration-guide skill design flow (this recipe covers medium/large frontend; refer to the guide for scale-specific variations):
    • Execute: requirement-analyzer → external resource hearing → codebase-analyzer + ui-analyzer (parallel) → ui-spec-designer → technical-designer-frontend → code-verifier → document-reviewer → design-sync
    • Stop at every 
      [Stop: ...]
      marker       → Wait for user approval before proceeding
  3. Scope: Complete when design documents receive approval
CRITICAL: Execute document-reviewer, design-sync, and all stopping points defined in subagents-orchestration-guide skill flows — each serves as a quality gate. Skipping any step risks undetected inconsistencies.
核心定位："我是一个编排器。"（参考subagents-orchestration-guide技能）
执行协议：
  1. 将所有工作委派给子Agent——你的角色是调用子Agent、在它们之间传递数据并汇报结果
  2. 遵循subagents-orchestration-guide技能的设计流程（本方案适用于中大型前端项目；针对不同规模的变体请参考该指南）：
    • 执行流程：requirement-analyzer → external resource hearing → codebase-analyzer + ui-analyzer（并行）→ ui-spec-designer → technical-designer-frontend → code-verifier → document-reviewer → design-sync
    • 在每个
      [Stop: ...]
      标记处暂停      → 获得用户批准后再继续
  3. 范围：设计文档获得批准后即完成
重要提示：必须执行document-reviewer、design-sync以及subagents-orchestration-guide技能流程中定义的所有暂停点——每个环节都是质量关卡。跳过任何步骤都可能导致未被发现的不一致性。

Workflow Overview

工作流概述

Requirements → requirement-analyzer → [Stop: Scale determination]
                                           ↓
                          external resource hearing (frontend domain)
                                           ↓
                          codebase-analyzer + ui-analyzer (parallel)
                                           ↓
                                   ui-spec-designer → [Stop: UI Spec approval]
                                           ↓
                                   technical-designer-frontend
                                           ↓
                                   code-verifier → document-reviewer
                                           ↓
                                      design-sync → [Stop: Design approval]
Requirements → requirement-analyzer → [Stop: Scale determination]
                                           ↓
                          external resource hearing (frontend domain)
                                           ↓
                          codebase-analyzer + ui-analyzer (parallel)
                                           ↓
                                   ui-spec-designer → [Stop: UI Spec approval]
                                           ↓
                                   technical-designer-frontend
                                           ↓
                                   code-verifier → document-reviewer
                                           ↓
                                      design-sync → [Stop: Design approval]

Scope Boundaries

范围边界

Included in this skill:
  • Requirement analysis with requirement-analyzer
  • External resource hearing per the external-resource-context skill
  • Codebase analysis with codebase-analyzer and ui-analyzer in parallel (before document creation)
  • UI Specification creation with ui-spec-designer (prototype code inquiry included)
  • ADR creation (if architecture changes, new technology, or data flow changes)
  • Design Doc creation with technical-designer-frontend
  • Design Doc verification with code-verifier (before document review)
  • Document review with document-reviewer
  • Design Doc consistency verification with design-sync
Responsibility Boundary: This skill completes with frontend design document (UI Spec/ADR/Design Doc) approval. Work planning and beyond are outside scope.
Requirements: $ARGUMENTS
本技能包含内容：
  • 通过requirement-analyzer进行需求分析
  • 按照external-resource-context技能执行外部资源调研
  • 并行调用codebase-analyzer和ui-analyzer进行代码库分析（文档创建前）
  • 通过ui-spec-designer创建UI规格（包含原型代码查询）
  • 创建ADR（若涉及架构变更、新技术引入或数据流变更）
  • 通过technical-designer-frontend创建设计文档
  • 通过code-verifier验证设计文档（文档评审前）
  • 通过document-reviewer进行文档评审
  • 通过design-sync验证设计文档一致性
职责边界：本技能在前端设计文档（UI规格/ADR/设计文档）获得批准后完成。工作计划及后续工作不在范围内。
需求：$ARGUMENTS

Execution Flow

执行流程

Step 1: Requirement Analysis Phase

步骤1：需求分析阶段

Considering the deep impact on design, first engage in dialogue to understand the background and purpose of requirements:
  • What problems do you want to solve?
  • Expected outcomes and success criteria
  • Relationship with existing systems
Once the user has answered the three dialogue questions above, execute the process below within design scope. Follow subagents-orchestration-guide Call Examples for codebase-analyzer, ui-analyzer, and code-verifier invocations.
  • Invoke requirement-analyzer using Agent tool 
    • subagent_type: "dev-workflows-frontend:requirement-analyzer"
    • description: "Requirement analysis"
    • prompt: "Requirements: [user requirements] Execute requirement analysis and scale determination"
  • [STOP]: Review requirement analysis results and address question items
考虑到对设计的深远影响，首先通过对话了解需求的背景和目的：
  • 你想要解决哪些问题？
  • 预期成果和成功标准
  • 与现有系统的关系
用户回答完上述三个问题后，在设计范围内执行以下流程。调用codebase-analyzer、ui-analyzer和code-verifier时请参考subagents-orchestration-guide的调用示例。
  • 使用Agent工具调用requirement-analyzer 
    • subagent_type: "dev-workflows-frontend:requirement-analyzer"
    • description: "Requirement analysis"
    • prompt: "Requirements: [user requirements] Execute requirement analysis and scale determination"
  • [STOP]：评审需求分析结果并处理疑问项

Step 1.5: External Resource Hearing

步骤1.5：外部资源调研

Run the hearing protocol per the external-resource-context skill (frontend domain). The orchestrator owns this step because it requires AskUserQuestion. The skill defines file-existence branching, two-phase hearing (structured axes + self-declaration), and persistence to 
docs/project-context/external-resources.md
.
按照external-resource-context技能执行调研协议（前端领域）。此步骤由编排器负责，因为需要调用AskUserQuestion。该技能定义了文件存在分支、两阶段调研（结构化维度+自主声明），并将结果持久化到
docs/project-context/external-resources.md
。

Step 2: UI Fact Gathering

步骤2：UI事实收集

Invoke codebase-analyzer and ui-analyzer in parallel (single message with two Agent tool calls). They share input but produce complementary output. ui-analyzer reads the project-tier external-resources file and fetches external UI sources via the inherited MCP/URL access methods, then analyzes the UI codebase. codebase-analyzer covers data, contracts, dependencies, and quality assurance mechanisms.
  • Invoke codebase-analyzer using Agent tool 
    • subagent_type: "dev-workflows-frontend:codebase-analyzer"
      , 
      description: "Codebase analysis"
      , 
      prompt: "requirement_analysis: [JSON from Step 1]. requirements: [user requirements]. Analyze existing codebase for frontend design guidance (data, contracts, dependencies, quality assurance mechanisms)."
  • Invoke ui-analyzer using Agent tool (parallel with the call above) 
    • subagent_type: "dev-workflows-frontend:ui-analyzer"
      , 
      description: "UI fact gathering"
      , 
      prompt: "requirement_analysis: [JSON from Step 1]. requirements: [user requirements]. Read docs/project-context/external-resources.md, fetch external UI sources via the declared access methods, and analyze the existing UI codebase."
Both outputs (codebase-analyzer JSON and ui-analyzer JSON) are reused by ui-spec-designer in Step 3 and by technical-designer-frontend in Step 4.
并行调用codebase-analyzer和ui-analyzer（单次消息中包含两个Agent工具调用）。它们共享输入但生成互补输出。ui-analyzer读取项目级别的external-resources文件，并通过继承的MCP/URL访问方法获取外部UI资源，然后分析UI代码库。codebase-analyzer覆盖数据、契约、依赖项和质量保障机制。
  • 使用Agent工具调用codebase-analyzer 
    • subagent_type: "dev-workflows-frontend:codebase-analyzer"
      , 
      description: "Codebase analysis"
      , 
      prompt: "requirement_analysis: [JSON from Step 1]. requirements: [user requirements]. Analyze existing codebase for frontend design guidance (data, contracts, dependencies, quality assurance mechanisms)."
  • 使用Agent工具调用ui-analyzer（与上述调用并行） 
    • subagent_type: "dev-workflows-frontend:ui-analyzer"
      , 
      description: "UI fact gathering"
      , 
      prompt: "requirement_analysis: [JSON from Step 1]. requirements: [user requirements]. Read docs/project-context/external-resources.md, fetch external UI sources via the declared access methods, and analyze the existing UI codebase."
两者的输出（codebase-analyzer的JSON和ui-analyzer的JSON）将在步骤3被ui-spec-designer复用，在步骤4被technical-designer-frontend复用。

Step 3: UI Specification Phase

步骤3：UI规格制定阶段

After Step 2 outputs are received, ask the user about prototype code:
Ask the user: "Do you have prototype code for this feature? If so, please provide the path to the code. The prototype will be placed in 
docs/ui-spec/assets/
as reference material for the UI Spec."
  • [STOP]: Wait for user response about prototype code availability
Then create the UI Specification:
  • Invoke ui-spec-designer using Agent tool 
    • subagent_type: "dev-workflows-frontend:ui-spec-designer"
    • description: "UI Spec creation"
    • Build the prompt by including:
      • Source: PRD path (Large scale) or requirement-analyzer output (Medium scale)
      • ui_analysis
        : ui-analyzer JSON from Step 2 (includes externalResources fetched_summary and componentStructure / propsPatterns / cssLayout / etc.)
      • Prototype path when provided
    • Example: 
      prompt: "Create UI Spec from PRD at [path]. ui_analysis: [JSON from Step 2 ui-analyzer]. Prototype code is at [user-provided path]. Place prototype in docs/ui-spec/assets/{feature-name}/."
  • Invoke document-reviewer to verify UI Spec 
    • subagent_type: "dev-workflows-frontend:document-reviewer"
      , 
      description: "UI Spec review"
      , 
      prompt: "doc_type: UISpec target: [ui-spec path] Review for consistency and completeness"
  • [STOP]: Present UI Spec for user approval
收到步骤2的输出后，询问用户关于原型代码的问题：
询问用户："你是否有该功能的原型代码？如果有，请提供代码路径。原型将被放置在
docs/ui-spec/assets/
中，作为UI规格的参考材料。"
  • [STOP]：等待用户关于原型代码可用性的回复
然后创建UI规格：
  • 使用Agent工具调用ui-spec-designer 
    • subagent_type: "dev-workflows-frontend:ui-spec-designer"
    • description: "UI Spec creation"
    • 构建prompt时需包含：
      • 来源：PRD路径（大型项目）或requirement-analyzer的输出（中型项目）
      • ui_analysis
        : 步骤2中ui-analyzer的JSON（包含externalResources fetched_summary和componentStructure / propsPatterns / cssLayout等）
      • 提供的原型路径
    • 示例：
      prompt: "Create UI Spec from PRD at [path]. ui_analysis: [JSON from Step 2 ui-analyzer]. Prototype code is at [user-provided path]. Place prototype in docs/ui-spec/assets/{feature-name}/."
  • 调用document-reviewer验证UI规格 
    • subagent_type: "dev-workflows-frontend:document-reviewer"
      , 
      description: "UI Spec review"
      , 
      prompt: "doc_type: UISpec target: [ui-spec path] Review for consistency and completeness"
  • [STOP]：展示UI规格并获取用户批准

Step 4: Design Document Creation Phase

步骤4：设计文档创建阶段

Create appropriate design documents according to scale determination. technical-designer-frontend presents at least two architecture alternatives (technology selection, data flow design) with trade-offs for each. Pass both Step 2 outputs:
  • Invoke technical-designer-frontend using Agent tool
    • For ADR: 
      subagent_type: "dev-workflows-frontend:technical-designer-frontend"
      , 
      description: "ADR creation"
      , 
      prompt: "Create ADR for [technical decision]. Present at least two alternatives with trade-offs."
    • For Design Doc: 
      subagent_type: "dev-workflows-frontend:technical-designer-frontend"
      , 
      description: "Design Doc creation"
      , 
      prompt: "Create Design Doc based on requirements. Codebase analysis: [codebase-analyzer JSON from Step 2]. UI analysis: [ui-analyzer JSON from Step 2]. UI Spec is at [ui-spec path]. Inherit component structure and state design from UI Spec. Apply code: prefix to codebase-analyzer fact_ids and ui: prefix to ui-analyzer fact_ids when filling the Fact Disposition Table. Present at least two architecture alternatives with trade-offs."
  • (Design Doc only) Invoke code-verifier to verify Design Doc against existing code. Skip for ADR. 
    • subagent_type: "dev-workflows-frontend:code-verifier"
      , 
      description: "Design Doc verification"
      , 
      prompt: "doc_type: design-doc document_path: [Design Doc path] Verify Design Doc against existing code."
  • Invoke document-reviewer to verify consistency (pass code-verifier results for Design Doc; omit for ADR) 
    • subagent_type: "dev-workflows-frontend:document-reviewer"
      , 
      description: "Document review"
      , 
      prompt: "Review [document path] for consistency and completeness. code_verification: [code verification output from this step] (Design Doc only)"
根据规模判定结果创建合适的设计文档。technical-designer-frontend需提供至少两种架构方案（技术选型、数据流设计），并说明每种方案的权衡。传递步骤2的两个输出：
  • 使用Agent工具调用technical-designer-frontend
    • 若创建ADR：
      subagent_type: "dev-workflows-frontend:technical-designer-frontend"
      , 
      description: "ADR creation"
      , 
      prompt: "Create ADR for [technical decision]. Present at least two alternatives with trade-offs."
    • 若创建设计文档：
      subagent_type: "dev-workflows-frontend:technical-designer-frontend"
      , 
      description: "Design Doc creation"
      , 
      prompt: "Create Design Doc based on requirements. Codebase analysis: [codebase-analyzer JSON from Step 2]. UI analysis: [ui-analyzer JSON from Step 2]. UI Spec is at [ui-spec path]. Inherit component structure and state design from UI Spec. Apply code: prefix to codebase-analyzer fact_ids and ui: prefix to ui-analyzer fact_ids when filling the Fact Disposition Table. Present at least two architecture alternatives with trade-offs."
  • （仅设计文档）调用code-verifier验证设计文档与现有代码的一致性。ADR无需此步骤。 
    • subagent_type: "dev-workflows-frontend:code-verifier"
      , 
      description: "Design Doc verification"
      , 
      prompt: "doc_type: design-doc document_path: [Design Doc path] Verify Design Doc against existing code."
  • 调用document-reviewer验证一致性（设计文档需传递code-verifier的结果；ADR无需传递） 
    • subagent_type: "dev-workflows-frontend:document-reviewer"
      , 
      description: "Document review"
      , 
      prompt: "Review [document path] for consistency and completeness. code_verification: [code verification output from this step] (Design Doc only)"

Step 5: Design Consistency Verification

步骤5：设计一致性验证

  • Invoke design-sync using Agent tool 
    • subagent_type: "dev-workflows-frontend:design-sync"
      , 
      description: "Design consistency check"
      , 
      prompt: "Check consistency across all Design Docs in docs/design/. Report conflicts and overlaps."
  • [STOP]: Present design documents and design-sync results, obtain user approval
  • 使用Agent工具调用design-sync 
    • subagent_type: "dev-workflows-frontend:design-sync"
      , 
      description: "Design consistency check"
      , 
      prompt: "Check consistency across all Design Docs in docs/design/. Report conflicts and overlaps."
  • [STOP]：展示设计文档和design-sync的结果，获取用户批准

Completion Criteria

完成标准

  • Executed requirement-analyzer and determined scale
  • Executed external resource hearing per the external-resource-context skill (file written or update explicitly skipped by user)
  • Executed codebase-analyzer and ui-analyzer in parallel; outputs reused by ui-spec-designer and technical-designer-frontend
  • Created UI Specification with ui-spec-designer (when applicable) — its External Resources Used section is filled
  • Created appropriate design document (ADR or Design Doc) with technical-designer-frontend — its External Resources Used subsection is filled when present
  • Executed code-verifier on Design Doc and passed results to document-reviewer (skip for ADR-only)
  • Executed document-reviewer and addressed feedback
  • Executed design-sync for consistency verification
  • Obtained user approval for design document
  • 执行了requirement-analyzer并确定了项目规模
  • 按照external-resource-context技能执行了外部资源调研（已写入文件或用户明确跳过更新）
  • 并行执行了codebase-analyzer和ui-analyzer；输出已被ui-spec-designer和technical-designer-frontend复用
  • 通过ui-spec-designer创建了UI规格（如适用）——其"使用的外部资源"部分已填充
  • 通过technical-designer-frontend创建了合适的设计文档（ADR或设计文档）——若存在"使用的外部资源"子部分，该部分已填充
  • 对设计文档执行了code-verifier并将结果传递给document-reviewer（仅ADR时跳过）
  • 执行了document-reviewer并处理了反馈
  • 执行了design-sync进行一致性验证
  • 获得用户对设计文档的批准

Output Example

输出示例

Frontend design phase completed.
  • UI Specification: docs/ui-spec/[feature-name]-ui-spec.md
  • Design document: docs/design/[document-name].md or docs/adr/[document-name].md
  • Approval status: User approved
前端设计阶段已完成。
  • UI规格：docs/ui-spec/[feature-name]-ui-spec.md
  • 设计文档：docs/design/[document-name].md 或 docs/adr/[document-name].md
  • 批准状态：用户已批准