taste-skill

给AI编程代理装上审美,告别模板化网页

开源 unknown 设计创意
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 98372
维护状态 活跃
是否开源 是
定价模式 unknown

项目预览

项目数据

分类设计创意
开发团队Leonxlnx
所属国家
定价模式unknown
价格说明定价信息待确认
访问状态
是否开源是
开源协议MIT
主要语言JavaScript
技术栈/模型agent-skills,ai-agents,anti-slop,claude-code,codex,cursor,design-system,frontend,landing-page,ui-design,web-design
GitHub 星标★ 98372
30天Star增速
HF 下载量
上线时间2026-02-19 00:00:00
代码更新—
仓库体积—
本站数据更新—
维护状态活跃
中文支持
访问方式
移动端支持
综合评分
收录时间2026-10-18
浏览次数0

项目介绍

taste-skill 是一套面向 AI 编程代理的「审美技能包」,目标是解决 AI 生成网页千篇一律、缺乏设计感的问题。它把艺术指导、参考图片和浏览器检查封装成可被 Claude Code、Codex、Cursor 等代理直接调用的技能,让代理在写前端代码前先确定视觉方向,而不是直接套用通用模板。核心能力包括:提供设计系统与落地页的审美规则,用参考图约束配色、排版和版式,并在生成后通过浏览器实际渲染检查效果,形成「先定调、再生成、后验收」的闭环。项目以 JavaScript 实现,关键词涵盖 anti-slop、design-system、landing-page、ui-design 等,适合希望 AI 产出更有辨识度界面的开发者。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化,观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度:入门 约 8 分钟 部署方式:命令行工具 6 步

环境要求

  • Node.js 22 及以上(默认技能用 Node 22+ 运行脚本)
  • 已安装 Chrome、Edge 或 Chromium 浏览器(用于渲染检查)
  • 可访问网络(获取参考图片需要联网)
  • 能使用 npx(随 Node.js 一起提供)

安装与启动步骤

  1. 1确认Node版本

    先确认本机 Node 版本不低于 22,否则默认技能脚本无法运行。

    node -v
  2. 2安装全部技能

    用 npx skills CLI 把仓库里的所有技能一次性装到本机代理环境。

    npx skills add https://github.com/Leonxlnx/taste-skill
  3. 3只装单个技能

    若只想装某个技能,用 --skill 传入它的安装名,避免全部安装。

    npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
  4. 4Claude Code插件

    这两条要在 Claude Code 会话内执行,技能会挂在 taste-skill: 命名空间下。

    /plugin marketplace add Leonxlnx/taste-skill
    /plugin install taste-skill@taste-skill
  5. 5Codex插件

    在终端执行安装后,需要新开一个 Codex 会话,技能才会被加载。

    codex plugin marketplace add Leonxlnx/taste-skill
    codex plugin add taste-skill@taste-skill
  6. 6克隆软链接安装

    适合想跟随 git pull 更新的用户,脚本用符号链接而非复制;--list 可看安装名。

    git clone https://github.com/Leonxlnx/taste-skill.git
    cd taste-skill
    ./install.sh

如何确认成功

重新执行安装命令无报错,并在代理的技能列表中看到以 taste-skill: 为前缀的技能条目。

常见问题

Q:需要配置 API Key 吗?

A:不需要。默认技能不安装额外依赖、也不需要任何 API Key,只要 Node 22+ 和 Chrome/Edge/Chromium 即可运行。

Q:怎么更新已安装的技能?

A:重新执行同一条安装命令即可,安装名没变;Claude Code 里可用 /plugin update,克隆方式则直接 git pull。

Q:安装后 Codex 里没有生效?

A:安装完成后必须新开一个 Codex 会话,技能才会被加载。

Q:如何只装其中一个技能?

A:在安装命令后加 --skill 并传入该技能的安装名,例如 design-taste-frontend。

Q:除了命令行还有别的用法吗?

A:README 提到可将 Taste Skill 作为桌面应用 TasteCode 使用,内置设计代理,可在 tastecode.dev 下载。

注意事项

  • Claude Code 的 /plugin 命令必须在 Claude Code 会话内执行,不能在普通终端里运行。
  • 克隆安装方式用符号链接,git pull 即可原地更新技能;./install.sh --list 可列出全部安装名。
  • 默认技能需要联网才能查找参考图片,离线时该环节会受影响。

核心亮点

  • 把艺术指导和参考图变成代理可调用的技能,生成前先定视觉方向,减少模板感
  • 内置浏览器渲染检查环节,能发现纯代码生成看不到的布局和样式问题
  • 适配 Claude Code、Codex、Cursor 等多个主流代理,接入成本低

不足之处

  • 审美规则偏主观,不同项目风格差异大时需自行调整技能内容
  • 依赖代理本身能力,换用未适配的代理时效果可能打折扣

适用场景

  • 用 Cursor 快速生成产品落地页时,避免出现千篇一律的 AI 风格页面
  • 团队为 AI 代理统一前端设计规范,让多人协作产出风格一致
  • 生成 UI 后自动在浏览器中检查渲染效果,提前发现布局问题

替代项目

awesome-claude-code、ui-ux-pro-max-skill

上一篇:core

下一篇:solid-glass

同类项目推荐

open-design 开源

让 AI 代工做界面,本地跑完随手改

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create···

★ 101779 2026-08-09
Excalidraw 开源

开源虚拟白板协作工具

Virtual whiteboard for sketching hand-drawn like diagrams

★ 134031 2026-08-19
morph 开源

用数据直接生成设计、动画和交互可视化

Morph is a free and open-source tool for creating designs, animations or interactive···

★ 126 2026-08-09
ChatGPT-MidJourney-prompt 开源

输入一句话,AI帮你生成Midjourney完整提示词

This is a ChatGPT based prompt generation model for MidJorney. The purpose of this m···

★ 344 2026-08-09