skills.rest
xriu
xriuCOMMUNITY
Explore all skills by this author →
GitHub

grill-design

Iterates on frontend visual design through rounds of live HTML prototype comparisons.

2|2|Updated Dec 23, 2017
Search Tags:#html#frontend#visual design#prototyping#ui design#design iteration#mockup
One-click install
npx skills add https://github.com/xriu/dotfiles --skill grill-design-xriu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: grill-design
Source: https://github.com/xriu/dotfiles/tree/main/home/.skills/grilling-design
Command: npx skills add https://github.com/xriu/dotfiles --skill grill-design-xriu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a frontend look through abstract discussion is slow and ambiguous. This Skill replaces verbal design debates with concrete, interactive prototypes so users can converge on a visual direction by reacting to real rendered variants. ## Core Features & Use Cases - Prototype-Driven Grilling: Each design question is answered with 5 radically different prototypes rendered in a single live mocked HTML app, updated in place each round. - Interactive Variant Picker: A floating draggable picker names each design, with arrow-key switching that restyles the mock live, plus state toggles (e.g., full vs empty inbox) when the design has meaningful states. - Progressive Zoom-In: The session walks down the visual design tree from overall look, to component groups, to individual components, until the feature is fully designed. - Use Case: A developer picking up a wayfinder prototype ticket runs a grilling session to settle the layout, then the card components, then button styles, each decided by comparing live variants. ## Quick Start Ask the assistant to run a grilling session to iterate on the visual design of your feature using live HTML prototypes.

Frequently Asked Questions about grill-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I iterate on UI design with live prototypes?▼

Run a grilling session where each design question is answered with five radically different prototypes built into one live mocked HTML app. You give verdicts on variants each round, and the mock updates in place until the design converges.

How to compare multiple frontend design variants in one file?▼

Build all variants into a single standalone HTML file with a floating draggable picker that names each design. Arrow keys switch between variants, restyling the mocked app live without reloading.

Can the prototype mock show different UI states?▼

Yes. When a design has meaningful states, such as an inbox that is full versus empty, the picker includes toggle buttons that switch the mock between those states so each variant can be judged in context.

What is the grilling design process for frontend work?▼

The process walks down the visual design tree: first the overall design, then component groups, then individual components. Each verdict zooms in one level until the entire feature is designed in detail.

When should I not use prototype-based design iteration?▼

Avoid it when the design constraints are already fully specified or when the question is about backend logic rather than visual taste. It is built for converging on look and feel through concrete variants, not functional implementation.

Related Skills

Explore More Design & Creative Skills→
aaronbrethorstaaronbrethorst
5

user-story-creator

Generate user stories from URLs, ticket numbers, or summaries with acceptance criteria.

Community
Advanced
cc01cccc01cc
4

frontend-design

Translate design goals into accessible frontend interfaces with cohesive typography, color, and motion.

Community
Advanced
Ankish8Ankish8
2

Design System Validator

Validate component code for CSS variables, responsive patterns, and accessibility compliance.

Community
Advanced
warpdotdevwarpdotdev
64.1k

edit-figma-design

Create or modify Figma designs from natural-language prompts.

Official
Advanced