Taste-Skill (高审美前端)

这个项目让你的 AI（Cursor、Claude Code、Codex、Windsurf 等）拥有真正的设计品味。它能阻止 AI 生成那些千篇一律、毫无特色的"泡沫代码"，强制它构建现代、高端的界面。

整个系统只靠一个文件运行：SKILL.md。

反馈与贡献

欢迎提出建议或反馈 Bug：

• 在 GitHub 上提 Pull Request 或 Issue
• 在 x.com/lexnlin 给我发私信
• 邮件联系：hello@learn2vibecode.dev

安装方式

方式一：npx 一键安装（推荐）

npx skills add https://github.com/BND-1/taste-skill.git

自动将 SKILL.md 安装到你的 AI 代理（Claude Code、Cursor 等）的 skills 目录中。

也可以全局安装，这样所有项目都能生效：

npx skills add https://github.com/BND-1/taste-skill.git -g

方式二：手动下载

1. 从本仓库下载 SKILL.md 文件
2. 放到你的项目文件夹中
3. 告诉你的 AI："请严格遵循 SKILL.md 中的规则"（在 Cursor 中可以直接 @SKILL.md）

就这么简单，AI 会立刻升级它的前端代码质量。

三个控制旋钮

在 SKILL.md 的最顶部，你会看到三个设置参数：

• DESIGN_VARIANCE: 8
• MOTION_INTENSITY: 6
• VISUAL_DENSITY: 4

你可以把这些数值调整为 1 到 10，具体含义如下：

1. DESIGN_VARIANCE 设计差异度（1 到 10）

控制布局的大胆程度。

• 1 到 3（常规）： 安全、居中的布局，标准网格，一切整齐排列。
• 4 到 7（创意）： 元素开始有重叠，文字可能偏向一侧，图片大小各异。
• 8 到 10（狂野）： 非对称布局、大面积留白、瀑布流网格，非常艺术和现代。

2. MOTION_INTENSITY 动效强度（1 到 10）

控制页面上有多少东西在动。

• 1 到 3（静态）： 几乎没有动画，只有悬停时的简单颜色变化。
• 4 到 7（流畅）： 页面加载时有漂亮的淡入效果，丝滑的滚动体验。
• 8 到 10（电影级）： 按钮会被鼠标磁性吸引，元素以弹簧物理弹入，高级滚动特效。

3. VISUAL_DENSITY 视觉密度（1 到 10）

控制一屏内塞了多少内容，也就是"呼吸感"。

• 1 到 3（"美术馆"模式）： 大量留白，一张大图、一个大标题，需要滚动才能看到下一项内容。感觉高端奢华，像 Apple、Gucci 的风格。
• 4 到 7（"日常应用"模式）： 正常间距，像 Instagram 或新闻网站，不太拥挤，但内容充足。
• 8 到 10（"驾驶舱"模式）： 所有东西都很小且紧凑，没有大卡片，只有细线和列表。一屏能看到上百个数据，不用滚动。适合专业场景（交易应用、仪表盘、科幻界面）。

示例

（示例项目和模板将在后续更新中添加，敬请期待！）