企业官网建设流程全解析

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

Taste-Skill 是一套给 AI 编码代理装上的"品味"技能包：安装后，代理写落地页、作品集时会主动避开居中 Hero、Inter 字体、紫色渐变这类模板脸，产出排版和动效都更讲究的界面。

🎯 这些 AI 生成的页面，你肯定刷到过

深色背景配紫色光晕，居中大标题下面三张等大的特性卡片，字体永远是 Inter。同一个提示词喂给不同的模型，出来的页面像同一套模板换了 logo。

更糟的是半成品：加载态是通用圆圈转圈，空状态只有干巴巴一句话，按钮点了没有任何按压反馈。代码能跑，但上线前你大概率会推翻重写。

问题不在提示词写得多差，而在模型见过的页面里这类"默认审美"占大头，输出时直接照抄。要修的不是咒语，是规则。

🧩 Taste-Skill 到底是什么

Taste-Skill 不是框架，也不是组件库，仓库里没有一行会打进你 bundle 的代码。它是一组可移植的 Agent Skills：每个技能就是一个 SKILL.md 指令文件，装好后由 Codex、Cursor、Claude Code 这类代理自动加载，约束代理在布局、排版、色彩、动效上的每个决策。

它管的是设计意图，不绑定框架 API——React、Vue、Svelte 项目都适用。你不用重写项目，也不用改构建配置。

⚡ 两条命令装好

安装用 skills CLI，它会扫描仓库的skills/目录，代码技能和图像生成技能走同一条命令：

npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill

只装某一个技能时，用--skill传安装名（取技能 frontmatter 里的name字段，不是文件夹名）：

npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill "imagegen-frontend-mobile"

不想装也可以：把任意 SKILL.md 复制进项目，或直接粘贴进 ChatGPT / Codex 对话，效果等价。

🔍 核心能力拆解

先读题，再动手

效果：代理写第一行代码前，会先输出一句"设计判读"，说清页面类型、目标受众、设计语言。

原理：v2 把读需求做成了强制流程——先判断是 SaaS 落地页、作品集还是政府服务站点，再选视觉方向；需求含糊时只允许追问一个问题，不许猜。

用法：正常写需求即可，比如"B2B SaaS 落地页，给技术买家看"，判读由代理自己完成。

三个旋钮，锁住风格边界

效果：整站的布局实验性、动效深度、信息量被同一组数值管住，前后章节不会风格漂移。

原理：DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY三个 1-10 的旋钮是全局变量，SKILL.md 里每条规则都按它们决定是否触发。

用法：不想动文件就在对话里口头覆盖，例如"动效降到 3，只要悬停反馈"。

反"AI 味"的硬规则清单

效果：紫蓝渐变、衬线默认字体、em-dash 滥用、"Scroll ↓"提示这类一眼假的元素被逐条点名禁止。

原理：规则来自专项研究，仓库research/目录记录了 LLM 输出中最高频的审美惯性长什么样。

用法：生成时规则自动生效，发布前的 pre-flight checklist 会再逐条自查一遍，不需要你手动盯。

🎛 关键参数与技能选择

三个旋钮的默认值在skills/taste-skill/SKILL.md顶部，按项目类型调整：

技能不用全装，每个只干一件事，按需挑：

🖼 效果展示

下面这张用 taste-skill 生成的花卉工作室页面首屏，可以对照着看规则怎么落地：

• 左文右图的不对称首屏，而不是居中三件套
• 黑色基调上只放一个强调元素，没有紫蓝渐变
• 标题用同族字体的斜体做强调，没有硬塞衬线
• 导航高度、按钮样式、留白都受 pre-flight 规则约束

🛠 进阶技巧

图像先行：先要图，再要码

用 image-to-code-skill 时，在提示词里直接声明流水线，例如"按技能执行：先生成参考图，再分析，再写代码"。如果交付物本身就是设计图，改用 imagegen-frontend-web 或 imagegen-frontend-mobile 出图，再把图喂给编码代理落地，两条链路可以分开用。

老项目改造：让代理先审计

在现有代码库上别直接说"帮我美化"。装上 redesign-skill，它会先跑审计、列出问题，再按布局 → 间距 → 层次的顺序修。URL 结构、表单字段名、品牌字样这类东西明确在"不许悄悄改"清单里。

🤔 你大概率会问

它和我项目里的 Tailwind、组件库冲突吗？不冲突。规则针对设计意图而不是框架 API，React、Vue、Svelte 都适用，现有 Tailwind 项目直接装即可。

SKILL.md 到底是什么？一个可移植的指令文件。代理能自动加载它，你手动复制进仓库或粘贴进对话也完全可以，两种用法等价。

图像生成技能怎么安装？和代码技能同在skills/目录下，同一条npx skills add命令就能发现并安装，不需要额外工具。

v1 和 v2 有区别吗？默认技能已更新为 v2（实验性），新增需求判读、暗色模式协议和发布前检查清单。依赖 v1 精确行为的，显式安装design-taste-frontend-v1锁定旧版即可。

跑完上面的安装命令，把下一个落地页需求直接丢给代理，对比一次输出，你就知道它拦下了多少"模板脸"。

【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill