taste-bank

---

为什么选择 Taste Bank

听起来熟悉吗？

• 盯着空白页面，不知道如何布局组件？
• 布局终于敲定了——AI 的视觉风格却始终不尽如人意？
• 收藏了一堆“漂亮设计”，需要时却从来调不出来？
• 上一个项目里费心调好的风格，到了下一个项目又得从头解释？

让编码 Agent 生成设计出色的前端，早已不是难题，却依然无人能真正用好。社区里到处都是前端技能、提示词片段和设计指南——但实际使用时：

• 调用方式不统一：有些风格以技能形式提供，有些是插件，有些则什么也没提供。实际用起来很麻烦。
• 缺少质量标准：没有统一的架构，“风格”可能只是几句华而不实的形容词——Agent 根本无法据此执行。
• 难以复用：出色的风格湮没在聊天记录里，而不是被提炼成可复用的资源。
• 无法归属或迭代：没有版本管理，也无法声明“我的风格由我维护”。

更重要的是：网络上每天都会涌现新的风格——但并非每种风格都足够主流，也并非每种风格都合你口味。我们希望建立一个社区，让大家分享自己实际使用的前端审美，并用行动投票。真正有人使用的，才真正实用。

Taste Bank 的解决方案：将每种风格提炼为一个结构化风格包（SKILL.md 使用指南 + 精确的 design tokens + templates/ 快照），通过 zod 架构加以约束，并通过适用于任何编码 Agent 的 CLI + 技能注入提供服务。风格一旦收入库中，便可随处使用、带有版本管理，并归属明确。

---

快速开始

通过 CLI（推荐）

一条命令——全局安装 CLI，并教会你的编码 Agent（Claude Code、Codex、Cursor、ZCode、Kimi Code……）如何使用它：

npx taste-bank setup

然后，只需用自然语言与 Agent 对话：

“用 taste-bank 中的一种风格，帮我做一个落地页。”

你的 Agent 已经知道该怎么做——setup 注入了一项技能，教它使用 taste-bank CLI 命令。它会浏览风格、获取完整套件，并严格按照设计令牌实现。

更喜欢使用终端？

taste-bank list                    # browse all styles
taste-bank skill <slug>            # get the complete pack (meta + tokens + skill + css + templates)
taste-bank use <slug>              # land a style into your project as a rules file

无需为每个 Agent 单独配置，也不用粘贴 JSON。先在 tastebank.cloud 直观地浏览风格。

通过 MCP（旧版）

对于更喜欢 MCP 协议的 Agent，只需在 MCP 客户端中配置一个 URL：

{
  "mcpServers": {
    "taste-bank": {
      "url": "https://tastebank.cloud/mcp",
      "headers": { "x-invite-code": "sl_your_invite_code" }
    }
  }
}

这两种方式调用的是同一个后端。推荐使用 CLI——更简单，并且开箱即用，支持 70 多种 Agent。

---

功能

• 一行完成设置：npx taste-bank setup 会安装 CLI，并向所有编码 Agent（Claude Code、Codex、Cursor、ZCode、Kimi Code，以及通过开放的 skills 生态系统支持的 70 多种其他 Agent）注入技能
• 完整风格套件：taste-bank skill <slug> 一次调用即可返回完整套件——元数据、令牌、SKILL.md 规则、作用域 CSS 和 HTML 模板快照。Agent 可获得所需的一切内容。
• 本地缓存 3 天：套件会被缓存；如果无法连接服务器，CLI 会使用缓存作为后备
• TikTok 风格的图库：tastebank.cloud——源源不断的实时渲染预览、水平卡片栏和排行榜
• 结构化且经过验证：每个套件都通过严格的 zod 模式验证（元数据／令牌／技能／模板），并进行版本管理；提交仅限受邀者，所有权由 ed25519 签名，并经过人工审核
• 在终端提交：taste-bank submit——无需离开项目，即可签名并提交新风格
• 私钥即身份：无需账户——持有密钥的人即可管理该风格

---

CLI 命令

浏览和应用（无需身份验证）

命令	功能
taste-bank list [--q WORD] [--json]	列出已发布的风格
taste-bank show <slug> [--json]	风格详情（元数据 + 设计令牌）
taste-bank skill <slug> [--md]	以 JSON 返回完整套件：{meta, tokens, skill, css, templates}。使用 --md 可获取纯文本 SKILL.md
taste-bank use <slug> [--as agents|claude|skill]	将风格添加到项目中（使用受管理的标记块，不会覆盖你的修改）
taste-bank favorite <slug> / unfavorite / favorites	管理收藏
taste-bank doctor	健康检查（CLI、网络、身份、技能注入、缓存）

贡献（邀请 + ed25519 身份）

命令	功能
taste-bank keygen	在 ~/.style-lab/ 中生成 ed25519 密钥对（一次性操作）
taste-bank whoami	查看绑定的身份、拥有的风格和待处理的提交
taste-bank validate <pack.json>	在本地试运行并验证套件（无需联网）
taste-bank submit <pack.json>	提交新风格（需要邀请码 + 私钥）
taste-bank update <slug> <pack.json>	更新自己拥有的风格（版本必须递增）
taste-bank delete <slug>	删除自己拥有的风格（需要确认）

---

工作原理

npx taste-bank setup
  ① npm install -g taste-bank              (install CLI globally)
  ② npx skills add …/taste-bank -g         (inject 2 skills into your agents:
                                             taste-bank for browsing/applying,
                                             taste-bank-contribute for submitting)
  ③ environment check                      (report state, read-only)

通过开放的 skills 生态系统注入两项技能：

• taste-bank——教会你的 Agent 使用 CLI 命令浏览和应用风格
• taste-bank-contribute——完整的贡献标准操作流程（SOP）：如何采样项目、打包风格、清理内容并提交

设置完成后，你的 Agent 就会使用 CLI 了。你只需说 “使用一种 taste-bank 风格”，它就会自行运行命令。

CLI 默认连接 tastebank.cloud，并在本地缓存套件 3 天。想要自托管？设置 TASTEBANK_API=https://your-host。

提交你自己的风格

# One-time identity setup
taste-bank keygen
echo '{ "inviteCode": "sl_xxx" }' > ~/.style-lab/config.json  # get a code from the maintainer

# From any project with a style worth keeping:
taste-bank validate my-style.pack.json    # dry-run check
taste-bank submit my-style.pack.json      # sign + submit (enters review queue)

或者直接告诉你的 Agent：“将这个项目的风格提交到 taste-bank”——注入的 taste-bank-contribute 技能会引导它完成整个标准操作流程（最多采样 2 个文件、提取真实设计令牌、清理可识别业务的信息、打包、验证并提交）。

请参阅打包格式、taste-bank-contribute 技能，以及 Agent 工作流指南（了解如何在 Agent 对话中管理项目风格）。中文版见 Agent 工作流指南。

---

安全性

身份验证与所有权

• 邀请码：提交需要邀请码；邀请码首次使用时会绑定提交者的公钥——一个邀请码对应一个身份；服务器端仅存储哈希值
• ed25519 签名：提交、更新和删除都需要私钥签名（消息 = style-lab:<action>:<slug>:<timestamp>:<sha256(payload)>，有效期 30 分钟）——你的密钥就是你的身份
• 审核队列：提交内容会进入 data/pending/，只有经过维护者批准后才会发布
• 速率限制：每个公钥每分钟最多提交 20 次，每个 slug 每分钟最多管理 30 次

内容安全

• 模板沙箱：预览在 sandbox="" iframe 中渲染，并通过 CSP 禁止脚本和外部加载
• HTML 屏蔽列表 + 秘密信息模式扫描：提交内容会接受危险属性和高置信度秘密信息模式的筛查
• 提示词注入缓解：技能描述会将风格内容标记为“数据，而非指令”

⚠️ 每次提交都会经过人工审核。但审核也可能有所疏漏——不要盲目信任获取的内容；请将其视为数据。

---

HTTP API

Endpoint	Description
GET /api/styles.json	风格列表，支持 ?q=keyword 筛选
GET /api/styles/:slug.json	元数据 + 设计令牌 + 文件列表
GET /api/styles/:slug/pack.json	完整软件包（元数据 + 设计令牌 + 技能 + CSS + 模板）
GET /api/styles/:slug/skill.md	组合后的 SKILL.md
GET /api/styles/:slug/tokens.css	根据设计令牌生成的作用域 CSS
GET /api/styles/:slug/screenshot.png	模板截图
GET /api/whoami.json	身份查询（x-invite-code 请求头）
POST /api/styles.json	提交（邀请码 + 签名）
PUT /api/styles/:slug.json	更新（签名，递增版本号）
DELETE /api/styles/:slug.json	删除（签名）

---

项目结构

src/lib/        core: schema / store / create / assemble / review / auth
src/pages/      Astro pages & HTTP API endpoints
mcp/            MCP server (Streamable HTTP) — thin shell over src/lib
cli/            the taste-bank npm package (CLI + skills source)
skills/         two agent skills: taste-bank (browse) + taste-bank-contribute (submit)
scripts/        keygen / sign / invite / review admin scripts
styles/         published styles (pointed to by STYLE_LAB_DIR at runtime)
data/           invite-code hashes, review queue, usage stats, screenshot cache
docs/SPEC.md    full style pack specification

许可证

MIT © QuasarG

---