基于 shadcn 为 AI 编写 B 端设计 Skill，将设计师的经验判断转化为 AI 可执行的规则。shadcn 解决了界面实现，但 B 端产品的关键判断——金额对齐、操作按钮堆叠、AI 建议可信度等——需要额外的规则层来约束 AI 的生成行为。

理解 shadcn 技术栈

shadcn 结合了四项技术：

• React：像画布，决定界面如何拆分为组件、如何组合
• Tailwind CSS：像颜料盒，处理颜色、字号、间距、圆角等视觉 Design Tokens
• Radix：像握笔手法，处理键盘导航、焦点管理、无障碍等交互细节
• shadcn：提供 Button、Table、Input、Dialog 等组件源码，直接复制到项目中

shadcn 不同于传统组件库（"租房"），它的源码直接进入项目（"买地盖房"），可以阅读、修改、扩展，非常适合 AI 生成界面。

shadcn 解决了实现，但没有解决判断

shadcn 的主题和 tweakcn 等工具解决了皮肤层问题，但 B 端产品的关键判断不在颜色或圆角里，而在业务规则里：

• 金额该不该右对齐？
• 表格操作按钮能不能无限堆叠？
• AI 建议该不该带引用来源？
• 低置信度建议能不能一键执行？
• 不可逆操作是不是必须弹确认？

这些判断需要写成规则，让 AI 在生成界面时遵守。三层解耦架构：

• shadcn：提供组件和实现基础
• Skill：提供业务规则和设计判断
• Visual Guide：提供视觉风格和品牌气质

Skill 制作思路

• 场景要小：锁定最小 MVP——客户列表页 + AI Copilot Sidebar
• 规则要写"为什么"：不只写"怎么做"，还要解释原因，让 AI 能迁移规则
• 用好坏案例建立边界：明确列出好例和坏例，防止 AI 生成"看起来没错但不可靠"的界面
• 用生成结果反过来修 Skill：写规则 → 生成界面 → 发现偏差 → 修正规则 → 再生成

Skill 目录结构

├── foundations/      视觉基础（setup、design-tokens、ai-motion）
├── components/       组件层
│   ├── traditional/  传统 B 端：搜索、表格、分页
│   └── ai-native/    AI 原生：Chat 消息、建议卡片、引用溯源
├── patterns/         页面模式：客户列表页、AI Copilot Sidebar
├── principles/       核心原则：AI Trust 三原则
├── examples/         好坏案例对比
├── prompts/          AI 生成指令
└── references/       视觉规范

安装步骤

# 初始化 shadcn
npx shadcn@latest init

# 安装组件
npx shadcn@latest add button input table badge checkbox select   dropdown-menu dialog sheet textarea toast tooltip scroll-area

核心：AI Trust 三原则

AI Trust 三原则对应三个问题：它凭什么这么说？它有多确定？用户能不能直接让 AI 去执行？

底层信念：AI 负责发现风险和提供依据，人负责判断和承担责任。

1. Source（来源）

AI 必须告诉用户判断的依据。例如："客户 A 已 45 天无跟进。依据：客户跟进记录 · 最近一次跟进时间 2024-12-03。" 这样用户才能核实源数据。

红线：AI 无法给出可靠来源时，必须明确说"我不知道"，不能编造。

2. Confidence（置信度）

不推荐直接显示"置信度 87%"，而用语义表达：高置信度直接说结论，中置信度加前缀"根据……"，低置信度明确提醒数据不足。

关键规则：低置信度建议，不允许提供一键执行操作。

3. Human Review（人工确认）

按风险分三级处理：

• 只读操作（查看分析、生成摘要）：不需要确认
• 可撤销操作（创建任务、修改备注）：直接执行 + Toast + 撤销窗口
• 不可撤销操作（发送邮件、批量分派、删除记录）：Confirm Dialog + Diff + 明确动词按钮

Confirm Dialog 的主按钮不能写"确定"，必须写具体动作："发送邮件"、"确认分派"、"删除记录"。

HTML Demo 验证：三层解耦

用 Skill 生成了客户列表页 + AI Copilot Sidebar 的 HTML Demo，验证了三套视觉下规则的一致性：

• shadcn 默认风格
• Skill Forge Visual Guide 风格（Indigo #5B5FEF 主色 + AI 专属 Purple #8B5CF6）
• 暗黑主题

三套视觉不同，但规则一致：金额右对齐、状态 Badge 带圆点、AI 建议带 Citation、不可逆操作必须 Confirm + Diff。这证明了规则和视觉可以被拆开。

总结

• shadcn 让 AI 能生成界面
• AI Workspace Skill 让 AI 生成正确的界面
• Skill Forge Visual Guide 让正确的界面保持专业、克制、可解释

B 端 AI 产品设计，需要完成"规则、皮肤、实现"的三层解耦。设计师的价值密度，正在从像素点转移到规则层。