前几天在 GitHub 上看到一个叫 Taste Skill 的项目，17k+ Star，专门解决 AI 编程助手输出"模板味"的问题。正好有个朋友想做企业官网，拿来实战测试一下。

Taste Skill 是什么？

Taste Skill 是一套纯文本规则文件（SKILL.md），不是代码，不联网，核心目标是告诉 AI："别再生成千篇一律的模板页面了。"

它包含 13 个子技能：极简风、工业风、品牌系统、图片转代码、老站翻新……覆盖了大部分常见设计方向。

核心方法论是 Design Read：先读懂你的需求，推断设计方向，再选对应的设计系统输出。不是拿到需求就开写，而是先"读懂"再动手。

实战演示：为"研智科技"搭建官网

需求：公司名叫「研智科技网络公司」，做成人高考培训、AI 培训、招聘会策划、企业培训。页面要有科技感。

第一版：差点意思

直接让 WorkBuddy 安装 Taste Skill 后提需求，生成的第一版——能看，但不够看。配色偏素，排版中规中矩，科技感几乎没有。这就是典型的"模板输出"：结构完整，设计为零。

第二版：暗黑科技风，对味了

反馈"没有设计感，也没有科技感，换个方向"。WorkBuddy 读取 Taste Skill 规则，重新做 Design Read，选了暗黑科技风方向：

• 深色背景：#0a0f1a，像赛博朋克的城市夜空
• 青色光晕：#06b6d4 作为主色调，像终端屏幕的光
• 粒子网络背景：Canvas 动态连线粒子，像科幻片里的数据流
• 扫描线效果：青色光线从上到下缓缓扫过整个页面
• Space Grotesk 字体：等宽风格的显示字体，代码味拉满

四个业务板块用卡片呈现，鼠标 hover 有微动效；数据区域四列排开，有渐变分隔线；底部有联系方式和简洁 Footer。

部署上线

页面完成后需要部署。尝试部署到 Cloudflare Pages 绑定自定义域名 kt.yaniw.com，但 wrangler 授权出了问题——OAuth token 权限不够，sandbox 环境没法弹出浏览器完成授权。换用 CloudStudio 一键部署，几分钟拿到线上地址。

苏米注：部署环节遇到权限问题是常见情况。CloudStudio 的一键部署是个不错的备选方案，虽然没能绑定自定义域名，但页面已经完全在线，手机电脑都能访问。

移动端适配：踩了三个坑

上线后手机打开发现宽度溢出，右边多出一截，右上角菜单按钮得横向滑动才能看到。排查后发现三个问题：

1. 绝对定位的装饰元素溢出：粒子光晕、渐变圆等装饰元素用 position:absolute 定位，部分伸出视口外，父级没有 overflow:hidden
2. inline style 覆盖了 Tailwind 响应式类：手动写的 grid-template-columns 优先级比 Tailwind 的 md:grid-cols-2 高，导致移动端维持桌面端多列布局
3. HTML 属性重复：多个元素写了两个 class= 或两个 style=，浏览器只认第一个，后面的响应式样式被忽略

修复方案：

• 给所有 section 加 overflow:hidden
• 删掉 inline 的 grid-template-columns，让 Tailwind 响应式类接管
• 合并重复的 HTML 属性
• 加一套完整的 @media(max-width:768px) 样式

修复后：卡片从横排变竖排，字号自适应，导航收进汉堡菜单，一切刚刚好。

Taste Skill 的核心价值

回头看整个流程，Taste Skill 做的事情其实很简单——让 AI 在写代码之前先想设计。

就多了一步"Design Read"，出来的东西完全不一样。而且它不是固定风格的——极简、工业、赛博朋克、品牌定制，都可以。同一个需求，换个方向就是完全不同的设计语言。

核心评价：AI 辅助设计不该是替代设计师的审美，而是让"不会设计但知道想要什么"的人，也能做出不丢人的页面。Taste Skill 做到了这一点。

📌 GitHub：https://github.com/TonyStark111/taste-skill