如何用 Design Skills 建立 AI 前端风格导航

这篇解决什么

AI 写前端最常见的问题是默认味太重，按钮、卡片、配色和布局每次都不稳定。

最终要得到的是：一套前端风格导航表：每种风格对应适用场景、组件规则、禁区和验收截图。

适合谁

用 Codex、Claude Code、Cursor 做网页、后台、落地页和工具界面的人。

操作步骤

1. 先按场景分类：SaaS 后台、内容站、工具面板、作品集、视频站。
2. 为每类风格写颜色、字号、间距、按钮、卡片和布局规则。
3. 为每类准备一个最小页面样例。
4. 把规则写入 Skill 或项目文档。
5. 每次生成页面后用截图检查一致性。

可复制模板

风格名：
适合场景：
颜色：
组件：
页面密度：
禁止项：
截图验收：桌面 / 手机。

验收清单

• 是否按场景而非审美分类
• 是否有组件规则
• 是否有禁区
• 是否有样例
• 是否做移动端检查

如何沉淀成自己的能力

沉淀为 HTKU 前端设计 Skill 库。

发布到 HTKU 后，这篇文章不只是给读者看的内容，也会进入本地内容飞轮：如果后续重复使用，就把它升级为 Skill、SOP、检查清单或导航条目。

标签