Frontend Design

Production-grade UI/UX design with anti-AI-slop enforcement. Covers aesthetics, accessibility, typography, color, motion, responsive, and design tokens.

When to Use

Auto-activate on: Design tasks, UI component styling, "make it look good", "improve the design", "fix the UI", "design review", design system work, CSS/styling changes

Explicit: /mk:frontend-design [concern]

Do NOT invoke for: Vue patterns (use mk:vue), TypeScript (use mk:typescript), backend code, API integration

Workflow Integration

Operates in Phase 3 (Build GREEN) and Phase 4 (Review) for design quality checks. Output supports the developer agent (Phase 3) or reviewer agent (Phase 4).

Process

1. Analyze — detect task type (new component, redesign, review, responsive fix), load relevant design rules from references/design-rules.md
2. Implement — apply typography, color, spacing, motion per rules. Run anti-slop check (see checklist below). Ensure WCAG 2.1 AA accessibility.
3. Verify — run pre-delivery checklist before presenting to user

Anti-AI-Slop Checklist (MANDATORY before delivery)

Every design output MUST pass these checks:

Design Principles (always apply)

1. Typography first — choose typeface before colors or layout
2. Whitespace is design — generous spacing signals quality
3. Color with purpose — every color must have a semantic role
4. Motion earns attention — animate only to communicate state change
5. Accessibility is default — 4.5:1 contrast, keyboard nav, screen readers

Output Format

## Design: {component or page}

**Type:** {new design | redesign | review | responsive fix}
**Framework:** {Vue | React | vanilla CSS}

### Design Decisions
{numbered list of design choices with reasoning}

### Anti-Slop Check
{✓/✗ per category from checklist}

### Accessibility
- Contrast ratio: {value} (min 4.5:1)
- Keyboard navigable: {yes/no}
- Screen reader labels: {present/missing}

### Files Modified
{list of CSS/component files}

References

Failure Handling

Gotchas

• Tailwind dynamic class names are purged in production — classes constructed via string interpolation (\text-${size}-bold\`) are not detected by Tailwind's content scanner and are stripped from the production CSS bundle; use complete class strings in source or add them to the safelist in tailwind.config.js`.
• shadcn/ui component tokens drift from the project's CSS variables — shadcn generates components that reference --primary, --card, --muted etc. from its own token set; if the project's design system uses different variable names (e.g. --brand-primary), components render with the wrong colors silently; audit globals.css token names against shadcn's expected token list after every shadcn add command.
• Figma color token names don't map 1:1 to CSS custom properties — a Figma token named Colors/Brand/Primary exports as colors-brand-primary in Style Dictionary but shadcn and Tailwind expect --primary; manually map or configure the transformer, never assume the export name matches the CSS var name.
• Dark mode token gaps produce transparent or invisible elements — adding a dark: variant class without defining the corresponding CSS variable in the .dark scope makes the element transparent (variable resolves to empty); always verify every token used in light mode has an explicit dark-mode override in the theme.
• Default Tailwind breakpoints differ from common design system breakpoints — Tailwind's md: 768px clashes with some design systems that use md: 960px; responsive layouts built from Figma specs at 960px will reflow at the wrong breakpoint; override breakpoints in tailwind.config.js to match the design system before implementing responsive styles.
• SVG icon libraries ship multiple bundle formats and wrong import causes missing icons — importing lucide-react icons in a Vue project (instead of lucide-vue-next) compiles without error but icons render as empty elements because the React component returns JSX that Vue ignores; always verify the framework-specific package is used.

Handoff

On completion → reviewer agent for Phase 4 design dimension check.