用 Pi 做设计。

Pi 到底是什么

Pi 是一个面向终端的开源（MIT）AI 编码 agent，属于 earendil-works pi 工具集的一部分。它读取你的仓库、编辑文件、运行 shell 命令——从自然语言任务出发去规划并验证工作，而不只是补全几行代码。它的内核刻意精简：四个默认工具——read、write、edit 和 bash——外加内置的 grep、find 和 ls。

对设计工作来说，最突出的特性是 Pi 与供应商无关。它在一个统一 API 背后把 Anthropic、OpenAI、Google 及众多其他供应商规范成一致形态，所以你自带密钥、按任务挑模型——比如挑一个擅长读参考截图的多模态强模型——并在会话中途用 /model 或 Ctrl+L 切换，工作流照旧不变。

• 任意模型，你的密钥: Pi 可路由到 20 多家供应商，包括 Anthropic 和 OpenAI。你用自己的 API 密钥（BYOK）做认证，或用 /login 登录 Claude Pro/Max、ChatGPT Plus/Pro 或 GitHub Copilot 订阅。
• Skills + Extensions: Pi 加载 Skills（遵循 Agent Skills 标准的 Markdown 能力包）和 TypeScript Extensions——这正是编码你的设计规范、添加自定义工具的天然位置。
• 可分支的会话: 会话以 JSONL 树形式存储，所以你可以为一次探索拉出分支、在单个文件里浏览历史，而不会丢掉之前的尝试。

• 供应商：earendil-works（开源社区项目）
• 凭证：你自己的供应商 API 密钥（BYOK——Anthropic、OpenAI、Google 等）或通过 /login 的订阅登录；本地存储在 ~/.pi/agent/auth.json（0600）
• 许可证：MIT，开源

为什么多供应商、BYOK 的 agent 适合设计

Pi 的设计优势在于灵活，而不在某个内置模型——但和每一个 agent 一样，品味仍然得由你提供。

• 按任务挑对模型: 因为 Pi 能路由到任意供应商，你可以拿一个强多模态模型去读参考截图，再切到另一个去做重构——全程不离开 agent。
• 你的密钥，无锁定: BYOK 意味着你不被某一家供应商的定价或上下文限制绑死；按眼前的设计任务挑选其优势最契合的模型。
• 把规范放进 Skill: 一个 Skill（再加上像 Figma 服务器这样的 MCP 来源）把 agent 指向你的 tokens、组件和真实规范，于是它针对一个品牌工作，而不是套用默认外观。

这里的教训和每个 agent 教给我们的一样：Pi 默认没有品味，换什么模型都补不上。当你给它约束时——一个设计系统、一个审美 skill 和具体参考——它才能产出好设计。Open Design 恰好把这些输入打包好，这就是两者契合的原因（下文详述）。

从零搭建用于设计的 Pi

下面是从一台干净的机器到一个能构建并验证 UI 的 Pi 的完整路径。

# 1. 安装 Pi 编码 agent CLI（Node）
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. 用你自己的供应商密钥做认证（BYOK）
export ANTHROPIC_API_KEY=sk-ant-...   # 或 OPENAI_API_KEY=sk-...
#    （或在 Pi 内运行 /login 使用 Claude / ChatGPT / Copilot 订阅）

# 3. 在你的项目里启动它
cd your-project
pi

# 4. 随时用 /model 或 Ctrl+L 切换模型

• 编码你的设计规则: 把你的 tokens、基础元素和规范放进一个 Skill 并把 Pi 指向它们，让产出贴合一个品牌，而不是退回到千篇一律的外观。
• 加入浏览器验证: 接上 Playwright 或浏览器 MCP，让 Pi 在真实浏览器中渲染、并跨断点检查产出，而不是只确认构建通过。

截图转 UI 的工作流

用 Pi 做设计杠杆最高的回路，是把一张参考图变成可用、响应式的 UI，然后迭代到匹配为止——靠一个多模态模型把产出对照参考来比较。因为 Pi 与供应商无关，本轮就把它指向最擅长读图的那个模型。

1. 从你手头最清晰的视觉参考入手——并包含多种状态（桌面端和移动端、悬停、空态、加载态），不要只给一张主视觉。
2. 用 /model 为本轮挑一个强多模态模型，因为图像理解才是截图转 UI 质量的关键驱动力。
3. 提示词要具体；含糊的提示词即便配强模型也会产出千篇一律的 UI。
4. 把你的设计系统和规范放进一个 Skill，并告诉 Pi tokens 和规范基础元素在哪里。
5. 跑一个开发服务器，让 Pi 在真实浏览器中渲染、缩放到各断点，然后把它的实现对照截图来迭代——而不是仅仅确认它能构建。

一开始就把参考和具体约束交给 agent：

pi
# 在提示词里：
> 用 React + Vite + Tailwind + TypeScript 实现
  reference-desktop.png 和 reference-mobile.png。
  复用我现有的设计系统组件和 tokens（见 Skill）。
  匹配间距、布局和层级；做成响应式。
  在浏览器里渲染并迭代，直到它跨断点都与参考匹配。

保持提示词小而聚焦，把好的迭代提交、把坏的回退掉（回退时告诉 Pi），这样每一轮都在干净的基底上推进。Pi 可分支的 JSONL 会话也让你在不丢失原始线索的情况下探索另一种方案。

Skills、Extensions 与主题

Pi 在运行时通过几个层自我扩展，而它们干净地映射到一套开放的设计工作流上。

• Skills: 遵循 Agent Skills 标准的 Markdown 能力包——是你的设计规范、tokens 和评审清单耐用、可移植的归宿。同一个 Skill 在兼容的 agent 间通用，不止 Pi。
• Extensions 与提示词模板: TypeScript Extensions 添加自定义工具、命令和 UI；可复用的提示词模板通过 /name 运行。两者都让你在不离开终端的前提下脚本化验证回路。
• MCP 与主题: Pi 连接 MCP 服务器以引入外部设计上下文（最相关的是一个 Figma MCP 服务器），主题支持热重载，让终端 UI 在你工作时始终清晰可读。

这些都是可移植的能力——尤其是 Skills 和 MCP——正是 Open Design 被设计来编排、而非每个项目都重造一遍的那类东西。

做设计时 Pi 对比 Codex、Claude Code、Cursor、Gemini CLI

设计工作没有唯一赢家——每个 agent 各有所长，老练的团队会把它们叠着用。一个公允的总结：

Pi 的切入角度与其他几家正交：它是那个让你用自己的密钥去调用上述任意底层模型的 agent。社区反复得出的结论依然成立——品味来自人：它们在没有 skill、参考和约束时都会退回到千篇一律的审美。那才是真正要解决的问题，而它是设计工具形态的，不是模型形态的。

坑，以及如何避免“AI 流水线感”的样子

对 AI 生成设计最常见的抱怨是它看起来千篇一律——柔和渐变、漂浮面板、过大的圆角、夸张的阴影，一种“一看就是 AI 做的”的 Inter 加紫色气味。其他被反映的问题还包括移动端布局崩坏、以及指令泄漏进 UI 文案。这些都不是 Pi 或某一个模型独有的；它们是任何 agent 在缺少精选设计上下文时都会发生的结果。

• 加一个审美 skill: 一个精选的设计 skill 迫使 agent 承诺一个真实的方向，而不是默认外观——而且因为它是可移植的 Skill，会跟着你跨模型走。
• 在真实浏览器里验证: 挑一个多模态模型，让 Pi 跨断点渲染并自检，这样布局不会在移动端悄悄崩掉。
• 提供 tokens 和参考: 真实的设计 tokens 和参考截图是对产出质量影响最大的那个杠杆。
• 把规则编码到 Pi 读得到的地方: 把“不要主视觉卡片、最多两种字体、品牌优先的层级”这类风格规则放进一个 agent 每次运行都加载的 Skill 里。

注意，每一条缓解措施都是在给 agent 一个精选的设计上下文——与你路由到哪家供应商无关。手工、逐项目地维护那份上下文，正是 Open Design 帮你免去的苦差。

在 Open Design 中用 Pi 做设计

Open Design 就是上面那套工作流一直在呼唤的那个开源设计层。它把 Pi 当作一级适配器，并围绕它包上一套精选的 skill 与设计系统库、一条结构化的渲染流水线，以及一个本地桌面 UI——于是让 Pi 变好的那份设计上下文从第一次运行起就在那里，而不是每次都手工拼装。两者都是开源、都本地优先，这让这对组合天然契合。

1. 安装 Open Design 并选择 Pi 作为你的 agent。
2. 用你自己的供应商 API 密钥（BYOK）或一个订阅登录做认证——凭证留在你机器上的 ~/.pi/agent/auth.json，绝不经我们代理。
3. 挑一个设计系统和一个 skill，然后以一致的品味生成演示稿、原型和落地页。
4. 每一份产物和 DESIGN.md 文件都存在你自己的仓库里，而不是某个托管云端。

同一个 Pi agent、同样的密钥、同样可以自由切换模型——再加上围绕它的一套真实、可移植的开源设计工作流。它本地优先、采用 MIT，所以关于你的工作或凭证的任何东西都不会离开你的机器。

常见问题

1. 01 Pi 真的能做设计工作吗？ +

   能——只要上下文里有一个审美 skill、一个设计系统和真实的参考图，Pi 就能产出生产级的响应式 UI，而且你可以把它路由到一个强多模态模型，去把产出对照参考做验证。缺了那份上下文，它往往会退回到千篇一律的外观，而这正是 Open Design 要补上的缺口。

2. 02 用 Pi 做设计需要付费吗？ +

   Pi 本身免费且开源（MIT）。你只为底层模型付费——自带供应商 API 密钥（BYOK），或通过 /login 使用 Claude Pro/Max、ChatGPT Plus/Pro 或 GitHub Copilot 订阅。无论哪种方式，Open Design 都绝不代理你的凭证。

3. 03 Pi 具体好在哪里、为何适合设计？ +

   它与供应商无关：你自带密钥、可路由到 20 多家供应商中的任意一家，挑选其优势契合任务的模型并在会话中途切换。但品味仍然来自你提供的设计系统、skill 和参考，而非模型本身。

4. 04 做前端设计时我该用哪个模型搭配 Pi？ +

   Pi 可路由到多家供应商，所以按任务来选——一个强多模态模型很会读参考截图，而别的模型可能更适合重构。Pi 的优势在于你可以切换而不改变工作流。Open Design 让你在所选的任意模型之间保持同一份设计上下文。

5. 05 我如何把 Pi 连到 Figma？ +

   Pi 支持 MCP 服务器，所以你可以加一个 Figma MCP 服务器，拉取真实的设计上下文——组件、变量、布局数据——让生成的代码贴合源头，而不是近似还原。

6. 06 Open Design 和 Pi 有从属关系吗？ +

   没有。Pi 是 earendil-works 出品的独立开源项目；Open Design 是一个单独的独立开源项目，以一级适配器的形式支持 Pi。

7. 07 我的文件和凭证安全吗？ +

   安全——Open Design 本地优先且开源。你的文件、产物和 DESIGN.md 都留在你自己的仓库里，你的供应商密钥由 Pi 直接使用（本地存储在 ~/.pi/agent/auth.json），绝不经过 Open Design 服务器路由。