引言“AI 生成的前端为什么看起来都一个样”这是每日一个开源项目系列的第125篇文章。今天的主角是taste-skill——一套给 AI Agent 配上「审美」的前端设计技能包。让 AI 写前端代码已经很普遍了但结果往往大同小异居中排版、蓝色主色调、卡片式布局、圆角阴影整齐但无聊。问题不在于 AI 不会写代码而在于它没有任何关于「这个设计应该有什么气质」的约束。taste-skill 的答案很直接用一套经过研究积累的设计规则文件告诉 AI 什么是品位什么是 slop。不是模板是约束原则——让 AI 自己推断出适合当前项目的设计语言。你将学到什么AI 生成前端为何容易陷入「slop 陷阱」以及 taste-skill 的破局思路SKILL.md 机制如何用一个文件改变 AI 的设计决策13 种技能风格的定位与选择极简 / 粗野主义 / 柔和 / 图片转代码等三个可调旋钮DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY如何在 Claude Code、Cursor、Codex 等主流工具中快速集成前置知识基础前端开发经验HTML/CSS/JS使用过 Claude Code、Cursor 或类似 AI 编程工具对设计风格有基本感知不需要专业设计背景项目背景项目简介taste-skill 的核心理念用一句话概括给你的 AI 装上好品位阻止它生成乏味的通用设计废料slop。它本质上是一套「设计约束规则集」以 SKILL.md 文件的形式存在。当 AI Agent 在项目中发现这个文件就会在生成 UI 代码之前先读取这些规则推断出当前项目适合什么设计语言然后按照规则约束输出——而不是照抄训练数据里最常见的模式。不是帮你选颜色是教 AI 什么叫「有品位地选颜色」。作者/团队介绍作者: Leonxlnxlexnlin协作者: blueemi99官网: tasteskill.devLicense: MIT项目数据⭐ GitHub Stars:36,800 Forks: 2,700 技能数量: 13 个持续增加 License: MIT 语言: Shell 100%安装脚本 SKILL.md 规则文件主要功能核心作用taste-skill 是 AI Agent 的「设计品位外挂」——在 AI 生成前端代码之前注入一套经过研究积累的设计原则让输出从「通用模板」变成「有明确风格主张」的界面。它不做的事不提供 UI 组件库不替代 Figma 或设计稿不帮你写业务逻辑它做的事告诉 AI 如何推断项目的设计语言行业 / 受众 / 情绪基调约束 AI 的布局、间距、字体、动画、对比度决策防止 AI 输出大家都在用的「平庸设计模式」使用场景用 Claude Code / Cursor 从零搭建新项目安装 taste-skill 后AI 在写第一行样式代码之前就已经知道这个项目的设计气质改造已有项目的视觉风格redesign-skill会先审计现有 UI找出风格不一致的地方再给出完整改造方案产品设计稿 → 代码实现image-to-code-skill支持图片优先工作流上传截图/设计稿 → AI 分析风格 → 生成对应代码品牌视觉体系搭建brandkit技能一次性生成 logo、配色方案、字体组合、品牌规范文档特定风格的快速实现需要 Notion 风格极简界面用minimalist-skill。需要 Figma/Vercel 风格粗野主义用brutalist-skill。快速开始# 安装主技能推荐新项目使用npx skillsaddhttps://github.com/Leonxlnx/taste-skill# 安装单个技能npx skillsaddhttps://github.com/Leonxlnx/taste-skill--skilldesign-taste-frontend# 安装极简风格技能npx skillsaddhttps://github.com/Leonxlnx/taste-skill--skillminimalist-ui安装完成后项目根目录会多出一个.claude/skills/design-taste-frontend/SKILL.md文件或类似路径。之后在 Claude Code 或 Cursor 中正常开发AI 会自动读取这个文件并遵循其中的设计规则。完整技能列表代码实现类10个技能名安装 ID定位taste-skill v2design-taste-frontend主力技能推断设计语言调节三旋钮taste-skill v1design-taste-frontend-v1保留的旧版本行为更可预测gpt-tasteskillgpt-tasteGPT/Codex 严格变体强化 GSAP 动效image-to-codeimage-to-code图片 → 分析 → 代码三步流程redesign-skillredesign-existing-projects审计并改造现有项目 UIsoft-skillhigh-end-visual-design高端优雅柔和对比度output-skillfull-output-enforcement防止 AI 输出截断确保完整代码minimalist-skillminimalist-uiNotion / Linear 风格极简brutalist-skillindustrial-brutalist-ui瑞士字体 强对比粗野主义stitch-skillstitch-design-tasteGoogle Stitch 兼容设计规则图像生成类3个技能名安装 ID定位imagegen-frontend-webimagegen-frontend-web生成网站设计参考图imagegen-frontend-mobileimagegen-frontend-mobile生成移动端界面流程图brandkitbrandkitlogo 配色 字体品牌套件三个可调旋钮v2核心taste-skill v2 暴露了三个可以明确设置的参数直接影响 AI 的设计决策DESIGN_VARIANCE (1-10) 低 → 居中对称、整洁规矩 高 → 不对称现代、打破网格 MOTION_INTENSITY (1-10) 低 → 仅悬停效果、微交互 高 → 滚动触发动画、磁性吸附、视差效果 VISUAL_DENSITY (1-10) 低 → 大量留白、呼吸感强 高 → 仪表盘密度、信息层级丰富比如给 SaaS 产品的营销落地页可以设置DESIGN_VARIANCE 6 # 有个性但不奇怪 MOTION_INTENSITY 5 # 有动感但不分散注意力 VISUAL_DENSITY 3 # 留白为主突出核心信息项目优势对比对比维度taste-skill直接让 AI 写 UIUI 组件库设计稿风格独特性✅ 规则约束有主张❌ 千篇一律⚠️ 依赖定制✅ 完全可控实施成本✅ 一条命令✅ 零成本⚠️ 学习曲线❌ 需设计师与 AI 协作✅ 原生为 AI 设计⚠️ 无约束⚠️ 需要桥接⚠️ 需描述转译迭代速度✅ 快✅ 快中❌ 慢项目详细剖析SKILL.md 机制一个文件如何改变 AI 决策taste-skill 的核心技术不是 JavaScript 框架而是一种约定SKILL.md 文件。当 Claude Code 或 Cursor 在项目中发现 SKILL.md会在执行设计相关任务时自动将其内容注入上下文。这个文件不是运行时代码而是「对 AI 的设计指令」——类似项目的设计规范文档但专门为 AI 的阅读和遵守而优化。taste-skill v2 的 SKILL.md 有几个关键章节§0 项目推断在动手之前先读取环境推断项目背景 - 行业垂类金融创意技术医疗 - 目标受众开发者消费者企业用户 - 情绪基调可信有趣紧迫优雅 - 布局风格落地页应用仪表盘 根据推断结果调整后续所有设计决策。§2 设计系统选择根据项目类型选择匹配的设计系统- 企业/SaaS → shadcn/ui 或 Material 衍生 - 技术工具 → Tailwind 系统 单色主调 - 创意/品牌 → 自定义排版主导 - 消费品 → 情绪驱动大图优先§8 双主题默认支持所有界面必须支持深/浅色双主题 - 深色不等于黑色可以是深石板、深灰蓝 - 浅色不等于白色暖白、冷灰均可 - 对比度层级必须在两个主题中保持一致§14 输出前预检清单在提交代码之前必须确认 □ 颜色非随机——每种颜色有明确用途 □ 间距遵循 4pt/8pt 网格 □ 字体层级最多3个尺寸 □ 动画不超过 300ms除非有明确理由 □ 移动端优先已测试 320px 断点风格技能对比选哪个极简风minimalist-ui灵感来源Notion、Linear、Vercel大量留白内容即设计单色或双色调避免彩虹配色字体主导层级非颜色或形状适合工具类产品、开发者工具、内容平台粗野主义industrial-brutalist-ui灵感来源瑞士国际主义排版、Figma 网站、早期互联网粗边框、强对比、有意打破美观规则等宽字体 无衬线混用黑/白/单个强调色适合创意机构、个人品牌、艺术项目柔和高端风high-end-visual-design灵感来源奢侈品牌、高端 SaaS如 Linear 的旧版低对比度、柔和过渡优雅字体衬线 细无衬线精细的微动画适合高端消费品、创意服务、设计工作室image-to-code图片优先工作流这是 taste-skill 中最独特的工作流之一1. 截图 / 上传参考设计图 ↓ 2. AI 分析图片的视觉语言 - 提取主色调、字体风格、间距模式、布局逻辑 ↓ 3. 生成忠实于参考图的前端代码 - 不是逐像素复制而是理解设计语言后重现# 安装 image-to-code 技能npx skillsaddhttps://github.com/Leonxlnx/taste-skill--skillimage-to-code在 Claude Code 中使用/task 参考这张截图用 React Tailwind 实现一个相同风格的产品卡片组件 [附上截图]支持的 AI 工具生态taste-skill 不绑定特定工具支持所有主流 AI 编程环境工具支持方式Claude Code自动读取 SKILL.mdCursor自动读取 SKILL.mdCodex CLI自动读取 SKILL.mdGemini CLI自动读取 SKILL.mdv0 / Lovable手动粘贴规则内容OpenCode自动读取 SKILL.mdChatGPT Images图像生成技能适配项目地址与资源官方资源GitHub: Leonxlnx/taste-skill官网: tasteskill.devTwitter: lexnlin示例项目: Floria、Collective OS总结taste-skill 解决的问题很具体AI 写 UI 总是正确但无聊。它的解法也很直接——不是换工具而是给现有 AI 工具加上一套设计哲学约束。SKILL.md 机制本身是一种优雅的设计一个文件零运行时开销框架无关工具无关。36.8k Stars 说明这个问题是真实的且开发者们在用具体行动表态——他们不满足于能跑的 UI他们想要有品位的 UI。如果你正在用 AI 工具做前端开发taste-skill 值得花5分钟安装试一下。对比安装前后的输出差异就是最好的演示。欢迎了解 PrimeSkills —— 精选 AI Agent 与技能的市场助你构建强大的 AI 工作流。我是冬奇正在探索 AI Agent 的无限可能。欢迎关注我的个人主页冬奇实验室
每日一个开源项目（第125篇）：taste-skill - 给 AI 装上审美，让前端不再千篇一律
发布时间：2026/6/9 3:26:27
引言“AI 生成的前端为什么看起来都一个样”这是每日一个开源项目系列的第125篇文章。今天的主角是taste-skill——一套给 AI Agent 配上「审美」的前端设计技能包。让 AI 写前端代码已经很普遍了但结果往往大同小异居中排版、蓝色主色调、卡片式布局、圆角阴影整齐但无聊。问题不在于 AI 不会写代码而在于它没有任何关于「这个设计应该有什么气质」的约束。taste-skill 的答案很直接用一套经过研究积累的设计规则文件告诉 AI 什么是品位什么是 slop。不是模板是约束原则——让 AI 自己推断出适合当前项目的设计语言。你将学到什么AI 生成前端为何容易陷入「slop 陷阱」以及 taste-skill 的破局思路SKILL.md 机制如何用一个文件改变 AI 的设计决策13 种技能风格的定位与选择极简 / 粗野主义 / 柔和 / 图片转代码等三个可调旋钮DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY如何在 Claude Code、Cursor、Codex 等主流工具中快速集成前置知识基础前端开发经验HTML/CSS/JS使用过 Claude Code、Cursor 或类似 AI 编程工具对设计风格有基本感知不需要专业设计背景项目背景项目简介taste-skill 的核心理念用一句话概括给你的 AI 装上好品位阻止它生成乏味的通用设计废料slop。它本质上是一套「设计约束规则集」以 SKILL.md 文件的形式存在。当 AI Agent 在项目中发现这个文件就会在生成 UI 代码之前先读取这些规则推断出当前项目适合什么设计语言然后按照规则约束输出——而不是照抄训练数据里最常见的模式。不是帮你选颜色是教 AI 什么叫「有品位地选颜色」。作者/团队介绍作者: Leonxlnxlexnlin协作者: blueemi99官网: tasteskill.devLicense: MIT项目数据⭐ GitHub Stars:36,800 Forks: 2,700 技能数量: 13 个持续增加 License: MIT 语言: Shell 100%安装脚本 SKILL.md 规则文件主要功能核心作用taste-skill 是 AI Agent 的「设计品位外挂」——在 AI 生成前端代码之前注入一套经过研究积累的设计原则让输出从「通用模板」变成「有明确风格主张」的界面。它不做的事不提供 UI 组件库不替代 Figma 或设计稿不帮你写业务逻辑它做的事告诉 AI 如何推断项目的设计语言行业 / 受众 / 情绪基调约束 AI 的布局、间距、字体、动画、对比度决策防止 AI 输出大家都在用的「平庸设计模式」使用场景用 Claude Code / Cursor 从零搭建新项目安装 taste-skill 后AI 在写第一行样式代码之前就已经知道这个项目的设计气质改造已有项目的视觉风格redesign-skill会先审计现有 UI找出风格不一致的地方再给出完整改造方案产品设计稿 → 代码实现image-to-code-skill支持图片优先工作流上传截图/设计稿 → AI 分析风格 → 生成对应代码品牌视觉体系搭建brandkit技能一次性生成 logo、配色方案、字体组合、品牌规范文档特定风格的快速实现需要 Notion 风格极简界面用minimalist-skill。需要 Figma/Vercel 风格粗野主义用brutalist-skill。快速开始# 安装主技能推荐新项目使用npx skillsaddhttps://github.com/Leonxlnx/taste-skill# 安装单个技能npx skillsaddhttps://github.com/Leonxlnx/taste-skill--skilldesign-taste-frontend# 安装极简风格技能npx skillsaddhttps://github.com/Leonxlnx/taste-skill--skillminimalist-ui安装完成后项目根目录会多出一个.claude/skills/design-taste-frontend/SKILL.md文件或类似路径。之后在 Claude Code 或 Cursor 中正常开发AI 会自动读取这个文件并遵循其中的设计规则。完整技能列表代码实现类10个技能名安装 ID定位taste-skill v2design-taste-frontend主力技能推断设计语言调节三旋钮taste-skill v1design-taste-frontend-v1保留的旧版本行为更可预测gpt-tasteskillgpt-tasteGPT/Codex 严格变体强化 GSAP 动效image-to-codeimage-to-code图片 → 分析 → 代码三步流程redesign-skillredesign-existing-projects审计并改造现有项目 UIsoft-skillhigh-end-visual-design高端优雅柔和对比度output-skillfull-output-enforcement防止 AI 输出截断确保完整代码minimalist-skillminimalist-uiNotion / Linear 风格极简brutalist-skillindustrial-brutalist-ui瑞士字体 强对比粗野主义stitch-skillstitch-design-tasteGoogle Stitch 兼容设计规则图像生成类3个技能名安装 ID定位imagegen-frontend-webimagegen-frontend-web生成网站设计参考图imagegen-frontend-mobileimagegen-frontend-mobile生成移动端界面流程图brandkitbrandkitlogo 配色 字体品牌套件三个可调旋钮v2核心taste-skill v2 暴露了三个可以明确设置的参数直接影响 AI 的设计决策DESIGN_VARIANCE (1-10) 低 → 居中对称、整洁规矩 高 → 不对称现代、打破网格 MOTION_INTENSITY (1-10) 低 → 仅悬停效果、微交互 高 → 滚动触发动画、磁性吸附、视差效果 VISUAL_DENSITY (1-10) 低 → 大量留白、呼吸感强 高 → 仪表盘密度、信息层级丰富比如给 SaaS 产品的营销落地页可以设置DESIGN_VARIANCE 6 # 有个性但不奇怪 MOTION_INTENSITY 5 # 有动感但不分散注意力 VISUAL_DENSITY 3 # 留白为主突出核心信息项目优势对比对比维度taste-skill直接让 AI 写 UIUI 组件库设计稿风格独特性✅ 规则约束有主张❌ 千篇一律⚠️ 依赖定制✅ 完全可控实施成本✅ 一条命令✅ 零成本⚠️ 学习曲线❌ 需设计师与 AI 协作✅ 原生为 AI 设计⚠️ 无约束⚠️ 需要桥接⚠️ 需描述转译迭代速度✅ 快✅ 快中❌ 慢项目详细剖析SKILL.md 机制一个文件如何改变 AI 决策taste-skill 的核心技术不是 JavaScript 框架而是一种约定SKILL.md 文件。当 Claude Code 或 Cursor 在项目中发现 SKILL.md会在执行设计相关任务时自动将其内容注入上下文。这个文件不是运行时代码而是「对 AI 的设计指令」——类似项目的设计规范文档但专门为 AI 的阅读和遵守而优化。taste-skill v2 的 SKILL.md 有几个关键章节§0 项目推断在动手之前先读取环境推断项目背景 - 行业垂类金融创意技术医疗 - 目标受众开发者消费者企业用户 - 情绪基调可信有趣紧迫优雅 - 布局风格落地页应用仪表盘 根据推断结果调整后续所有设计决策。§2 设计系统选择根据项目类型选择匹配的设计系统- 企业/SaaS → shadcn/ui 或 Material 衍生 - 技术工具 → Tailwind 系统 单色主调 - 创意/品牌 → 自定义排版主导 - 消费品 → 情绪驱动大图优先§8 双主题默认支持所有界面必须支持深/浅色双主题 - 深色不等于黑色可以是深石板、深灰蓝 - 浅色不等于白色暖白、冷灰均可 - 对比度层级必须在两个主题中保持一致§14 输出前预检清单在提交代码之前必须确认 □ 颜色非随机——每种颜色有明确用途 □ 间距遵循 4pt/8pt 网格 □ 字体层级最多3个尺寸 □ 动画不超过 300ms除非有明确理由 □ 移动端优先已测试 320px 断点风格技能对比选哪个极简风minimalist-ui灵感来源Notion、Linear、Vercel大量留白内容即设计单色或双色调避免彩虹配色字体主导层级非颜色或形状适合工具类产品、开发者工具、内容平台粗野主义industrial-brutalist-ui灵感来源瑞士国际主义排版、Figma 网站、早期互联网粗边框、强对比、有意打破美观规则等宽字体 无衬线混用黑/白/单个强调色适合创意机构、个人品牌、艺术项目柔和高端风high-end-visual-design灵感来源奢侈品牌、高端 SaaS如 Linear 的旧版低对比度、柔和过渡优雅字体衬线 细无衬线精细的微动画适合高端消费品、创意服务、设计工作室image-to-code图片优先工作流这是 taste-skill 中最独特的工作流之一1. 截图 / 上传参考设计图 ↓ 2. AI 分析图片的视觉语言 - 提取主色调、字体风格、间距模式、布局逻辑 ↓ 3. 生成忠实于参考图的前端代码 - 不是逐像素复制而是理解设计语言后重现# 安装 image-to-code 技能npx skillsaddhttps://github.com/Leonxlnx/taste-skill--skillimage-to-code在 Claude Code 中使用/task 参考这张截图用 React Tailwind 实现一个相同风格的产品卡片组件 [附上截图]支持的 AI 工具生态taste-skill 不绑定特定工具支持所有主流 AI 编程环境工具支持方式Claude Code自动读取 SKILL.mdCursor自动读取 SKILL.mdCodex CLI自动读取 SKILL.mdGemini CLI自动读取 SKILL.mdv0 / Lovable手动粘贴规则内容OpenCode自动读取 SKILL.mdChatGPT Images图像生成技能适配项目地址与资源官方资源GitHub: Leonxlnx/taste-skill官网: tasteskill.devTwitter: lexnlin示例项目: Floria、Collective OS总结taste-skill 解决的问题很具体AI 写 UI 总是正确但无聊。它的解法也很直接——不是换工具而是给现有 AI 工具加上一套设计哲学约束。SKILL.md 机制本身是一种优雅的设计一个文件零运行时开销框架无关工具无关。36.8k Stars 说明这个问题是真实的且开发者们在用具体行动表态——他们不满足于能跑的 UI他们想要有品位的 UI。如果你正在用 AI 工具做前端开发taste-skill 值得花5分钟安装试一下。对比安装前后的输出差异就是最好的演示。欢迎了解 PrimeSkills —— 精选 AI Agent 与技能的市场助你构建强大的 AI 工作流。我是冬奇正在探索 AI Agent 的无限可能。欢迎关注我的个人主页冬奇实验室
![Android Lifecycles工具集使用指南：如何有效利用官方速查表提升开发效率 [特殊字符]](http://pic.xiahunao.cn/yaotu/Android Lifecycles工具集使用指南：如何有效利用官方速查表提升开发效率 [特殊字符])
