boxmoe_header_banner_img

Hello! 欢迎来到阿虪的开发世界~

加载中

文章导读

taste-skill:给编码 Agent 装上品味,告别千篇一律的 AI 味页面


avatar
阿虪 5 11 月, 2026 177
taste-skill

中文版

taste-skill(GitHub:https://github.com/Leonxlnx/taste-skill ,2026-02-19 创建,今晨抓取时已 110,072★)是一组 Agent 技能,目标是让编码 Agent 做出 figma.com、x.ai 那个水准的专业公司网站,而不是千篇一律的通用落地页。当前版本为 2.5.0,技能名 design-taste-frontend。

它的打法分五步:先按业务类型(软件、游戏、科技、产品、服务、场所)定调,抽一套配色与字体搭配、抽一个经过测试的 Hero 布局;再从同一套设计系统出发,一屏一个区块、左右边距相等、导航固定、结尾一屏收束;接着用真实产品 UI 与真实照片(开源图库、有出处标注)而不是占位图;特效只留给软件、科技与游戏类页面,咖啡馆、酒店、商店、服务类页面保持安静的照片、排版与纯色;最后在真实浏览器里用检查器在 1440、1024、768、390 四种宽度下渲染核对,空画面、坏掉的 Shader、对比度下降、列错位、占位文字、编造的门牌号、慢网下的图片缺失都会在交货前被抓出来。安装用 npx skills add,也可装 Claude Code 或 Codex 插件;需要 Node 22+ 与 Chrome/Edge/Chromium,不装任何东西、不用 API Key。MIT 协议开源。

为什么值得了解

  • AI 生成界面的通病不是功能缺失,而是“看着像 AI 做的”:这个技能把品味拆成了可执行的规则——一套系统、一屏一区、真实素材、浏览器实测,而不是一句“做得好看点”
  • 对正在求职、做作品集的前端开发者尤其有用:同一套检查既能把 demo 打磨到可展示,也能帮你在面试里讲清楚好界面由哪些可度量项组成
  • 它和同赛道的“反 AI 味”技能可以叠加:一个负责建站时的品味,一个负责事后的审查报告,两条线各管一段

English Version

taste-skill (GitHub: https://github.com/Leonxlnx/taste-skill , created 2026-02-19, 110,072 stars at this morning’s fetch) is a set of agent skills aimed at making coding agents build professional company websites at the figma.com and x.ai level, instead of generic landing pages. The current version is 2.5.0, and the skill is named design-taste-frontend.

Its approach has five steps: first classify the client’s business (software, gaming, tech, product, service or place) and deal a palette with a Google Fonts pairing plus one tested hero layout; then build from a single design system — one section per screen, equal left and right edges, a fixed navigation bar and a single-screen closing footer; then use real product UI and real photographs (open archives, credited) instead of placeholders; keep effects only for software, tech and gaming pages, while cafes, hotels, shops and services stay calm with photographs, sharp typography and flat colour; finally render the built page in a real browser with a checker at 1440, 1024, 768 and 390 pixels wide, catching empty visuals, broken shaders, contrast drops, misaligned columns, placeholder text, invented street numbers and slow-network image gaps before delivery. Install with npx skills add, or as a Claude Code or Codex plugin; it needs Node 22+ and Chrome, Edge or Chromium, installs nothing and uses no API keys. MIT licensed.

Why it’s worth knowing

  • The common flaw in AI-generated interfaces is not missing functionality but “looking AI-made”: this skill breaks taste into executable rules — one system, one section per screen, real material, real-browser verification — instead of a vague “make it pretty”
  • Especially useful for front-end developers job-hunting or polishing a portfolio: the same checks can lift a demo to presentable quality and give you measurable terms for explaining, in an interview, what a good interface is made of
  • It stacks with same-track “anti-AI-slop” skills: one handles taste while building, the other handles the post-build review report — each covers a different stretch


评论(0)

查看评论列表

暂无评论


发表评论

表情 颜文字

插入代码