本工具依赖境外公开数据源部分平台在中国大陆需合规网络环境每日开源 · 第 096 期 · 2026.07.30别再忍 AI 写的模板味页面了这个 58k Star 项目专治 AI 审美癌给 AI 编码工具装上设计品味一行命令告别千篇一律的紫蓝渐变 三栏卡片项目速览项目名****taste-skill作者Leonxlnx定位AI Agent 反模板化前端框架协议MIT 完全开源GitHubgithub.com/Leonxlnx/taste-skill官网tasteskill.dev58.9kGitHub Stars13技能包数量3可调设计旋钮它解决了什么痛点如果你用 Cursor、Claude Code 或 Codex 写过前端这个场景一定不陌生你输入 prompt「帮我做一个 SaaS 登录页面」AI 输出深色背景 紫蓝渐变 Hero → 居中大标题 CTA 按钮 → 三张等宽 Feature Card → 底部 Footer。换个项目再让它做一模一样的配方。这不是你的 prompt 写得不好。LLM 是概率机器——它没有审美偏好只会复制训练数据里最常见的模式。结果就是所有 AI 生成的页面都像同一个流水线出品业内管这现象叫AI SlopAI 流水线垃圾。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 会自行推断 VARIANCE5、MOTION3、DENSITY3。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 towardTailwind 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 https://github.com/Leonxlnx/taste-skill --skill “design-taste-frontend”安装整个仓库13 个技能全部装上npx skills add https://github.com/Leonxlnx/taste-skill安装单个专用技能# 只装改版专用 npx skills add https://github.com/Leonxlnx/taste-skill --skill “redesign-existing-projects” # 只装极简风 npx skills add https://github.com/Leonxlnx/taste-skill --skill “minimalist-ui” # 只装图像转代码 npx skills add https://github.com/Leonxlnx/taste-skill --skill “image-to-code” # 只装 GPT/Codex 强化版 npx skills add https://github.com/Leonxlnx/taste-skill --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
