design-for-ai

Decomposes underspecified design requests by classifying gaps (missing brand context, visual ambiguity, false premises, scope faults) and generating targeted clarifying questions. Produces a confirmed design brief before any design work begins. For sharpening a design request that already exists; not for open-ended design brief discovery from a vague idea (use /design-for-ai:research).

Applies data visualization and information design principles to encode data truthfully and efficiently. Use when the question is about charts or graphs — chart type selection (bar, line, scatter, heatmap, small multiples), data-ink ratio and chartjunk reduction (Tufte VDQI), preattentive attributes (Knaflic Storytelling with Data), dashboard layout and KPI design (Few Information Dashboard Design), truthful encoding and chart lie detection (Cairo How Charts Lie), marks and channels (Munzner), colorblind-safe palette selection for charts, or chart accessibility. Not for: brand or UI color palette generation (use core color mode); overall page composition and visual hierarchy (use core audit mode); data-display tables as a UI pattern (use usability); typeface or font selection (use core fonts mode); UI copy or writing (use content-design).

Produces self-contained HTML/CSS mockups and wireframes from design tokens and page specs — the output is always a viewable .html file, not guidance or code. Use when the request is to see a design, make a mock, build or show a prototype, create a wireframe, render a preview, or visualize what a page looks like before writing production code. Reads DESIGN.md tokens and JOURNEY.md page specs when present; uses greyscale wireframe defaults when absent. Renders via the browser MCP and returns a screenshot path when connected; emits the .html with an open note when not. Not for: choosing or defining fonts, colors, visual identity, or design tokens (use core design); critiquing, auditing, or reviewing an existing design (use core audit); planning IA, flows, or page specs (use journey); building a design token system or component library (use design-systems).

Adjudicate whether users can operate an interface, and run heuristic evaluation. Use when the question is operability rather than looks — is it usable, hard to use, confusing, where do users get stuck; heuristic evaluation, Nielsen heuristics, usability audit, severity rating; the UX laws (Fitts, Hick, Miller/Cowan, Jakob, Tesler, Doherty, peak-end, Zeigarnik, aesthetic-usability); Gestalt grouping, affordances, signifiers, mapping, feedback, cognitive load, recognition over recall; picking among navigation, form, search/filter, table/data, feedback, action, disclosure, or onboarding patterns; or usability-side accessibility (WCAG POUR, inclusive design). Not for: the visual look or aesthetic audit (use core design/audit); the words/microcopy themselves (use content-design); the route through time, IA, or funnel (use journey); persuasion or conversion mechanics (use behavioral); truthful chart/data encoding (use data-viz).