10+年产品经理专注分享AI 工具、AI 资讯、AI Coding、Vibe Coding与下一代产品创新,按 Ctrl+D 收藏我们
关于我 留言板 标签云 排行榜

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
当前位置: 首页 » AI开源项目

Taste Skill V2:让AI理解品牌特点,做出有辨识度的网页

1小时前 AI开源项目 12 0

AI做的网站经常有个问题:明明是不同生意,页面却像同一套模板。大标题、细分隔线、一排排卡片,换个名字,咖啡店能用,产品官网也能用。

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

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

未安装Taste Skill时AI生成的咖啡店页面

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

安装Taste Skill V2后的咖啡店页面,以豆子为主题元素

更喜欢后面这版,原因就在这三颗豆子上。这家店由父亲和两个儿子经营,店主姓Bohne,德语里就是豆子的意思。一大两小,把姓氏和父子关系一起画出来了。想让AI做出来的,就是这种有自己特点的页面。

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

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

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

接下来才是选设计方向。Taste Skill开发者从247个设计画廊网站里整理出资料库,提炼了20种方向。脚本每次给出三个,让AI结合项目挑一个,再配字体、颜色和布局。

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

以豆子为设计方向的咖啡店页面

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

Taste Skill生成的音乐活动页面

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

但想做出这样的页面,光有点子还不够,得有素材。V2优先用项目自己的照片。手里没图,它会去开放档案、博物馆收藏里找相关图片和视频,下载时记下原始创作者、来源和授权信息。

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

咖啡豆特写和木材纹理素材

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

咖啡烘焙四个阶段的展示页面

这对手里只有一份介绍文案的小团队很实用。写网页和找配图,可以放在同一个任务里做,AI选图时也知道这一段究竟要讲什么。

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

V2还有个变化挺看重:做完以后,AI要自己打开网页,看截图,再回来改。标题挤成四行,文字压住图片,电脑上好好的按钮到了手机上跑出屏幕,这些问题光看代码很难发现。

它会启动浏览器,分别按1440、768和390像素三种宽度检查,覆盖电脑、平板和手机。脚本查溢出、遮挡、字号,AI再看截图,挑最严重的三个问题修改,最多做三轮。

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的Orbit工具装Skill与未装Skill对照

左边先给你一张完整的产品界面,信息很集中。右边把任务列表放在中间,标题分到两侧,排版大胆了不少。Luneri更喜欢右边,觉得它有了自己的品牌样子。反而觉得两边各有用处:右边容易让人停下来,左边更快讲清楚软件里有什么。做得特别和让人一眼看懂,是两件都要考虑的事。

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

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

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

Pratham用Taste Skill V2制作的OrbitFlow页面

首屏这句英文,意思大致是"让工作按时完成,回到你手里"。右边直接放了一个巨大的橙色圆环,中间嵌着老天文图。页面用一圈轨道展示任务流转:从接收需求,到起草、审核、财务,再到交付。下半页又出现了天体图,前后的图形是连着的。

OrbitFlow页面的工作流轨道设计

喜欢这个案例的地方,是它没有把每一屏都做成一样的卡片。大标题、工作流、老天文图,确实让人记得住。但拿来做自己的官网,还会让AI改一句话:第一屏就说清楚,这是帮团队处理重复工作的工具。图做得再抢眼,也得让第一次进来的人明白你卖什么。

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

这版主要用来做门店、产品、作品集这类对外介绍页面。开发者公开的木屋工作室页面,则用了森林、海景照片和错开的标题。

Taste Skill生成的木屋工作室页面

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

咖啡店FAQ彩色卡片设计

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

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

写在最后

看完V2的演示和更新,最在意的还是那家只有20个座位的咖啡店。对店主来说,姓什么、和谁一起开店,可能只是很普通的自我介绍。到了网页里,却成了别人记住它的理由。

这也让人觉得,做自己的页面,值得多花点时间整理那些平时懒得讲的小事。门口有什么,为什么卖这个产品,顾客总问什么。AI已经能替你选字体、找图片,那些只有你知道的细节,反而更值钱了。

Github:https://github.com/Leonexlnx/taste-skill

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
未经允许不得转载:Taste Skill V2:让AI理解品牌特点,做出有辨识度的网页
#AI工具 #网页设计 #TasteSkill #ClaudeCode 
收藏 1
lyric-writing-skills:阿里开源的17个AI作词Skill,让AI按专业词人方式写歌词
Vercel开源skills CLI:像npm一样一条命令安装AI技能
推荐阅读
  • Kami 开源文档设计系统:统一设计规范,让 AI 生成的文档直接可用
  • next-ai-draw-io:一键生成各类复杂专业图表、流程图、架构图
  • YPrompt:把零散Prompt提示词变成可管理的知识库,提示词管理系统
  • Hermes Web UI 汉化版发布:8 平台统一管理的 AI 对话控制台
  • Learn Claude Code 开源:真正的 Agent Harness 工程实战,12 课程从零构建 AI 智能体
评论 (0)
请登录后发表评论
分类精选
WeKnora:终于等到了腾讯ima的开源知识库框架,用 API 轻松打造本地智能文档检索
12947 1年前
OpenSpec:比 Cursor Plan 更聪明?试试这款让 AI 编码更靠谱的规范驱动工具
10996 1年前
CapCut API:一个剪映API开源项目,让AI自动剪辑视频
10814 10月前
AIRI:你的开源AI女友,让你随时拥有属于自己的 AI VTuber
9685 1年前
Antigravity-Manager:这个开源神器让你白嫖ClaudeOpus 4.5,Gemini 3!还能接Claude Code等任意平台
9519 9月前
CompressO:开源免费的视频压缩神器,让你的硬盘瞬间轻松 10 倍
9042 1年前
就要创作:从提示词到创作团队,开源 AI 网文写作平台
8951 1年前
awesome-openclaw-skills:700+ Skills 一条命令装配完成,如何让本地 AI Agent 真正落地可用
8458 8月前
Claude Code 生成专业图表的 15 个 Skills:覆盖 7 种渲染引擎的完整指南
8381 6月前
baoyu-skills:又一个宝藏Skill,面向内容创作者的技能集,支持图文生成、发布与处理
8164 8月前

文章目录

关于苏米客
分类排行
1 8K Star的DSH破甲插件:被裁程序员的开源逆袭,7天后将闭源
2 Vercel开源skills CLI:像npm一样一条命令安装AI技能
3 Taste Skill V2:让AI理解品牌特点,做出有辨识度的网页
4 lyric-writing-skills:阿里开源的17个AI作词Skill,让AI按专业词人方式写歌词
5 LightCraft:纯Rust开源照片工具,图库管理+非破坏调色+批量导出
6 StoryForge:开源AI叙事工作台,让AI写长篇小说不再失忆
7 Magpie本地AI网关:一个网关打通所有AI编程工具模型
8 DeepSeek-Bot插件:把DSH变成AI多智能体协作团队
9 Motion2MixamoRig开源项目:零成本实现3D动作捕捉
10 YuE2开源音乐模型:免费无限制,本地部署AI音乐生成工具
苏米客
登录 注册
显示
没有账号? · 立即注册
显示
已有账号? · 直接登录
登录代表你已同意 用户协议 和 隐私政策
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6 网站地图 百度地图
拉美跨境导航 微信文章助手 程序库 免费影视APP 免费字体下载 产品经理导航 爱克硕儿 产品经理AI资讯 Axure元件库下载 申请友联