Taste Skill 前端审美
为 AI 生成的前端界面补充布局、排版、动效和视觉密度规则，减少千篇一律的模板感。
技能说明
从设计语言和页面目标开始判断方向，再用布局变化、动效强度和信息密度三个维度约束实现，适合新页面和已有项目改版。
关于此技能
这是一个面向 AI 编程客户端的前端设计技能集合。默认技能会先理解页面 brief 和视觉方向，再调整布局变化、动效强度与信息密度；仓库还提供图片转代码、已有项目改版、极简、柔和和工业风等不同变体。
核心能力
先建立设计方向
先判断页面的受众、任务、品牌气质和视觉语言，再决定布局、字体、颜色与组件关系。
控制三个视觉维度
通过布局变化、动效强度和信息密度三个维度，让界面有明确取舍，而不是堆叠装饰。
减少模板化界面
重点检查层级、间距、排版和动作反馈，避免默认卡片网格、无意义渐变和千篇一律的首屏。
提供多种工作流
可以选择默认前端审美、图片转代码、现有项目改版、GPT/Codex 加强版和不同视觉风格变体。
适用场景
AI 生成新页面
在开始写代码前明确页面气质和结构，减少生成结果看起来像通用模板的问题。
已有项目改版
先审视现有界面的层级、间距、密度和交互，再按优先级完成视觉改进。
参考图转前端
先整理视觉参考和页面规则，再交给 AI 编程客户端实现，而不是只复制表面样式。
使用步骤
- 01
安装默认技能
使用下方命令安装仓库中的默认 design-taste-frontend 技能。
- 02
按任务选择变体
需要改版、图片转代码或特定风格时，再按详情中的安装名选择对应变体。
- 03
提供页面目标
说明页面受众、核心动作、内容密度、品牌气质和参考方向，再让 Agent 开始实现。
- 04
交付前复查
检查移动端布局、文本层级、按钮反馈、动效节奏和实际内容，确认页面不是只有视觉外壳。
常见问题
默认技能和其他变体有什么区别？+
默认技能适合大多数前端页面；图片转代码、改版、GPT/Codex 加强版和风格变体分别针对不同工作流，不需要全部安装。
只能用于 React 吗？+
不能。它主要约束设计意图、布局和交互表达，不绑定某个前端框架，也可以用于 Vue、Svelte 等项目。
仓库里的图片生成技能也包含在内吗？+
包含。仓库同时提供网页、移动端和品牌工具包等图片生成技能，但它们输出的是视觉参考图，不等同于前端代码实现。
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"