design-grill
25Command
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
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
Use when a design system needs structure rather than more components. Token architecture, component APIs and variants, theming, and governance over who can change what.
Command
Use when a dwic audit report is full of findings and there is no plan. Ranks them into an order someone can work through, then works through it.
Command
Use when building drag and drop or direct manipulation. Reordering lists, dragging onto a canvas, multi-select, drop targets nobody can see, or drag that is impossible by keyboard.
Command
Use when shoppers cannot find or evaluate products. Product pages, filtering and facets, image galleries, reviews, and product comparison. The discovery half of a store.
Command
Use when handling secrets and config. What .env files are, which filename to use, what must never reach GitHub, and why a key works locally but not in production.
Command
Use when things go wrong badly. Error messages that blame the user, validation firing at the wrong moment, form data lost on failure, dead-end 404 and 500 pages, or no way to retry.
Command
Use when a form is losing people. Too many fields, validation that interrupts typing, unclear required fields, a multi-step flow with no sense of progress, or inputs with no labels.
Command
Use when designing clinical or patient-facing interfaces. Clinical workflows, displaying sensitive patient data, HIPAA considerations in the UI, and medical terminology patients do not speak.
Command
Use when a product has to work in more than one language. Right-to-left layouts, German strings breaking buttons, date and number formats, or English hardcoded into the UI.
Command
Use when users cannot find things. Navigation that mirrors the org chart, labels nobody understands, a taxonomy that grew by accident, or content with no obvious home.
Command
Use when deciding how something should behave rather than how it looks. Click and tap targets, gestures, keyboard paths, loading and empty and error states, and the feedback each action gives.
Command
Use when a landing page is not converting. A hero that never says what the product is, weak or buried CTAs, no social proof, or a pricing table nobody can compare across.
Command
Use when a design will be used on phones. Touch targets too small, controls outside thumb reach, bottom navigation, gestures, safe areas and notches, or behaviour with no connection.
Command
Use when animation feels wrong. Transitions too slow or too bouncy, motion with no purpose, blanket transitions on every property, no reduced-motion support, or animation that drops frames.
Command
Use when people get lost. Choosing between a sidebar, top bar or bottom tabs, breadcrumbs, mega menus, a command palette, or navigation that collapses badly on small screens.
Command
Use when new users leave before their first success. First-run experience, tooltip tours nobody reads, empty states, setup checklists, or features nobody ever discovers.
Command
Use when a product feels slow even when it is not. Blank screens while loading, spinners everywhere, no optimistic updates, missing skeleton screens, or layout that jumps as content arrives.
Command
Use when something has to leave the screen. PDF generation, print stylesheets, receipts and invoices, exported reports, or a download that gives the user no feedback.
Command
Use when a layout breaks between sizes. Arbitrary breakpoints, type that does not scale, images that blow out the grid, or a desktop design retrofitted onto mobile.
Command
Use when search is failing users. No autocomplete, results ranked badly, filters that return nothing, or a zero-results state that offers no way forward.
Command
Use when someone is starting from nothing and the terminal is unfamiliar. Installing Node and Claude Code, creating a first project, and what to do when a command fails.
Command
Use when spacing looks arbitrary. Padding and margins off any scale, inconsistent gaps between the same components, no grid underneath, or a layout that needs a denser mode.
Command
Use when a data table is hard to use. Too many columns, no sorting or pagination, unclear row selection, inline editing, or a table that becomes unreadable on a phone.