企业官网建设流程全解析

同一个团队，AI 做出来的页面却像三家外包：一份共享规则让编码助手不再各画各的

【免费下载链接】taste-skillAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill

你有没有见过这种场面。

同一个项目组，三个人，三款 AI 编程工具。小李用 Cursor，小王用 Claude Code，老张用 Codex。同一个需求：“给咱们的新产品做个官网首页”。

半天后，三份稿子摆在桌上：一份紫色渐变配三张并排卡片，一份深色背景加霓虹发光按钮，还有一份米黄色加陶土色的“文艺风”。单看都不算丑，放一起就像三家不相干的外包公司分别交的活。

更麻烦的是，下周换个人接着改，画风又变了。

最近在 GitHub 上被讨论得很热的开源项目taste-skill，正好提供了一种很实在的解决思路：把“什么好看、什么难看、做完怎么自查”写成一份共享的规则文件，让团队里所有编码助手都读同一本手册。

它的做法很简单，也很巧。

一、先说明白：这东西不是让你换工具

先澄清一个常见误会。

taste-skill 不是新的 AI 编程工具，也不是设计软件，它不生成组件、不接管你的编辑器。它是一份写给 AI 看的“设计施工规范”。

打个比方：你请了三位装修师傅，手艺都不差，但一个爱贴大理石、一个爱装水晶灯、一个爱做工业风。你不能指望他们自己商量出统一风格，得给他们一份图纸和验收标准。

taste-skill 就是那份图纸和验收标准。

它的核心就是一个文件夹，里面最关键的是一份说明文件。AI 工具读到这份说明，就知道：接到需求先干什么、从哪些设计方向里挑、哪些“AI 味”的做法一律不许用、做完之后要打开浏览器自己检查一遍。

而且它不挑框架。React、Vue、Svelte、纯 HTML 都行，因为规则管的是审美和流程，不是代码写法。

二、一份规则，怎么让不同工具都认

这是整个项目最值得团队借鉴的地方。

Claude Code 有自己的技能目录，Codex 也有自己的，Cursor 又是另一套读取方式。听着像要维护三份副本，其实不用。

因为这份规则本质上是纯文本的说明书，谁都能读。仓库给了几条不同的“送达方式”：

• 有的工具通过官方插件市场一键安装，规则会挂在自己的命名空间下，不会跟你原有的技能打架；
• 有的工具用一条安装命令，把整个文件夹拷进对应的技能目录；
• 仓库里还提供了一个安装脚本，它不复制文件，而是在技能目录里建一个“快捷方式”，直接指向你 clone 下来的那个仓库。

这个细节特别关键。

复制文件的话，规则改了，你得挨个通知同事重新装一遍。用快捷方式的话，仓库一更新，同事在本地拉一下代码，规则就原地生效了——不用重装、不用重启一堆配置。

对团队来说，这就把“审美规范”变成了一个可以被 git 管理的普通项目。

三、规则里到底写了些什么？

不讲代码，只讲它管的三件事，你就能感受到差别。

第一件：先搞清楚“你这家店有什么特别的”，再动手。

很多人用 AI 做页面，提示词就一句“做个咖啡店官网”。AI 只能给你咖啡杯、咖啡豆、棕色背景——因为这是它见过最多的组合。

taste-skill 要求 AI 开工前先列清单：名字有什么含义、开在哪条街、店里几个座位、有什么别人没有的规矩、几点开门。这些东西才是页面的“原材料”。

项目作者放出的对照案例特别能说明问题。德国有家咖啡店，店主姓 Bohne，德语里就是“豆子”的意思，店是父亲带着两个儿子开的。装上这套规则后，AI 把“一大两小、三颗豆子”做成了整页反复出现的图形，连照片都裁进豆子的轮廓里。

没装规则的那一版，是巨大店名、蓝底白字、四周一圈细线——标准模板脸。

第二件：给“AI 味”列一张黑名单。

这部分写得非常具体，具体到有点好笑：紫色渐变、发光按钮、卡片下面的柔和阴影、标题上方那个小号大写字母标签、等宽字体的装饰小字、01/02/03 的序号、一排三张等宽功能卡片、米黄配陶土色的“伪文艺风”……全部在禁止或警告之列。

它的判断依据来自对 247 个精选设计站点的观察，不是拍脑袋。更妙的是，这张黑名单是带日期的。

因为今天的“高级感”，明天就会变成新的模板。三年前大家嫌紫色渐变土，于是集体转向米黄加陶土色，结果这个“解药”本身变成了最容易辨认的 AI 痕迹。所以清单必须像日历一样不停翻新。

第三件：做完不算完，必须自己看一遍。

这一步是很多团队的痛点。

AI 写完代码说“完成了”，你一打开：标题挤成四行、文字压住图片、电脑上好好的按钮在手机上跑出屏幕。这些问题看代码根本看不出来。

taste-skill 的做法是让 AI 启动真实浏览器，按电脑、平板、手机三种宽度打开页面，量字号、量边距、查溢出、查对比度，然后截图存下来。AI 必须看这些截图，挑出最严重的三个问题改掉，最多改三轮。

一句话总结：它不相信“我觉得做好了”，只相信“我看见了”。

四、放到团队里，它解决了三个真实的麻烦

麻烦一：新人入职，审美靠口口相传。

“咱们的页面别搞那么花”“按钮别用渐变”“标题别超过两行”——这些话以前靠老员工一遍遍说，说漏了就出事。

现在这些全写在规则文件里。新人第一天拉下仓库，他的 AI 助手就自动按团队标准干活。规则变成了可交付的资产，而不是某个人脑子里的经验。

麻烦二：版本混乱，谁也不知道自己用的是哪一版。

这个项目自己就在认真做版本管理：更新日志按小版本记录，当前是 2.1.5，每次改了什么、修了哪个社区反馈的问题，一条条写清楚。

团队也可以照做：规则仓库打上版本号，重要项目在配置里锁定版本，升级前先看更新日志。想尝鲜的用最新版，要稳定的用固定版，两边不打架。

还有个特别真实的教训值得所有团队抄走。有一次发版，规则文件开头的一段描述里有个冒号没加引号，格式解析失败，结果技能被工具静默丢弃了——不报错、不提示，就是不生效。排查了半天才发现是这个原因。

于是作者加了一条自动检查：每次提交都验证规则文件的格式、名字是否重复、插件清单指向的文件是否真实存在。规则本身也要被测试，这话听起来好笑，但确实是团队协作的底层常识。

麻烦三：规则定完就烂在文档里。

taste-skill 把它当“活文档”维护：网站上出现了新的流行套路，就补进黑名单；社区反馈某条规则误伤了正常设计，就改；某条规则在真实项目里不好用，就删。

节奏大概是跟着版本走，而不是“年初定一次，年底没人看”。

五、效果和代价，都得实话实说

社区里有几组实测数据，比宣传语有说服力。

一位开发者用同一个项目管理工具的官网做了对照：不装规则，27 分半完成，花费约 5.64 美元；装上之后，36 分 19 秒，花费约 17.58 美元。

时间多了三成，成本翻了三倍。

这是必须接受的代价。它让 AI 多做几步：查资料、挑方向、找真实图片、开浏览器自查、看截图返工。这些步骤都要烧 token。

效果呢？作者自己公布的盲测评测里，最后一轮三个题目，装规则赢了两个，平均 7.7 分，不装是 7.8 分。

分数几乎没差别。

但社区里另一位测试者的说法更实在：他做的对照页面，左边信息更集中、更快讲清楚产品有什么；右边排版更大胆、更有品牌感，他更喜欢右边，但也承认“做得特别”和“让人一眼看懂”是两件都要顾的事。

所以别指望它把 AI 从“能用”变成“惊艳”。它真正稳定的价值是：让同一个团队、不同的人、不同的工具，交出来的东西像一个团队做的。

六、普通人或小团队，门槛高不高

不高，但有几个前提。

不需要显卡，不需要申请任何 AI 接口密钥，不用装一堆依赖。需要的是较新版本的运行环境和电脑上已有的 Chrome、Edge 或 Chromium 浏览器——因为它真的要靠浏览器去“看”页面。找配图时需要联网。

对完全不想碰命令行的人，作者还做了个桌面版应用，把规则和设计助手打包成了可以直接下载的软件。

适合谁？

• 三五人的小团队：没有专职设计师，但对外要脸面，最需要统一标准；
• 接外包的工作室：客户换、项目换，风格不能每次都靠运气；
• 自媒体和独立开发者：一个人也要产出像样的落地页、作品集、活动页；
• 大公司里的创新小组：品牌规范已经有了，把它翻译成 AI 能读的规则，比每次口头叮嘱有效得多。

不太适合谁？如果你的品牌规范非常明确、非常强势，那应该让品牌规范优先，而不是让一套通用规则去覆盖它。项目作者自己也提醒，这套规则有明确的主见，用之前最好通读一遍，确认不和现有技术栈、无障碍要求冲突。

写在最后

AI 编程工具越来越多，团队里“人均一个助手”已经是常态。但工具越多，产出的风格就越容易散。

以前我们担心 AI 写得不对，现在更该担心的是：它每次都写得“对”，但每次都不一样。

taste-skill 提供的答案不复杂——把审美写成文件，把文件放进仓库，让所有工具读同一份，像维护代码一样维护它。

这件事的意义可能超出网页设计本身。当越来越多的“经验”“品味”“规范”可以被写成 AI 读得懂的文档，团队真正要竞争的，也许就不再是谁的提示词写得好，而是谁更擅长把隐性的经验，变成显性的、可共享的规则。

你所在的团队，现在是靠口头叮嘱统一风格，还是已经有一份大家共用的规则文件了？如果让你写第一条“绝对不许用”的规矩，你会写什么？

【免费下载链接】taste-skillAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill