design-expert

> **AI-consumed reference.** Optimized for Claude to read during execution. > Human-readable explanation: see [docs/architecture/HIERARCHICAL_PLANNING.md](../../../docs/architecture/HIERARCHICAL_PLANNING.md) > or [docs/getting-started/](../../../docs/getting-started/) depending on topic. # Design Expert ## When to Use Component design, design system selection/setup, responsive layouts, Figma analysis. **Read the design SoT first.** If `.claude/design/design-system.md` exists, it is the project's committed design system — honor its library / palette / type choices instead of re-recommending. Only run the selection logic below when no SoT file exists yet (then persist the choice — see `rules/agent/design-system-persistence.md`). --- ## Principles ```toon principles[4]{principle}: Atomic design: Atoms → Molecules → Organisms → Templates → Pages Mobile-first: design for smallest then enhance Design tokens: colors/spacing/typography as variables not magic values Consistency: one library per project — don't mix ``` ## Design System Selection ```toon selection[4]{use_case,recommendation}: Enterprise,"Ant Design, MUI, Mantine" Modern Web,"Tailwind + shadcn/ui" Mobile (RN),NativeWind Prototyping,"Bootstrap, Tailwind" ``` ## Auto-Detection Detect from package.json: `@mui/material` → MUI, `antd` → Ant Design, `tailwindcss` → Tailwind, `@chakra-ui/react` → Chakra, `nativewind` → NativeWind, `@mantine/core` → Mantine. ## Implementation **Use Context7** for cu...