Back to Details

shape-up

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shape Up

Shape Up

Orchestrate the full Shape Up workflow by invoking 
/shaping
and 
/breadboarding
at the right moments. Be proactive — after each step, explain what was accomplished and suggest the next move.
通过在恰当的时机调用
/shaping
和
/breadboarding
来协调整个Shape Up工作流。要主动推进——在每个步骤完成后，说明已完成的工作并建议下一步行动。

Prerequisites

前提条件

Requires the 
/shaping
and 
/breadboarding
skills to be installed. If missing, instruct the user to install them from https://github.com/rjs/shaping-skills
需要安装
/shaping
和
/breadboarding
技能。若未安装，请指导用户从https://github.com/rjs/shaping-skills安装。

Workflow Overview

工作流概览

Frame → Shape → Breadboard → Slice → Build
PhasePurposeSub-skillOutput
FrameCapture the "why"
/shaping
Problem + Outcome
ShapeSeparate problem from solution, iterate
/shaping
R (requirements) + selected Shape
BreadboardMap affordances and wiring
/breadboarding
Affordance tables + diagram
SliceCut into demoable increments
/breadboarding
V1..V9 vertical slices
BuildImplement slice by slice—Working software
框架构建 → 方案塑形 → 原型规划 → 拆分迭代 → 开发实现
阶段目标子技能输出
框架构建明确核心动因
/shaping
问题定义 + 预期成果
方案塑形分离问题与解决方案，迭代优化
/shaping
需求（R）+ 选定的方案
原型规划映射功能与关联逻辑
/breadboarding
功能表 + 流程图
拆分迭代拆分为可演示的增量模块
/breadboarding
V1..V9垂直拆分模块
开发实现逐个模块开发—可运行软件

Entry Point Detection

入口场景判断

Determine the project type, then follow the appropriate path:
New project (empty or new directory)? → Start at Phase 1: Frame Existing project with code? → Start at Phase 0: Map Current System
判断项目类型，然后遵循对应流程：
新项目（空目录或全新项目）？ → 从第1阶段：框架构建开始 已有代码的项目？ → 从第0阶段：梳理现有系统开始

Phase 0: Map Current System (Existing Projects Only)

第0阶段：梳理现有系统（仅适用于已有项目）

Before shaping a change to an existing codebase, understand what exists.
  1. Ask: "What workflow or area of the system does this change affect?"
  2. Read the relevant code to understand the current implementation
  3. Invoke 
    /breadboarding
    to map the existing system as 
    CURRENT
    :
    • Trace the affected workflow through the code
    • Produce affordance tables (UI + Code) for the current system
    • Generate a wiring diagram showing how it works today
This 
CURRENT
breadboard becomes the baseline. Proposed shapes will modify it.
After completing: Present the CURRENT breadboard and say:
"Here's how the current system works. Now let's frame what we want to change. What problem are you trying to solve, or what outcome do you want?"
在对现有代码库进行变更塑形前，需先了解现有系统情况。
  1. 询问："此变更会影响系统的哪些工作流或区域？"
  2. 阅读相关代码以理解当前实现逻辑
  3. 调用
    /breadboarding
    将现有系统映射为
    CURRENT
    版本：
    • 追踪受影响的工作流在代码中的执行路径
    • 生成现有系统的功能表（UI + 代码）
    • 生成展示当前系统工作逻辑的关联流程图
此
CURRENT
版本原型将作为基准，后续提出的方案将基于此进行修改。
完成后： 展示CURRENT版本原型并说明：
"以上是当前系统的工作逻辑。现在我们来明确想要做出的变更。你想要解决什么问题，或是期望达成什么成果？"

Phase 1: Frame

第1阶段：框架构建

Capture source material and distill it into Problem and Outcome.
  1. Ask the user to describe what they want (or paste stakeholder quotes, requests, etc.)
  2. Invoke 
    /shaping
    — capture the description as Source material
  3. Distill into:
    • Problem — What's broken, what pain exists
    • Outcome — What success looks like
  4. Write to 
    shaping.md
    in 
    .claude/
    (or project root for standalone projects)
After completing: Present the frame and say:
"Here's the frame. Does this capture the problem and desired outcome? Once confirmed, we'll start extracting requirements and sketching a solution."
收集原始信息并提炼为问题定义与预期成果。
  1. 请用户描述需求（或粘贴利益相关方的诉求、请求等）
  2. 调用
    /shaping
    — 将描述内容作为原始信息记录
  3. 提炼为：
    • 问题定义 — 现存的痛点、待解决的问题
    • 预期成果 — 成功的标准
  4. 写入
    .claude/
    目录下的
    shaping.md
    文件（独立项目可写入项目根目录）
完成后： 展示框架内容并说明：
"以上是构建的框架。是否准确涵盖了问题与预期成果？ 确认后，我们将开始提取需求并草拟解决方案。"

Phase 2: Shape

第2阶段：方案塑形

Iterate on problem (R) and solution (shapes) until a shape is selected.
  1. Invoke 
    /shaping
  2. Offer both entry points:
    • Start from R — extract requirements from the frame
    • Start from S — if user already has a solution in mind, capture it as Shape A
  3. Run the shaping loop:
Extract R → Sketch shape(s) → Fit check → Spike unknowns → Iterate
针对问题（R）与解决方案（方案原型）进行迭代，直至选定最终方案。
  1. 调用
    /shaping
  2. 提供两种入口选项：
    • 从需求R开始 — 从框架中提取需求
    • 从方案S开始 — 如果用户已有初步解决方案，将其记录为方案A
  3. 执行塑形循环：
提取需求R → 草拟方案原型 → 匹配度校验 → 调研未知点 → 迭代优化

Proactive Guidance During Shaping

塑形阶段的主动引导

After extracting initial R and Shape A, immediately show the fit check:
"Here's R x A — the fit between requirements and the proposed solution."
Then suggest based on what the fit check reveals:
Fit check showsSuggest
Flagged unknowns (warning markers)"A2 is flagged — want me to spike it?"
Requirements failing"R3 fails because [reason]. Should we revise the shape or adjust R3?"
All green"The shape looks solid. Ready to breadboard?"
Multiple viable shapes"Both A and B pass. Want to compare with 
show me A x R
vs 
B x R
?"
提取初始需求R与方案A后，立即展示匹配度校验结果：
"以下是R与A的匹配情况——需求与拟议解决方案的契合度。"
然后根据匹配度校验结果给出建议：
匹配度校验结果建议内容
标记出未知点（警告标识）"A2被标记为未知点——需要我深入调研吗？"
需求未满足"R3未满足，原因是[具体理由]。我们应该修改方案还是调整R3？"
全部匹配"方案看起来可行。准备进入原型规划阶段了吗？"
多个可行方案"A和B均通过校验。需要对比
show me A x R
与
B x R
的结果吗？"

Shorthand Commands

快捷命令

Teach the user these as you go:
CommandWhat it does
show me R x A
Fit check: requirements against shape A
show me A x R
Rotated fit check: shape A against requirements
spike A2
Investigate a specific part in depth
add R that...
Add a new requirement
sketch shape B
Propose an alternative approach
Phase complete when: A shape is selected (passes fit check, unknowns resolved).
"Shape [X] is selected and all requirements pass. Ready to breadboard?"
在操作过程中向用户介绍以下快捷命令：
命令功能
show me R x A
匹配度校验：需求与方案A的契合度
show me A x R
反向匹配度校验：方案A与需求的契合度
spike A2
深入调研特定模块
add R that...
添加新需求
sketch shape B
提出替代方案
阶段完成标志： 选定方案（通过匹配度校验，未知点已解决）。
"方案[X]已选定，所有需求均满足。准备进入原型规划阶段了吗？"

Phase 3: Breadboard

第3阶段：原型规划

Detail the selected shape into concrete affordances with wiring.
  1. Invoke 
    /breadboarding
  2. For existing projects: breadboard the mixture — existing + new affordances wired together
  3. For new projects: breadboard from the shape's parts
  4. Produce:
    • Places table
    • UI Affordances table
    • Code Affordances table
    • Wiring diagram (Mermaid)
After completing:
"The breadboard shows [N] UI affordances, [N] code affordances across [N] places. Ready to slice into vertical increments?"
将选定的方案细化为具体的功能与关联逻辑。
  1. 调用
    /breadboarding
  2. 对于已有项目：规划混合版本——现有功能与新功能的关联逻辑
  3. 对于新项目：基于方案原型的模块进行规划
  4. 生成：
    • 场景表
    • UI功能表
    • 代码功能表
    • 关联流程图（Mermaid格式）
完成后：
"原型规划包含[N]个UI功能、[N]个代码功能，覆盖[N]个场景。 准备拆分为可演示的垂直增量模块了吗？"

Phase 4: Slice

第4阶段：拆分迭代

Cut the breadboard into demoable vertical slices.
  1. Invoke 
    /breadboarding
    slicing procedure
  2. Identify V1 as the minimal demoable increment
  3. Layer additional capabilities as V2..V9
  4. For each slice, define:
    • Which affordances it includes
    • What mechanism it demonstrates
    • A concrete demo statement
After completing: Present the slice summary and say:
"We have [N] slices. V1 demos '[demo statement]'. Want to start building V1?"
将原型规划拆分为可演示的垂直增量模块。
  1. 调用
    /breadboarding
    拆分流程
  2. 确定V1为最小可演示增量模块
  3. 将额外功能分层为V2..V9
  4. 为每个模块定义：
    • 包含的功能
    • 展示的核心机制
    • 具体的演示说明
完成后： 展示模块汇总并说明：
"我们已拆分出[N]个模块。V1将演示'[演示说明]'。准备开始开发V1了吗？"

Phase 5: Build

第5阶段：开发实现

Implement each slice, verify it works, then move to the next.
For each slice:
  1. Create an implementation plan (
    V[N]-plan.md
    )
  2. Build the slice
  3. Verify: run and test to confirm the demo works
  4. Update the Big Picture document with completion status
After each slice:
"V[N] is complete — [demo statement] is working. Ready for V[N+1]?"
逐个模块开发，验证功能正常后再推进下一个模块。
针对每个模块：
  1. 创建实现计划（
    V[N]-plan.md
    ）
  2. 开发模块功能
  3. 验证：运行并测试以确认演示功能正常
  4. 更新全局文档（Big Picture）的完成状态
每个模块完成后：
"V[N]已完成——[演示说明]功能正常运行。准备开始V[N+1]了吗？"

File Management

文件管理

FilePurposeLocation
shaping.md
Ground truth for R, shapes, fit checks
.claude/
or project root
spike-[topic].md
Investigation findings
.claude/
or project root
big-picture.md
High-level summary of entire feature
.claude/
or project root
V[N]-plan.md
Per-slice implementation plans
.claude/
or project root
文件用途位置
shaping.md
需求R、方案原型、匹配度校验的基准文档
.claude/
或项目根目录
spike-[topic].md
调研结果文档
.claude/
或项目根目录
big-picture.md
功能的全局汇总文档
.claude/
或项目根目录
V[N]-plan.md
各模块的实现计划
.claude/
或项目根目录

Resuming a Session

恢复会话

When invoked with an existing 
shaping.md
:
  1. Read the shaping doc to understand current state
  2. Invoke 
    /shaping
    — it will detect the existing doc and show the fit check for the selected shape
  3. Identify what needs attention (unsolved requirements, pending slices)
  4. Suggest the next action:
    • If shaping: "R4 is still undecided — want to discuss?"
    • If breadboarded: "Ready to slice?"
    • If sliced: "V3 is next — want to build it?"
    • If building: "V2 is complete. V3 demos '[statement]' — ready?"
当调用时已存在
shaping.md
文件：
  1. 读取塑形文档以了解当前进度
  2. 调用
    /shaping
    — 系统会检测到现有文档并展示选定方案的匹配度校验结果
  3. 确定需要处理的事项（未解决的需求、待开发的模块）
  4. 建议下一步操作：
    • 若处于塑形阶段："R4尚未确定——需要讨论吗？"
    • 若已完成原型规划："准备拆分模块了吗？"
    • 若已完成拆分："下一个是V3——准备开发了吗？"
    • 若处于开发阶段："V2已完成。V3将演示'[演示说明]'——准备开始了吗？"