coder-frontend-design

<when_to_use> Creating or updating a design system for web UI Defining visual foundations before implementation Aligning design decisions between design and engineering Reviewing UI consistency and scalability risks </when_to_use>

<input_requirements> Product context and target platforms (web/mobile web/desktop web) Brand constraints (colors, typography, tone) Accessibility target (e.g., WCAG 2.2 AA) Existing design system or UI kit Current component library and theming model </input_requirements>

<core_principles> Use design tokens as the single source of truth; avoid hardcoded visual values in components Structure tokens by layers: primitive, semantic, and component-level Model color as semantic roles (surface, text, accent, status) instead of standalone palette usage Meet required contrast ratios for text and key UI elements Use a consistent type scale and spacing scale for hierarchy and rhythm Use responsive grid rules and explicit breakpoints/window classes; do not design for fixed devices only Define component variants and states (default, hover, focus, active, disabled, loading) Keep component APIs minimal and reusable; avoid one-off visual patterns without system value Document handoff artifacts: token mapping, component anatomy, and edge-case behavior </core_principles>

<quality_rules> Every visual rule is testable in design or implementation review System-level changes include migration impact for existing components Design decisions are traceable to tokens and component contracts Exceptions are documented with scope and expiration criteria </quality_rules>

<do_not> Do not hardcode colors, spacing, or typography in feature-level UI Do not introduce new variants before checking existing system patterns Do not approve components without focus and disabled states Do not overload the token set with near-duplicate values </do_not>

<output_requirements> List chosen foundations (tokens, typography, color roles, layout rules) List component patterns and required states List known risks and consistency trade-offs Provide references to standards and system guidance used </output_requirements>