mcpField
G
grilling-frontend-prototyping

grilling-frontend-prototyping

github.com/will-ness-aiDesign & UI17163 installsUpdated 1w ago
Repository

About grilling-frontend-prototyping

grilling-frontend-prototyping runs a design session through interactive prototypes rather than text-only questions. Each round presents five distinct HTML mockups with controls for switching designs and states, then narrows feedback from the overall layout to individual components.

Key features

  1. 01Five distinct prototypes per round
  2. 02Single live HTML mock app
  3. 03Draggable design picker
  4. 04Arrow-key design switching
  5. 05Mock state toggle controls
  6. 06Progressive design refinement

Use cases

  1. 01Explore alternative overall layouts
  2. 02Compare component-group designs
  3. 03Specify component details through iterative feedback

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/will-ness-ai/skills --skill grilling-frontend-prototyping

After installing, type/grilling-frontend-prototypingin Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

Run 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