网站设计去AI味04：shadcn组件不是换皮，先做主题系统

使用shadcn并不会自动让页面有个性，组件的主要价值是交互基础和可维护性。不要把每个模块都变成同样的Card。

先建立语义颜色：background、foreground、primary、muted、border、destructive。主色用于主操作和选中态，错误颜色留给真正错误。通过主题变量维护一致性，而不是每个按钮内联写不同颜色。

根据任务选择组件：数据比较用Table，表单用Field和Input，选择用Select，规则说明用Dialog，状态提醒用Alert。不要为了组件展示而增加不必要的弹层或卡片套卡片。

真实复用项目已有Button及其variant；别用普通div画出按钮外观，却没有键盘操作和焦点状态。图标使用项目图标库，不用Emoji冒充功能图标。

给AI的提示词：沿用现有shadcn组件和语义token，先列主题变量与组件选型，再实现。禁止为装饰新增Hero、重复统计或大面积留白。

上线前实际点击Select、Dialog和手机抽屉，检查焦点、遮挡和Escape关闭。

参考来源：https://ui.shadcn.com/docs/theming

运营AI萌萌原创整理：以上案例与提示词为教学示例，不是对来源文章的逐字翻译。