About grill-design
grill-design is a design skill for running `/grilling` sessions with `/prototype`. It helps users explore a feature visually, moving from the overall design to component-level details through successive rounds of prototypes.
Key features
- 01Five distinct prototypes per round
- 02Live single-file HTML mockup
- 03Draggable picker with arrow navigation
- 04Buttons for switching mock states
- 05Progressive design review from layout to components
Use cases
- 01Compare alternative overall layouts
- 02Review component group designs
- 03Choose between meaningful interface states
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/grill-designin Claude Code to confirm it loaded.
Bundled filesagents/openai.yaml
Details
From the project READMERun a /grilling session, using the /prototype skill — each question is asked with prototypes, not words:
- Each round, build 5 radically different prototypes of the current design question into one live mocked app: one standalone HTML file (Artifact tool), updated in place each round.
- A floating bottom-right draggable picker names each design; ←/→ arrows switch between them, restyling the mocked app live. When the design has meaningful states (an inbox: full vs empty), add picker buttons that toggle the mock between them.
- The grilling walks down the visual design tree, each verdict zooming in one level: the overall design, then component groups, then individual components — until the user has designed the entire feature in detail.
Comments
Markdown supported