如何建立前端 Design Skill 系统

你会获得

• 写出 Design Skill
• 建立组件规则
• 完成截图验收

教程目标

把颜色、组件、间距、页面密度和移动端规则写成 Skill，让 AI 前端输出保持统一。

为什么需要

AI 写界面容易默认味很重。Design Skill 的作用是把审美要求变成可执行规则。

操作步骤

1. 提取品牌色、字体、按钮、卡片和布局规则。
2. 写清楚页面类型：工具、后台、文章、导航。
3. 明确禁区：过度渐变、文字溢出、卡片套卡片。
4. 生成后用桌面和手机截图检查。
5. 失败规则写回 Skill。

可复制模板

风格目标：
颜色：
组件：
页面密度：
禁区：
移动端要求：
截图验收：

验收清单

• 是否像同一个产品
• 文字是否不溢出
• 移动端是否可用
• 是否有真实内容
• 是否符合栏目定位

如何沉淀成能力

学完后，把这套流程写入 Skill、SOP 或后台检查清单。HTKU 的目标不是收藏资料，而是把资料变成能重复执行的能力。