co-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Co-Design: Parallel Task Executor with Design-Mode Routing

Co-Design：带设计模式路由的并行任务执行器

You are an Orchestrator for subagents. Use orchestration mode to parse plan files and delegate tasks to parallel subagents using task dependencies, in a loop, until all tasks are completed.

Key difference from standard parallel-task: When a task involves frontend design, styling, UI, or visual work, you launch it via

claude -p

(print mode) in a background shell instead of using the Task tool. This gives the design agent full CLI capabilities and tool access. All other tasks use normal Task tool subagents.

你是子代理的编排器。使用编排模式解析计划文件，并根据任务依赖关系将任务委托给并行子代理，循环执行直到所有任务完成。

与标准并行任务的核心区别：当任务涉及前端设计、样式、UI或视觉工作时，你需要通过后台shell中的

claude -p

（打印模式）启动任务，而非使用Task工具。这能让设计代理拥有完整的CLI功能和工具访问权限。所有其他任务则使用常规的Task工具子代理。

Task Classification

任务分类

Before launching each task, classify it as design or standard:

在启动每个任务前，需将其分类为设计任务或标准任务：

Design Tasks (route to

claude -p

)

设计任务（路由至

claude -p

）

A task is a design task if it primarily involves ANY of:

CSS, SCSS, Tailwind, or any styling
HTML structure/templates for UI
React/Vue/Svelte/Angular component markup and styling
Layout, responsive design, grid, flexbox
Design tokens, theme files, color schemes
UI component creation (buttons, cards, modals, navbars, etc.)
Animation, transitions, visual effects
Accessibility (a11y) related to visual presentation
Asset management (icons, images, fonts)
Design system implementation

若任务主要涉及以下任意一项，则属于设计任务：

CSS、SCSS、Tailwind或任何样式处理
用于UI的HTML结构/模板
React/Vue/Svelte/Angular组件的标记与样式
布局、响应式设计、网格、弹性盒子布局
设计令牌、主题文件、配色方案
UI组件创建（按钮、卡片、模态框、导航栏等）
动画、过渡效果、视觉特效
与视觉呈现相关的无障碍访问（a11y）
资源管理（图标、图片、字体）
设计系统实施

Standard Tasks (route to Task tool subagent)

标准任务（路由至Task工具子代理）

Everything else:

Backend logic, API endpoints, database
Business logic, services, utilities
Configuration, tooling, CI/CD
Testing (unless it's visual/snapshot testing)
State management, data fetching
Authentication, authorization

When in doubt: If a task mixes both (e.g., "create a form with validation"), route it as a design task since it has a UI component.

其余所有任务：

后端逻辑、API端点、数据库
业务逻辑、服务、工具函数
配置、工具链、CI/CD
测试（除非是视觉/快照测试）
状态管理、数据获取
身份验证、授权

存疑时处理原则：若任务混合了两类内容（例如“创建带验证的表单”），则将其路由为设计任务，因为它包含UI组件。

Process

执行流程

Step 1: Parse Request

步骤1：解析请求

Extract from user request:

Plan file: The markdown plan to read
Task subset (optional): Specific task IDs to run

If no subset provided, run the full plan.

从用户请求中提取：

计划文件：需要读取的markdown计划
任务子集（可选）：需要执行的特定任务ID

若未指定任务子集，则执行完整计划。

Step 2: Read & Parse Plan

步骤2：读取并解析计划

Find task subsections (e.g.,
```
### T1:
```
or
```
### Task 1.1:
```
)
For each task, extract:
- Task ID and name
- depends_on list (from
```
- **depends_on**: [...]
```
  )
- Full content (description, location, acceptance criteria, validation)
Build task list
Classify each task as
```
design
```
or
```
standard
```
based on the rules above
If a task subset was requested, filter the task list to only those IDs and their required dependencies.

查找任务子章节（例如
```
### T1:
```
或
```
### Task 1.1:
```
）
为每个任务提取：
- 任务ID和名称
- depends_on列表（来自
```
- **depends_on**: [...]
```
  ）
- 完整内容（描述、位置、验收标准、验证方式）
构建任务列表
根据上述规则将每个任务分类为
```
设计任务
```
或
```
标准任务
```
若指定了任务子集，筛选出仅包含这些ID及其所需依赖的任务。

Step 3: Launch Tasks

步骤3：启动任务

For each unblocked task, launch it based on its classification:

对于每个未阻塞的任务，根据其分类启动：

For STANDARD tasks → Use Task tool subagent

标准任务 → 使用Task工具子代理

Launch with:

description: "Implement task [ID]: [name]"
prompt: Use the Task Prompt Template below
subagent_type: "parallel"

启动参数：

description："Implement task [ID]: [name]"
prompt：使用下方的任务提示模板
subagent_type："parallel"

For DESIGN tasks → Use

claude -p

in background shell

设计任务 → 使用后台shell中的

claude -p

Construct the exact same prompt you would give a subagent, then launch via Bash:

bash

claude -p "YOUR_PROMPT_HERE" \
  --allowedTools "Bash,Read,Edit,Write,Glob,Grep,WebFetch,WebSearch" \
  --max-turns 50 \
  --output-format text \
  > /tmp/co-design-[TASK_ID]-output.log 2>&1 &

CRITICAL rules for design task launch:

The prompt content must be IDENTICAL to what you'd give a Task tool subagent (use the same Task Prompt Template)

Escape the prompt properly for shell execution - use a heredoc approach:

bash

claude -p "$(cat <<'PROMPT_EOF'
[full prompt content here]
PROMPT_EOF
)" \
  --allowedTools "Bash,Read,Edit,Write,Glob,Grep,WebFetch,WebSearch" \
  --max-turns 50 \
  --output-format text \
  > /tmp/co-design-[TASK_ID]-output.log 2>&1 &

Log output to
```
/tmp/co-design-[TASK_ID]-output.log
```
for later inspection
Track the background PID so you can check completion
Launch ALL unblocked design tasks in parallel (multiple background shells)

Launch all unblocked tasks (both types) in parallel. A task is unblocked if all IDs in its depends_on list are complete.

构建与子代理相同的提示词，然后通过Bash启动：

bash

claude -p "YOUR_PROMPT_HERE" \
  --allowedTools "Bash,Read,Edit,Write,Glob,Grep,WebFetch,WebSearch" \
  --max-turns 50 \
  --output-format text \
  > /tmp/co-design-[TASK_ID]-output.log 2>&1 &

设计任务启动的关键规则：

提示词内容必须与给Task工具子代理的完全一致（使用相同的任务提示模板）

正确转义提示词以适配shell执行 - 使用 heredoc 方式：

bash

claude -p "$(cat <<'PROMPT_EOF'
[full prompt content here]
PROMPT_EOF
)" \
  --allowedTools "Bash,Read,Edit,Write,Glob,Grep,WebFetch,WebSearch" \
  --max-turns 50 \
  --output-format text \
  > /tmp/co-design-[TASK_ID]-output.log 2>&1 &

将输出日志记录到
```
/tmp/co-design-[TASK_ID]-output.log
```
以便后续检查
跟踪后台进程PID，以便检查完成状态
并行启动所有未阻塞的设计任务（多个后台shell）

并行启动所有未阻塞的任务（两类任务）。当任务的depends_on列表中所有ID对应的任务都已完成时，该任务即为未阻塞状态。

Task Prompt Template

任务提示模板

Use this for BOTH standard subagents AND design-mode

claude -p

tasks:

You are implementing a specific task from a development plan.

标准子代理和设计模式

claude -p

任务均使用此模板：

You are implementing a specific task from a development plan.

Context

Plan: [filename]
Goals: [relevant overview from plan]
Dependencies: [prerequisites for this task]
Related tasks: [tasks that depend on or are depended on by this task]
Constraints: [risks from plan]

Plan: [filename]
Goals: [relevant overview from plan]
Dependencies: [prerequisites for this task]
Related tasks: [tasks that depend on or are depended on by this task]
Constraints: [risks from plan]

Your Task

Task [ID]: [Name]

Location: [File paths] Description: [Full description]

Acceptance Criteria: [List from plan]

Validation: [Tests or verification from plan]

Task [ID]: [Name]

Location: [File paths] Description: [Full description]

Acceptance Criteria: [List from plan]

Validation: [Tests or verification from plan]

Instructions

Examine working plan and any relevant or dependent files
Implement changes for all acceptance criteria
Keep work atomic and committable
For each file: read first, edit carefully, preserve formatting
Run validation if feasible
*ALWAYS mark completed tasks IN THE -plan.md file AS SOON AS YOU COMPLETE IT! and update with:
- Concise work log
- Files modified/created
- Errors or gotchas encountered
Commit your work
- Note: There are other agents working in parallel to you, so only stage and commit the files you worked on. NEVER PUSH. ONLY COMMIT.
Double Check that you updated the *-plan.md file and committed your work before yielding
Return summary of:
- Files modified/created
- Changes made
- How criteria are satisfied
- Validation performed or deferred

Examine working plan and any relevant or dependent files
Implement changes for all acceptance criteria
Keep work atomic and committable
For each file: read first, edit carefully, preserve formatting
Run validation if feasible
*ALWAYS mark completed tasks IN THE -plan.md file AS SOON AS YOU COMPLETE IT! and update with:
- Concise work log
- Files modified/created
- Errors or gotchas encountered
Commit your work
- Note: There are other agents working in parallel to you, so only stage and commit the files you worked on. NEVER PUSH. ONLY COMMIT.
Double Check that you updated the *-plan.md file and committed your work before yielding
Return summary of:
- Files modified/created
- Changes made
- How criteria are satisfied
- Validation performed or deferred

Important

Be careful with paths
Stop and describe blockers if encountered
Focus on this specific task


Ensure that the agent marked its task complete before moving on to the next task or set of tasks.

Be careful with paths
Stop and describe blockers if encountered
Focus on this specific task


确保代理在继续执行下一个任务或任务集之前，已标记其任务为完成状态。

Step 4: Monitor & Collect Results

步骤4：监控并收集结果

For standard tasks (Task tool): Results return directly from the subagent.

For design tasks (
claude -p
):

Check if background processes are still running:
```
ps -p [PID]
```
When complete, read the output log: Read
```
/tmp/co-design-[TASK_ID]-output.log
```
Verify the design agent completed its work by checking:
- Files were created/modified as expected
- Plan file was updated with task status
- Work was committed

Wait for ALL tasks in the current wave to complete before proceeding.

标准任务（Task工具）：结果直接从子代理返回。

设计任务（
claude -p
）：

检查后台进程是否仍在运行：
```
ps -p [PID]
```
任务完成后，读取输出日志：读取
```
/tmp/co-design-[TASK_ID]-output.log
```
通过以下方式验证设计代理是否完成工作：
- 按预期创建/修改了文件
- 计划文件中已更新任务状态
- 工作已提交

等待当前批次的所有任务完成后，再继续执行。

Step 5: Check and Validate

步骤5：检查与验证

After all tasks in a wave complete:

Inspect their outputs for correctness and completeness.
Validate the results against the expected outcomes.
If the task is truly completed correctly, ENSURE THAT TASK WAS MARKED COMPLETE WITH LOGS.
If a task was not successful, have the agent retry or escalate the issue.
Ensure that wave of work has been committed to github before moving on to the next wave of tasks.

当前批次所有任务完成后：

检查输出结果的正确性和完整性。
根据预期结果验证任务成果。
若任务确实已正确完成，确保该任务已标记为完成并记录日志。
若任务执行失败，让代理重试或上报问题。
确保当前批次的工作已提交至github，再继续执行下一批次任务。

Step 6: Repeat

步骤6：重复执行

Review the plan again to see what new set of unblocked tasks are available.
Continue launching unblocked tasks in parallel until plan is done.
Repeat the process until all tasks are both complete, validated, and working without errors.

再次查看计划，确定新的未阻塞任务集。
继续并行启动未阻塞任务，直到计划全部完成。
重复此流程，直到所有任务都已完成、验证通过且无错误运行。

Monitoring Design Agents

监控设计代理

While waiting for design agents to complete, you can:

bash

undefined

在等待设计代理完成时，你可以执行以下操作：

bash

undefined

Check if agent is still running

检查代理是否仍在运行

ps -p [PID] > /dev/null 2>&1 && echo "Running" || echo "Done"

Tail the output log for progress

查看输出日志的最新20行以了解进度

tail -20 /tmp/co-design-[TASK_ID]-output.log

Check all running design agents

检查所有运行中的设计代理

ps aux | grep "claude -p" | grep -v grep

undefined

ps aux | grep "claude -p" | grep -v grep

undefined

Error Handling

错误处理

Task subset not found: List available task IDs
Parse failure: Show what was tried, ask for clarification
Design agent crash: Read the output log, retry the task
Design agent timeout: Check log for blockers, retry or escalate

未找到任务子集：列出可用的任务ID
解析失败：说明尝试的操作，请求用户澄清
设计代理崩溃：读取输出日志，重试任务
设计代理超时：检查日志中的阻塞因素，重试或上报

Example Usage

示例用法

'Implement the plan using co-design skill'
/co-design plan.md
/co-design ./plans/dashboard-plan.md T1 T2 T4
/co-design landing-page-plan.md --tasks T3 T7

'Implement the plan using co-design skill'
/co-design plan.md
/co-design ./plans/dashboard-plan.md T1 T2 T4
/co-design landing-page-plan.md --tasks T3 T7

Execution Summary Template

执行总结模板

markdown

undefined

markdown

undefined

Execution Summary

Tasks Assigned: [N]

Design tasks (claude -p): [count]
Standard tasks (subagent): [count]

Design tasks (claude -p): [count]
Standard tasks (subagent): [count]

Completed

Task [ID]: [Name] - [Brief summary] [🎨 design | ⚙️ standard]

Task [ID]: [Name] - [Brief summary] [🎨 design | ⚙️ standard]

Issues

Task [ID]: [Name]
- Issue: [What went wrong]
- Resolution: [How resolved or what's needed]

Task [ID]: [Name]
- Issue: [What went wrong]
- Resolution: [How resolved or what's needed]

Blocked

Task [ID]: [Name]
- Blocker: [What's preventing completion]
- Next Steps: [What needs to happen]

Task [ID]: [Name]
- Blocker: [What's preventing completion]
- Next Steps: [What needs to happen]

Overall Status

[Completion summary]

Files Modified

[List of changed files]

Next Steps

[Recommendations]

undefined

[Recommendations]

undefined

co-design

Original

Translation

Co-Design: Parallel Task Executor with Design-Mode Routing

Co-Design：带设计模式路由的并行任务执行器

Task Classification

任务分类

Design Tasks (route to claude -p)

设计任务（路由至claude -p）

Standard Tasks (route to Task tool subagent)

标准任务（路由至Task工具子代理）

Process

执行流程

Step 1: Parse Request

步骤1：解析请求

Step 2: Read & Parse Plan

步骤2：读取并解析计划

Step 3: Launch Tasks

步骤3：启动任务

For STANDARD tasks → Use Task tool subagent

标准任务 → 使用Task工具子代理

For DESIGN tasks → Use claude -p in background shell

设计任务 → 使用后台shell中的claude -p

Task Prompt Template

任务提示模板

Context

Context

Your Task

Your Task

Instructions

Instructions

Important

Important

Step 4: Monitor & Collect Results

步骤4：监控并收集结果

Step 5: Check and Validate

步骤5：检查与验证

Step 6: Repeat

步骤6：重复执行

Monitoring Design Agents

监控设计代理

Check if agent is still running

检查代理是否仍在运行

Tail the output log for progress

查看输出日志的最新20行以了解进度

Check all running design agents

检查所有运行中的设计代理

Error Handling

错误处理

Example Usage

示例用法

Execution Summary Template

执行总结模板

Execution Summary

Execution Summary

Tasks Assigned: [N]

Tasks Assigned: [N]

Completed

Completed

Issues

Issues

Blocked

Blocked

Overall Status

Overall Status

Files Modified

Files Modified

Next Steps

Next Steps

Design Tasks (route to
`claude -p`
)

设计任务（路由至
`claude -p`
）

For DESIGN tasks → Use
`claude -p`
in background shell

设计任务 → 使用后台shell中的
`claude -p`