AI 生成的前端总是长一个样用 Taste-Skill 给 AI 装上设计品味告别模板脸界面【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill你肯定见过这种页面正中间一个 Hero 区、紫蓝色渐变光晕、三张等大特性卡片、Inter 字体深灰底配一个发光按钮。单看每个都不算差但就是哪里见过——因为这就是大多数 AI 的默认审美。你换了十个项目AI 端出来的还是同一张脸。Taste-Skill就是来解决这个问题的。它是一组可以直接装进 Codex、Cursor、Claude Code 这类编码 Agent 的技能文件作用一句话让 AI 写前端之前先读懂你要什么主动避开那些烂大街的默认套路产出布局、排版、动效都更讲究的界面。装完之后你的一次真实体验是怎样的先把它装进你的 Agent。整个过程就一条命令也可以用git clone把仓库拉到本地git clone https://gitcode.com/GitHub_Trending/ta/taste-skillnpx skills add taste-skill装好后你不需要学任何新工具还是老样子跟 AI 说话只是多写一句简报就行比如给一个独立花艺工作室做个官网感觉要安静、高级一点目标用户是讲究生活品质的消费者。接下来会发生三件事跟裸 AI 完全不同1. AI 先读简报再动手。Taste-Skill 要求模型在写第一行代码之前先输出一句自己的判断大意是我理解这是一个面向注重品质的消费者、走克制高级感路线的落地页。 说白了它被强制跳过猜需求这一步。如果简报太模糊比如你就甩了句做个网站它只会问你一个问题来确认方向而不是自己脑补。2. 三个旋钮决定页面气质。技能里内置了三个 1 到 10 的档位你可以理解成相机的曝光三要素布局放不放飞、动效给多少、页面信息挤不挤。AI 会根据你的简报自己先定一组值而且改起来不用碰文件——直接对话说动效再收一点就行。想手动调的话打开 skills/taste-skill/ 里的 SKILL.md文件头几行就是。3. 交付前有一道反模板预检。技能内置了一堆硬性禁令比如AI 最爱的紫色光晕不许当默认、三张等大卡片不许偷懒、字体别无脑用 Inter、强调词要用同一字体的斜体而不是混进一个衬线字。你可以理解为给 AI 配了个设计总监页面出炉前先过一遍审查。看看真实输出长什么样上面那张图来自仓库里的 examples/ 目录是个叫 Floria 的花艺工作室官网用 taste-skill 做的。你留意几个细节首屏没有居中三件套标题左对齐、花艺大图压在右侧深色底加单色强调留白很大胆——这就是简报里安静、高级被 AI 正确翻译后的样子。仓库里 skills/ 目录下一共有 14 个技能分两种出代码的和出参考图的。出图的技能比如imagegen-frontend-web、imagegen-frontend-mobile、brandkit只产设计稿不写代码。玩法是先让 AI 按技能生成一张又一张分区参考图你自己挑出满意的再喂给编码 Agent 照着实现。想一条龙走生成图 → 分析图 → 写代码的路线用image-to-code这个技能。14 个技能按场景挑不用全装每个技能只干一件事用哪个装哪个。挑法其实很直白从零做落地页、作品集、营销站 → 默认的taste-skill安装名design-taste-frontend现在是 v2 实验版迭代很勤手里已经有个站想翻新又不想大拆大建 →redesign-skill它会先审现有界面再修要那种贵气、克制的高级感 →soft-skill要杂志感、黑白灰的编辑风 →minimalist-skill要硬派工业感 →brutalist-skillAI 写代码总是写一半、留占位符 → 加装output-skill治这个只想要设计图Web 稿、App 稿、品牌板→ 三个imagegen系列装单个技能时用它 frontmatter 里的安装名不是文件夹名npx skills add taste-skill --skill redesign-existing-projects适合谁边界也说清楚它的甜区很明确落地页、作品集、营销站、品牌页面这类门面工程。反过来仪表盘、数据表格、多步骤产品后台技能里明确写了不在范围内——别用它硬套复杂业务界面。另外两个前提值得知道一是它对框架不挑React、Vue、Svelte 都能用规则针对的是设计意图而不是某个框架 API二是如果你依赖 v1 的精确行为可以显式装design-taste-frontend-v1锁住完整变更说明在 CHANGELOG.md。至于它为什么能反模板——背后有一整套对 AI 偷懒习惯的专项研究都写在 research/ 目录里感兴趣可以翻。最快上手步骤两步开始今天就能做npx skills add taste-skill然后在你的编码 Agent 里丢一个真实的落地页需求把对象和气质说具体别只说好看点看它输出的那句设计判断和你的预期是否对得上。顺手再试一条图生码路线装image-to-code提示词里写明按技能执行先生成图片再分析再写代码对比一下直接出代码的效果。觉得哪个旋钮不对味就一句话让它改哪个技能对路就留着装着。剩下的交给它练品味。【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AI 生成的前端总是长一个样？用 Taste-Skill 给 AI 装上设计品味，告别模板脸界面
AI 生成的前端总是长一个样用 Taste-Skill 给 AI 装上设计品味告别模板脸界面【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill你肯定见过这种页面正中间一个 Hero 区、紫蓝色渐变光晕、三张等大特性卡片、Inter 字体深灰底配一个发光按钮。单看每个都不算差但就是哪里见过——因为这就是大多数 AI 的默认审美。你换了十个项目AI 端出来的还是同一张脸。Taste-Skill就是来解决这个问题的。它是一组可以直接装进 Codex、Cursor、Claude Code 这类编码 Agent 的技能文件作用一句话让 AI 写前端之前先读懂你要什么主动避开那些烂大街的默认套路产出布局、排版、动效都更讲究的界面。装完之后你的一次真实体验是怎样的先把它装进你的 Agent。整个过程就一条命令也可以用git clone把仓库拉到本地git clone https://gitcode.com/GitHub_Trending/ta/taste-skillnpx skills add taste-skill装好后你不需要学任何新工具还是老样子跟 AI 说话只是多写一句简报就行比如给一个独立花艺工作室做个官网感觉要安静、高级一点目标用户是讲究生活品质的消费者。接下来会发生三件事跟裸 AI 完全不同1. AI 先读简报再动手。Taste-Skill 要求模型在写第一行代码之前先输出一句自己的判断大意是我理解这是一个面向注重品质的消费者、走克制高级感路线的落地页。 说白了它被强制跳过猜需求这一步。如果简报太模糊比如你就甩了句做个网站它只会问你一个问题来确认方向而不是自己脑补。2. 三个旋钮决定页面气质。技能里内置了三个 1 到 10 的档位你可以理解成相机的曝光三要素布局放不放飞、动效给多少、页面信息挤不挤。AI 会根据你的简报自己先定一组值而且改起来不用碰文件——直接对话说动效再收一点就行。想手动调的话打开 skills/taste-skill/ 里的 SKILL.md文件头几行就是。3. 交付前有一道反模板预检。技能内置了一堆硬性禁令比如AI 最爱的紫色光晕不许当默认、三张等大卡片不许偷懒、字体别无脑用 Inter、强调词要用同一字体的斜体而不是混进一个衬线字。你可以理解为给 AI 配了个设计总监页面出炉前先过一遍审查。看看真实输出长什么样上面那张图来自仓库里的 examples/ 目录是个叫 Floria 的花艺工作室官网用 taste-skill 做的。你留意几个细节首屏没有居中三件套标题左对齐、花艺大图压在右侧深色底加单色强调留白很大胆——这就是简报里安静、高级被 AI 正确翻译后的样子。仓库里 skills/ 目录下一共有 14 个技能分两种出代码的和出参考图的。出图的技能比如imagegen-frontend-web、imagegen-frontend-mobile、brandkit只产设计稿不写代码。玩法是先让 AI 按技能生成一张又一张分区参考图你自己挑出满意的再喂给编码 Agent 照着实现。想一条龙走生成图 → 分析图 → 写代码的路线用image-to-code这个技能。14 个技能按场景挑不用全装每个技能只干一件事用哪个装哪个。挑法其实很直白从零做落地页、作品集、营销站 → 默认的taste-skill安装名design-taste-frontend现在是 v2 实验版迭代很勤手里已经有个站想翻新又不想大拆大建 →redesign-skill它会先审现有界面再修要那种贵气、克制的高级感 →soft-skill要杂志感、黑白灰的编辑风 →minimalist-skill要硬派工业感 →brutalist-skillAI 写代码总是写一半、留占位符 → 加装output-skill治这个只想要设计图Web 稿、App 稿、品牌板→ 三个imagegen系列装单个技能时用它 frontmatter 里的安装名不是文件夹名npx skills add taste-skill --skill redesign-existing-projects适合谁边界也说清楚它的甜区很明确落地页、作品集、营销站、品牌页面这类门面工程。反过来仪表盘、数据表格、多步骤产品后台技能里明确写了不在范围内——别用它硬套复杂业务界面。另外两个前提值得知道一是它对框架不挑React、Vue、Svelte 都能用规则针对的是设计意图而不是某个框架 API二是如果你依赖 v1 的精确行为可以显式装design-taste-frontend-v1锁住完整变更说明在 CHANGELOG.md。至于它为什么能反模板——背后有一整套对 AI 偷懒习惯的专项研究都写在 research/ 目录里感兴趣可以翻。最快上手步骤两步开始今天就能做npx skills add taste-skill然后在你的编码 Agent 里丢一个真实的落地页需求把对象和气质说具体别只说好看点看它输出的那句设计判断和你的预期是否对得上。顺手再试一条图生码路线装image-to-code提示词里写明按技能执行先生成图片再分析再写代码对比一下直接出代码的效果。觉得哪个旋钮不对味就一句话让它改哪个技能对路就留着装着。剩下的交给它练品味。【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考