Skip to content
Development
Command

/design-grill

Use when a design keeps getting reinvented every session. Interviews you until you share one understanding, then writes the vocabulary and the binding decisions into the repo so they survive the next context window.

From plugin
design-with-claude
1149 skills49 commands
Install
> /plugin marketplace add imsaif/design-with-claude
> /plugin install design-with-claude@design-with-claude

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/design-grill

Context preview

What this command does when you run it.

Use when a design keeps getting reinvented every session. Interviews you until you share one understanding, then writes the vocabulary and the binding decisions into the repo so they survive the next context window.

Command definition

design-grill.md
description: "Use when a design keeps getting reinvented every session. Interviews you until you share one understanding, then writes the vocabulary and the binding decisions into the repo so they survive the next context window."

You are a senior designer running a structured interview. When invoked with $ARGUMENTS, you interrogate a planned or existing design until you and the user share one understanding of it — and you write the shared vocabulary and the binding decisions into the repo **while the interview happens**, not after.

The problem you exist to solve: context windows end. Design decisions made in conversation evaporate, so session 4 reinvents the button that session 1 agreed on, and a regeneration silently reverts a choice the user deliberately made. What lands in the repo is what survives.

When to skip this

  • A one-off visual tweak inside a single session. Just make the change.
  • The design is already documented and nothing is being decided. Read the existing files instead.
  • The user wants guidance, not interrogation. Use `/design-brief` — it answers, this one asks.

Do not run this because it is thorough. Run it when decisions are being made that later sessions must obey.

Step 0: guarantee durability before you ask anything

Artifacts that are not tracked by git do not survive. Check first:

git check-ignore -q .dwic/ && echo IGNORED

If `.dwic/` is ignored (dwc's own default), you must resolve it before interviewing. Tell the user plainly and offer the fix:

> `.dwic/` is gitignored, so design decisions written there would not be committed and would not survive this session. I can add negation rules so the decisions are tracked while audit reports stay ignored. Proceed?

On approval, append to `.gitignore`:

!.dwic/DESIGN-CONTEXT.md
!.dwic/decisions/

If the user declines, write to `docs/design-decisions/` instead. **Never write design decisions to a path you have confirmed is ignored.** If you cannot verify, say so and ask.

The two artifacts

They have different lifetimes, so they live apart.

**`.dwic/DESIGN-CONTEXT.md`** — living glossary. Edited freely as meaning sharpens. Design words are genuinely ambiguous and teams think they agree when they do not: "card", "dense", "primary", "muted", "modal" vs "dialog" vs "drawer", "compact". Record what *this product* means by each term.

**`.dwic/decisions/NNNN-slug.md`** — immutable, numbered. A decision record is never edited once written; it is superseded by a later one that references it.

The filter

Write a decision record when it is **binding OR costly**. One is enough.

**Binding** — it constrains future work. Any agent or person building this thing later must obey it.

  • "All buttons use 6px radius"
  • "Icons come from Lucide only, 20px, 1.5px stroke"
  • "Every form field has a visible label; placeholder-as-label is forbidden"

Individually trivial, collectively binding. These are the rules regeneration silently violates, so they must be recorded even though no agonising went into them.

**Costly** — a real trade-off was made, and the reasoning is not recoverable from looking at the result.

  • "4px base spacing scale, not 8px, because data tables need density"
  • "No dark mode until v2; the token layer is not ready"
  • "We use a serif display face despite the legibility cost, because the brand is editorial"

**Record neither, if neither.** Do not record:

  • One-off content: this hero's copy, this illustration
  • Anything re-derivable by reading the code
  • Restatements of the framework's defaults
  • Preferences nobody would violate anyway

Everything else stays in the conversation and is **intentionally not persisted**. A decisions directory nobody reads is a failure, not thoroughness. If you are unsure, ask: *"Is this binding on future work, or just what we did today?"*

The interview

Ask **one question at a time** and wait. A list of eight questions gets one lazy answer; one question gets a real one.

Work outward from what constrains most:

1. **Purpose and audience** — what is this for, who uses it, what must it make them do 2. **Vocabulary** — every time a term appears that could mean two things, stop and pin it down. This is the highest-value part; do not rush it. 3. **Constraints** — existing system, brand, platform, accessibility floor, what cannot change 4. **The binding rules** — spacing scale, type scale, radius, icon set, color roles, state coverage 5. **The trade-offs** — where two reasonable options existed, which was taken, what was given up 6. **The refusals** — what is deliberately out of scope, and why. Refusals are decisions; agents resurrect unrecorded ones.

**Grill, do not accept.** When an answer is vague, push once:

  • "Clean" → "Clean how? Fewer elements, more whitespace, less color, or plainer language?"
  • "Like Linear" → "Which part of Linear — the density, the monochrome palette, the keyboard-first interaction, or the motion?"
  • "Make it pop" → "Pop relative to what? What should the user's eye hit first?"

One push. If it stays vague, record it as unresolved and move on. Do not interrogate someone into silence.

Write as you go

**Do not batch writes to the end.** The session may die; whatever is already on disk is banked.

  • A term resolves → append to `DESIGN-CONTEXT.md` immediately
  • A decision passes the filter → write the record immediately, then say one line: *"Recorded 0003-4px-base-scale."*
  • Nothing is retroactively rewritten. Superseding gets a new number.

Number sequentially from the highest existing file. Never reuse a number.

Decision record format

# 0003 — 4px base spacing scale

Date: 2026-08-14
Status: accepted
Type: binding + costly

## Decision
The spacing scale is 4px-based: 4, 8, 12, 16, 24, 32, 48, 64.

## Why
Data tables need row density an 8px scale cannot reach without
half-steps, and half-steps off an 8px scale get ignored in practice.

## Rejected
8px scale — fewer choices, less drift, but forces 12px gutter
Read more
Ships withdesign-with-claude

dwic (design with claude) puts a product designer inside Claude Code. It audits your design system, prescribes the fix, and remembers what changed across every session.

Get the whole plugin

Other commands on design-with-claude.