[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DC8J3BSET4AFXBJ89KTQRF":3,"skill-same:01M6DC8J3BSET4AFXBJ89KTQRF":79},{"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":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":59,"commitSha":60,"skillDirectory":61,"forksCount":14,"repositoryHtmlUrl":62,"repositoryHomepageUrl":6,"ownerHtmlUrl":63,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":64,"install":65,"resources":78},"01M6DC8J3BSET4AFXBJ89KTQRF","design-studio",null,"ONE entry to the whole design pipeline over a running app (Reframe, momentstudio, WebCoder, bilbo) — the mode-routed successor to design-review-loop. Runs the full TCR design-review loop (8 gates, G0 PRIME to G7 VERIFY, revert-gate) plus a thin mode router to jump to one stage — direct (scope, define good, pick a direction, palette\u002Ffont), audit (a11y\u002Fcontrast\u002Fdead-button UI audit, visual review), mirror (code-to-canvas transpose to Figma), critique (design-critique persona panel), iterate (Figma branch, design tokens), implement (Figma-to-code), verify (re-audit delta), loop (the whole pass), drive (drive\u002Fpoint\u002Finteract the live app, to ui-drive), session (interactive restyle of a live element, to design-studio-session). Absorbs the folded design skills' triggers — design review, design system audit, frontend design direction, visual review, mirror to Figma, implement design, drive the app, interactive tweak. NOT for a design DOCUMENT (metaswarm review-design) nor rubric math (ui-audit, critique-panel).","Prekzursil\u002Fagent-skills-toolchain","Prekzursil","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F54636077?v=4","01M6DACZ1PCQHD99SCR1YXG28B","Andrei Mihai Visalon","01M6DACZ670WZF535V3WYYSS4Z",0,"MIT","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fci\u002Fskills-allowlist\u002Fdesign-studio\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"design","design studio","reframe","frontend","frontend design direction","app","good","router","math","branch","pick","loop","persona","critique","pipeline","figma","code","canvas","review","frontend design","2026-11-10 10:12:30",false,"---\nname: design-studio\ndescription: ONE entry to the whole design pipeline over a running app (Reframe, momentstudio, WebCoder, bilbo) — the mode-routed successor to design-review-loop. Runs the full TCR design-review loop (8 gates, G0 PRIME to G7 VERIFY, revert-gate) plus a thin mode router to jump to one stage — direct (scope, define good, pick a direction, palette\u002Ffont), audit (a11y\u002Fcontrast\u002Fdead-button UI audit, visual review), mirror (code-to-canvas transpose to Figma), critique (design-critique persona panel), iterate (Figma branch, design tokens), implement (Figma-to-code), verify (re-audit delta), loop (the whole pass), drive (drive\u002Fpoint\u002Finteract the live app, to ui-drive), session (interactive restyle of a live element, to design-studio-session). Absorbs the folded design skills' triggers — design review, design system audit, frontend design direction, visual review, mirror to Figma, implement design, drive the app, interactive tweak. NOT for a design DOCUMENT (metaswarm review-design) nor rubric math (ui-audit, critique-panel).\nmetadata:\n  origin: user\n---\n\n\u003C!-- origin: user (design-SOTA research, 2026-06-30); RENAMED from design-review-loop -> design-studio + thin mode router (gem-hunt 2026-07-12, item C1, evidence MASTER C.1 \u002F UIUX C.1). Implements DESIGN-WORKFLOW.md §0\u002F§2\u002F§3 (the 8 gates + per-gate method + the transpose->discuss->revert micro-loop), DESIGN-SKILLS-AND-EVAL.md §1.2 (the orchestrator row) + §3 (engagement discipline, revert is first-class), FIGMA-SETUP.md (G2\u002FG5\u002FG6 Figma surface). -->\n\n\n# design-studio Skill\n\nThe **design pipeline entry point** — the ONE named surface for the whole design workflow,\nand the **TCR Loop orchestrator** underneath it. `design-studio` is the renamed, mode-routed\nsuccessor to `design-review-loop`: it drives a design-review pass as **8 sequenced gates**\nAND exposes a **thin mode router** so you can jump straight to a single stage instead of the\nwhole loop. **TCR = Transpose · Critique · Reconcile** — the three verbs that ARE the\n*transpose → discuss → revert* motion (gates G2 → G3 → G6).\n\n**Skill location:** `~\u002F.claude\u002Fskills\u002Fdesign-studio\u002F`\n\n> Implements `DESIGN-WORKFLOW.md §0` (the 8-gate headline + table), `§2` (each gate's\n> canonical named method + standard questions), `§3` (the transpose→discuss→revert\n> micro-loop); `DESIGN-SKILLS-AND-EVAL.md §1.2` (the orchestrator row — *keep it thin; it\n> orchestrates, the gates live in the leaf skills*) + `§3` (engagement discipline). Figma\n> surface (G2\u002FG5\u002FG6): `FIGMA-SETUP.md`. Consolidation rationale: UIUX-CONSOLIDATION §1.1.\n\n---\n\n## The unified entry — the mode router (the ONE surface)\n\n`design-studio` is the single entry to the whole design pipeline. Invoke it as a skill, or\ndrive the harness with a **mode**:\n\n```\n\u002Fdesign-studio \u003Cmode> --app \u003Capp> [--flow \u003Cpath>] [--out \u003Cdir>]\n  modes: direct | audit | mirror | critique | iterate | implement | verify | loop | drive | session\n```\n\n**Why one surface (UIUX C.1):** six overlapping design skills collapse to one discovery\nsurface; the leaves stay lazy in the `~\u002F.agents\u002Fskills` vault behind the semantic router\n(frees description-budget slots). **Do NOT invoke `\u002Fdesign-review`** — that name collides\nwith metaswarm's `review-design`, which reviews design *documents*, a different thing.\n\n### The router table — mode → gate → leaf → absorbed trigger vocab\n\n| Mode | Jumps to | Runs (leaf skill \u002F harness) | Absorbs the trigger vocab of | Emits |\n|---|---|---|---|---|\n| `direct` | G0 PRIME + G4 DIRECT | `ui-ux-pro-max` · `frontend-design-direction` (prose) | \"design direction\", \"define good\", \"pick a direction\", \"style \u002F palette \u002F font\", \"make interfaces feel better\" | scope + persona + one committed direction |\n| `audit` | G1 AUDIT (+ G7 re-audit) | `ui-audit` (Track-A numbers + Track-B VLM) | \"audit the UI\", \"a11y \u002F contrast check\", \"dead buttons\", \"visual review\", \"screenshot the screens\" (metaswarm visual-review) | severity-ranked `audit.json` + shots |\n| `mirror` | G2 TRANSPOSE | `transpose-to-figma` (+ `use_figma` surgical) · `design-sync` (alt target) | \"transpose to figma\", \"code to canvas\", \"mirror the UI to figma \u002F claude design\" | `transpose-record.json` + `mirror-manifest.json` |\n| `critique` | G3 CRITIQUE | `critique-panel` | \"design critique\", \"persona panel\", \"I like \u002F I wish \u002F what if\", \"slop check\" | typed, severity-rated verdict list |\n| `iterate` | G5 ITERATE | `figma` (`use_figma`) · `design-tokens-pipeline` | \"iterate in figma\", \"design tokens\", \"figma branch\" | node-diff + token-diff on a branch |\n| `implement` | G6 RECONCILE | `figma-implement-design` + revert-gate | \"implement the design\", \"figma to code\", \"build from figma\" | code diff (kept only if it passes) |\n| `verify` | G7 VERIFY | re-run `ui-audit` + `\u002Fself-reflect` + basic-memory | \"verify the design change\", \"did the score move\", \"re-audit\" | before\u002Fafter rubric delta + durable decisions |\n| `loop` | G0 → … → G7 (full) | the state machine (`init`\u002F`gate`\u002F`advance`\u002F`revert`) | \"design review\", \"TCR loop\", \"run the whole design pass\" | `loop-state.json` across all gates |\n| `drive` | — (routes OUT) | **`ui-drive`** skill | \"drive the app\", \"point at an element\", \"interact with the running app\", \"preview a CSS tweak\" | drive-ledger + proposed patch |\n| `session` | — (routes OUT) | **`design-studio-session`** skill | \"interactive modify\", \"restyle a live element\", \"tweak the UI live\", \"micro-commit a style\" | scoped micro-commit + delta re-audit |\n\n### Two modes route OUT of this skill (not gates)\n\n`drive` and `session` are **not** loop gates — they are the low-level app-driving and\ninteractive-modify capabilities. The router **hands off** rather than running a gate:\n\n- `design-studio drive` → invoke the **`ui-drive`** skill (attach \u002F point \u002F preview \u002F apply\n  on the vendored `playwright-core@1.61.1`; never edits app source).\n- `design-studio session` → invoke the **`design-studio-session`** skill (overlay-preview →\n  element→source pick → scoped micro-commit → incremental re-audit → the SAME\n  `revertDecision()` revert-gate).\n\nBoth reuse this skill's `loop-state.json`, the DESIGN-EVAL rubric, and the revert-gate —\nthey do **not** fork a second pipeline (that overlap is exactly what the consolidation kills).\n\n### How an in-loop mode maps to the harness\n\nThe eight in-loop modes are **thin jumps into the existing state machine** — a mode is\n`init` (if no pass yet) + `gate --gate \u003CG>` for that mode's gate + run the named leaf +\n`advance`:\n\n| Mode | Harness call |\n|---|---|\n| `loop` | `node loop.mjs init …` then `gate` → run leaf → `advance` (G0→G7→G1) |\n| `direct` | `node loop.mjs gate --gate G0` (and `--gate G4`) |\n| `audit` | `node loop.mjs gate --gate G1` (or `--gate G7`) |\n| `mirror` | `node loop.mjs gate --gate G2` |\n| `critique` | `node loop.mjs gate --gate G3` |\n| `iterate` | `node loop.mjs gate --gate G5` |\n| `implement` | `node loop.mjs gate --gate G6` then `node loop.mjs revert …` |\n| `verify` | `node loop.mjs gate --gate G7` |\n| `drive` | → `ui-drive` skill (no gate) |\n| `session` | → `design-studio-session` skill (no gate) |\n\n> **Implementation note (honest):** the mode router is a **documentation-level dispatch**\n> today — the SKILL tells you which gate\u002Fleaf a mode maps to, and you invoke the existing\n> `loop.mjs` subcommands (`init`\u002F`gate`\u002F`advance`\u002F`revert`) accordingly. A native\n> `node loop.mjs mode \u003Cmode>` sugar subcommand is a ~40-LOC follow-on (UIUX C.1) that only\n> wraps these same calls; it is **out of scope for this rename**. The loop-state terminal\n> marker id-prefix remains `design-review-\u003Cid>` (emitted by the unchanged `loop.mjs`) for\n> loop-state backward-compat — the *entry \u002F skill name* is `design-studio`.\n\n---\n\n## Overview — keep the orchestrator THIN\n\nThis skill **sequences** gates and **holds the question banks + the revert-gate**. It does\n**not** re-implement audit, critique, transpose, or implementation — those are leaf skills.\nThe harness (`loop.mjs`) is **pure plumbing**: it never calls a model, never measures\npixels, never edits app source. It tracks *which gate you are on*, prints that gate's\ncanonical method + leaf skill + standard questions, advances with ordering checks, and runs\nthe **G6 revert decision** (`DESIGN-SKILLS-AND-EVAL.md §1.2`).\n\n**The honesty note (cite it):** the *building-block methods* are canonical and\nprimary-sourced (Nielsen's 10 heuristics, NN\u002Fg heuristic-evaluation + design-critique\nrituals, CDS-30, severity 0–4, Figma branching\u002FDev Mode\u002FCode Connect, W3C DTCG tokens).\nThe **8-gate packaging and the \"TCR\" name are a synthesis** — there is no single\nindustry-blessed \"design-review loop\" product; the SOTA is the *assembly* of named\nprimitives (`DESIGN-WORKFLOW.md` preamble).\n\n---\n\n## When to use\n\n- You want **one entry** to the design pipeline — pick a `mode` (above) for a single stage,\n  or `loop` to run the whole G0–G7 pass on one flow of Reframe \u002F momentstudio \u002F WebCoder \u002F\n  bilbo.\n- You need a **systematic, named, repeatable** pass (severity 0–4 + Nielsen crit + CDS-30)\n  so scores are comparable app-to-app and cycle-to-cycle — that comparability *is* the\n  \"systematic, named\" property (`DESIGN-WORKFLOW.md §4`).\n- You want the **transpose → discuss → revert** motion driven end-to-end with a real\n  revert-gate, not vibes.\n- You want to **drive** the live app \u002F **point** at an element (`drive` → `ui-drive`) or\n  **interactively restyle** a live element with micro-commits (`session` →\n  `design-studio-session`).\n\n**When NOT to use:**\n- Reviewing a design **document** (a spec\u002FPRD) → that is metaswarm `review-design`\n  (`\u002Freview-design`), NOT this skill.\n- A single leaf gate in deep isolation → you may call that skill directly (`ui-audit`,\n  `critique-panel`, `transpose-to-figma`, `figma-implement-design`) — but the `mode` router\n  is the preferred surface so the artifact contract stays unified.\n- The eval-rubric math (per-dimension 0–4, weighted composite, critical-error override) →\n  that lives in `ui-audit` Track-B + `critique-panel` (`DESIGN-SKILLS-AND-EVAL.md §2`).\n\n---\n\n## The headline — the 8 named gates\n\n> **G0 PRIME → G1 AUDIT → G2 TRANSPOSE → G3 CRITIQUE → G4 DIRECT → G5 ITERATE →\n> G6 RECONCILE → G7 VERIFY → (back to G1)**\n\n- **Transpose edge** = G2 (and the G6 return capture).\n- **Discuss edge** = G3 (+ G4 decide).\n- **Revert edge** = G6 (the revert-gate: every apply-back is a reversible commit; revert if\n  any tracked axis regresses).\n\nRun cheaply-automatable gates (G1 audit, G7 verify) continuously; run G3 critique per\nfeature; run G5–G6 per approved change-set. Cadence borrows NN\u002Fg's 1-hour-critique rhythm —\n**narrow scope per pass, do not boil the ocean** (`DESIGN-WORKFLOW.md §0`).\n\n| Gate | Name | Mode | Canonical named method | Leaf skill \u002F tool (invoked) | Emits |\n|---|---|---|---|---|---|\n| **G0** | **PRIME** | `direct` | scope-setting + source-of-truth decision (loop altitude) | `prime` · `design-system` (Mode 2) · `design-sync` | scope + persona + \"truth: repo or Figma?\" + altitude |\n| **G1** | **AUDIT** | `audit` | NN\u002Fg Heuristic Evaluation (Prepare→Evaluate→Consolidate); Nielsen 10 + severity 0–4 | **`ui-audit`** (Track-A numbers + Track-B VLM) | severity-ranked, de-duped findings |\n| **G2** | **TRANSPOSE** | `mirror` | code→Figma capture (\"Code to Canvas\"), altitude-selected | **`transpose-to-figma`** | editable Figma frames w\u002F Code Connect IDs + token refs |\n| **G3** | **CRITIQUE** | `critique` | NN\u002Fg Design Critique + CDS-30 + \"I Like \u002F I Wish \u002F What If\" | **`critique-panel`** (named personas) | typed, severity-rated verdict list |\n| **G4** | **DIRECT** | `direct` | severity-prioritized decision; define \"good\" (Judge\u002FEvaluate\u002FIterate) | `frontend-design-direction` — **human decides** | one committed direction + explicit out-of-scope |\n| **G5** | **ITERATE** | `iterate` | Figma **branch** (safe iterate-then-revert); Tokens Studio for tokens | `figma` (`use_figma`) · `design-tokens-pipeline` | Figma node-diff + token-diff on a branch |\n| **G6** | **RECONCILE** | `implement` | Dev Mode + **Code Connect**; token PR; **the revert-gate** | **`figma-implement-design`** + `verification-before-completion` | code diff on a branch — kept only if it passes |\n| **G7** | **VERIFY** | `verify` | re-audit delta; capture learnings (no self-certify) | re-run `ui-audit` · `\u002Fself-reflect` + basic-memory | before\u002Fafter rubric delta + durable decisions |\n\n---\n\n## The single load-bearing truth: the round-trip is LOSSY\n\n**\"code → Figma → code\" is not byte-preserving** (`DESIGN-WORKFLOW.md §1`). The **only**\nthings that round-trip cleanly: **W3C DTCG design tokens** and **Code-Connected\ncomponents**. Design→code transfers visual structure; **business logic, state, API calls do\nNOT.** Code→design captures rendering; **React state, routing, integrations vanish.**\n\n**Consequence — why \"revert\" is a first-class gate (G6):** treat every apply-back as a\n**reversible commit on a branch**; diff for logic regressions; **keep only the visual delta,\nrevert anything that re-touched state\u002Frouting\u002Fdata.** Figma is the source of truth for\n*visual* decisions only. The harness encodes this in the `revert` subcommand.\n\n---\n\n## Driving the loop (the harness)\n\n`loop.mjs` keeps a `loop-state.json` so a pass survives across turns\u002Fcompaction. Every\nsubcommand prints a terminal-state marker (`AGENTS.md §4`).\n\n```powershell\n$DR = \"$HOME\u002F.claude\u002Fskills\u002Fdesign-studio\u002Floop.mjs\"\n$OUT = \".\u002Fdr-out\"\n\n# G0 — start a pass (records scope + source-of-truth + altitude; opens at G0 PRIME)\nnode $DR init --app reframe --flow \u002Feditor --truth repo --altitude system --out $OUT\n#   -> prints the G0 question bank; SUCCESS:design-review-\u003Cid>-G0\n\n# Show the CURRENT gate's method + leaf skill + standard questions (the next thing to run)\nnode $DR gate --out $OUT\n#   or a specific gate:  node $DR gate --gate G3 --out $OUT\n\n# After you've actually run the gate's leaf skill, advance (ordering-checked; G7 -> G1)\nnode $DR advance --out $OUT\n\n# Where am I?\nnode $DR status --out $OUT\n\n# Just dump a gate's standard question bank (no state needed)\nnode $DR questions --gate G1\n```\n\n**The orchestration contract:** `gate` tells you *which leaf skill to invoke and what to\nask*; **you run that leaf skill**; then `advance`. The orchestrator never does the gate's\nwork — it sequences and re-anchors. (A `mode` maps to one or two of these calls — see the\nrouter table above.)\n\n---\n\n## The gates in detail — method + standard questions\n\nEach gate's canonical named method and standard question bank are encoded in `gates.mjs`\nand printed by `loop.mjs gate` \u002F `questions`. Verbatim intent from `DESIGN-WORKFLOW.md §2`:\n\n### G0 — PRIME (scope + source-of-truth) — mode `direct`\n**Method:** scope-setting + the source-of-truth decision; pick **loop altitude** — *system\nloop* (components + tokens exist → bind to them) vs *audit loop* (greenfield → extract\ntokens first). The lens **rewards maturity; it does not manufacture it.**\n**Standard questions:** Who is the user and the top job in this flow? · Where is the source\nof truth — repo or Figma library? · Which ONE flow is in scope this pass? · System loop or\naudit loop?\n**Invoke:** `prime` \u002F `design-system` (Mode 2 Visual Audit) · `design-sync` (`@dsCard`\nrepo→Claude Design).\n\n### G1 — AUDIT (find problems, objectively) — mode `audit`\n**Method:** NN\u002Fg Heuristic Evaluation (Prepare→Evaluate→Consolidate); Nielsen 10 +\nseverity 0–4 (severity = frequency × impact × persistence). **VLMs are a recall amplifier,\nNOT a judge** (~21% expert overlap, ~24% false-positive).\n**Standard questions:** the Nielsen-10 yes\u002Fno gates · the a11y gate (AA contrast, focus\norder, ≥44px\u002F48dp targets, alt text) · the token gate (every value bound, no raw hex) ·\nseverity per violation · functional-broken vs sub-optimal.\n**Invoke:** **`ui-audit`** — Track-A deterministic numbers + Track-B VLM critique →\n`audit.json` + screenshots.\n\n### G2 — TRANSPOSE (code → Figma) — *the transpose edge* — mode `mirror`\n**Method:** \"Code to Canvas\" capture, **altitude-selected** — `story.to.design` (system\nloop, low drift) · `generate_figma_design` (live\u002Flocalhost, medium drift) · `html.to.design`\n(audit record only, high drift). Lift the running UI onto canvas so you discuss **reality,\nnot a stale design file**.\n**Standard questions:** Does the imported frame match the live render (incl. **real states**:\nempty\u002Ferror\u002Floading)? · Which screens carry the experience? · Do nodes carry Code Connect\nIDs + token refs (system loop) or are they flat (audit only)?\n**Invoke:** **`transpose-to-figma`** (the altitude selector + driver).\n\n### G3 — CRITIQUE (discuss) — *the discuss edge* — mode `critique`\n**Method:** NN\u002Fg Design Critique ritual — **silent individual feedback first** (kills\nloudest-voice capture) → **\"I Like \u002F I Wish \u002F What If\"** → **CDS-30 across 6 perspectives**\n(User · Environment · Interface · Components · Design · Visual Marks — *go broad before\npixels*) → **ask \"why?\"** on every reaction. Optional multi-agent persona panel\n(Nielsen \u002F Refactoring-UI \u002F WCAG \u002F Brand-consistency). **The panel TRIAGES; the human is\nthe decider.** Enforce the **quota** (≥2 wins + 1 fix per screen) even solo.\n**Standard questions:** the framing bank · I Like (protect) \u002F I Wish (heuristic # + sev) \u002F\nWhat If (alternative) · the CDS-30 6-perspective bank · \"ask why\".\n**Invoke:** **`critique-panel`** → typed, severity-rated, deduped + ranked verdict.\n\n### G4 — DIRECT (converge \u002F decide) — mode `direct`\n**Method:** severity-prioritized decision; **define \"good\" before building**\n(Judge\u002FEvaluate\u002FIterate); Impact\u002FEffort or RICE. **DEFER DIRECTION TO THE HUMAN** — VLMs are\nnear-random at *picking* the better design (WiserUI-Bench); agents enumerate + rank, the\nuser chooses (`DESIGN-SKILLS-AND-EVAL.md §3.2`).\n**Standard questions:** must-fix sev-3\u002F4 vs nice-to-have sev-1\u002F2? · which ONE direction? ·\nthe success criterion (how will we *know* it is better)? · what is explicitly out of scope?\n**Invoke:** `frontend-design-direction` \u002F `make-interfaces-feel-better` — **human decides**.\n\n### G5 — ITERATE (in Figma, on a branch) — mode `iterate`\n**Method:** open a **Figma branch** off `main` (the safe iterate-then-revert mechanism);\napply the agreed direction; keep `main` untouched. Token changes go through **Tokens Studio**\n(structural, not one-off pixel tweaks). Re-critique on the branch.\n**Standard questions:** Does the branch resolve sev-3\u002F4 **without new violations**? ·\npage-grouped diff vs `main` — every change intentional? · on-system? · **merge, or discard\nthe branch (= the clean revert) and re-branch?**\n**Invoke:** `figma` (`use_figma`) · `design-tokens-pipeline` \u002F Tokens Studio.\n\n### G6 — RECONCILE (Figma → code) — *the revert edge* — mode `implement`\n**Method:** Dev Mode + **Code Connect** so generated code **reuses your real components**;\nsystem-wide changes ride the **token PR**. **THE REVERT-GATE:** commit the variant *before*\nmeasuring → re-run G1 audit + a11y\u002Flint + your test\u002Fcoverage gate → **auto-revert if any\ntracked axis regresses** *or* the round-trip re-touched state\u002Frouting\u002Fdata\n(`verification-before-completion` \u002F `autoresearch` discipline).\n**Standard questions:** 1:1 parity vs intent? · tokens\u002Fcomponents reused (Code Connect), no\nnew hardcoded values \u002F icon packs? · all states implemented? · did the round-trip touch\nstate\u002Frouting\u002Fdata — kept or reverted? · did contrast\u002Ffocus\u002Ftoken gates stay green and the\naudit score improve (or not worsen)?\n**Invoke:** **`figma-implement-design`** + `verification-before-completion`; then the harness:\n```powershell\nnode $DR revert --before 62 --after 81 --critical-before 2 --critical-after 0 --out $OUT\n#   -> KEEP   ; SUCCESS:design-review-\u003Cid>-G6\nnode $DR revert --before 62 --after 81 --logic-touched --out $OUT\n#   -> REVERT ; FAILED:design-review-\u003Cid>-G6  (logic touch not approved)\n# flags: --critical-before\u002F--critical-after N | --gates-red | --tests-red | --logic-touched | --logic-approved\n```\n\n### G7 — VERIFY (+ capture) — mode `verify`\n**Method:** re-audit the shipped build; confirm the **delta moved** (per-dimension Δ on 0–4;\ncritical-error burndown). **Do not self-certify** — peer-review (≥1–2 reviewers). Capture\ndurable decisions via `\u002Fself-reflect` + basic-memory so the next loop does not re-litigate.\nThen return to G1.\n**Standard questions:** Did the change move the rubric score? · any regression? · does the\nlive app match the Figma intent? · what design decisions are now durable?\n**Invoke:** re-run `ui-audit` (G1) · `\u002Fself-reflect` + basic-memory.\n\n---\n\n## The G6 revert-gate — the decision logic (load-bearing)\n\n`revertDecision()` in `gates.mjs` is the named, testable revert rule. An apply-back is\n**KEPT** only when **every** tracked axis holds or improves **and** no logic was re-touched\n(unless explicitly approved); otherwise **REVERT**:\n\n| Tracked axis | KEEP requires | REVERT trigger |\n|---|---|---|\n| composite audit score (0–100) | `after >= before` | composite dropped |\n| critical errors | `criticalAfter \u003C= criticalBefore` | a new critical appeared |\n| contrast \u002F focus \u002F token gate | green | red |\n| tests \u002F coverage | green | red |\n| state \u002F routing \u002F data touch | not touched, OR explicitly approved | unapproved logic touch (round-trip is lossy for logic) |\n\n> **The point** (`DESIGN-WORKFLOW.md §3`): the **delta between the before-audit and the\n> after-audit IS the evidence** the change improved, not moved laterally. A redesign that\n> \"feels better\" but moves no dimension is suspect. In Figma the literal revert = *discard\n> the branch*; in code = *git + token diff rollback*. The `session` mode routes its accepted\n> micro-commits through this SAME `revertDecision()`.\n\n---\n\n## Design-engagement discipline (enforced across all gates and modes)\n\nFrom `DESIGN-SKILLS-AND-EVAL.md §3` (forge-discipline applied):\n\n1. **Systematic, not vibes.** Run the named gates with the standard question banks every\n   time; emit typed per-gate artifacts. No ad-hoc \"looks good to me.\"\n2. **Defer redesign DIRECTION to the user.** The human is the **decider at G4 \u002F critique\n   only.** Agents triage (audit, enumerate violations, propose 1–3 directions + rationale);\n   they do **not** unilaterally pick the new direction.\n3. **No over-design \u002F minimal intervention.** Fix sev-3\u002F4; don't gold-plate. Emphasize by\n   *de-emphasizing peers*. A change that moves no rubric dimension is suspect.\n4. **Anti-tunnel-vision.** Enforce the **quota** (≥2 wins + 1 fix per screen) even solo;\n   re-read the original goal every few gates; go **broad before pixels** (CDS-30 6\n   perspectives).\n5. **Never self-certify; revert is first-class.** Every G6 apply-back is a reversible\n   commit; re-audit; revert anything that regresses a tracked axis or re-touched\n   state\u002Frouting\u002Fdata. Peer-review before \"done.\"\n6. **Don't let a beta gate the loop.** Code-to-Canvas is render-mediated beta; if it flakes,\n   degrade to *screenshot → critique → MCP-fed edit*. The Figma round-trip is a *nicety*.\n\n---\n\n## Terminal-state outputs\n\nEvery subcommand prints a marker on its last line (`AGENTS.md §4` anti-degeneration). The\nloop-state marker id-prefix stays `design-review-*` (emitted by the unchanged `loop.mjs`)\nfor state backward-compat; the skill\u002Fentry is `design-studio`:\n- `SUCCESS:design-review-\u003Cid>-G0` … `-G7` (init \u002F gate \u002F advance \u002F questions)\n- `SUCCESS:design-review-\u003Cid>-G6` (revert KEEP) \u002F `FAILED:design-review-\u003Cid>-G6 \u003Creason>` (REVERT)\n- `SUCCESS:design-review-\u003Cid>-status`\n\nThe per-gate marker is the typed terminal-state artifact the orchestrator emits\n(`DESIGN-SKILLS-AND-EVAL.md §1.2`). The `drive` \u002F `session` modes emit their own markers\n(`SUCCESS:ui-drive-\u003Cverb>-\u003Cid>`, `SUCCESS:design-studio-session-\u003Cid>`) from their skills.\n\n---\n\n## Where this sits — the leaf skills each mode wires\n\n```\ndirect    ─ ui-ux-pro-max \u002F frontend-design-direction (G0\u002FG4 — human decides)\naudit     ─ ui-audit (Track-A + Track-B)                 (G1\u002FG7)\nmirror    ─ transpose-to-figma (+ use_figma \u002F design-sync) ◀ transpose edge (G2)\ncritique  ─ critique-panel                                ◀ discuss edge (G3)\niterate   ─ figma (use_figma) \u002F design-tokens-pipeline    (G5)\nimplement ─ figma-implement-design + revert-gate (this harness) ◀ revert edge (G6)\nverify    ─ ui-audit (re-run) + \u002Fself-reflect + basic-memory (G7)\nloop      ─ the full G0→G7 state machine ──── loop back to G1 ────┘\ndrive     ─▶ ui-drive skill                (attach \u002F point \u002F preview \u002F apply)\nsession   ─▶ design-studio-session skill   (overlay → pick → micro-commit → revert-gate)\n```\n\n**REQUIRED NEIGHBORS:** `ui-audit` (G1\u002FG7) · `transpose-to-figma` (G2) · `critique-panel`\n(G3) · `figma` + `figma-implement-design` (G5\u002FG6) · `design-sync` (G0) ·\n`design-tokens-pipeline` (G5\u002FG6 token spine) · `verification-before-completion` (G6 gate) ·\n`ui-drive` (`drive` mode) · `design-studio-session` (`session` mode). This skill is the\n**entry + sequencer + question-bank + revert-gate** only — the gates' work lives in those\nleaves (`DESIGN-SKILLS-AND-EVAL.md §1.2`: *keep the orchestrator thin*).\n\n---\n\n## TDD\n\n```powershell\ncd ~\u002F.claude\u002Fskills\u002Fdesign-studio\nnode --test tests\u002Fgates.test.mjs\n```\n\nCovers: all 8 gates defined with method + question bank · canonical name sequence · the\nthree TCR edges tagged on G2\u002FG3\u002FG4\u002FG6 · `nextGate` cycle + G7→G1 wrap · `initPass` \u002F\n`advancePass` full walk + pass-bump · `renderGate` content · and the **revert-gate decision\nmatrix** (KEEP on improvement; REVERT on composite regression \u002F new critical \u002F red gate \u002F\nred tests \u002F unapproved logic touch; KEEP on approved logic touch).\n\nSmoke-test the CLI (no browser, no MCP):\n```powershell\nnode loop.mjs init --app reframe --flow \u002Feditor --truth repo --altitude system --out .\u002F_dr\nnode loop.mjs gate --gate G3 --out .\u002F_dr      # -> CRITIQUE method + question bank\nnode loop.mjs advance --out .\u002F_dr             # -> G0 -> G1\nnode loop.mjs revert --before 62 --after 81 --out .\u002F_dr   # -> KEEP\nnode loop.mjs revert --before 80 --after 74 --out .\u002F_dr   # -> REVERT\n```\nExpect a `SUCCESS:design-review-*` \u002F `FAILED:design-review-*` marker on the last line of each.\n","\u003C!-- origin: user (design-SOTA research, 2026-06-30); RENAMED from design-review-loop -> design-studio + thin mode router (gem-hunt 2026-07-12, item C1, evidence MASTER C.1 \u002F UIUX C.1). Implements DESIGN-WORKFLOW.md §0\u002F§2\u002F§3 (the 8 gates + per-gate method + the transpose->discuss->revert micro-loop), DESIGN-SKILLS-AND-EVAL.md §1.2 (the orchestrator row) + §3 (engagement discipline, revert is first-class), FIGMA-SETUP.md (G2\u002FG5\u002FG6 Figma surface). -->\n\n\n# design-studio Skill\n\nThe **design pipeline entry point** — the ONE named surface for the whole design workflow,\nand the **TCR Loop orchestrator** underneath it. `design-studio` is the renamed, mode-routed\nsuccessor to `design-review-loop`: it drives a design-review pass as **8 sequenced gates**\nAND exposes a **thin mode router** so you can jump straight to a single stage instead of the\nwhole loop. **TCR = Transpose · Critique · Reconcile** — the three verbs that ARE the\n*transpose → discuss → revert* motion (gates G2 → G3 → G6).\n\n**Skill location:** `~\u002F.claude\u002Fskills\u002Fdesign-studio\u002F`\n\n> Implements `DESIGN-WORKFLOW.md §0` (the 8-gate headline + table), `§2` (each gate's\n> canonical named method + standard questions), `§3` (the transpose→discuss→revert\n> micro-loop); `DESIGN-SKILLS-AND-EVAL.md §1.2` (the orchestrator row — *keep it thin; it\n> orchestrates, the gates live in the leaf skills*) + `§3` (engagement discipline). Figma\n> surface (G2\u002FG5\u002FG6): `FIGMA-SETUP.md`. Consolidation rationale: UIUX-CONSOLIDATION §1.1.\n\n---\n\n## The unified entry — the mode router (the ONE surface)\n\n`design-studio` is the single entry to the whole design pipeline. Invoke it as a skill, or\ndrive the harness with a **mode**:\n\n```\n\u002Fdesign-studio \u003Cmode> --app \u003Capp> [--flow \u003Cpath>] [--out \u003Cdir>]\n  modes: direct | audit | mirror | critique | iterate | implement | verify | loop | drive | session\n```\n\n**Why one surface (UIUX C.1):** six overlapping design skills collapse to one discovery\nsurface; the leaves stay lazy in the `~\u002F.agents\u002Fskills` vault behind the semantic router\n(frees description-budget slots). **Do NOT invoke `\u002Fdesign-review`** — that name collides\nwith metaswarm's `review-design`, which reviews design *documents*, a different thing.\n\n### The router table — mode → gate → leaf → absorbed trigger vocab\n\n| Mode | Jumps to | Runs (leaf skill \u002F harness) | Absorbs the trigger vocab of | Emits |\n|---|---|---|---|---|\n| `direct` | G0 PRIME + G4 DIRECT | `ui-ux-pro-max` · `frontend-design-direction` (prose) | \"design direction\", \"define good\", \"pick a direction\", \"style \u002F palette \u002F font\", \"make interfaces feel better\" | scope + persona + one committed direction |\n| `audit` | G1 AUDIT (+ G7 re-audit) | `ui-audit` (Track-A numbers + Track-B VLM) | \"audit the UI\", \"a11y \u002F contrast check\", \"dead buttons\", \"visual review\", \"screenshot the screens\" (metaswarm visual-review) | severity-ranked `audit.json` + shots |\n| `mirror` | G2 TRANSPOSE | `transpose-to-figma` (+ `use_figma` surgical) · `design-sync` (alt target) | \"transpose to figma\", \"code to canvas\", \"mirror the UI to figma \u002F claude design\" | `transpose-record.json` + `mirror-manifest.json` |\n| `critique` | G3 CRITIQUE | `critique-panel` | \"design critique\", \"persona panel\", \"I like \u002F I wish \u002F what if\", \"slop check\" | typed, severity-rated verdict list |\n| `iterate` | G5 ITERATE | `figma` (`use_figma`) · `design-tokens-pipeline` | \"iterate in figma\", \"design tokens\", \"figma branch\" | node-diff + token-diff on a branch |\n| `implement` | G6 RECONCILE | `figma-implement-design` + revert-gate | \"implement the design\", \"figma to code\", \"build from figma\" | code diff (kept only if it passes) |\n| `verify` | G7 VERIFY | re-run `ui-audit` + `\u002Fself-reflect` + basic-memory | \"verify the design change\", \"did the score move\", \"re-audit\" | before\u002Fafter rubric delta + durable decisions |\n| `loop` | G0 → … → G7 (full) | the state machine (`init`\u002F`gate`\u002F`advance`\u002F`revert`) | \"design review\", \"TCR loop\", \"run the whole design pass\" | `loop-state.json` across all gates |\n| `drive` | — (routes OUT) | **`ui-drive`** skill | \"drive the app\", \"point at an element\", \"interact with the running app\", \"preview a CSS tweak\" | drive-ledger + proposed patch |\n| `session` | — (routes OUT) | **`design-studio-session`** skill | \"interactive modify\", \"restyle a live element\", \"tweak the UI live\", \"micro-commit a style\" | scoped micro-commit + delta re-audit |\n\n### Two modes route OUT of this skill (not gates)\n\n`drive` and `session` are **not** loop gates — they are the low-level app-driving and\ninteractive-modify capabilities. The router **hands off** rather than running a gate:\n\n- `design-studio drive` → invoke the **`ui-drive`** skill (attach \u002F point \u002F preview \u002F apply\n  on the vendored `playwright-core@1.61.1`; never edits app source).\n- `design-studio session` → invoke the **`design-studio-session`** skill (overlay-preview →\n  element→source pick → scoped micro-commit → incremental re-audit → the SAME\n  `revertDecision()` revert-gate).\n\nBoth reuse this skill's `loop-state.json`, the DESIGN-EVAL rubric, and the revert-gate —\nthey do **not** fork a second pipeline (that overlap is exactly what the consolidation kills).\n\n### How an in-loop mode maps to the harness\n\nThe eight in-loop modes are **thin jumps into the existing state machine** — a mode is\n`init` (if no pass yet) + `gate --gate \u003CG>` for that mode's gate + run the named leaf +\n`advance`:\n\n| Mode | Harness call |\n|---|---|\n| `loop` | `node loop.mjs init …` then `gate` → run leaf → `advance` (G0→G7→G1) |\n| `direct` | `node loop.mjs gate --gate G0` (and `--gate G4`) |\n| `audit` | `node loop.mjs gate --gate G1` (or `--gate G7`) |\n| `mirror` | `node loop.mjs gate --gate G2` |\n| `critique` | `node loop.mjs gate --gate G3` |\n| `iterate` | `node loop.mjs gate --gate G5` |\n| `implement` | `node loop.mjs gate --gate G6` then `node loop.mjs revert …` |\n| `verify` | `node loop.mjs gate --gate G7` |\n| `drive` | → `ui-drive` skill (no gate) |\n| `session` | → `design-studio-session` skill (no gate) |\n\n> **Implementation note (honest):** the mode router is a **documentation-level dispatch**\n> today — the SKILL tells you which gate\u002Fleaf a mode maps to, and you invoke the existing\n> `loop.mjs` subcommands (`init`\u002F`gate`\u002F`advance`\u002F`revert`) accordingly. A native\n> `node loop.mjs mode \u003Cmode>` sugar subcommand is a ~40-LOC follow-on (UIUX C.1) that only\n> wraps these same calls; it is **out of scope for this rename**. The loop-state terminal\n> marker id-prefix remains `design-review-\u003Cid>` (emitted by the unchanged `loop.mjs`) for\n> loop-state backward-compat — the *entry \u002F skill name* is `design-studio`.\n\n---\n\n## Overview — keep the orchestrator THIN\n\nThis skill **sequences** gates and **holds the question banks + the revert-gate**. It does\n**not** re-implement audit, critique, transpose, or implementation — those are leaf skills.\nThe harness (`loop.mjs`) is **pure plumbing**: it never calls a model, never measures\npixels, never edits app source. It tracks *which gate you are on*, prints that gate's\ncanonical method + leaf skill + standard questions, advances with ordering checks, and runs\nthe **G6 revert decision** (`DESIGN-SKILLS-AND-EVAL.md §1.2`).\n\n**The honesty note (cite it):** the *building-block methods* are canonical and\nprimary-sourced (Nielsen's 10 heuristics, NN\u002Fg heuristic-evaluation + design-critique\nrituals, CDS-30, severity 0–4, Figma branching\u002FDev Mode\u002FCode Connect, W3C DTCG tokens).\nThe **8-gate packaging and the \"TCR\" name are a synthesis** — there is no single\nindustry-blessed \"design-review loop\" product; the SOTA is the *assembly* of named\nprimitives (`DESIGN-WORKFLOW.md` preamble).\n\n---\n\n## When to use\n\n- You want **one entry** to the design pipeline — pick a `mode` (above) for a single stage,\n  or `loop` to run the whole G0–G7 pass on one flow of Reframe \u002F momentstudio \u002F WebCoder \u002F\n  bilbo.\n- You need a **systematic, named, repeatable** pass (severity 0–4 + Nielsen crit + CDS-30)\n  so scores are comparable app-to-app and cycle-to-cycle — that comparability *is* the\n  \"systematic, named\" property (`DESIGN-WORKFLOW.md §4`).\n- You want the **transpose → discuss → revert** motion driven end-to-end with a real\n  revert-gate, not vibes.\n- You want to **drive** the live app \u002F **point** at an element (`drive` → `ui-drive`) or\n  **interactively restyle** a live element with micro-commits (`session` →\n  `design-studio-session`).\n\n**When NOT to use:**\n- Reviewing a design **document** (a spec\u002FPRD) → that is metaswarm `review-design`\n  (`\u002Freview-design`), NOT this skill.\n- A single leaf gate in deep isolation → you may call that skill directly (`ui-audit`,\n  `critique-panel`, `transpose-to-figma`, `figma-implement-design`) — but the `mode` router\n  is the preferred surface so the artifact contract stays unified.\n- The eval-rubric math (per-dimension 0–4, weighted composite, critical-error override) →\n  that lives in `ui-audit` Track-B + `critique-panel` (`DESIGN-SKILLS-AND-EVAL.md §2`).\n\n---\n\n## The headline — the 8 named gates\n\n> **G0 PRIME → G1 AUDIT → G2 TRANSPOSE → G3 CRITIQUE → G4 DIRECT → G5 ITERATE →\n> G6 RECONCILE → G7 VERIFY → (back to G1)**\n\n- **Transpose edge** = G2 (and the G6 return capture).\n- **Discuss edge** = G3 (+ G4 decide).\n- **Revert edge** = G6 (the revert-gate: every apply-back is a reversible commit; revert if\n  any tracked axis regresses).\n\nRun cheaply-automatable gates (G1 audit, G7 verify) continuously; run G3 critique per\nfeature; run G5–G6 per approved change-set. Cadence borrows NN\u002Fg's 1-hour-critique rhythm —\n**narrow scope per pass, do not boil the ocean** (`DESIGN-WORKFLOW.md §0`).\n\n| Gate | Name | Mode | Canonical named method | Leaf skill \u002F tool (invoked) | Emits |\n|---|---|---|---|---|---|\n| **G0** | **PRIME** | `direct` | scope-setting + source-of-truth decision (loop altitude) | `prime` · `design-system` (Mode 2) · `design-sync` | scope + persona + \"truth: repo or Figma?\" + altitude |\n| **G1** | **AUDIT** | `audit` | NN\u002Fg Heuristic Evaluation (Prepare→Evaluate→Consolidate); Nielsen 10 + severity 0–4 | **`ui-audit`** (Track-A numbers + Track-B VLM) | severity-ranked, de-duped findings |\n| **G2** | **TRANSPOSE** | `mirror` | code→Figma capture (\"Code to Canvas\"), altitude-selected | **`transpose-to-figma`** | editable Figma frames w\u002F Code Connect IDs + token refs |\n| **G3** | **CRITIQUE** | `critique` | NN\u002Fg Design Critique + CDS-30 + \"I Like \u002F I Wish \u002F What If\" | **`critique-panel`** (named personas) | typed, severity-rated verdict list |\n| **G4** | **DIRECT** | `direct` | severity-prioritized decision; define \"good\" (Judge\u002FEvaluate\u002FIterate) | `frontend-design-direction` — **human decides** | one committed direction + explicit out-of-scope |\n| **G5** | **ITERATE** | `iterate` | Figma **branch** (safe iterate-then-revert); Tokens Studio for tokens | `figma` (`use_figma`) · `design-tokens-pipeline` | Figma node-diff + token-diff on a branch |\n| **G6** | **RECONCILE** | `implement` | Dev Mode + **Code Connect**; token PR; **the revert-gate** | **`figma-implement-design`** + `verification-before-completion` | code diff on a branch — kept only if it passes |\n| **G7** | **VERIFY** | `verify` | re-audit delta; capture learnings (no self-certify) | re-run `ui-audit` · `\u002Fself-reflect` + basic-memory | before\u002Fafter rubric delta + durable decisions |\n\n---\n\n## The single load-bearing truth: the round-trip is LOSSY\n\n**\"code → Figma → code\" is not byte-preserving** (`DESIGN-WORKFLOW.md §1`). The **only**\nthings that round-trip cleanly: **W3C DTCG design tokens** and **Code-Connected\ncomponents**. Design→code transfers visual structure; **business logic, state, API calls do\nNOT.** Code→design captures rendering; **React state, routing, integrations vanish.**\n\n**Consequence — why \"revert\" is a first-class gate (G6):** treat every apply-back as a\n**reversible commit on a branch**; diff for logic regressions; **keep only the visual delta,\nrevert anything that re-touched state\u002Frouting\u002Fdata.** Figma is the source of truth for\n*visual* decisions only. The harness encodes this in the `revert` subcommand.\n\n---\n\n## Driving the loop (the harness)\n\n`loop.mjs` keeps a `loop-state.json` so a pass survives across turns\u002Fcompaction. Every\nsubcommand prints a terminal-state marker (`AGENTS.md §4`).\n\n```powershell\n$DR = \"$HOME\u002F.claude\u002Fskills\u002Fdesign-studio\u002Floop.mjs\"\n$OUT = \".\u002Fdr-out\"\n\n# G0 — start a pass (records scope + source-of-truth + altitude; opens at G0 PRIME)\nnode $DR init --app reframe --flow \u002Feditor --truth repo --altitude system --out $OUT\n#   -> prints the G0 question bank; SUCCESS:design-review-\u003Cid>-G0\n\n# Show the CURRENT gate's method + leaf skill + standard questions (the next thing to run)\nnode $DR gate --out $OUT\n#   or a specific gate:  node $DR gate --gate G3 --out $OUT\n\n# After you've actually run the gate's leaf skill, advance (ordering-checked; G7 -> G1)\nnode $DR advance --out $OUT\n\n# Where am I?\nnode $DR status --out $OUT\n\n# Just dump a gate's standard question bank (no state needed)\nnode $DR questions --gate G1\n```\n\n**The orchestration contract:** `gate` tells you *which leaf skill to invoke and what to\nask*; **you run that leaf skill**; then `advance`. The orchestrator never does the gate's\nwork — it sequences and re-anchors. (A `mode` maps to one or two of these calls — see the\nrouter table above.)\n\n---\n\n## The gates in detail — method + standard questions\n\nEach gate's canonical named method and standard question bank are encoded in `gates.mjs`\nand printed by `loop.mjs gate` \u002F `questions`. Verbatim intent from `DESIGN-WORKFLOW.md §2`:\n\n### G0 — PRIME (scope + source-of-truth) — mode `direct`\n**Method:** scope-setting + the source-of-truth decision; pick **loop altitude** — *system\nloop* (components + tokens exist → bind to them) vs *audit loop* (greenfield → extract\ntokens first). The lens **rewards maturity; it does not manufacture it.**\n**Standard questions:** Who is the user and the top job in this flow? · Where is the source\nof truth — repo or Figma library? · Which ONE flow is in scope this pass? · System loop or\naudit loop?\n**Invoke:** `prime` \u002F `design-system` (Mode 2 Visual Audit) · `design-sync` (`@dsCard`\nrepo→Claude Design).\n\n### G1 — AUDIT (find problems, objectively) — mode `audit`\n**Method:** NN\u002Fg Heuristic Evaluation (Prepare→Evaluate→Consolidate); Nielsen 10 +\nseverity 0–4 (severity = frequency × impact × persistence). **VLMs are a recall amplifier,\nNOT a judge** (~21% expert overlap, ~24% false-positive).\n**Standard questions:** the Nielsen-10 yes\u002Fno gates · the a11y gate (AA contrast, focus\norder, ≥44px\u002F48dp targets, alt text) · the token gate (every value bound, no raw hex) ·\nseverity per violation · functional-broken vs sub-optimal.\n**Invoke:** **`ui-audit`** — Track-A deterministic numbers + Track-B VLM critique →\n`audit.json` + screenshots.\n\n### G2 — TRANSPOSE (code → Figma) — *the transpose edge* — mode `mirror`\n**Method:** \"Code to Canvas\" capture, **altitude-selected** — `story.to.design` (system\nloop, low drift) · `generate_figma_design` (live\u002Flocalhost, medium drift) · `html.to.design`\n(audit record only, high drift). Lift the running UI onto canvas so you discuss **reality,\nnot a stale design file**.\n**Standard questions:** Does the imported frame match the live render (incl. **real states**:\nempty\u002Ferror\u002Floading)? · Which screens carry the experience? · Do nodes carry Code Connect\nIDs + token refs (system loop) or are they flat (audit only)?\n**Invoke:** **`transpose-to-figma`** (the altitude selector + driver).\n\n### G3 — CRITIQUE (discuss) — *the discuss edge* — mode `critique`\n**Method:** NN\u002Fg Design Critique ritual — **silent individual feedback first** (kills\nloudest-voice capture) → **\"I Like \u002F I Wish \u002F What If\"** → **CDS-30 across 6 perspectives**\n(User · Environment · Interface · Components · Design · Visual Marks — *go broad before\npixels*) → **ask \"why?\"** on every reaction. Optional multi-agent persona panel\n(Nielsen \u002F Refactoring-UI \u002F WCAG \u002F Brand-consistency). **The panel TRIAGES; the human is\nthe decider.** Enforce the **quota** (≥2 wins + 1 fix per screen) even solo.\n**Standard questions:** the framing bank · I Like (protect) \u002F I Wish (heuristic # + sev) \u002F\nWhat If (alternative) · the CDS-30 6-perspective bank · \"ask why\".\n**Invoke:** **`critique-panel`** → typed, severity-rated, deduped + ranked verdict.\n\n### G4 — DIRECT (converge \u002F decide) — mode `direct`\n**Method:** severity-prioritized decision; **define \"good\" before building**\n(Judge\u002FEvaluate\u002FIterate); Impact\u002FEffort or RICE. **DEFER DIRECTION TO THE HUMAN** — VLMs are\nnear-random at *picking* the better design (WiserUI-Bench); agents enumerate + rank, the\nuser chooses (`DESIGN-SKILLS-AND-EVAL.md §3.2`).\n**Standard questions:** must-fix sev-3\u002F4 vs nice-to-have sev-1\u002F2? · which ONE direction? ·\nthe success criterion (how will we *know* it is better)? · what is explicitly out of scope?\n**Invoke:** `frontend-design-direction` \u002F `make-interfaces-feel-better` — **human decides**.\n\n### G5 — ITERATE (in Figma, on a branch) — mode `iterate`\n**Method:** open a **Figma branch** off `main` (the safe iterate-then-revert mechanism);\napply the agreed direction; keep `main` untouched. Token changes go through **Tokens Studio**\n(structural, not one-off pixel tweaks). Re-critique on the branch.\n**Standard questions:** Does the branch resolve sev-3\u002F4 **without new violations**? ·\npage-grouped diff vs `main` — every change intentional? · on-system? · **merge, or discard\nthe branch (= the clean revert) and re-branch?**\n**Invoke:** `figma` (`use_figma`) · `design-tokens-pipeline` \u002F Tokens Studio.\n\n### G6 — RECONCILE (Figma → code) — *the revert edge* — mode `implement`\n**Method:** Dev Mode + **Code Connect** so generated code **reuses your real components**;\nsystem-wide changes ride the **token PR**. **THE REVERT-GATE:** commit the variant *before*\nmeasuring → re-run G1 audit + a11y\u002Flint + your test\u002Fcoverage gate → **auto-revert if any\ntracked axis regresses** *or* the round-trip re-touched state\u002Frouting\u002Fdata\n(`verification-before-completion` \u002F `autoresearch` discipline).\n**Standard questions:** 1:1 parity vs intent? · tokens\u002Fcomponents reused (Code Connect), no\nnew hardcoded values \u002F icon packs? · all states implemented? · did the round-trip touch\nstate\u002Frouting\u002Fdata — kept or reverted? · did contrast\u002Ffocus\u002Ftoken gates stay green and the\naudit score improve (or not worsen)?\n**Invoke:** **`figma-implement-design`** + `verification-before-completion`; then the harness:\n```powershell\nnode $DR revert --before 62 --after 81 --critical-before 2 --critical-after 0 --out $OUT\n#   -> KEEP   ; SUCCESS:design-review-\u003Cid>-G6\nnode $DR revert --before 62 --after 81 --logic-touched --out $OUT\n#   -> REVERT ; FAILED:design-review-\u003Cid>-G6  (logic touch not approved)\n# flags: --critical-before\u002F--critical-after N | --gates-red | --tests-red | --logic-touched | --logic-approved\n```\n\n### G7 — VERIFY (+ capture) — mode `verify`\n**Method:** re-audit the shipped build; confirm the **delta moved** (per-dimension Δ on 0–4;\ncritical-error burndown). **Do not self-certify** — peer-review (≥1–2 reviewers). Capture\ndurable decisions via `\u002Fself-reflect` + basic-memory so the next loop does not re-litigate.\nThen return to G1.\n**Standard questions:** Did the change move the rubric score? · any regression? · does the\nlive app match the Figma intent? · what design decisions are now durable?\n**Invoke:** re-run `ui-audit` (G1) · `\u002Fself-reflect` + basic-memory.\n\n---\n\n## The G6 revert-gate — the decision logic (load-bearing)\n\n`revertDecision()` in `gates.mjs` is the named, testable revert rule. An apply-back is\n**KEPT** only when **every** tracked axis holds or improves **and** no logic was re-touched\n(unless explicitly approved); otherwise **REVERT**:\n\n| Tracked axis | KEEP requires | REVERT trigger |\n|---|---|---|\n| composite audit score (0–100) | `after >= before` | composite dropped |\n| critical errors | `criticalAfter \u003C= criticalBefore` | a new critical appeared |\n| contrast \u002F focus \u002F token gate | green | red |\n| tests \u002F coverage | green | red |\n| state \u002F routing \u002F data touch | not touched, OR explicitly approved | unapproved logic touch (round-trip is lossy for logic) |\n\n> **The point** (`DESIGN-WORKFLOW.md §3`): the **delta between the before-audit and the\n> after-audit IS the evidence** the change improved, not moved laterally. A redesign that\n> \"feels better\" but moves no dimension is suspect. In Figma the literal revert = *discard\n> the branch*; in code = *git + token diff rollback*. The `session` mode routes its accepted\n> micro-commits through this SAME `revertDecision()`.\n\n---\n\n## Design-engagement discipline (enforced across all gates and modes)\n\nFrom `DESIGN-SKILLS-AND-EVAL.md §3` (forge-discipline applied):\n\n1. **Systematic, not vibes.** Run the named gates with the standard question banks every\n   time; emit typed per-gate artifacts. No ad-hoc \"looks good to me.\"\n2. **Defer redesign DIRECTION to the user.** The human is the **decider at G4 \u002F critique\n   only.** Agents triage (audit, enumerate violations, propose 1–3 directions + rationale);\n   they do **not** unilaterally pick the new direction.\n3. **No over-design \u002F minimal intervention.** Fix sev-3\u002F4; don't gold-plate. Emphasize by\n   *de-emphasizing peers*. A change that moves no rubric dimension is suspect.\n4. **Anti-tunnel-vision.** Enforce the **quota** (≥2 wins + 1 fix per screen) even solo;\n   re-read the original goal every few gates; go **broad before pixels** (CDS-30 6\n   perspectives).\n5. **Never self-certify; revert is first-class.** Every G6 apply-back is a reversible\n   commit; re-audit; revert anything that regresses a tracked axis or re-touched\n   state\u002Frouting\u002Fdata. Peer-review before \"done.\"\n6. **Don't let a beta gate the loop.** Code-to-Canvas is render-mediated beta; if it flakes,\n   degrade to *screenshot → critique → MCP-fed edit*. The Figma round-trip is a *nicety*.\n\n---\n\n## Terminal-state outputs\n\nEvery subcommand prints a marker on its last line (`AGENTS.md §4` anti-degeneration). The\nloop-state marker id-prefix stays `design-review-*` (emitted by the unchanged `loop.mjs`)\nfor state backward-compat; the skill\u002Fentry is `design-studio`:\n- `SUCCESS:design-review-\u003Cid>-G0` … `-G7` (init \u002F gate \u002F advance \u002F questions)\n- `SUCCESS:design-review-\u003Cid>-G6` (revert KEEP) \u002F `FAILED:design-review-\u003Cid>-G6 \u003Creason>` (REVERT)\n- `SUCCESS:design-review-\u003Cid>-status`\n\nThe per-gate marker is the typed terminal-state artifact the orchestrator emits\n(`DESIGN-SKILLS-AND-EVAL.md §1.2`). The `drive` \u002F `session` modes emit their own markers\n(`SUCCESS:ui-drive-\u003Cverb>-\u003Cid>`, `SUCCESS:design-studio-session-\u003Cid>`) from their skills.\n\n---\n\n## Where this sits — the leaf skills each mode wires\n\n```\ndirect    ─ ui-ux-pro-max \u002F frontend-design-direction (G0\u002FG4 — human decides)\naudit     ─ ui-audit (Track-A + Track-B)                 (G1\u002FG7)\nmirror    ─ transpose-to-figma (+ use_figma \u002F design-sync) ◀ transpose edge (G2)\ncritique  ─ critique-panel                                ◀ discuss edge (G3)\niterate   ─ figma (use_figma) \u002F design-tokens-pipeline    (G5)\nimplement ─ figma-implement-design + revert-gate (this harness) ◀ revert edge (G6)\nverify    ─ ui-audit (re-run) + \u002Fself-reflect + basic-memory (G7)\nloop      ─ the full G0→G7 state machine ──── loop back to G1 ────┘\ndrive     ─▶ ui-drive skill                (attach \u002F point \u002F preview \u002F apply)\nsession   ─▶ design-studio-session skill   (overlay → pick → micro-commit → revert-gate)\n```\n\n**REQUIRED NEIGHBORS:** `ui-audit` (G1\u002FG7) · `transpose-to-figma` (G2) · `critique-panel`\n(G3) · `figma` + `figma-implement-design` (G5\u002FG6) · `design-sync` (G0) ·\n`design-tokens-pipeline` (G5\u002FG6 token spine) · `verification-before-completion` (G6 gate) ·\n`ui-drive` (`drive` mode) · `design-studio-session` (`session` mode). This skill is the\n**entry + sequencer + question-bank + revert-gate** only — the gates' work lives in those\nleaves (`DESIGN-SKILLS-AND-EVAL.md §1.2`: *keep the orchestrator thin*).\n\n---\n\n## TDD\n\n```powershell\ncd ~\u002F.claude\u002Fskills\u002Fdesign-studio\nnode --test tests\u002Fgates.test.mjs\n```\n\nCovers: all 8 gates defined with method + question bank · canonical name sequence · the\nthree TCR edges tagged on G2\u002FG3\u002FG4\u002FG6 · `nextGate` cycle + G7→G1 wrap · `initPass` \u002F\n`advancePass` full walk + pass-bump · `renderGate` content · and the **revert-gate decision\nmatrix** (KEEP on improvement; REVERT on composite regression \u002F new critical \u002F red gate \u002F\nred tests \u002F unapproved logic touch; KEEP on approved logic touch).\n\nSmoke-test the CLI (no browser, no MCP):\n```powershell\nnode loop.mjs init --app reframe --flow \u002Feditor --truth repo --altitude system --out .\u002F_dr\nnode loop.mjs gate --gate G3 --out .\u002F_dr      # -> CRITIQUE method + question bank\nnode loop.mjs advance --out .\u002F_dr             # -> G0 -> G1\nnode loop.mjs revert --before 62 --after 81 --out .\u002F_dr   # -> KEEP\nnode loop.mjs revert --before 80 --after 74 --out .\u002F_dr   # -> REVERT\n```\nExpect a `SUCCESS:design-review-*` \u002F `FAILED:design-review-*` marker on the last line of each.\n",{"name":5,"metadata":57,"description":7},{"origin":58},"user","main","a298c929b6cbd662e1fce54302ce520d5ceea1a5","ci\u002Fskills-allowlist\u002Fdesign-studio","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain","https:\u002F\u002Fgithub.com\u002FPrekzursil","2026-11-02 14:30:57",{"source":8,"skillName":5,"commands":66,"prompt":76,"zipAvailable":77},[67,70,73],{"tool":68,"command":69},"npx","npx skills add Prekzursil\u002Fagent-skills-toolchain --skill design-studio",{"tool":71,"command":72},"bunx","bunx skills add Prekzursil\u002Fagent-skills-toolchain --skill design-studio",{"tool":74,"command":75},"pnpm","pnpm dlx skills add Prekzursil\u002Fagent-skills-toolchain --skill design-studio","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fci\u002Fskills-allowlist\u002Fdesign-studio\u002FSKILL.md",true,[],[80,102,130,156,170,185],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":52},"01M6DF7D7478R55P46REYH4QAC","clarify-requirements","Resolve genuine pre-execution ambiguity by scanning repo context, generating 1-6 grounded options, and asking 1-3 focused questions via AskUserQuestion. NOT for mid-task use (injection risk); NOT when the goal is already unambiguous; use to disambiguate vague prompts before any file edits.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fworkspace-hooks\u002Fskills\u002Fclarify-requirements\u002FSKILL.md",[],[87,88,89,90,91,92,93,94,95,96,97,98,99,100,101],"clarify requirements","clarify","requirements","risk","options","task","prompts","goal","scanning","use","context","repo","injection","execution","file",{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":111,"publishedAt":52},"01M6DF79CA4BHJS66J8EZDBPWJ","openmm-md","Run FREE, open-source, Windows-native GPU molecular dynamics via the openmm-md MCP (OpenMM + CUDA on the local NVIDIA GPU). Use for protein \u002F protein-ligand MD when you want a free stack or are on Windows without a Schrodinger license. Covers the full workflow (prepare, solvate, minimize, equilibrate, production, analyze, mmgbsa) AND an honest decision guide vs Schrodinger Desmond, including how to run Desmond legitimately on Linux or a cloud GPU with a real license. This is a deliberately LESSER free alternative and does NOT replace the schrodinger MCP tools. Do NOT use it to pick a free tool when a validated FEP+, WaterMap, IFD-MD, or Prime MM-GBSA result is actually required.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fmcp\u002Fopenmm-md-mcp\u002Fskill\u002Fopenmm-md\u002FSKILL.md",[108],{"categoryNo":109,"categoryName":110,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[112,113,114,42,115,116,117,118,119,120,121,122,123,124,96,125,126,127,128,129],"openmm md","how","decision","linux","analyze","tool","stack","open","NVIDIA","gpu","license","workflow","windows","free","molecular dynamics","local","do","MCP",{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":142,"publishedAt":52},"01M6DF76C1MG85VEWP8VZCBNMN","visual-review","Take screenshots of web pages and UI using Playwright for visual review and iteration","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fvisual-review\u002FSKILL.md",[136,139],{"categoryNo":137,"categoryName":138,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":140,"categoryName":141,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[50,143,144,145,146,147,148,149,150,151,113,152,153,154,155],"visual","visual review","pages","web","false","iteration","take","check","slides","ui","screenshot","playwright","screenshots",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":162,"publishedAt":52},"01M6DF73AQVCBZKEN0YXEX9FXP","status","Diagnostic status report — shows metaswarm installation state, project setup, and potential issues","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstatus\u002FSKILL.md",[],[158,163,164,165,166,167,168,169],"setup","report","project","installation","project setup","issues","state",{"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":177,"publishedAt":52},"01M6DF6X6C2XB0P6GX76P7TTYV","start","Use when starting work on any task, when the user mentions metaswarm, or when the user wants to begin tracked development work","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstart\u002FSKILL.md",[176],{"categoryNo":109,"categoryName":110,"taxonomyType":21,"taxonomyTypeDesc":22},[172,178,92,179,180,181,96,58,182,183,184],"start issue","issue","ready","work on issue","work","work on","development",{"skillNo":186,"name":163,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":190,"publishedAt":52},"01M6DF6QMJ9AJKFKHHKRT005PQ","Interactive project setup — detects your project, configures metaswarm, writes project-local files","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fsetup\u002FSKILL.md",[],[163,165,127,191,167,192],"files","interactive"]