Taste-Skill

你是否厌倦了 AI 生成的前端代码？那些永远居中的布局、毫无生气的按钮、以及随处可见的“白底紫渐变”通用美学？虽然 AI 擅长写逻辑，但在审美上往往显得平庸且缺乏个性。

Taste-Skill 是一个专为高能动性（High-Agency）前端开发设计的提示词系统。它不依赖复杂的库或框架，仅通过一个单一的 SKILL.md 文件，就能强行扭转 AI 的审美取向，使其生成现代、高端、甚至具有艺术感的界面代码。无论你在用 Cursor、Claude Code、Antigravity 还是 Codex，只需引入这个文件，你的 AI 助手立刻变身资深前端艺术总监。

极简安装：仅需一个文件

Taste-Skill 的设计理念是“零依赖、零配置”。你不需要克隆整个仓库，也不需要安装 npm 包。

三步即可生效：

1. 下载：从项目仓库下载唯一的文件 —— SKILL.md。
2. 放置：将其放入你的当前项目文件夹中。
3. 激活：在与 AI 对话时，直接引用它。
   • 在 Cursor 中：输入 @SKILL.md 并告诉 AI：“请阅读并严格遵守此文件中的规则。”
   • 在其他工具中：将文件内容作为 System Prompt 或直接发送给 AI。

一旦 AI 读取了该文件，它的代码生成策略将立即重构，从“能用就行”升级为“精致优雅”。

核心机制：三个“设计旋钮”

Taste-Skill 的强大之处在于其可调控性。在 SKILL.md 的顶部，定义了三个关键变量（范围 1-10），让你能像调节音响均衡器一样，精准控制界面的最终风格。

1. 设计差异度 (DESIGN_VARIANCE)

控制布局的常规与前卫程度。

• 1 - 3 (常规模式)：
  • 风格：极度安全、保守。
  • 特征：完美的居中对齐，标准的网格系统，元素井井有条但略显沉闷。适合后台管理系统或传统企业站。
• 4 - 7 (创意模式)：
  • 风格：灵动、现代。
  • 特征：元素出现轻微重叠，文字打破常规排版，图片尺寸错落有致。适合大多数 SaaS 产品落地页。
• 8 - 10 (狂野模式)：
  • 风格：前卫、艺术、杂志风。
  • 特征：非对称布局，巨大的留白，瀑布流网格，大胆的字体排印。适合创意作品集、时尚品牌或实验性项目。

2. 动感强度 (MOTION_INTENSITY)

控制界面交互的活跃度与物理质感。

• 1 - 3 (静态模式)：
  • 体验：几乎无动效。
  • 特征：仅在按钮悬停时有简单的颜色变化。适合追求极致性能或严肃场景。
• 4 - 7 (流畅模式)：
  • 体验：舒适、自然。
  • 特征：页面加载时的淡入效果，平滑的滚动视差，微妙的过渡动画。这是现代 Web 应用的标准配置。
• 8 - 10 (电影感模式)：
  • 体验：震撼、沉浸。
  • 特征：按钮具有磁性吸附鼠标效果，元素弹出带有弹簧物理质感，高级的滚动触发动画。适合想要给用户留下深刻印象的营销页。

3. 视觉密度 (VISUAL_DENSITY)

控制信息的疏密与“呼吸感”，决定界面的气质。

• 1 - 3 ("艺术画廊"模式)：
  • 气质：昂贵、奢侈、高端。
  • 特征：巨大的留白，一页可能只放一张大图和一个标题。参考 Apple、Gucci 官网。让用户通过滚动来感受节奏。
• 4 - 7 ("日常应用"模式)：
  • 气质：友好、高效、平衡。
  • 特征：标准的间距，类似 Instagram 或主流新闻网站。信息量适中，既不拥挤也不空旷。
• 8 - 10 ("驾驶舱"模式)：
  • 气质：专业、极客、数据密集。
  • 特征：极高的信息密度，细小的字体，紧凑的列表，无卡片式设计。参考彭博终端、科幻电影 UI 或交易仪表盘。一眼看清上百个数据点。