Develop: Design Better

A craft layer for any coding agent generating or reviewing UI. Style is owned by docs/DESIGN.md; this skill owns the timeless UX/UI craft heuristics — drawn from Nielsen Norman Group, Laws of UX, Shneiderman, Refactoring UI, WCAG 2.2, Don Norman, Apple HIG, Material 3, and 2025–2026 AI-product patterns — that separate "shipped" from "designed."

Boundary. When a heuristic implies a visual property, reference a DESIGN.md token by name ({colors.primary}, {rounded.md}). If DESIGN.md doesn't have the token, flag as a New Pattern — never inline hex, font names, or arbitrary px.

Inputs

• docs/DESIGN.md — required. If missing, stop and tell the user to run studio-design-design-system.
• The thing being built or refactored — a brief, a file, or uncommitted diff.
• productos/design/1-Product-Identity.md and docs/PRODUCT.md — optional. Identity informs microcopy tone; PRODUCT.md helps weight which heuristic categories dominate.

Workflow

1. Read docs/DESIGN.md. Parse the token catalogue (colors, typography, rounded, spacing, components) and the markdown rules (elevation, shape, Do's and Don'ts).

2. Confirm scope and weight. Restate the surface (signup / dashboard / chat / settings / detail / marketing) and which heuristic categories will dominate — a signup leans on Forms + States + Accessibility + Microcopy; a data dashboard leans on Hierarchy + IA + Cognitive Load; an AI chat leans on the AI-product subset.

3. Generate or review using both layers. DESIGN.md tokens for every visual decision; the heuristics catalogue for every craft decision. Cite heuristics by number in reviews ("H22 — disabled instead of erroring after submit").