Design Specs Web

design-specs-web 📐

**Ready-to-drop `DESIGN.md` spec packs for Chinese mainstream UI libraries.**

The `DESIGN.md` pattern (popularized by VoltAgent's awesome-design-md, 100k+ stars) gives AI coding agents a project-level spec that stops them from fighting the component library — writing boilerplate components that already exist, hand-rolling validation the `Form` component owns, and overriding CSS the theme system already handles.

The ecosystem has good specs for Tailwind/shadcn and Western stacks. **It has almost nothing for the UI libraries Chinese teams actually use.** This repo fills that gap: opinionated, copy-paste `DESIGN.md` packs for Ant Design, Element Plus, Arco Design, Semi Design, Naive UI, and TDesign — plus a small CLI that assembles a project spec from a pack + framework conventions.

$ design-specs compose antd --framework react -o DESIGN.md
✓ wrote DESIGN.md (Ant Design · react)

The packs

pack	library	framework	highlights
antd	Ant Design 5.x	React	CSS-in-JS token 主题、Form/Form.Item、App.useApp() 上下文
element-plus	Element Plus	Vue 3	、按需自动导入、CSS 变量主题
arco	Arco Design	React	@arco-design/web-react、Grid/Form、图标命名 IconXxx
semi	Semi Design	React	@douyinfe/semi-ui、Form.X 组合、semi-theme
naive-ui	Naive UI	Vue 3	n-config-provider、theme-overrides（最强主题能力）
tdesign	TDesign	React/Vue	腾讯多端体系、MessagePlugin 插件式 API

Every pack follows the same shape — 概览 → 安装与按需引入 → 命名结构 → 组合优于配置 → 表单 → 数据展示 → 反馈 → 主题 → **常见坑** → 组件选择速查 → **AI 生成约束**（Do / Don't）。The "常见坑" and "AI 生成约束" sections are the ones that actually change agent output; the rest is reference.

What makes these packs useful (not just a component list)

They encode the *non-obvious* rules an agent gets wrong, in the agent's own voice:

• ❌ "不要手写受控 state 再手动校验" → ✅ "用 Form + rules"
• ❌ "不要覆盖 .ant-*/.el-* 类名改样式" → ✅ "用 token / CSS 变量 / `theme-overrides