企业官网建设流程全解析

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-skill）：

npx 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-skill
• AI 写代码总是写一半、留占位符 → 加装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/ 目录里，感兴趣可以翻。

最快上手步骤：两步开始

1. 今天就能做：npx skills add taste-skill，然后在你的编码 Agent 里丢一个真实的落地页需求（把对象和气质说具体，别只说"好看点"），看它输出的那句"设计判断"和你的预期是否对得上。
2. 顺手再试一条图生码路线：装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