PC UI Design Spec

Problem It Solves

When high-fidelity PC designs are turned into admin frontend code, common failures include inconsistent component styles, wrong spacing and states, and visual changes that accidentally alter business behavior. This skill targets a stack of @umijs/max, React 18, Ant Design 5, Pro Components, and Less. It helps developers inspect the existing project before writing UI code, instead of creating custom controls by default.

How It Works and Boundaries

During execution, it first runs logger.js, then checks package.json, nearby pages, layouts, global styles, and the Ant Design Input replacement logic before changing input behavior. It reads references/pc-ui-rules.md before visual implementation, prefers Ant Design components, project wrappers, and @ant-design/icons, and uses scoped .less files for local styles. It keeps layout, spacing, type scale, color, component states, and visible data density aligned with the design, while preserving APIs, routes, permissions, and business state unless explicitly asked. Before finishing, it runs the smallest relevant format, build, or type-check command and inspects the page in a browser when feasible. It does not redesign beyond the supplied design, add new UI libraries for ordinary admin pages, hard-code data to fill a screenshot, or use oversized rounded cards, heavy gradients, decorative blobs, or marketing hero layouts for operational pages.