[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71E2JXMGA5EFG2N4GHEPSP1":3,"skill-same:01M71E2JXMGA5EFG2N4GHEPSP1":99},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":37,"publishedAt":57,"linkOnly":58,"markdownContent":59,"markdownBody":60,"frontMatter":61,"refName":64,"commitSha":65,"skillDirectory":66,"forksCount":67,"repositoryHtmlUrl":68,"repositoryHomepageUrl":6,"ownerHtmlUrl":69,"ownerBlogUrl":70,"ownerDescription":71,"updatedAt":72,"install":73,"resources":86},"01M71E2JXMGA5EFG2N4GHEPSP1","storyboard",null,"Lock visual design before building — explore mockups on your preferred surface (Paper, HTML, Figma) and feed discovered changes back into the PRD.","indigoai-us\u002Fhq-core","indigoai-us","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F122242446?v=4","01M71DTQ5NGD10GT1Z7E6XKWC5","HQ","01M71DTQ6BKSYYBNC9RAKT3YDK",94,"MIT","https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fstoryboard\u002FSKILL.md",[18,23,26,29,34],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000031","产品经理","PROFESSION","适用职业",{"categoryNo":35,"categoryName":36,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师",[5,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56],"journal","git","edit","config","write","read","scripts","visual design","lock","Bash","design","mkdir","company","explore","project","figma","back","shared","ls","2026-11-10 10:12:30",false,"---\nname: storyboard\ndescription: Lock visual design before building — explore mockups on your preferred surface (Paper, HTML, Figma) and feed discovered changes back into the PRD.\nallowed-tools: Read, Write, Edit, Grep, Glob, Bash(git:*), Bash(qmd:*), Bash(ls:*), Bash(date:*), Bash(mkdir:*), Bash(.claude\u002Fskills\u002Fstoryboard\u002Fscripts\u002Fsurface-config.sh:*), Bash(.claude\u002Fskills\u002F_shared\u002Fjournal.sh:*), Bash, AskUserQuestion, Agent, Bash(bash core\u002Fscripts\u002Fread-policy-frontmatter.sh:*)\nargument-hint: \"[company] {project} [--surface paper|html|figma] [--design-led]\"\n---\n\n# Storyboard — Lock Design Before You Build\n\nThe missing phase between planning and building. `\u002Fstoryboard` sits in the chain:\n\n```\n\u002Fbrainstorm ──► \u002Fprd | \u002Fdeep-plan ──► \u002Fstoryboard ──► \u002Frun-project\n     │                                      ▲  │\n     └────────── \u002Fstoryboard (design-led) ──┘  └─► writes deltas back into prd.json\n```\n\nIts job is **not** \"make a mockup\" — Paper MCP and designed HTML already do that. Its job is to be a **gate with a feedback loop**: explore design on the surface you prefer, then capture what the design surfaced that changes the plan and write those changes back into `prd.json` before any story executes. Locking design first means you don't build a pile of code against a spec the design was about to change.\n\n**Important:** This skill designs and revises the plan. It does not implement product code. Building happens in `\u002Frun-project`.\n\n**User's input:** $ARGUMENTS\n\n## When to Use\n\n- A PRD exists (`prd.json`) and you want to design its screens\u002Fflows and harden the spec before building.\n- A brainstorm exists but no PRD yet, and the project is UI-first — you want to explore visuals before `\u002Fprd` writes stories.\n- The design process is surfacing changes to scope, screens, or data contracts and you want those captured in the PRD, not lost in chat.\n\nFor raw canvas work with no PRD loop, use `\u002Frun paper-designer`. For production UI polish on already-built code, reach for a dedicated design-polish skill (the `impeccable` skill, where installed).\n\n## Step 1 — Parse Arguments & Resolve Project\n\nFrom `$ARGUMENTS`, extract (in order, all optional except the project):\n\n- `[company]` — if the **first word** matches a top-level key in `companies\u002Fmanifest.yaml`, set `{co}` and strip it. Otherwise `{co}` is resolved later from the project path (companies vs personal).\n- `{project}` — project slug.\n- `--surface paper|html|figma` — per-run surface override (does not change the saved default).\n- `--design-led` — force design-led mode even when a `prd.json` is present.\n\nResolve the project directory:\n\n- `companies\u002F{co}\u002Fprojects\u002F{slug}\u002F` when a company is anchored, else search both `companies\u002F*\u002Fprojects\u002F{slug}\u002F` and `personal\u002Fprojects\u002F{slug}\u002F` (use `qmd search \"{slug}\" --json` or `ls`).\n- Set `{project_dir}` to the match. If `{slug}` is ambiguous across companies, ask the user which one.\n\n## Step 2 — Detect Mode\n\nInspect `{project_dir}`:\n\n| Found | Mode | Behavior |\n|---|---|---|\n| `prd.json` exists (and no `--design-led`) | **spec-led** (default) | Design the surfaces the PRD describes, then write deltas back into `prd.json` and lock design. |\n| only `brainstorm.md` exists (or `--design-led`) | **design-led** | Explore visuals from the brainstorm; produce `design\u002Fdesign.md` that `\u002Fprd` then consumes. No `prd.json` writeback (there's nothing to write to yet). |\n| neither exists | **short-circuit** | Tell the user: \"No PRD or brainstorm found for `{slug}`. Run `\u002Fbrainstorm {slug}` or `\u002Fprd {slug}` first, or give me a one-line description and I'll sketch from that.\" Stop unless they provide a description. |\n\nAnnounce the resolved mode and project in one plain line.\n\n## Step 3 — Resolve the Design Surface (set once, forgotten forever)\n\nResolve the surface preference with the helper:\n\n```bash\n.claude\u002Fskills\u002Fstoryboard\u002Fscripts\u002Fsurface-config.sh resolve --company \"{co}\" --surface \"{flag-or-empty}\"\n```\n\nIt prints `surface=`, `figma=`, and `origin=` (one of `flag`, `company`, `global`, `unset`).\n\n- **`origin=flag|company|global`** — use the resolved surface silently. Do not re-ask. (For `global`\u002F`company`, you may note it in one line: \"Designing on **{surfaces}** (your saved default).\")\n- **`origin=unset`** — this is the **first run**. Ask **once** with a single `AskUserQuestion`:\n  - **Question:** \"Which design surface should `\u002Fstoryboard` use by default? I'll remember it and never ask again.\"\n  - **Options:** `Paper + HTML (Recommended)` · `Paper MCP only` · `Designed HTML only` · `Figma references`\n  - Then persist (default `figmaReferences: true` so Figma links are always allowed as references):\n\n    ```bash\n    .claude\u002Fskills\u002Fstoryboard\u002Fscripts\u002Fsurface-config.sh save --surface \"paper,html\" --figma true\n    ```\n\n    Save to the company override instead when the user wants this default scoped to one company: add `--company \"{co}\"`.\n\nResolution order is always: `--surface` flag → company override → personal default → first-run prompt. The saved default is global unless the user scopes it to a company.\n\n## Step 4 — Load Design Context\n\nPull the same design sources the existing design workers use — do not invent a parallel system:\n\n- **Design tokens \u002F styles:** the design-styles catalog and any bound company brand pack (`core\u002Fpackages\u002Fhq-pack-design-styles\u002F`, and `companies\u002F{co}\u002Fknowledge\u002Fdesign-styles\u002Fpacks\u002F` when a company is anchored — falls back to the shipped theme for personal projects). Use it for palette, type scale, spacing, and motion.\n- **PRD context (spec-led):** read `prd.json` — `description`, `userStories[]` (titles + acceptance criteria define the screens\u002Fstates to design), `metadata.audiences`, `metadata.designRef`, `metadata.dataModel`, `metadata.authModel`.\n- **Brainstorm context (design-led):** read `brainstorm.md` — `## Recommendation`, `## What We Don't Know`, audience, and the chosen approach.\n- **Policies:** if a company is anchored, collect its policy files except `example-policy.md`, preserve their order, and split the stable file order into consecutive chunks of at most 40 files. For each chunk, run `bash core\u002Fscripts\u002Fread-policy-frontmatter.sh {file1} {file2} ...` once with each path as a separate argument. Keep each call under 30 KB of output. The first output block belongs to the chunk’s first file argument; each later block belongs to the path named by its preceding `# --- policy-file: \u003Cpath> ---` separator. Note hard-enforcement policies. When designing on Paper, the Paper MCP policies apply (see Step 5).\n\n## Step 5 — Design Iteration\n\nIterate on the resolved surface(s). Storyboard the screens\u002Fflows the PRD or brainstorm describes, share for feedback, and revise. Keep iterating until the user signs off on the design.\n\n### Surface: `paper` (Paper MCP)\n\nBest for multi-screen flows and storyboards. Follow the `paper-designer` worker patterns and the Paper MCP policies:\n\n- **Storyboard in Paper before writing component code** (`hq-paper-mcp-before-deck-code`, hard).\n- **Run Paper MCP agents sequentially — never in parallel** (`hq-paper-mcp-sequential-agents`, hard). Paper operates on a shared canvas; concurrent `write_html` \u002F `create_artboard` calls collide.\n- Load the Paper guide once (`get_guide`), `get_basic_info` for artboards, then build one visual group per `write_html`. Review with `get_screenshot` after meaningful changes; `finish_working_on_nodes` when done.\n- Export artboard screenshots into `design\u002Fmockups\u002F` and note artboard refs (no raw node IDs in user-facing output).\n\nIf Paper Desktop isn't running \u002F no `.paper` file is open, say so plainly and offer the `html` surface as a fallback rather than failing.\n\n### Surface: `html` (designed HTML)\n\nBest for web mockups and a shareable link. Generate designed HTML using the design tokens from Step 4, then preview and share via `\u002Fdeploy` (its local preview always runs; surface the preview URL inline in one plain line). Save the HTML into `design\u002Fmockups\u002F`.\n\n### Surface: `figma`\n\nWhen the user designs in Figma, capture **reference links and export specs** (frames, component names, token values) into `design\u002Fdesign.md` and `design\u002Fmockups\u002F` rather than rendering. `\u002Fstoryboard` records and reconciles Figma designs into the PRD; it does not drive Figma.\n\n> Quick wireframe fallback: if no live surface fits (e.g. you just need a fast concept sketch from the PRD), the `project-summary` skill renders an SVG wireframe labeled \"concept — not final UI.\"\n\n## Step 6 — Design Delta → PRD Writeback (the defining mechanic)\n\nAfter sign-off, run a **Design Delta** pass: enumerate what the design surfaced that changes the plan, in these buckets:\n\n- **New stories** — screens\u002Fstates the PRD didn't enumerate.\n- **Changed acceptance criteria** — what the design made concrete or contradicted.\n- **New non-goals** — scope the design revealed should be cut (also record via `\u002Fout-of-scope`).\n- **Contract implications** — data model \u002F API \u002F auth changes the UI implies.\n- **Open questions** — resolved or newly raised by the design.\n\nPresent the delta as a transparency header (`Design delta (N changes): 1. … 2. …`), then walk each change **one at a time** using a single `AskUserQuestion` per change — the strict `decision-queue-one-at-a-time` discipline. Never batch unrelated changes into one call. (In Codex, ask one question per turn with the plain-text decision-gate fallback.)\n\nFor each confirmed change, apply it to `prd.json`:\n\n- add or edit entries in `userStories[]` (new screen → new story with acceptance criteria + `e2eTests`);\n- append `{question, answer, decidedAt, decidedBy}` to `metadata.decisions[]`;\n- update `metadata.nonGoals[]`, `metadata.dataModel`, `metadata.authModel` as confirmed;\n- set `metadata.designRef` to the design artifact (`design\u002Fdesign.md`, plus Figma URL when used);\n- set `metadata.designLocked: true`.\n\nThen **regenerate `README.md` from the updated `prd.json`** (README is always derived from the PRD, never edited in reverse). In **design-led mode** there is no `prd.json` yet — skip the writeback; the deltas live in `design\u002Fdesign.md` for `\u002Fprd` to consume.\n\n## Step 7 — Write Artifacts\n\nInto `{project_dir}`:\n\n- **`design\u002Fdesign.md`** — full-prose design rationale (full prose, no shorthand — this is a file on disk): surface(s) used, palette, type scale, spacing system, the screen\u002Fflow list, key interactions, and the design decisions with their reasoning. In design-led mode, also list the proposed screens\u002Fstories so `\u002Fprd` can pre-fill from them.\n- **`design\u002Fmockups\u002F`** — exported HTML and\u002For artboard screenshots; Figma links when that surface was used.\n- **Preview URL** — when the `html` surface was used, surface the `\u002Fdeploy` link inline.\n- **Updated `prd.json` + regenerated `README.md`** (spec-led only).\n- **Board sync** — read `companies\u002Fmanifest.yaml` for the company `board_path`; if present, set the project's `board.json` entry `status: \"design_locked\"` and bump `updated_at`. Skip silently if there's no board.\n- **Orchestrator state** — in `workspace\u002Forchestrator\u002Fstate.json`, set the project's entry to reflect design lock (e.g. note `designLocked` in the project record) so `\u002Frun-project` can read it. Skip silently if the project isn't registered yet.\n- **Journal** — open and finalize a session journal:\n\n  ```bash\n  .claude\u002Fskills\u002F_shared\u002Fjournal.sh open storyboard \"{project_dir}\"\n  ```\n\n  Record the surface used, the design decisions, and the applied deltas at `{project_dir}\u002Fjournal\u002F{ISO8601}-storyboard.md`. The active pointer is scoped to this session.\n\n## Step 8 — Handoff\n\nState the outcome in one or two plain lines and point to the next step:\n\n- **spec-led:** \"Design's locked for **{slug}** — {N} changes folded into the PRD. Ready to build with `\u002Frun-project {slug}`.\" Include the preview URL if there is one.\n- **design-led:** \"Design explored for **{slug}** — wrote `design\u002Fdesign.md`. Run `\u002Fprd {slug}` and it'll pre-fill from the design.\"\n\n## Codex Notes\n\n- Replace `Agent` sub-agents with Codex sub-agents when available, or run the same phases inline and persist to the journal \u002F `design\u002Fdesign.md` between phases.\n- No plan-mode switching; iterate inline.\n- `qmd` runs as the CLI (`qmd search\u002Fquery \"...\" --json`).\n- One decision per turn in the Design Delta pass; use the plain-text decision-gate fallback for sign-off when structured questions aren't available.\n\n## Related\n\n- Upstream: [`\u002Fbrainstorm`](..\u002Fbrainstorm\u002FSKILL.md), [`\u002Fprd`](..\u002Fprd\u002FSKILL.md), `\u002Fdeep-plan`\n- Downstream: `\u002Frun-project`, `\u002Fexecute-task`\n- Design surfaces: `\u002Frun paper-designer`, `\u002Fdeploy`, plus the `impeccable` and [`project-summary`](..\u002Fproject-summary\u002FSKILL.md) skills\n- Delta discipline: [`\u002Fdecision-queue`](..\u002Fdecision-queue\u002FSKILL.md), [`\u002Fout-of-scope`](..\u002Fout-of-scope\u002FSKILL.md)\n- Paper policies: `core\u002Fpolicies\u002Fhq-paper-mcp-before-deck-code.md`, `core\u002Fpolicies\u002Fhq-paper-mcp-sequential-agents.md`\n","# Storyboard — Lock Design Before You Build\n\nThe missing phase between planning and building. `\u002Fstoryboard` sits in the chain:\n\n```\n\u002Fbrainstorm ──► \u002Fprd | \u002Fdeep-plan ──► \u002Fstoryboard ──► \u002Frun-project\n     │                                      ▲  │\n     └────────── \u002Fstoryboard (design-led) ──┘  └─► writes deltas back into prd.json\n```\n\nIts job is **not** \"make a mockup\" — Paper MCP and designed HTML already do that. Its job is to be a **gate with a feedback loop**: explore design on the surface you prefer, then capture what the design surfaced that changes the plan and write those changes back into `prd.json` before any story executes. Locking design first means you don't build a pile of code against a spec the design was about to change.\n\n**Important:** This skill designs and revises the plan. It does not implement product code. Building happens in `\u002Frun-project`.\n\n**User's input:** $ARGUMENTS\n\n## When to Use\n\n- A PRD exists (`prd.json`) and you want to design its screens\u002Fflows and harden the spec before building.\n- A brainstorm exists but no PRD yet, and the project is UI-first — you want to explore visuals before `\u002Fprd` writes stories.\n- The design process is surfacing changes to scope, screens, or data contracts and you want those captured in the PRD, not lost in chat.\n\nFor raw canvas work with no PRD loop, use `\u002Frun paper-designer`. For production UI polish on already-built code, reach for a dedicated design-polish skill (the `impeccable` skill, where installed).\n\n## Step 1 — Parse Arguments & Resolve Project\n\nFrom `$ARGUMENTS`, extract (in order, all optional except the project):\n\n- `[company]` — if the **first word** matches a top-level key in `companies\u002Fmanifest.yaml`, set `{co}` and strip it. Otherwise `{co}` is resolved later from the project path (companies vs personal).\n- `{project}` — project slug.\n- `--surface paper|html|figma` — per-run surface override (does not change the saved default).\n- `--design-led` — force design-led mode even when a `prd.json` is present.\n\nResolve the project directory:\n\n- `companies\u002F{co}\u002Fprojects\u002F{slug}\u002F` when a company is anchored, else search both `companies\u002F*\u002Fprojects\u002F{slug}\u002F` and `personal\u002Fprojects\u002F{slug}\u002F` (use `qmd search \"{slug}\" --json` or `ls`).\n- Set `{project_dir}` to the match. If `{slug}` is ambiguous across companies, ask the user which one.\n\n## Step 2 — Detect Mode\n\nInspect `{project_dir}`:\n\n| Found | Mode | Behavior |\n|---|---|---|\n| `prd.json` exists (and no `--design-led`) | **spec-led** (default) | Design the surfaces the PRD describes, then write deltas back into `prd.json` and lock design. |\n| only `brainstorm.md` exists (or `--design-led`) | **design-led** | Explore visuals from the brainstorm; produce `design\u002Fdesign.md` that `\u002Fprd` then consumes. No `prd.json` writeback (there's nothing to write to yet). |\n| neither exists | **short-circuit** | Tell the user: \"No PRD or brainstorm found for `{slug}`. Run `\u002Fbrainstorm {slug}` or `\u002Fprd {slug}` first, or give me a one-line description and I'll sketch from that.\" Stop unless they provide a description. |\n\nAnnounce the resolved mode and project in one plain line.\n\n## Step 3 — Resolve the Design Surface (set once, forgotten forever)\n\nResolve the surface preference with the helper:\n\n```bash\n.claude\u002Fskills\u002Fstoryboard\u002Fscripts\u002Fsurface-config.sh resolve --company \"{co}\" --surface \"{flag-or-empty}\"\n```\n\nIt prints `surface=`, `figma=`, and `origin=` (one of `flag`, `company`, `global`, `unset`).\n\n- **`origin=flag|company|global`** — use the resolved surface silently. Do not re-ask. (For `global`\u002F`company`, you may note it in one line: \"Designing on **{surfaces}** (your saved default).\")\n- **`origin=unset`** — this is the **first run**. Ask **once** with a single `AskUserQuestion`:\n  - **Question:** \"Which design surface should `\u002Fstoryboard` use by default? I'll remember it and never ask again.\"\n  - **Options:** `Paper + HTML (Recommended)` · `Paper MCP only` · `Designed HTML only` · `Figma references`\n  - Then persist (default `figmaReferences: true` so Figma links are always allowed as references):\n\n    ```bash\n    .claude\u002Fskills\u002Fstoryboard\u002Fscripts\u002Fsurface-config.sh save --surface \"paper,html\" --figma true\n    ```\n\n    Save to the company override instead when the user wants this default scoped to one company: add `--company \"{co}\"`.\n\nResolution order is always: `--surface` flag → company override → personal default → first-run prompt. The saved default is global unless the user scopes it to a company.\n\n## Step 4 — Load Design Context\n\nPull the same design sources the existing design workers use — do not invent a parallel system:\n\n- **Design tokens \u002F styles:** the design-styles catalog and any bound company brand pack (`core\u002Fpackages\u002Fhq-pack-design-styles\u002F`, and `companies\u002F{co}\u002Fknowledge\u002Fdesign-styles\u002Fpacks\u002F` when a company is anchored — falls back to the shipped theme for personal projects). Use it for palette, type scale, spacing, and motion.\n- **PRD context (spec-led):** read `prd.json` — `description`, `userStories[]` (titles + acceptance criteria define the screens\u002Fstates to design), `metadata.audiences`, `metadata.designRef`, `metadata.dataModel`, `metadata.authModel`.\n- **Brainstorm context (design-led):** read `brainstorm.md` — `## Recommendation`, `## What We Don't Know`, audience, and the chosen approach.\n- **Policies:** if a company is anchored, collect its policy files except `example-policy.md`, preserve their order, and split the stable file order into consecutive chunks of at most 40 files. For each chunk, run `bash core\u002Fscripts\u002Fread-policy-frontmatter.sh {file1} {file2} ...` once with each path as a separate argument. Keep each call under 30 KB of output. The first output block belongs to the chunk’s first file argument; each later block belongs to the path named by its preceding `# --- policy-file: \u003Cpath> ---` separator. Note hard-enforcement policies. When designing on Paper, the Paper MCP policies apply (see Step 5).\n\n## Step 5 — Design Iteration\n\nIterate on the resolved surface(s). Storyboard the screens\u002Fflows the PRD or brainstorm describes, share for feedback, and revise. Keep iterating until the user signs off on the design.\n\n### Surface: `paper` (Paper MCP)\n\nBest for multi-screen flows and storyboards. Follow the `paper-designer` worker patterns and the Paper MCP policies:\n\n- **Storyboard in Paper before writing component code** (`hq-paper-mcp-before-deck-code`, hard).\n- **Run Paper MCP agents sequentially — never in parallel** (`hq-paper-mcp-sequential-agents`, hard). Paper operates on a shared canvas; concurrent `write_html` \u002F `create_artboard` calls collide.\n- Load the Paper guide once (`get_guide`), `get_basic_info` for artboards, then build one visual group per `write_html`. Review with `get_screenshot` after meaningful changes; `finish_working_on_nodes` when done.\n- Export artboard screenshots into `design\u002Fmockups\u002F` and note artboard refs (no raw node IDs in user-facing output).\n\nIf Paper Desktop isn't running \u002F no `.paper` file is open, say so plainly and offer the `html` surface as a fallback rather than failing.\n\n### Surface: `html` (designed HTML)\n\nBest for web mockups and a shareable link. Generate designed HTML using the design tokens from Step 4, then preview and share via `\u002Fdeploy` (its local preview always runs; surface the preview URL inline in one plain line). Save the HTML into `design\u002Fmockups\u002F`.\n\n### Surface: `figma`\n\nWhen the user designs in Figma, capture **reference links and export specs** (frames, component names, token values) into `design\u002Fdesign.md` and `design\u002Fmockups\u002F` rather than rendering. `\u002Fstoryboard` records and reconciles Figma designs into the PRD; it does not drive Figma.\n\n> Quick wireframe fallback: if no live surface fits (e.g. you just need a fast concept sketch from the PRD), the `project-summary` skill renders an SVG wireframe labeled \"concept — not final UI.\"\n\n## Step 6 — Design Delta → PRD Writeback (the defining mechanic)\n\nAfter sign-off, run a **Design Delta** pass: enumerate what the design surfaced that changes the plan, in these buckets:\n\n- **New stories** — screens\u002Fstates the PRD didn't enumerate.\n- **Changed acceptance criteria** — what the design made concrete or contradicted.\n- **New non-goals** — scope the design revealed should be cut (also record via `\u002Fout-of-scope`).\n- **Contract implications** — data model \u002F API \u002F auth changes the UI implies.\n- **Open questions** — resolved or newly raised by the design.\n\nPresent the delta as a transparency header (`Design delta (N changes): 1. … 2. …`), then walk each change **one at a time** using a single `AskUserQuestion` per change — the strict `decision-queue-one-at-a-time` discipline. Never batch unrelated changes into one call. (In Codex, ask one question per turn with the plain-text decision-gate fallback.)\n\nFor each confirmed change, apply it to `prd.json`:\n\n- add or edit entries in `userStories[]` (new screen → new story with acceptance criteria + `e2eTests`);\n- append `{question, answer, decidedAt, decidedBy}` to `metadata.decisions[]`;\n- update `metadata.nonGoals[]`, `metadata.dataModel`, `metadata.authModel` as confirmed;\n- set `metadata.designRef` to the design artifact (`design\u002Fdesign.md`, plus Figma URL when used);\n- set `metadata.designLocked: true`.\n\nThen **regenerate `README.md` from the updated `prd.json`** (README is always derived from the PRD, never edited in reverse). In **design-led mode** there is no `prd.json` yet — skip the writeback; the deltas live in `design\u002Fdesign.md` for `\u002Fprd` to consume.\n\n## Step 7 — Write Artifacts\n\nInto `{project_dir}`:\n\n- **`design\u002Fdesign.md`** — full-prose design rationale (full prose, no shorthand — this is a file on disk): surface(s) used, palette, type scale, spacing system, the screen\u002Fflow list, key interactions, and the design decisions with their reasoning. In design-led mode, also list the proposed screens\u002Fstories so `\u002Fprd` can pre-fill from them.\n- **`design\u002Fmockups\u002F`** — exported HTML and\u002For artboard screenshots; Figma links when that surface was used.\n- **Preview URL** — when the `html` surface was used, surface the `\u002Fdeploy` link inline.\n- **Updated `prd.json` + regenerated `README.md`** (spec-led only).\n- **Board sync** — read `companies\u002Fmanifest.yaml` for the company `board_path`; if present, set the project's `board.json` entry `status: \"design_locked\"` and bump `updated_at`. Skip silently if there's no board.\n- **Orchestrator state** — in `workspace\u002Forchestrator\u002Fstate.json`, set the project's entry to reflect design lock (e.g. note `designLocked` in the project record) so `\u002Frun-project` can read it. Skip silently if the project isn't registered yet.\n- **Journal** — open and finalize a session journal:\n\n  ```bash\n  .claude\u002Fskills\u002F_shared\u002Fjournal.sh open storyboard \"{project_dir}\"\n  ```\n\n  Record the surface used, the design decisions, and the applied deltas at `{project_dir}\u002Fjournal\u002F{ISO8601}-storyboard.md`. The active pointer is scoped to this session.\n\n## Step 8 — Handoff\n\nState the outcome in one or two plain lines and point to the next step:\n\n- **spec-led:** \"Design's locked for **{slug}** — {N} changes folded into the PRD. Ready to build with `\u002Frun-project {slug}`.\" Include the preview URL if there is one.\n- **design-led:** \"Design explored for **{slug}** — wrote `design\u002Fdesign.md`. Run `\u002Fprd {slug}` and it'll pre-fill from the design.\"\n\n## Codex Notes\n\n- Replace `Agent` sub-agents with Codex sub-agents when available, or run the same phases inline and persist to the journal \u002F `design\u002Fdesign.md` between phases.\n- No plan-mode switching; iterate inline.\n- `qmd` runs as the CLI (`qmd search\u002Fquery \"...\" --json`).\n- One decision per turn in the Design Delta pass; use the plain-text decision-gate fallback for sign-off when structured questions aren't available.\n\n## Related\n\n- Upstream: [`\u002Fbrainstorm`](..\u002Fbrainstorm\u002FSKILL.md), [`\u002Fprd`](..\u002Fprd\u002FSKILL.md), `\u002Fdeep-plan`\n- Downstream: `\u002Frun-project`, `\u002Fexecute-task`\n- Design surfaces: `\u002Frun paper-designer`, `\u002Fdeploy`, plus the `impeccable` and [`project-summary`](..\u002Fproject-summary\u002FSKILL.md) skills\n- Delta discipline: [`\u002Fdecision-queue`](..\u002Fdecision-queue\u002FSKILL.md), [`\u002Fout-of-scope`](..\u002Fout-of-scope\u002FSKILL.md)\n- Paper policies: `core\u002Fpolicies\u002Fhq-paper-mcp-before-deck-code.md`, `core\u002Fpolicies\u002Fhq-paper-mcp-sequential-agents.md`\n",{"name":5,"description":7,"allowed-tools":62,"argument-hint":63},"Read, Write, Edit, Grep, Glob, Bash(git:*), Bash(qmd:*), Bash(ls:*), Bash(date:*), Bash(mkdir:*), Bash(.claude\u002Fskills\u002Fstoryboard\u002Fscripts\u002Fsurface-config.sh:*), Bash(.claude\u002Fskills\u002F_shared\u002Fjournal.sh:*), Bash, AskUserQuestion, Agent, Bash(bash core\u002Fscripts\u002Fread-policy-frontmatter.sh:*)","[company] {project} [--surface paper|html|figma] [--design-led]","main","205cf61728a27ef15e9153aa38df5856fc8d82f5",".claude\u002Fskills\u002Fstoryboard",18,"https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core","https:\u002F\u002Fgithub.com\u002Findigoai-us","https:\u002F\u002Fhqforwork.com\u002F","The AI Context Layer for Teams","2026-11-12 06:53:38",{"source":8,"skillName":5,"commands":74,"prompt":84,"zipAvailable":85},[75,78,81],{"tool":76,"command":77},"npx","npx skills add indigoai-us\u002Fhq-core --skill storyboard",{"tool":79,"command":80},"bunx","bunx skills add indigoai-us\u002Fhq-core --skill storyboard",{"tool":82,"command":83},"pnpm","pnpm dlx skills add indigoai-us\u002Fhq-core --skill storyboard","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fstoryboard\u002FSKILL.md",true,[87,93],{"path":88,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":91,"sourceHtmlUrl":92},"agents\u002Fopenai.yaml","REFERENCE","参考文档",123,"https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fstoryboard\u002Fagents\u002Fopenai.yaml",{"path":94,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":97,"sourceHtmlUrl":98},"scripts\u002Fsurface-config.sh","SCRIPT","脚本",3726,"https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fstoryboard\u002Fscripts\u002Fsurface-config.sh",[100,118,146,170,181,191],{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":57},"01M71E4MQ04WPK1EVDS7VKJ3E8","social-graphic","Generate 1080x1080 HTML social graphics for HQ update posts.","https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002Fcore\u002Fworkers\u002Fpublic\u002Fsocial-strategist\u002Fskills\u002Fsocial-graphic\u002FSKILL.md",[],[107,108,47,109,40,42,43,110,111,112,113,114,115,116,117],"social","social graphic","html","update","generate","graphics","browser","open","agent-browser","for","posts",{"skillNo":119,"name":115,"nameZh":6,"description":120,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":129,"publishedAt":57},"01M71E4H33K4P5H5M7ENPTMFSC","Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to \"open a website\", \"fill out a form\", \"click a button\", \"take a screenshot\", \"scrape data from a page\", \"test this web app\", \"login to a site\", \"automate browser actions\", or any task requiring programmatic web interaction.","https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002Fcore\u002Fworkers\u002Fpublic\u002Fqa-tester\u002Fskills\u002Fagent-browser\u002FSKILL.md",[123,126],{"categoryNo":124,"categoryName":125,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":127,"categoryName":128,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[130,113,131,132,133,134,47,135,136,137,138,139,114,140,115,141,142,143,144,145],"agent browser","click","ai agents","app","scrape","when","apps","actions","extracting","take a screenshot","testing","programmatic","browser automation","website","cli","interaction",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":152,"publishedAt":57},"01M71E4FDBD7J8Y45JJ9KMMYGN","work-mesh","Work Mesh Live — automatic presence via hq mesh daemon; context reconcile\u002Forganize; manual session task-status, blocked, and note only.","https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fwork-mesh\u002FSKILL.md",[],[153,154,155,47,156,157,158,159,160,161,162,163,164,165,43,166,167,168,169],"work mesh","work","mesh","status","context","note","live","presence","automatic","reconcile","only","organize","task","session","manual","daemon","via",{"skillNo":171,"name":172,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":176,"publishedAt":57},"01M71E4EGHNAAGWAPV6KGBMQ9W","review","Parity worker review skill (materialization fixture).","https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002Fcore\u002Fscripts\u002Ftests\u002Ffixtures\u002Fagent-session\u002Fworker-materialization\u002Fparity-worker\u002Fskills\u002Freview\u002FSKILL.md",[],[172,177,178,179,180],"review skill","fixture","parity","worker",{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":187,"publishedAt":57},"01M71E4D1FZDJPDC15DRERKX8Y","run","Run or list HQ workers (parity fixture).","https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002Fcore\u002Fscripts\u002Ftests\u002Ffixtures\u002Fagent-session\u002Fskills\u002Frun\u002FSKILL.md",[],[183,188,189,179,190,178],"parity fixture","workers","list",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":197,"publishedAt":57},"01M71E4BF4MV5SEWZJZ4T1QPQW","handoff","Preserve session state for a follow-up agent (parity fixture).","https:\u002F\u002Fgithub.com\u002Findigoai-us\u002Fhq-core\u002Fblob\u002Fmain\u002Fcore\u002Fscripts\u002Ftests\u002Ffixtures\u002Fagent-session\u002Fskills\u002Fhandoff\u002FSKILL.md",[],[193,188,198,199,166,200,116,179,201,202,178],"up","preserve","session state","follow-up","state"]