Build production-grade web UIs with spatial critique loops

Design (entry) is a reusable skill that extends AI assistants to build and style production-grade web UIs - components, pages, dashboards, landing pages, and React/Vue/HTML-CSS layouts. It enforces a render-then-critique workflow where a separate judge evaluates the visual output (not the code) before any design is marked complete, preventing the spatial collisions and generic aesthetics typical of blind generation.

Use this skill whenever building or styling web UIs, or when the user asks to make something "look better/nicer", fix spacing/layout, or mentions styling, color, typography, fonts, responsive design, polish, or aesthetics - even without the word "design". Applies to components, pages, dashboards, landing pages, and any frontend interface work.

When NOT to use: This skill is not for backend logic, API design, or non-visual system architecture.

Inputs: User requests to build or style web UIs, improve aesthetics, fix layout issues, or create frontend interfaces. The skill accepts natural language descriptions of design intent, including mentions of styling, spacing, typography, responsive behavior, or visual polish.

Outputs: Production-grade web UI code (React, Vue, HTML/CSS) that has passed mandatory quality gates, including:

• Horizontal-overflow measurement at narrow widths (~390px and ~1024px):

document.documentElement.scrollWidth - document.documentElement.clientWidth

This value must equal 0 before the design is considered complete. The skill defaults to flex-wrap:wrap on header/toolbar rows plus body{overflow-x:clip} and re-measures after adding any element to a horizontal row.

• Render-then-critique evaluation by a separate judge reviewing the visual output
• Annotated LLM costs when generative work is involved (model name, estimated and actual cost)
• Typeset equations with annotated terms for any algorithm or model exposed to users:

P(personal | x) = σ(w·ex + b),  σ(z) = 1 / (1 + e^-z)
• ex - the image's 768-d embedding · w, b - weights learned from your labels
· decision: personal if P >= 0.55, reference if P <= 0.40.

The skill loads five specialized sub-skills when relevant:

design-thinking - Loaded for every design task. Defines purpose, tone, domain, color world, review bar, and cross-domain lens drawing from cinema, architecture, marketing, UX, automotive, and industrial design.

design-system - Loaded when implementing tokens, typography, motion, color semantics, and backgrounds. Used for building components, pages, or design systems.

design-spatial - Loaded when composing layout. Enforces explicit grid plus 8-point spacing constraints, visual-weight/balance/alignment, and a render-then-critique vision loop. Fixes "spatial understanding is off" issues like centered mush, misalignment, or breakage at certain widths.

design-ux - Loaded when auditing usability (not just aesthetics). Scores rendered UI against Nielsen's 10 heuristics plus interaction heuristics via a separate fresh-eyes judge, producing a prioritized fix list. Used before shipping any interactive tool, editor, or app.

design-philosophy - Loaded for high-concept work, campaigns, or when users request a visual philosophy, manifesto, or unmistakable art-like aesthetic.

When design-thinking identifies a need for visual assets (logos, icons, hero images, textures, backgrounds), the skill can generate them using an image-generation model or API, or source real/archival ones via free stock or archival image search.

Frontend developers and designers building web interfaces who need to avoid the "generic AI aesthetic" and ship production-quality work. Suited for anyone building components, pages, dashboards, or landing pages who needs systematic quality gates and usability auditing beyond surface-level polish.