Ant Design Prototype Design

What it solves

When AI tools generate Ant Design pages, the problem is rarely that a component is missing. It is usually that spacing is not on a 4px grid, border radius is mixed, primary hover states are hard-coded, and layout heights do not match B-end conventions. The result looks like a disconnected demo rather than a deliverable Ant Design prototype.

How it works

The skill packages an Ant Design v6 specification into a rule file that can be added to a system prompt or placed in the project root. It first reads the brand configuration, where project values such as colorPrimary, logoPath, and siderWidth override default tokens. It then constrains spacing, radius, typography, control height, shadow, and motion through global Design Tokens. Finally, it applies the B-end layout guide to structure the sidebar, header, and content area.

The goal is to give the model a checkable design baseline:
- spacing must follow the 4px unit;
- radius should prefer 2px / 4px / 6px / 8px;
- control height should use 24px / 32px / 40px;
- colors should prefer semantic tokens such as colorPrimary and colorSuccess;
- derived primary states should rely on Ant Design token generation instead of manual color values.

Boundaries

It fits Ant Design-style B-end prototypes, admin consoles, dashboards, form pages, and list pages. If the project uses a fully custom design system, non-Ant Design components, or must exactly match a brand visual draft, this specification is only a reference and not the sole source of truth. You should still verify breakpoints, contrast, accessibility, and real business field constraints.