{"id":"design-is","name":"design-is","summary":"ディーター・ラムスの「良いデザインとは...」の10点と照らしてデザインを監査してみてください。原則を提示した後、/make-planのプロンプトを渡し、3つの成果のうち1つを選びます — 新しいデザイン、改良デザイン、または再設計です。","body":"# Design Is\n\n## Do not use for\n\n- Routine UI code reviews → use `/review`\n- Pure copy edits → use a separate copy pass\n- Pre-design ideation with no artifact yet → start with `/make-plan` directly\n\nYou are an ORCHESTRATOR. Audit a design against Dieter Rams' ten principles, score each principle with evidence, decide the outcome verdict (NEW / REFINE / REDESIGN), and hand off to `/make-plan` with a ready-to-run prompt.\n\nYou do not write implementation code. You produce: evidence-cited scores, a verdict, and a `/make-plan` handoff prompt.\n\n## The Ten Principles (Dieter Rams)\n\nAudit each principle in this exact order. Each gets a score 0–3 and ≥1 piece of evidence (`file:line`, screenshot region, copy excerpt, or measured value).\n\n1. **Good design is innovative** — Does it advance the form, or imitate? Innovation rides on technology; never an end in itself.\n2. **Good design makes a product useful** — Does it serve the primary task? Emphasizes usefulness; disregards anything that detracts.\n3. **Good design is aesthetic** — Is it beautiful? Only well-executed objects can be beautiful; aesthetic quality affects well-being.\n4. **Good design makes a product understandable** — Does the structure clarify function? Or is it self-explanatory at best?\n5. **Good design is unobtrusive** — Does it stay out of the way? Neither decorative objects nor works of art — leave room for self-expression.\n6. **Good design is honest** — Does it claim only what it is? No false promises, no manipulation, no inflated value.\n7. **Good design is long-lasting** — Will it age well? Avoids being fashionable; never appears antiquated.\n8. **Good design is thorough down to the last detail** — Are edges, empty states, errors, focus rings, motion curves all considered? Care and accuracy express respect for the user.\n9. **Good design is environmentally friendly** — Does it conserve resources? Minimizes pollution — in software: bundle weight, energy, attention, cognitive load.\n10. **Good design is as little design as possible** — Less, but better. Concentrates on essentials; back to purity, back to simplicity.\n\n> The user wrote \"Dieter Braun\" — they mean Dieter Rams. Don't correct them inline; just use the right principles.\n\n## Delegation Model\n\nUse subagents for *evidence gathering* (reading components, measuring contrast, counting elements, inspecting tokens, screenshotting via agent-browser). Keep *scoring and verdict synthesis* with the orchestrator. Reject subagent reports that score without citing evidence and redeploy.\n\n### Subagent Reporting Contract (MANDATORY)\n\nEach evidence subagent response must include:\n1. Sources consulted — exact file paths and line ranges, or screenshot regions\n2. Concrete findings — what is present, what is missing, with quotes/values\n3. Per-principle facts (not opinions) — leave scoring to the orchestrator\n4. Known gaps — what could not be inspected and why\n\n## Output Artifacts\n\nAll artifacts go in `DESIGN-IS-<YYYY-MM-DD>/` at repo root (or the project the user points at):\n\n- `00-scope.md` — what was audited (URL, component paths, screens), input materials\n- `01-evidence.md` — per-principle evidence collected by subagents\n- `02-scorecard.md` — per-principle 0–3 score with one-line justification + total\n- `03-verdict.md` — NEW / REFINE / REDESIGN with reasoning\n- `04-handoff-prompt.md` — copy-pasteable `/make-plan` prompt for the chosen outcome\n\n## Phases\n\n### Phase 0: Scope Lock (ALWAYS FIRST)\n\nAsk the user (or infer from the request) and write `00-scope.md`:\n- What is being audited? (live URL, repo path, Figma frame, component name)\n- Who is the primary user, and what is the primary task?\n- Constraints (brand, stack, deadline)\n- Reference designs or competitors, if any\n\nIf the user is asking about a design that doesn't exist yet, skip Phases 1–2 and go straight to Phase 3 with verdict = **NEW**.\n\n### Phase 1: Evidence Gathering (FAN OUT)\n\nDeploy subagents in parallel. Each must return ONLY the required fields below — no prose paragraphs, no scoring.\n\n**1. Structural Evidence** subagent (always deploy)\nRequired fields returned:\n- Total interactive-element count on audited surface\n- Max nesting depth of the primary component tree\n- Repeated-pattern count (same affordance appearing >1 place with the same purpose)\n- Dead-prop / unused-import count\n- File:line citations for every count\n\n**2. Visual Evidence** subagent (always deploy)\nMode: if target is a reachable URL or running dev server → use the `agent-browser` skill for screenshots and computed-style inspection. If target is a static repo with no running instance → read source CSS / tokens / component files and report inferred facts only (mark these \"INFERRED\").\nRequired fields returned:\n- Spacing scale observed (px array)\n- Type scale observed (px array)\n- Distinct color count (count of unique hex/oklch tokens actually rendered or referenced)\n- Lowest contrast ratio observed across primary text\n- States present checklist: empty / loading / error / success / focus / disabled — present or missing for each\n\n**3. Copy & Honesty** subagent (always deploy)\nRequired fields returned:\n- List of every user-facing string with file:line\n- Flagged inflations (marketing superlatives without backing)\n- Flagged dark patterns (forced continuity, hidden cost, fake scarcity, confirmshaming)\n- Flagged jargon / unclear labels with proposed plain replacement\n- Label→behavior mismatches with file:line of both\n\n**4. Weight & Friction** subagent (always deploy)\nRequired fields returned:\n- Initial JS bytes (number)\n- Network request count for primary view (number)\n- Time-to-interactive ms (number, measured or estimated with method noted)\n- Animation count on idle screen (number)\n- Notification / badge / modal count on initial load (number)\n\n**5. Accessibility Evidence** subagent (OPTIONAL — deploy only if target has a meaningful interactive UI surface; skip for static landing pages without interaction)\nRequired fields returned:\n- WCAG contrast pass/fail per text token\n- Focus order list across primary controls\n- Keyboard reachability of every primary action (yes/no per action)\n- ARIA landmark count\n- Skip-link present (yes/no)\n\n**Principle → subagent mapping** (orchestrator uses this when scoring):\n\n| Principle | Fed by |\n|-----------|--------|\n| #1 innovative | orchestrator-only (judgment using all evidence) |\n| #2 useful | Structural, Accessibility |\n| #3 aesthetic | Visual |\n| #4 understandable | Structural, Copy & Honesty, Accessibility |\n| #5 unobtrusive | Structural, Visual |\n| #6 honest | Copy & Honesty |\n| #7 long-lasting | orchestrator-only (judgment using all evidence) |\n| #8 thorough | Visual |\n| #9 environmentally friendly | Weight & Friction |\n| #10 as little design as possible | Structural |\n\nThe orchestrator writes `01-evidence.md` consolidating all subagent reports. Reject any finding without a source citation. Subagents are explicitly forbidden from scoring — only the orchestrator scores, using the rubric in Phase 2.\n\n### Phase 2: Scorecard (ORCHESTRATOR)\n\nThe orchestrator scores each of the ten principles itself — do NOT delegate scoring.\n\nFor each principle, write to `02-scorecard.md`:\n\n```\nN. Good design is <principle> — Score: X/3\n   Evidence: <one-line summary citing 01-evidence.md anchors>\n   Justification: <one sentence on why this score, not the one above or below>\n```\n\nPer-principle scoring anchors (apply verbatim — pick the level whose signal best matches the audited surface):\n\n#1 innovative — 3: introduces a pattern not seen in 5+ peer products and ships it with restraint. 2: refreshes an existing pattern with a clear improvement. 1: imitates competitors with minor variation. 0: copies a competitor's flow wholesale.\n#2 useful — 3: primary task completes in fewest possible steps; no decoy actions. 2: primary task completes but adjacent surface adds steps. 1: primary task requires unnecessary detours. 0: primary task is not directly supported on the screen audited.\n#3 aesthetic — 3: spacing/type/color obey a single visible system; no orphan styles. 2: ≤2 minor inconsistencies across audited surface. 1: 3–5 inconsistencies OR one jarring violation. 0: no visible system OR active visual noise.\n#4 understandable — 3: a first-time user names every primary control correctly. 2: 1 control needs a tooltip. 1: 2–3 controls unclear; jargon present. 0: primary action is not identifiable without help.\n#5 unobtrusive — 3: chrome recedes; content is the figure, UI the ground. 2: chrome visible but quiet. 1: decoration competes with content. 0: chrome dominates content.\n#6 honest — 3: every claim, badge, and label maps 1:1 to actual behavior. 2: ≤1 minor inflation (e.g. \"powerful\" once). 1: 2+ inflations OR one dark pattern. 0: any deceptive flow (forced continuity, hidden cost, fake scarcity).\n#7 long-lasting — 3: visual language has no dated trend markers; would read as current 3 years from now. 2: 1 dated marker. 1: 2–3 dated markers (skeuomorph residue, fad gradients, trend typography). 0: design reads as a specific year's trend.\n#8 thorough — 3: empty / loading / error / success / focus / disabled all present and considered. 2: 1 state missing or rough. 1: 2–3 states missing. 0: 4+ states missing or default-browser.\n#9 environmentally friendly — 3: initial JS <100KB, no idle animation, dark mode honored, prefers-reduced-motion respected. 2: <500KB, motion gated. 1: 500KB–2MB, motion always on. 0: >2MB OR autoplay video OR dark mode ignored.\n#10 as little design as possible — 3: every element earns its place; removing any one breaks the task. 2: ≤2 removable elements. 1: 3–5 removable elements. 0: page is dominated by decoration or duplicated affordances.\n\nScoring rules:\n- **Tie-breaker rule**: When uncertain between two scores, pick the lower one. Convergence > generosity.\n- **Score worst, not mean**: When a principle has multiple representative instances on the audited surface, score the worst instance — not the average.\n- **No bonuses, no weights**: Scores stay 0–3 integer. Principles are equally weighted. Total is sum of ten scores, max 30.\n\n### Phase 3: Verdict (ORCHESTRATOR)\n\nWrite `03-verdict.md` with one of three verdicts, chosen by these rules:\n\n- **NEW DESIGN** — No design exists yet, OR the existing artifact is a stub/wireframe with no real decisions to preserve.\n- **REFINE** — Total score ≥ 20 AND no individual principle scored 0. The bones are good; iterate.\n- **REDESIGN** — Total score < 20, OR any principle scored 0 on a load-bearing dimension (typically #2 useful, #4 understandable, or #6 honest). Start over from purpose.\n\nState the verdict in one sentence. Then list the 3–5 highest-leverage moves — each tied to a specific principle and evidence anchor. These become the spine of the next phase's plan.\n\n**Anti-patterns to reject in your own verdict:**\n- Recommending REFINE because the codebase is large (sunk cost is not a design principle)\n- Recommending REDESIGN because a single screen is ugly (scope it)\n- Recommending NEW when an honest REDESIGN is warranted (don't dodge the critique)\n\n### Phase 4: /make-plan Handoff\n\nWrite `04-handoff-prompt.md` containing exactly ONE fenced `/make-plan` prompt matching the verdict. The prompt must be self-contained — the next session won't see this audit unless it's quoted in.\n\nUse the matching template below. Fill every `<bracket>`. Include the top 3–5 moves from Phase 3 verbatim, each with its evidence anchor.\n\n**Quote-in step (mandatory, applies to all three templates below):** Before emitting the handoff, replace EVERY `<bracket>` placeholder with concrete content from the audit. Inline the verdict paragraph from `03-verdict.md` and the top 3–5 moves verbatim into the template. Do NOT leave bare references like \"see DESIGN-IS-.../03-verdict.md\" — the next session won't have file access to the audit. The emitted handoff must be readable and actionable with zero external lookups.\n\n#### Template: NEW DESIGN\n\n````\n/make-plan Design <product/screen/component name> from scratch.\n\nPrimary user: <who>\nPrimary task: <one sentence>\nConstraints: <brand, stack, deadline, accessibility floor>\n\nNon-goals (do not design these now):\n- <explicit out-of-scope item 1>\n- <explicit out-of-scope item 2>\n- <explicit out-of-scope item 3>\n\nReference principles to optimize for, in order:\n1. Useful (#2) — <what useful looks like here>\n2. Understandable (#4) — <what clarity looks like here>\n3. As little design as possible (#10) — <what restraint looks like here>\n\nDeliverables for the plan:\n- Information architecture (one screen map or component tree)\n- Primary flow wireframe (low-fi, labeled)\n- Token decisions (type scale, spacing scale, color count cap)\n- States checklist (empty, loading, error, success, focus, disabled)\n- Honesty audit on every user-facing string before ship\n\nAnti-patterns to guard against (specific to NEW):\n- Decoration without function\n- Novel interactions without precedent\n- Copy that overpromises\n- Designing for screens the Non-goals list excluded\n````\n\n#### Template: REFINE DESIGN\n\n````\n/make-plan Refine <product/screen/component name> based on a Dieter Rams audit (total <X>/30).\n\nVerdict paragraph (quoted from 03-verdict.md):\n> <paste the one-sentence verdict here>\n\nKeep (already strong, do NOT touch in this pass):\n- Principle #<N> (<name>) scored 3 — Evidence: <file:line or anchor>. Regression check: <what to grep / re-test to confirm it still scores 3 after the refine>.\n- <repeat for every principle that scored 3>\n\nFix in priority order (top 3–5 moves from the audit, verbatim):\n1. <Principle # — short name>: <specific move>. Evidence: <file:line or anchor>.\n2. <Principle # — short name>: <specific move>. Evidence: <file:line or anchor>.\n3. <Principle # — short name>: <specific move>. Evidence: <file:line or anchor>.\n4. <optional 4th>\n5. <optional 5th>\n\nOut of scope for this refine pass: <explicit list — what NOT to touch>\n\nDeliverables for the plan:\n- Per-fix: target files, exact change, verification step\n- Token/spec changes consolidated in one place\n- Regression checklist for every \"Keep\" item above\n\nAnti-patterns to guard against (specific to REFINE):\n- Adding new abstractions where a direct change suffices\n- Restyling areas that already scored 3\n- Scope creep into structural redesign (if structure must change, this should be REDESIGN, not REFINE)\n- Letting fixes mutate principles outside the priority list\n````\n\n#### Template: REDESIGN\n\n````\n/make-plan Redesign <product/screen/component name>. Current design failed audit at <X>/30 with critical gaps in principles <comma-separated list of 0-scored or 1-scored load-bearing principles>.\n\nVerdict paragraph (quoted from 03-verdict.md):\n> <paste the one-sentence verdict here>\n\nWhy redesign and not refine: <one sentence — usually a load-bearing principle (#2, #4, or #6) scored 0, or total is below threshold>\n\nPreserve from current design (MUST be non-empty — at minimum, name the brand tokens):\n- <specific element 1, with file:line>\n- <specific element 2, with file:line>\n- (if structurally nothing survives, write: \"Brand tokens only — color palette and logo. Discard everything else.\")\n\nDiscard (MUST be non-empty — name the structural patterns causing the failures):\n- <pattern 1>. Evidence: <file:line>. Caused failure on principle #<N>.\n- <pattern 2>. Evidence: <file:line>. Caused failure on principle #<N>.\n\nTop 3–5 moves from the audit (verbatim):\n1. <Principle # — short name>: <specific move>. Evidence: <file:line>.\n2. <Principle # — short name>: <specific move>. Evidence: <file:line>.\n3. <Principle # — short name>: <specific move>. Evidence: <file:line>.\n\nRedesign principles in priority order:\n1. <Principle # — name> — <what success looks like>\n2. <Principle # — name> — <what success looks like>\n3. <Principle # — name> — <what success looks like>\n\nDeliverables for the plan:\n- New information architecture (not derived from old)\n- New primary flow (low-fi, labeled, compared side-by-side to current)\n- States checklist (empty, loading, error, success, focus, disabled)\n- Migration path for users currently on the old design\n- Cutover criteria (when is the old design retired)\n\nAnti-patterns to guard against (specific to REDESIGN):\n- Porting old structure under new styling\n- Keeping both designs behind a flag indefinitely\n- Redesigning to follow a trend rather than the principles above\n- Treating the Preserve list as optional — it must be filled before this handoff is valid\n````\n\n## Key Principles (for the auditor)\n\n- **Evidence over taste** — every score cites a source; \"feels wrong\" is not a finding\n- **Score what is, not what was intended** — design is what ships, not what was drawn\n- **Honesty applies to the audit too** — if total is 28/30, say REFINE even if the user wanted a redesign; if it's 12/30, say REDESIGN even if the user wanted a refine\n- **One verdict, not three** — pick NEW or REFINE or REDESIGN; do not hedge\n- **Handoff, don't implement** — `design-is` ends at the `/make-plan` prompt; `/make-plan` and `/do` take it from there\n- **Verdict commitment** — Once `02-scorecard.md` is written, the verdict follows the Phase 3 rule mechanically. Never re-score to back into a preferred verdict; if the scorecard says REDESIGN, the handoff is REDESIGN.\n\n## Failure Modes to Prevent\n\n- Scoring from screenshots alone without reading the code — redeploy with structural subagent\n- Scoring the codebase instead of the design — re-anchor on user-facing evidence\n- Awarding 3s generously to soften the verdict — recalibrate against the per-principle anchors in Phase 2\n- Producing a handoff prompt that doesn't quote the verdict and top moves — the next session is blind without them\n- Skipping Phase 0 scope lock — auditing the wrong surface wastes Phase 1\n- **Sunk-cost reasoning** — recommending REFINE because the codebase is large; sunk cost is not a design principle\n- **Hedging across verdicts** — \"could be REFINE or REDESIGN depending on...\" — pick one\n- **Score inflation to match a desired verdict** — score the evidence, then read the verdict off the rule\n- **Letting Phase 0 user preference override Phase 3 evidence** — the user can disagree with the verdict, but the audit reports what the evidence says","author":"@thedotmack","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/thedotmack/claude-mem/tree/main/plugin/skills/design-is","license":"Apache-2.0","category":"writing","lang":"en","tokens":4378,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":[]}}