星标数:114800★ Fork数:7709 《taste-skill:让编程智能体产出专业级网站的 Agent Skill》

Taste Skill(tasteskill 2.5.1)是一个 Agent Skill,它让编程智能体构建出达到 figma.com 与 x.ai 水平的专业公司网站,而不是拼装一张通用的落地页。每次构建都遵循同一套规矩:朴实的文案、一套设计系统、每屏一个区块、左右边缘等距、真实照片(客户没有照片时使用有授权的替代图)、真实品牌图标与真实产品 UI、每页一个 hero 入场动画和一到两个「发牌」时刻、克制的微交互;而着色器效果与滚动场景严格只用于科技、游戏和软件页面——所有这些规则都由一个检查器和一个完成关卡在真实浏览器中验证并强制执行。

taste-skill 项目截图

项目还提供了 TasteCode:把 Taste Skill 做成桌面应用并内置设计智能体,免费开源,可在 tastecode.dev 下载。早期 v2 运行中,从单个 brief 就构建出了咖啡店页面、techno 活动页面等多个示例,页面所用照片均为真实素材,来自开放档案并由 Skill 标注来源。

该 Skill 的所有脚本都是普通的 Node 脚本,不安装任何东西,也不需要 API key;内置的 Wikimedia Commons 照片可离线使用,额外抓取照片或图标则需要网络。

主要特点

  • 从单一设计系统出发:desktop 1440×900 下每屏一个区块、左右内容边缘等距、固定导航栏与单屏收尾页脚。
  • 真实素材优先:软件与技术页面展示改写后的 HTML UI 片段、节点连线图与本地解析的真实品牌/界面 SVG;门店、场所类页面以精选照片、排版和纯色为主,来源在页脚一行中注明。
  • 效果严格分级:着色器背景、滚动场景与程序化 3D 只发给 software、tech、gaming 页面,并有四上下文 WebGL 上限,移动端与 reduced-motion 提供静态回退;咖啡馆、酒店、商店等页面只用照片与排版驱动的时刻,WebGL 为零。
  • 真实浏览器校验:在 headless Chrome 中按 1440、1024、768、390 四个宽度渲染,检查空画面、损坏的着色器、对比度下降、列错位、区块高度漂移、占位文本、虚构门牌号与慢网络图片空缺。
  • 完成关卡把关:由 gate 脚本把关,直到没有可修复的 FAIL 为止,最多三轮。
  • 纯 Node 22+ 脚本集合,不安装任何依赖、不需要 API key。

安装

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

该命令通过 npx skills CLI 安装。运行脚本需要 Node 22+,以及已安装的 Chrome、Edge 或 Chromium(若路径非标准可设置 CHROME_PATH);可选安装 ffmpeg,用于 WebP 输出与 hero 照片的手机裁切。

在 Claude Code 中可作为插件安装:

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

在 Codex 中:

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

也可克隆仓库后运行 ./install.sh,以符号链接方式接入 Claude Code(加 --codex 用于 Codex,--all-agents 两者皆装),此后 git pull 即可原地更新。

📊 本项目 GitHub 星标数:114800。最后更新:2026-11-07,发布:2026-11-07。项目地址:https://github.com/Leonxlnx/taste-skill

100T高转存免费网盘资源精选【持续更中~~~~】:点击查看

0 0 投票
文章评级
订阅
提醒
guest
0 评论
内线反馈
查看所有评论
0
希望你的想法,请评论。x