Design Lounge

Design Lounge MCP

将 Design Lounge 用作 MCP 服务。你的 Agent 可以：

• 从资源库中进行设计：543 份设计简报、84 个主题、46 组字体搭配、43 份带有说明的配方、Lounge Icons，以及 Sanzo Wada 的配色组合。它每次都以相同方式选择设计方向，并避免两个网站看起来雷同。
• 消除 AI 痕迹：库存文案、破折号、图标卡片三件套、渐变、靛蓝配色、表情符号图标、虚构数字，以及偏离锁定主题、字体搭配和字体家族的情况。
• 让内容被发现和引用：SEO、AEO（答案引擎）和 GEO（ChatGPT、Claude、Perplexity、Gemini）。它会检查 head、分享卡片、面向搜索和 AI 爬虫的 robots.txt、服务器渲染的文本，以及 JSON-LD。
• 查看页面：在启用减少动态效果的情况下，以 1280×800 和 390×844 的视口使用 Chromium。它会运行 axe，测量字体、标签、主要元素和点击目标，并保存截图。

服务端读取与该技能相同的 skills/design-lounge 文件夹，因此规则集中在一处。技能是方法。服务端负责处理文字说明无法完成的部分：搜索、基于历史记录的确定性选择、每个组件、主题和字体搭配的图片，以及读取和渲染页面的检查。

附带技能

安装服务端时也会安装技能。服务端启动时，会将技能放入 ~/.agents/skills/design-lounge，并将其链接到本机每个客户端的技能文件夹：Claude Code（~/.claude/skills）、Cursor（~/.cursor/skills）和 Codex（~/.codex/skills）。这与 skills CLI 使用的目录布局相同。加载技能的客户端随后就能在设计前获取完整的方法。首次启动后，请重新加载一次客户端。

• 服务端更新时，它会更新自己的副本。
• 如果副本是由其他方式安装的（例如 npx skills add 或手动编辑），它不会修改该副本，并会说明原因。使用 install_skill 并设置 replace: true，即可将其替换为服务端的副本。
• 使用 install_skill 并设置 project_path，还会将技能复制到项目的 .claude/skills、.cursor/skills 和 .agents/skills，供只读取项目技能的客户端使用。
• 对于不支持技能的客户端，start_design 会返回必须遵守的规则（原文措辞优先、Rules 列表和 Look 未通过项），这些内容读取自相同的文件；read_guide 则会提供其余内容。
• 设置 DESIGN_LOUNGE_SKILL_INSTALL=off 可关闭安装。

将其添加到你的 Agent

Claude Code

claude mcp add design-lounge --scope user -- npx -y design-lounge-mcp@latest

Cursor（~/.cursor/mcp.json）、Windsurf、Claude Desktop（claude_desktop_config.json）以及其他采用以下格式的客户端：

{
  "mcpServers": {
    "design-lounge": { "command": "npx", "args": ["-y", "design-lounge-mcp@latest"] }
  }
}

VS Code（.vscode/mcp.json）：

{ "servers": { "design-lounge": { "type": "stdio", "command": "npx", "args": ["-y", "design-lounge-mcp@latest"] } } }

Codex（~/.codex/config.toml）：

[mcp_servers.design-lounge]
command = "npx"
args = ["-y", "design-lounge-mcp@latest"]

@latest 会在每次启动时检查是否有新版本，因此无需重新安装即可获取资源库更新。首次启动后，请重新加载一次客户端，以便加载服务端安装的技能。

渲染检查（截图、axe、测量的标签和按钮、主题板和字体样张）需要无头 Chromium。请让你的 Agent 运行一次 install_browser（约 100 MB），或者运行 npx playwright install chromium --only-shell。如果没有安装，其他所有检查仍会运行，报告也会说明未进行页面查看。

托管服务，适用于 Claude.ai、ChatGPT 及其他无法运行本地程序的客户端：将 https://www.designlounge.live/api/mcp 添加为自定义连接器（Streamable HTTP，无需登录）。它提供资源库、start_design、各项选择，以及对公开 URL 或粘贴的 HTML 的静态审查。它不提供需要访问你本机的功能：文件路径、历史记录文件、技能和浏览器安装，以及渲染检查。它只会获取公开地址，并将每个地址的请求频率限制为每分钟 60 次。如果保留了近期选择记录，请将其作为 history 传入。

要从仓库克隆副本运行：执行 cd mcp && pnpm install，然后将 node /path/to/designs/mcp/src/server.mjs 用作命令。

工具

工具	功能
start_design	首先调用。读取用户的描述（流程、模式、命名风格、平静词），为配方排序，读取项目文件夹和近期选择，然后返回简报和步骤
get_recipe	获取配方的说明；每项都会标记历史记录是否阻止使用
pick_direction	依次进行平静词筛选、历史记录检查、组别检查，再检查名称编号。传入符合条件的方向
check_pick	检查主视觉、作品、页脚、形状和框架是否唯一。返回 Unlike 行
record_pick	将已认领或已完成的条目追加到 ~/.design-lounge/history.jsonl，并报告之前是否认领过
search_pieces / get_piece	查找作品并阅读其简报。get_piece 会附上演示缩略图，demo: true 会附上其 HTML 源码。search_pieces 搭配 images: true 会附上前六张缩略图
browse_library	按情绪浏览主题和搭配，以及系列、配方、类别、作品集、类型、动效和比例
get_theme / get_pairing / get_family	获取锁定的令牌和规则，以 CSS 形式呈现。主题附带一份角色板，搭配附带一份字体样张
get_icons / search_wada	获取 Lounge Icons 的 SVG。按词语或最接近的十六进制颜色值查找 Wada 的搭配
read_guide	读取任意方法文件或其中一个章节
review_page	一次检查所有内容：设计、无障碍、SEO、AEO、GEO。优先列出失败项，并附上证据和修复方法。返回网页和手机框架的图片
install_skill	在项目中安装技能，或替换通过其他方式安装的用户副本
install_browser	下载渲染检查所用的无头 Chromium，仅需下载一次
audit_slop	仅检查设计：AI 生成痕迹和套件偏移
audit_search	仅检查 SEO、AEO 和 GEO
suggest_schema	仅根据页面上的事实生成 JSON-LD，并列出缺失字段

每个审查工具都接受 path（文件，或包含 index.html 的文件夹）、url（线上地址或 localhost）或 html。对于 path，工具会读取页面旁边或上级目录中的 DESIGN.md，以获取锁定的主题、搭配、系列、Free 模式和 Named 美学。Named 美学会解除其列出的限制。

服务还提供三个提示词：design、review 和 deslop，并将方法文件作为资源提供，路径为 lounge://guide/<file>。

它会写入什么，以及什么会离开你的设备

• 技能。 启动时，它会将技能写入 ~/.agents/skills/design-lounge，并将其链接到你所用客户端的 ~/.claude/skills、~/.cursor/skills 和 ~/.codex/skills。它绝不会替换并非由它创建的副本。设置 DESIGN_LOUNGE_SKILL_INSTALL=off 可关闭此功能。要移除技能，请删除这些文件夹。
• 近期选择。 record_pick 会将一行记录追加到 ~/.design-lounge/history.jsonl，以免你制作的两个网站风格雷同。除此之外，没有任何内容会读取该文件。
• 缓存的图片。 主题板和字体样张会缓存到 ~/.cache/design-lounge/boards。截图会保存到临时文件夹或 out_dir。
• 托管端点不会保留任何内容。每个请求都会使用全新的服务，审查过的页面会被抓取后丢弃。
• 网络。 审查会从你的设备抓取你指定的页面、其样式表、robots.txt、sitemap.xml、llms.txt 和分享图片。字体样张会加载 Google Fonts。缩略图和演示内容已打包；只有在缺少内容时才会向 designlounge.live 请求。不会向 Design Lounge 发送任何内容，也没有跟踪功能。

设置

变量	默认值
DESIGN_LOUNGE_SKILL	打包的 skill/，然后是 ../skills/design-lounge
DESIGN_LOUNGE_HISTORY	~/.design-lounge/history.jsonl
DESIGN_LOUNGE_SKILL_INSTALL	on。设置为 off 可跳过技能安装
DESIGN_LOUNGE_ASSETS	打包的 assets/，然后是仓库的 public/thumbs 和 src/demos，最后是线上网站
DESIGN_LOUNGE_CACHE	~/.cache/design-lounge/boards，用于渲染后的主题板和字体样张

开发

pnpm test                              # unit tests and a stdio round trip
pnpm release patch --dry-run           # sync the skill, test, and pack, without publishing
node test/client.mjs                   # list the tools
node test/client.mjs review_page '{"path":"test/fixtures/slop.html"}'

pnpm release patch（或 minor、major、x.y.z；使用 --otp <code> 进行 npm 双重身份验证）会从库中同步技能、运行测试、同时更新 package.json 和 server.json 中的版本号、发布到 npm 和 MCP Registry，然后提交并打标签。它绝不会推送。

pnpm pack 会先将技能文件夹复制到 skill/，再将缩略图和演示文件复制到 assets/（scripts/bundle.mjs），这样发布的包就会包含库和图片。打包后约为 12 MB。

由 Susan Acharya 使用 Design Lounge 设计。