
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主技能。已有旧版也用它更新。
bash
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已经能替你选字体、找图片,那些只有你知道的细节,反而更值钱了。\ \
谢谢你读我的文章。
如果觉得不错,随手点个赞、在看、转发三连吧🙂
如果想第一时间收到推送,也可以给我个星标⭐~谢谢你看我的文章。
开源知识库(实时更新 交流群): my.feishu.cn/wiki/OhQ8wq...