![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/28394d68b15371b4ef7d12d41a69f016.png)

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

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

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

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/b3dbcdf9e22d955dbf53f0543373dba1.png)

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/0e12973589375fb32a679c1941081182.png)

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

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

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

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

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

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

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

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

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

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/c2c6d47a0b953a702971558f93d44c2a.png)

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/fc52035ae1a760b4c877583fe3db84a3.png)

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

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

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

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/28232806ea2c0c7c99e8b4a47eebc24b.png)

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

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/f2b41766652f9efce61c0855d24e2b19.png)

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

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

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

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

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

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

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/e5636bee3592efa95ec948f46fc7f75b.gif)

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

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

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

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

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

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

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

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

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

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/fa3f240e04206f9d6a55ead86101e202.png)

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

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

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

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

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

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/a1d2b695443dc2194e077112820b83f2.png)

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

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

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/a6922a95afc8cbeea12b996070b542c6.png)

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

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

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

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

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

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

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

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/ed81e50b1be369b2babc2898e1ca82ca.png)

先准备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开发者的咖啡店案例，就把订位、带电脑办公、奶类选择、带狗和付款问题，做成了一叠彩色卡片。

![Image](https://developer.qcloudimg.com/http-save/yehe-10990648/15563cf2f201d55117a5c507b8dde33f.png)

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

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

# 写在最后

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

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

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

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


* * *

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

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

Taste Skill V2来了，AI做的网站还会一眼认出来吗？

Taste Skill V2，拯救你的AI味儿网页！

人工智能

前端

开发工具

TasteSkill V2更新，让AI网站告别模板感。通过深挖项目独特故事（如咖啡店“豆子”姓氏），自动匹配20种设计方向并整合真实素材，最后自动多设备检查优化。测试显示，安装后页面更具品牌个性，但耗时和成本略增。适合门店、产品等介绍页制作，建议提供充分项目细节。

代码解释

2026上云采购 | AI焕新·智启新局

tapd

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Taste Skill V2来了，AI做的网站还会一眼认出来吗？-腾讯云开发者社区-腾讯云

Taste Skill V2来了，AI做的网站还会一眼认出来吗？

Taste Skill V2来了，AI做的网站还会一眼认出来吗？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐