企业官网建设流程全解析

三个数字加十三个技能：让 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

给一句需求丢给 Codex 或 Cursor，回来的不是模板化页面：Taste-Skill 是一组开源的 AI 前端设计技能包，装上之后，AI 编码代理交出的落地页或作品集页面，布局、留白和动效都有设计感。

上手案例：从一句话到一整个页面

最短的典型走法，是用默认的 taste-skill（安装名design-taste-frontend）从零做一个 SaaS 落地页。全程四个环节，中间有两处你能验证的产物。

第一步加载技能。一条命令装好，或者把 skills/taste-skill/SKILL.md 直接贴进对话。第二步说需求，比如“做个极简 SaaS 落地页，面向技术买家”。第三步看代理的产物：它先给出一句试味报告，形如“读作：面向技术买家的 B2B SaaS 落地页，Linear 式极简语言”。这句话来自核心规则文件里的真实示例，需求读不出来的时候，它只允许问一个问题，比如“更接近 Linear 的干净还是 Awwwards 的放飞”，问完就往下走。第四步看三个数字：DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY，基线是 8/6/4。“极简”会把变化度压到 5-6、动效降到 3-4。这几个数字在对话里随口改，不用翻文件。

代码写完之后还有一道出厂质检：逐条跑预检清单，全过才交付。完整条文在核心规则文件里，规则为什么这么定，research 目录有研究笔记。

核心机制：Taste-Skill 怎么把模糊需求变成确定产出 🧑‍🍳

结论先说：这套技能按“试味、定量、照方下锅、出餐前检查”的顺序工作，AI 的随机性主要被挤掉在中间两步。

先试味。模型的习惯是见到需求直接开写，产物就落在默认审美上。Taste-Skill 强制代理先做需求推断：什么类型的页面、什么受众、什么气质、手里已有什么品牌资产。读得出来就直接声明试味报告往下做，读不出来才问，且只问一个。

再定量。气质被翻译成三个数字：布局多跳脱、动效多强、一屏塞多少信息。技能包里自带一张“词语到数字”的对照表，你原话里的“minimalist”会把变化度定到 5-6，动效定到 3-4；说“Awwwards 风格”则三项全抬，动效顶到 8-10。这一步把主观词变成了可执行的参数。

照方下锅。数字定了，硬规则开始生效：变化度大于 4，居中 hero 禁止；密度大于 7，通用卡片容器禁止；动效大于 4，页面必须真的动起来，做不到就把动效降到 3、交静态页，不许半成品。黑名单贯穿始终：AI 紫蓝渐变、Inter 配深灰、三等分卡片、默认衬线字体都在内，连 em-dash 都是零容忍，页面里出现一个就要重写。每个动画还要一句话说清它传达什么，说不清就删。

出餐前检查。产出前要跑预检清单，从眉标数量到 CTA 对比度，全是机械检查，任何一项不过就算没做完。这就是为什么反复生成结果也稳定：干活的是规则，不是模型的手感。

适合谁、不适合谁：按任务选技能

仓库捆了十三个技能，每个只管一件事，边界写在文件里。一句话速览在 skills/llms.txt。

如果你是做落地页、作品集、品牌页，默认的 taste-skill 是最稳的选择；想走图先行的流程就换 image-to-code-skill，先生成参考图，再深度分析，最后照着写码，顺序是强制的。

如果你是在翻新一个老站点，用 redesign-skill。它的流程是扫描、诊断、修复，先审计再动手，只修视觉和布局，不动信息架构。

如果你的交付物只是参考图，imagegen-frontend-web、imagegen-frontend-mobile 和 brandkit 只出图，一行代码不写，定完方向再交给编码代理。

如果代理总交半成品、留占位注释，加 output-skill 补刀。

如果你做的是后台、数据表、多步表单，这个仓库明确说不在范围内，直接装 Fluent、Carbon、Atlassian 的官方包更稳，硬套营销页规则反而坏事。

快速开始：一条命令加一次验证

安装一条命令，验证靠一次对话。全量安装：

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

Codex、Cursor、Claude Code 都识别这个装法。只装核心的话加--skill "design-taste-frontend"，或者把单个 SKILL.md 贴进对话，效果一样。

最小验证：丢一句“给摄影师做个作品集页面”，盯住两个信号。第一，代理输出的第一行是一句试味报告而不是代码；第二，三个数字明确出现、能对上你的原话。然后代码才开始。如果它直接开写，说明技能没加载，重跑安装命令。

落地避坑：最容易翻车的五个地方 ⚠️

坑基本都对应技能里的某条硬规则，知道哪条规则没有商量余地，就不容易翻车。

• 用在错对象上最典型：后台、管理端超出范围，硬套用会做出好看但不能用的页面，这种任务交给官方设计系统。
• 动效宣称了但页面是静态的：代理写了 MOTION_INTENSITY: 7 却一个动画没有。规则是做不到就降到 3 交静态页，不要留半成品动画。
• 页面文案里出现一个 em-dash 就要重写。这条是零容忍，代理爱往标题里塞，人工验收时顺手查一遍。
• 翻新站点时别动 URL 结构、导航标签、表单字段名。这些会悄悄影响 SEO 和埋点，技能里要求拿到明确许可才能改。
• 别替代理假设依赖已安装。它引用任何库之前要查 package.json，缺就先给安装命令，这是强制步骤，被跳过的代码跑不起来。

Taste-Skill 把“品味”从主观感受变成了一张可检查的规则清单，三个数字是规则的总开关。开始之前，先让代理把试味报告念出来，这一句对了，页面才可能对你。

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