AI做的网站，经常有个问题：明明是不同生意，页面却像同一套模板。

大标题、细分隔线、一排排卡片。换个名字，咖啡店能用，产品官网也能用。

所以Taste Skill更新V2以后，老金先看的是效果。它是一套给Claude Code、Codex这类编程AI用的网页设计技能，开发者放出了一组咖啡店对照：同一个AI，同一条提示词，只差有没有装Skill。

没装时，AI把店名放得巨大，蓝底白字，四周围着细线。

装上V2，一颗大豆子带着两颗小豆子，成了页面主角。往下滚动，豆子也跟着动。

我更喜欢后面这版，原因就在这三颗豆子上。

这家店由父亲和两个儿子经营，店主姓Bohne，德语里就是豆子的意思。一大两小，把姓氏和父子关系一起画出来了。

我想让AI做出来的，就是这种有自己特点的页面。

它先弄清楚，你这家店有什么特别

旧版Taste Skill靠三个参数控制布局、动效和信息密度。V2换了一套做法，开工前先让AI整理项目资料：名字有什么含义，店开在哪里，卖什么，有哪些照片，什么细节是这家店独有的。

我看更新说明时，觉得这个顺序很对。

只告诉AI做一家咖啡店，它很容易给你咖啡杯、咖啡豆和棕色背景。把父亲带着两个儿子开店这件事交代进去，它才有机会想到刚才那三颗豆子。

接下来才是选设计方向，Taste Skill开发者从247个设计画廊网站里整理出资料库，提炼了20种方向。

脚本每次给出三个，让AI结合项目挑一个，再配字体、颜色和布局。

开发者的演示里，店名里的豆子成了整页反复出现的图形，连照片也装进了豆子的轮廓。

同一套Skill做音乐活动，画面就换了。开发者公开的夜场页面，把活动日期放进老工业照片里，机器、钢架和大号数字铺满画面。

找图这件麻烦事，也交给AI

但想做出这样的页面，光有点子还不够，得有素材。

V2优先用项目自己的照片。手里没图，它会去开放档案、博物馆收藏里找相关图片和视频，下载时记下原始创作者、来源和授权信息。

开发者在发布演示里展示的素材，既有老地图、工业照片，也有木材纹理和咖啡豆特写。

咖啡店的烘焙介绍就是个好例子。

开发者给出的页面，把生豆、第一次爆裂、结束烘焙和冷却四个阶段摆在一起，豆子的颜色和设备都有真实素材可看。

老金觉得，这对手里只有一份介绍文案的小团队很实用。

写网页和找配图，可以放在同一个任务里做，AI选图时也知道这一段究竟要讲什么。

写完代码，它还得打开网页看一遍

V2还有个变化，我挺看重：做完以后，AI要自己打开网页，看截图，再回来改。

标题挤成四行，文字压住图片，电脑上好好的按钮到了手机上跑出屏幕，这些问题，光看代码很难发现。

它会启动浏览器，分别按1440、768和390像素三种宽度检查，覆盖电脑、平板和手机。

脚本查溢出、遮挡、字号，AI再看截图，挑最严重的三个问题修改，最多做三轮。

Taste Skill开发者还把小标签、细分隔线、渐变和阴影等常见做法列进了检查规则。

最后一轮测试，三份V2页面都没出现不合格项，默认生成的页面各有8到13项。

我也看了开发者公开的审美盲评。

最后一轮三个题目，V2赢了两题，平均7.7分，没装Skill是7.8分。模型打出来的分数，还没拉开差距。

我看好的是它逼着AI多做了几步：找项目特点、找素材、检查成品。

咖啡店那三颗豆子，比少了几条细线更能说服我。

别人拿去做网站，效果怎么样

官方案例之外，我还找了两位社区用户10月15日公开的新V2测试。

先看Luneri。他用Opus 5.5，给同一个项目管理工具Orbit做介绍页，分别跑了装Skill和没装Skill两版。

下面是他对照视频的封面原图。左边没装，右边装了V2。两边英文标题的意思接近：不用挨个问，也能知道项目进展。

左边先给你一张完整的产品界面，信息很集中。右边把任务列表放在中间，标题分到两侧，排版大胆了不少。

Luneri更喜欢右边，觉得它有了自己的品牌样子。老金看这张对照，反而觉得两边各有用处：右边容易让人停下来，左边更快讲清楚软件里有什么。

做得特别，和让人一眼看懂，是两件都要考虑的事。

他还公开了这一轮的耗时和估算费用：没装Skill是27分30秒、约5.64美元；装上后是36分19秒、约17.58美元。这是他这次测试的记录，做自己的项目，仍得看模型和计费方式。

还有个细节，他给AI的提示词本来就很具体，连参考图、产品功能和不想要的设计都交代了。把需求写清楚，依然省不了。

再看Pratham。他用Grok Build里的Grok 4.7 Extra High Fast，配上新V2，做出一个叫OrbitFlow的团队工作流介绍页。

首屏这句英文，意思大致是“让工作按时完成，回到你手里”。右边直接放了一个巨大的橙色圆环，中间嵌着老天文图。

这张图为什么放这儿，往下看就明白了，

页面用一圈轨道展示任务流转：从接收需求，到起草、审核、财务，再到交付。下半页又出现了天体图，前后的图形是连着的。

我喜欢这个案例的地方，是它没有把每一屏都做成一样的卡片。

大标题、工作流、老天文图，确实让人记得住。

但拿来做自己的官网，我还会让AI改一句话：第一屏就说清楚，这是帮团队处理重复工作的工具。

图做得再抢眼，也得让第一次进来的人明白你卖什么。

想试的话，可以这样交任务

这版主要用来做门店、产品、作品集这类对外介绍页面。

开发者公开的木屋工作室页面，则用了森林、海景照片和错开的标题。

先准备Node 22或更新版本，以及Chrome、Edge或Chromium，找图片需要联网。在终端里进入网页项目文件夹，运行这条命令，装上V2主技能。已有旧版也用它更新。

npx skills add Leonxlnx/taste-skill --skill "design-taste-frontend"

如果提示选择工具，就选你正在用的Claude Code、Codex或Cursor。主指令、参考资料、设计库和脚本会一起装好。

如果拿它做门店介绍页，我会把店里的资料和要求一起交给它，任务可以这样写：

用Taste Skill V2做一个单页介绍站。 项目名称：[填名称]。 主要访客：[填谁会来看]。 我希望访客做的事：[填预约、查看产品或联系我]。 这个项目最特别的三件事：[填真实细节]。 现有材料：[附上文字、照片和品牌素材]。 先确定设计方向，再做页面。缺资料先问我，文案使用我提供的事实。做完检查电脑、平板和手机页面，交付截图、素材来源和修改记录。

营业时间、地址、预约方式，还有顾客常问的问题，都可以一起给。Taste Skill开发者的咖啡店案例，就把订位、带电脑办公、奶类选择、带狗和付款问题，做成了一叠彩色卡片。

做完以后，让它把网页文件、电脑、平板、手机截图和修改记录一起给你。卡在浏览器检查，就查浏览器能否启动、Node版本是否满足要求。找不到图，就查网络和素材来源。

完整跑一轮，Taste Skill开发者估计需要30到45分钟，消耗数十万tokens，实际费用按所用模型和套餐计算。

写在最后

看完V2的演示和更新，老金最在意的，还是那家只有20个座位的咖啡店。

对店主来说，姓什么、和谁一起开店，可能只是很普通的自我介绍。到了网页里，却成了别人记住它的理由。

这也让我觉得，做自己的页面，值得多花点时间整理那些平时懒得讲的小事。门口有什么，为什么卖这个产品，顾客总问什么。

AI已经能替你选字体、找图片，那些只有你知道的细节，反而更值钱了。

谢谢你读我的文章。
如果觉得不错，随手点个赞、在看、转发三连吧🙂
如果想第一时间收到推送，也可以给我个星标⭐～谢谢你看我的文章。