B End Design System Skill — AI skill for Claude Code

B端设计系统与组件规范 AI Skill (Ludi Design System Skill)

**让 AI 生成的代码，第一次拥有资深高级 UI/UX 设计师的灵魂与品味。** 一套彻底终结“AI 拼装页面毫无设计感、组件乱堆、弹窗抽屉滥用、色彩失控”的可执行 AI 设计系统资产。

[](LICENSE) []() []() []()

---

为什么需要这个 Skill？

你是否也经历过这样的问题？

• 让 AI 生成一个后台页面，它只会粗暴地把 Button + Input + Table 随机堆砌，缺乏合理的业务组织；
• 列表里明明应该用右侧侧边抽屉 (Drawer) 快速查看详情，AI 偏偏弹出一个巨大的模态弹窗把整个屏幕遮死；
• 稍微填完一段表单，鼠标不小心在遮罩空白处点了一下，弹窗直接静默关闭，辛苦录入的数据瞬间蒸发；
• 状态标签（Badge）红、绿、黄、紫全靠 AI 随缘上色，刺眼的深底色破坏表格扫读体验；
• 粗黑的 1px solid #000、机械死板的数学居中、带阴影的卡片被父级直接裁切成半截……

**根本原因：AI 从来不缺写代码的能力，它缺少的是成体系的「设计决策约束」与「组件选型否定判据」！**

本 Skill 将十余年 B 端企业级设计系统与交互法则，转化为 Agent、Claude Code、Cursor、Windsurf、Codex 可以直接理解并 100% 严格执行的 **“AI 可执行设计规则层”**。

---

核心能力与特色亮点

1. B端六大经典页面模板骨架 (Page Archetypes)

补齐了“组件库说有什么零件、页面模板说怎么组装”之间缺的那一层。内置：

• 查询列表页（单列/双列、筛选栏三态、批量浮动条、独立表格横滚容器）
• 分步/分组表单页（Top-aligned 标签置顶、失焦即时校验、离开防丢脏检查）
• 单据/高级详情页（DetailHeader、DescriptionGrid 四层亲密度区隔、Tabs 协同页签）
• 指标工作台与看板（3-4 个核心 KPI 控制、统一时间口径、轻量原生趋势图）
• 设置页（自服务即时生效 vs 规则配置显式提交判据）
• 异常与结果页（五态覆盖、403/404/500 四要素配齐）

2. 组件选型七大否定判据 (The Seven AvoidWhen Rules)

**“缺的从来不是能用什么，而是不该用什么。”**

• 量级不匹配：选项 < 5 个强制单选框平铺；选项过多强制下拉带搜索；
• 模态 ≠ 阻断：查看详情首选侧边抽屉 (Drawer) 保留背景上下文；高危删除才上 ConfirmDialog；
• 时长阈值：< 1 秒禁止展示骨架屏（防止强闪烁）；1-3 秒按钮 Spin；> 10 秒强制百分比与取消出口；
• 重要性错配：严禁把关键报错藏在气泡 (Tooltip) 内部；
• 语义错位：原地改状态用 Button，跨路由跳文档用 Link；改动即生效用 Switch，随整表提交用 Checkbox。

3. 视觉微调与美学硬门禁 (Aesthetic Rules)

• 0.5px 精细微边框：告别粗笨大黑线，赋予界面通透轻盈的高级质感；
• 光学同心圆角法则：$R_{outer} = R_{inner} + Padding$，彻底消灭内角挤压畸变；
• 光学视觉重心：拒绝机械居中；弹窗垂直固定于视口 38.2% 黄金分割位；
• Badge 80% 浅底深字法则：柔和微色调背景搭配高对比深色文字，告别刺眼配色；
• 主操作唯一性：一个独