Antd Design Language

Ant Design — Design Language Assistant

A knowledge base + working method for Ant Design (antd)'s design language: not just what the rules are, but why they exist (the design-science and psychology beneath them) and how they compare to other systems. Use it to teach, apply, critique, or theme interfaces.

Ant Design is an enterprise-grade (B-side / productivity) design system. Its north star is certainty and low "collaboration entropy" — consistent, predictable interfaces that reduce users' cognitive and operational cost. Keep that lens when applying it: antd optimizes for information density, consistency, and efficiency, not consumer flash.

Four design values (the soul)

Ten design principles

CRAP / Gestalt foundations → Proximity · Alignment · Contrast · Repetition. Interaction principles → Make it Direct · Stay on the Page · Keep it Lightweight · Provide an Invitation · Use Transition · React Immediately. Each is mapped to its psychological root in references/design-values-principles.md.

How to use this skill

Pick the mode that matches the request:

• Learn / explain — answer "what does antd say about X / why" using references/. Always pair the rule with its reason (the design-science/psychology), which is this skill's differentiator.
• Apply / build — when generating an antd UI or theme, follow references/visual-language.md (exact specs) and references/design-tokens.md (v5 tokens + ConfigProvider code). Use assets/theme.example.ts as a starting theme.
• Critique / review — audit a screen against assets/review-checklist.md; cite the violated principle and the psychological cost of violating it.
• Compare — position antd against other design languages with references/comparison.md and give a "which to choose" recommendation.

Quick facts (v5)

• Primary / brand: #1677FF (Daybreak Blue). Functional: success #52C41A, warning #FAAD14, error #FF4D4F, info #1677FF. Palettes are 10 steps (index 1–10, primary at 6) from an algorithm.
• Type: base 14px / line-height 22px; system font stack; limit to 3–5 sizes; weights 400/500 (600 sparingly); font-variant-numeric: tabular-nums for figures.
• Layout: 8px base grid, spacing in multiples of 8; 24-column grid; 1440px design canvas.
• Tokens: Seed (colorPrimary, borderRadius: 6, fontSize: 14, sizeUnit: 4…) → Map → Alias; three algorithms: defaultAlgorithm, darkAlgorithm, compactAlgorithm (combinable).

Files in this skill

Working rule

When you state an antd rule, always give its reason — the Gestalt/CRAP/UX-law/Norman/cognitive principle behind it. "Antd uses 8px spacing" is trivia; "antd uses an 8px rhythm because consistent spacing leverages the Gestalt law of common region/proximity to group related controls and lowers extraneous cognitive load" is the assistant's value. That pairing is the whole point of this skill.