本工具依赖境外公开数据源，部分平台在中国大陆需合规网络环境
每日开源 · 2026.07.30
别再忍 AI 写的"模板味"页面了
这个 58k+ Star 项目专治 AI 审美癌
给 AI 编码工具装上"设计品味"，一行命令告别千篇一律的紫蓝渐变 + 三栏卡片
项目速览
项目名****taste-skill
作者Leonxlnx
定位AI Agent 反模板化前端框架
协议MIT 完全开源
GitHubgithub.com/Leonxlnx/taste-skill
官网tasteskill.dev
58.9k+GitHub Stars13技能包数量3可调设计旋钮
它解决了什么痛点？
如果你用 Cursor、Claude Code 或 Codex 写过前端，这个场景一定不陌生：
你输入 prompt：「帮我做一个 SaaS 登录页面」
AI 输出：深色背景 + 紫蓝渐变 Hero → 居中大标题 + CTA 按钮 → 三张等宽 Feature Card → 底部 Footer。换个项目再让它做，一模一样的配方。
这不是你的 prompt 写得不好。
LLM 是概率机器——它没有审美偏好，只会复制训练数据里最常见的模式。结果就是所有 AI 生成的页面都像同一个流水线出品，业内管这现象叫 AI Slop（AI 流水线垃圾）。
AI 前端的经典"犯罪现场"：
- Hero 永远居中，下面三个等宽 feature card
- 配色永远是紫蓝渐变（AI 对"科技感"的理解 = 紫色）
- 字体永远是 Inter，间距永远一样，布局永远对称
- 动效要么没有，要么过度——没有中间态
- em dash 满天飞，section 编号到处贴
- 手写 SVG 图标丑到不忍直视
taste-skill 的解法很直接：把专业前端设计师的审美规则写成 AI 能读懂的约束文件，让 AI 在写代码前先审稿、再编码。不是微调模型、不是套模板——是给 AI 一本"设计行为规范"。
核心亮点：三旋钮 + 硬禁令 + 13 个技能包
旋钮一：DESIGN_VARIANCE 布局实验度（1-10）
控制页面布局的"艺术感"。低值（1-3）产生居中、对称、传统的布局；高值（8-10）打破对称，引入非对称网格和创意版式。再也不用忍受 AI 默认的"一切居中"。
1-3 居中简洁4-6 适度变化7-8 非对称现代9-10 艺术混沌
旋钮二：MOTION_INTENSITY 动效深度（1-10）
控制动画的丰富度。低值纯静态或仅有 hover 微交互；高值引入滚动触发动画、磁吸效果、视差滚动。AI 再也不会在"零动效"和"炫技过度"之间二选一。
旋钮三：VISUAL_DENSITY 信息密度（1-10）
控制每屏内容的多少。低值（1-3）走"美术馆路线"——大量留白、强呼吸感；高值（8-10）适合仪表盘和数据分析界面——紧凑高效。
最重要的是：你不需要手动调这三个旋钮。只需在对话中描述你想要的风格，AI 会自动推断参数值。比如你说"做一个类似 Linear 的极简SaaS页面"，AI 会自行推断 VARIANCE=5、MOTION=3、DENSITY=3。
v2 的硬禁令：AI 的设计禁区
taste-skill v2 最革命性的升级是把"建议"升级成了**"禁令"**——直接列出 AI 的坏习惯并全面禁止：
AI 设计禁令清单（部分）
- 页面上零个 em dash（—），用连字符替代或重组句子
- 禁止 Section 编号眉标（00/INDEX、06 · how it works）
- 禁止 Hero 中的版本标签（V0.6、BETA、INVITE-ONLY）
- 禁止滚动提示（Scroll、↓scroll、Scroll to explore）
- 禁止用 div 模拟假产品 UI（假任务列表/假仪表盘/假终端）
- 禁止手写 SVG 图标，必须用 Phosphor/HugeIcons/Radix/Tabler
- 禁止 AI 文案陈词滥调（Elevate、Seamless、Unleash、Next-Gen）
- 三等分 feature card：最泛滥的 AI 布局，直接禁用
- 紫蓝渐变：最常见的 AI 设计指纹，必须替换为中性底色
- 每行都加 border-t + border-b 的长列表：强制打破
Brief 推断：先"读懂房间"再动手
在写一行代码之前，AI 必须先输出一行设计解读，分析页面类型、受众、氛围词、已有品牌资产：
"Reading this as: B2B SaaS landing for technical buyers,
with a Linear-style minimalist language, leaning toward
Tailwind utilities + Geist + restrained motion."
然后基于这份解读自动推断三旋钮数值，再进入编码。禁止直接跳到"默认紫蓝渐变 + 居中 Hero"。
13 个技能包矩阵：按需组合，不装不用的
taste-skill 不是一个巨大的规则文件，而是一个模块化技能矩阵。每个技能负责一个具体设计任务，可按需选择安装：
代码生成类（10 个）
taste-skill · 默认主技能 v2
含 Brief 推断、设计系统映射、三旋钮系统、GSAP 动效骨架、预检清单
gpt-tasteskill · GPT/Codex 强化版
更严格的 GSAP 约束、更高的布局方差、更激进的反模板策略
image-to-code-skill · 图片转代码
上传参考设计图 → AI 分析视觉语言 → 生成匹配风格的前端代码，非像素复制而是重现设计语言
redesign-skill · 改版专用
先审计现有 UI（排版/配色/布局/交互/内容），再修复。支持 Greenfield/Preserve/Overhaul 三种策略
output-skill · 强制完整输出
治 AI"半途而废"的毛病——禁止 // ... rest of code、禁止 "Let me know if you want me to continue"
minimalist-skill · 极简风
Notion/Linear/Vercel 风格：大量留白、单色或双色调、排版驱动层级
soft-skill · 高端质感
柔和对比、大量留白、高级字体（衬线标题+细体正文）、弹簧动效
brutalist-skill · 粗野主义
瑞士字体 + 粗重边框 + 强烈对比，黑/白 + 最多一个强调色
taste-skill-v1 · v1 原版
供依赖 v1 精确行为的项目保留使用
stitch-skill · Google Stitch 适配
兼容 Google Stitch 的设计规则，含可选 DESIGN.md 导出
图片生成类（3 个，输出设计稿不输出代码）
imagegen-frontend-web
网站设计稿：Hero 区、落地页、多区域页面，强排版与反模板艺术指导
imagegen-frontend-mobile
移动端界面和流程，iOS/Android/跨平台，可读字体、连贯设计
brandkit
品牌套件板：LOGO 方向、配色方案、字体选择、跨类别身份应用
实战场景展示
场景一：从零开发 SaaS 落地页
安装 taste-skill 默认主技能，prompt 描述需求 → AI 自动推断三旋钮值 → 输出有品牌感的非对称布局，告别三栏等宽卡片
场景二：翻新老旧项目
redesign-skill 先执行排版/配色/布局/交互/内容全维度审计 → 识别 Preserve（保留）vs Overhaul（重做）→ 按清单逐项修复
场景三：图片 → 分析 → 代码
上传 Dribbble/Awwwards 截图作为参考 → AI 提取配色/字体/间距/布局逻辑 → 生成同风格但不同内容的代码，非像素复制而是重现设计感
场景四：多 Agent 并行风格
不同页面装不同技能：官网用 soft-skill（高端质感），文档站用 minimalist-skill（极简），作品集用 brutalist-skill（粗野主义）——同一套代码基座跑出三种完全不同的人格
上手指南：30 秒装好，立即生效
安装默认主技能（推荐）
npx skills add github.com/Leonxlnx/ta… --skill "design-taste-frontend"
安装整个仓库（13 个技能全部装上）
npx skills add github.com/Leonxlnx/ta…
安装单个专用技能
# 只装改版专用 npx skills add github.com/Leonxlnx/ta… --skill "redesign-existing-projects" # 只装极简风 npx skills add github.com/Leonxlnx/ta… --skill "minimalist-ui" # 只装图像转代码 npx skills add github.com/Leonxlnx/ta… --skill "image-to-code" # 只装 GPT/Codex 强化版 npx skills add github.com/Leonxlnx/ta… --skill "gpt-taste"
手动使用
也可以直接把仓库里任意 SKILL.md 文件内容复制到项目根目录，或粘贴到 ChatGPT/Codex 对话中——无需任何配置，AI 自动读取并遵守规则。
支持的 AI 工具
- Claude Code、Cursor、Codex CLI、Gemini CLI、OpenCode：自动发现并加载 SKILL.md
- v0、Lovable：手动粘贴规则内容到对话
- ChatGPT Images：配合图片生成类技能使用
- 框架兼容：React / Vue / Svelte / 原生 HTML全部适用，规则针对设计意图而非特定框架 API
提交前的预检清单
AI 在交付代码前，必须逐项通过以下检查——这是 taste-skill v2 的"硬性约束"，确保不产出细节粗糙的 UI：
颜色是有意为之 — 每种颜色都有明确的用途
间距遵循 4pt/8pt 网格系统
排版层级最多使用 3 种字号
动画时长不超过 300ms（除非有明确理由）
移动优先，已在 320px 断点测试
使用须知
v2 仍是实验版 — API（安装名、旋钮名、section 结构）要到 v2.0.0 stable 才锁定，可能随时迭代
规则量巨大 — v2 的 SKILL.md 从 v1 大幅扩展，对 AI 上下文窗口消耗较大，小模型可能吸收不全
偏 Landing/Portfolio — 项目明确声明不适用于仪表盘、数据表格、多步表单、代码编辑器、原生移动端
GSAP 依赖较重 — 动效部分重度依赖 GSAP 和 Motion，轻量级项目可能过重
英文原生 — 所有规则和示例都是英文，中文场景需自行适配（中文字体选择、标点避头尾等）
今日总结
taste-skill 做了一件其他开源项目没做过的事：把"设计品味"编码成了 AI 可执行的规则。
它不是组件库（不提供 UI 组件），不是设计工具（不提供 GUI），而是一份给 AI Agent 看的设计行为规范——什么该做、什么禁做、怎么调参、怎么自检。一个 SKILL.md 文件，零运行时开销，框架无关，工具无关，从 Claude Code 到 Cursor 到 Codex 全部兼容。
在 AI 编程工具快速普及的 2026 年，当所有人都在用 AI 写代码时，你的产品看起来不一样，就是竞争力。
今日互动
你遇到过 AI 生成的前端"千篇一律"的问题吗？
有没有用过 taste-skill 或者其他设计类 Skill？
欢迎在评论区分享你的体验和技巧！
如果觉得本期内容有用，欢迎转发给同样在用 AI 写前端的同事。
查看往期全部 95 期内容：关注公众号「每日开源」→ 菜单栏「往期回顾」
每天一个值得深读的开源项目，持续更新
项目链接
GitHub: github.com/Leonxlnx/taste-skill
官网: tasteskill.dev · 协议: MIT
