如何为 AI 前端项目建立 Design Skill

这篇解决什么

前端风格不是每次靠提示词强调，而是把规则写成项目资产。

最终要得到的不是一段观点，而是：一份可放进项目里的 Design Skill 说明。

适合谁

用 Codex、Claude Code 或 Cursor 做网站和后台页面的人。

操作步骤

1. 提取站点已有颜色、字号、按钮、卡片和布局规则。
2. 写清楚哪些组件可以使用，哪些风格属于站点禁区。
3. 给常见页面准备结构模板，比如列表页、详情页和后台表单。
4. 把移动端、文字换行和图片比例写进验收规则。
5. 每次生成新页面前先加载这份 Skill。

可复制模板

品牌色：
按钮规则：
卡片规则：
页面密度：
移动端规则：
禁止出现的视觉风格：
验收截图尺寸：

验收清单

• 页面是否像同一个产品
• 按钮和卡片是否统一
• 移动端文字是否溢出
• 是否有真实内容而不是占位文案
• 是否经过截图检查

发布建议

可为 HTKU 单独沉淀一份前端 Design Skill。

这类内容发布到 HTKU 时，重点不是复述外部平台说了什么，而是把它加工成中文用户能照着做的流程。读者打开页面后，应该能马上判断自己要准备什么、按什么顺序做、最后用什么标准验收。

标签