延伸阅读
Pi 延伸阅读
如已发布指南中所列，用于 Pi 设计工作的教程、文档和演练。
Pi 
OpenDesign 用 Pi
在 OpenDesign
做设计。
如何在 OpenDesign 中用 Pi 设计界面：可移植的 skill、你选择的模型与密钥、一个从 brief 到已审核文件的方案对比任务，以及开始前需要了解的限制。
一个完整的 Pi 设计任务
一个 Pi 设计任务：从简报直到界面
一个任务贯穿完整闭环：你交付的简报与约束、Pi 返回的成果，以及在你宣布完成之前仍需进行的检查。下方界面是为本页面制作的示例，并非 Pi 的实际运行记录。
1设计 Brief 与约束条件
Brief为一款笔记应用设计方案对比页面：免费版、个人版和团队版，一个功能对比表和一个简短的常见问题。桌面端和手机端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互计费切换开关、套餐 CTA、可展开的对比行
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2谁做什么：你、Pi 与 OpenDesign
- 你
你撰写简报、选择设计系统并设定验收标准。
- Pi
Pi 规划布局、编写 HTML、CSS 与 JavaScript，并按需修改。
- OpenDesign
OpenDesign 提供设计系统与技能，渲染预览，并将每个版本保存为项目文件。
- 审查
在交付之前，检查视觉层级、8px 网格间距、两个断点以及每一处交互。
3Pi 成果：1440px 与 390px 下的套餐对比页面
4交付前审查
Layout
网格与间距
三个套餐与对比表使用同一套 8px 网格；功能行在各列之间对齐。
Hierarchy
视觉层级
价格与套餐名居于主导；强调色标记“最多人选择”徽章及其按钮。
Responsive
移动端布局
顺序：个人版，然后是免费版，再是团队版；切换开关始终位于顶部。
Interaction
交互检查
拨动切换开关，用 Tab 键遍历各个 CTA，展开一行对比。
Fit
Pi 何时合适——何时不合适
Pi 适用于以下情况
- 任意模型，自备密钥。 使用你自己的密钥向 Anthropic、OpenAI、Google 等发送请求；为截图转 UI 选择一款强大的多模态模型，并用 /model 切换。
- 可迁移技能。 将你的设计约定写入符合 Agent-Skills 标准的技能，它们可随你在各兼容代理之间迁移，而不限于 Pi。
- MCP + 扩展。 通过 Figma MCP 服务器获取真实设计上下文，并使用 TypeScript 扩展自动化验证循环。
- 开放且 BYOK。 MIT 许可、本地优先；你只需为底层模型付费，凭据保留在你自己的机器上。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 成果是 HTML，而非可编辑的设计文档。若需要特定资产格式，请另找矢量工作流。
- 你没有参考，也没有约束。 没有设计系统或示例时，输出往往趋于平庸；先写好简报。
- 您没有该 Agent 所需的凭证。 必需：您自己的服务商 API key（自带 key）或通过 /login 进行订阅登录。OpenDesign 不提供也不代理凭证。
- 你的团队使用 Aider 或 OpenCode。 这些代理各有自己的页面；共同的工作流仍然适用，但配置方式不同。参见相关代理。
兼容性
开始使用 Pi 之前的要求
本页面介绍通过 OpenDesign 桌面应用连接的 Pi。已发布的参考资料核查于 2026 年 9 月 6 日。
工具范围Pi，由社区打造
Pi 是来自 earendil-works 的开源（MIT）终端 AI 编程代理。它通过精简的四工具核心——read、write、edit、bash——读取你的代码库、编辑文件并运行命令。本页面讲的是通过 OpenDesign 用 Pi 设计界面，而非 Pi 自身的界面。OpenDesign 的安装说明列出了可用的代理。
账户与身份验证你自己的服务商 API key（BYOK）或
你自己的服务商 API key（BYOK）或通过 /login 进行的订阅登录。使用你自己的服务商 API key（BYOK）或订阅登录进行身份验证——凭据始终留在你自己的机器上。本页不承诺任何配额或价格。
系统与版本桌面应用或源码
桌面版构建请见下载页面。源码快速上手文档中的 Node.js 与 pnpm 要求仅适用于从源码运行，不适用于安装桌面安装包。兼容的最低 Pi 版本：此处未验证。
连接检查成功的标志
使用你已安装版本所显示的连接说明，然后运行一个小任务。确认 Pi 完成了该任务，且成果可以打开。仅下载并不能建立可用的连接。
从桌面应用开始
三步完成 Pi 设置
先下载，完成你所安装版本的 Pi 配置，然后检查一个小结果。此路径不需要从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合你电脑的安装包，安装并启动应用。
下载 OpenDesign检查点桌面应用能够打开。已经安装过了？直接进入下一步，无需再次下载。 - 2
准备你的 Pi 连接
按照你所安装版本中的 Pi 说明操作。使用你自己的服务商 API 密钥（BYOK）或订阅登录进行身份验证——凭据保留在你自己的机器上。
Pi 服务商与身份验证文档# 1. Install the Pi coding agent CLI (Node) npm install -g --ignore-scripts @earendil-works/pi-coding-agent # 2. Authenticate with your own provider key (BYOK) export ANTHROPIC_API_KEY=sk-ant-... # or OPENAI_API_KEY=sk-... # (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)摘自已发布指南中的 Pi 安装说明；请查阅供应商文档以获取当前命令。
检查点确认目标代理与账户。若不可用，请先检查兼容性，再尝试更大型的任务。 - 3
运行一个小型 Pi 任务
从一份范围有限的简报开始，使你能够评判完整闭环，包括一次修改。
入门 brief创建一个包含个人资料表单和保存确认的设置屏幕。应用我的设计规则。在桌面和移动端宽度下检查。
检查点打开结果，测试保存状态，并提出一项具体的修改。评审在文件生成时开始，而不会就此结束。
若要从源码运行 OpenDesign，请改用技术快速上手。
Pi 设计工作流
Pi 的五步设计工作流
追踪一个套餐对比页面从简报直到经过检查的成果。每一步都展示你的输入、Pi 的动作、OpenDesign 的贡献，以及你的评审节点。
- 1
设计 Brief
保持简明扼要：三到六行。写明受众、屏幕用途以及平台。
- 您起草简报；如有参考截图就附上。
- Pi读取简报与项目的 Skill 文件；若有任何含糊之处会提问。
- OpenDesign提供项目、提示界面，以及针对该成果类型的 Skill。
- 检查检查简报是否包含验收标准。现在补上，比生成后再修正代价更低。
- 2
设计约束
一套设计系统加上严格规则。正是这一点让 Pi 的输出符合品牌调性，而非千篇一律。
- 您选择一套设计系统；指定断点与必需组件。
- Pi在编写任何代码之前，将 DESIGN.md 的令牌与基调规则载入上下文。
- OpenDesign提供设计系统库，并将你的选择绑定到 Skill 模板中。
- 检查核实令牌与你的品牌一致：单一强调色、正确的字体、恰当的圆角。
- 3
生成界面
Pi 产出一个自包含的单一 HTML 文件：布局、样式、交互以及稳定的钩子。
- 您等待，或回答一个澄清问题。无需任何配置。
- Pi规划各个区块，编写 HTML、CSS 与 JavaScript，运行该文件，并修复失败之处。
- OpenDesign将成果保存到项目文件夹，并为其建立索引以供预览。
- 检查暂时不用。要评判渲染后的文件，而不是源码。
- 4
预览
文件会在 OpenDesign 中按你要求的宽度渲染。设计正是在这里接受评判。
- 你切换宽度，测试交互，并在元素上留下评论。
- Pi读取你的预览评论，并准备下一次修改。
- OpenDesign渲染预览，并暴露
data-od-id目标以供评论与编辑。 - 检查检查层级、对比度、390px 下的溢出、焦点状态，以及强调色是否保持克制。
- 5
修订与验证
通过在预览中指向元素来请求更改。每次修订都是一个新文件；不会静默覆盖任何内容。
- 你将评论转化为请求；决定任务何时完成。
- Pi就地应用更改并重新运行文件。
- OpenDesign将各版本并排保留；完成后导出图像或 HTML。
- 检查仅重新检查更改过的区域，然后在每个断点处对完整页面检查一次。
资源
Pi 设计资源
限制
Pi 的局限性、人工检查与后备方案
- 范围Pi 不依赖特定提供商：它会在 Anthropic、OpenAI、Google 以及 20+ 家提供商之间进行规范化，因此你自带密钥，并可以在会话中途切换模型。本页介绍作为连接到 OpenDesign 的代理的 Pi，而不是 Pi 的每项功能。
- 使用限额使用限制和费用取决于你的凭据（你自己的提供商 API 密钥，或通过 /login 的订阅登录）。本页不对免费额度作任何声称。
- 网络本地项目文件并不意味着离线推理。在共享敏感输入之前，请查看 Pi 的提供商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性由你在预览中审查。将任何代理自检视为第一遍检查。
- 后备方案如果 Pi 不可用或任务失败，请查看已安装版本的连接说明和身份验证。在更改配置之前，保留错误和最后一个可用的产物。
常见问题
关于 Pi 与 OpenDesign 的常见问题
Pi 真的能胜任设计工作吗？
可以——在具备审美 skill、设计系统以及上下文中真实参考图像的情况下，Pi 能产出生产级、响应式的 UI，你还可以将其路由到强大的多模态模型，用参考图像来核对输出结果。若缺少这些上下文，它往往会退回到通用的外观，而这正是 OpenDesign 所填补的差距。
用 Pi 做设计需要付费吗？
Pi 本身是免费且开源的（MIT 许可）。你只需为底层模型付费——自带提供方 API key（BYOK），或通过 /login 使用 Claude Pro/Max、ChatGPT Plus/Pro 或 GitHub Copilot 订阅。无论哪种方式，OpenDesign 都不会代理你的凭据。
是什么让 Pi 适合设计？
它与提供方无关：你可自带密钥，并路由到 20 多个提供方中的任意一个，根据任务所需的优势挑选模型，并在会话中切换。但审美水准始终来自你提供的设计系统、skill 与参考资料，而不是来自模型本身。
在 Pi 中做前端设计应选用哪个模型？
Pi 可路由到许多提供方，因此应按任务选择——强大的多模态模型能很好地读取参考截图，而其他模型可能更适合重构。Pi 的优势在于你可以切换模型而无需改变工作流。OpenDesign 让你无论选择哪个模型，都能保持相同的设计上下文。
如何将 Pi 连接到 Figma？
Pi 支持 MCP 服务器，因此你可以添加 Figma MCP 服务器并拉取真实的设计上下文——组件、变量、布局数据——从而让生成的代码匹配源文件，而不是近似还原。
Pi 究竟是什么
Pi 是一个面向终端的开源（MIT）AI 编程代理，属于 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 树的形式存储，因此你可以分支一次探索，并在单个文件中导航历史，而不会丢失早先的路径。
凭据：你自己的提供商 API 密钥（BYOK——Anthropic、OpenAI、Google 等）或通过 /login 进行的订阅登录；本地存储在 ~/.pi/agent/auth.json（0600）
供应商：earendil-works（开源社区项目）
许可证：MIT，开源
对于设计工作，最突出的特性是 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 树的形式存储，因此你可以分支一次探索，并在单个文件中导航历史，而不会丢失早先的路径。
凭据：你自己的提供商 API 密钥（BYOK——Anthropic、OpenAI、Google 等）或通过 /login 进行的订阅登录；本地存储在 ~/.pi/agent/auth.json（0600）
供应商：earendil-works（开源社区项目）
许可证：MIT，开源
为什么多提供商、BYOK 代理契合设计
Pi 的设计优势在于灵活性，而不是某个单一内置模型——但和每个代理一样，品味仍然必须由你提供。
按任务选择合适模型：由于 Pi 可路由到任意提供商，你可以调用一个强大的多模态模型来读取参考截图，然后切换到另一个模型进行重构——而无需离开代理。
你的密钥，无锁定：BYOK 意味着你不受某一家提供商的定价或上下文限制束缚；选择优势契合眼前设计工作的模型。
Skills 中的约定：一个 Skill（外加像 Figma 服务器这样的 MCP 来源）会让代理面向你的 tokens、组件和真实规格，因此它会依据品牌工作，而不是默认外观。
品味来自你提供的三类输入：一个设计系统、一个 skill 和真实参考图像。
教训与每个代理教会你的相同：Pi 默认没有品味，且没有任何模型选择能提供它。当你给它约束——一个设计系统、一个美学 skill 和具体参考——它才能产出好设计。OpenDesign 打包的正是这些输入，这就是两者契合的原因（详见下文）。
按任务选择合适模型：由于 Pi 可路由到任意提供商，你可以调用一个强大的多模态模型来读取参考截图，然后切换到另一个模型进行重构——而无需离开代理。
你的密钥，无锁定：BYOK 意味着你不受某一家提供商的定价或上下文限制束缚；选择优势契合眼前设计工作的模型。
Skills 中的约定：一个 Skill（外加像 Figma 服务器这样的 MCP 来源）会让代理面向你的 tokens、组件和真实规格，因此它会依据品牌工作，而不是默认外观。
品味来自你提供的三类输入：一个设计系统、一个 skill 和真实参考图像。
教训与每个代理教会你的相同：Pi 默认没有品味，且没有任何模型选择能提供它。当你给它约束——一个设计系统、一个美学 skill 和具体参考——它才能产出好设计。OpenDesign 打包的正是这些输入，这就是两者契合的原因（详见下文）。
从零开始为设计工作设置 Pi
设置顺序：安装 → 身份验证（BYOK）→ 在 Skill 中编码设计规则 → 选择模型 → 启用浏览器验证。
编码你的设计规则：将你的令牌、基础组件和约定放在 Skill 中，并让 Pi 指向它们，这样输出就会符合品牌，而不是默认成通用外观。
添加浏览器验证：接入 Playwright 或浏览器 MCP，让 Pi 在真实浏览器中渲染，并跨断点检查其输出，而不是只确认构建通过。
使用当前设置章节获取命令和特定于版本的详细信息，这些内容可能会变化。
历史命令示例来自上一版指南；请在链接的供应商文档中核实当前语法。
编码你的设计规则：将你的令牌、基础组件和约定放在 Skill 中，并让 Pi 指向它们，这样输出就会符合品牌，而不是默认成通用外观。
添加浏览器验证：接入 Playwright 或浏览器 MCP，让 Pi 在真实浏览器中渲染，并跨断点检查其输出，而不是只确认构建通过。
使用当前设置章节获取命令和特定于版本的详细信息，这些内容可能会变化。
# 1. 安装 Pi 编码代理 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 切换模型历史命令示例来自上一版指南；请在链接的供应商文档中核实当前语法。
截图到 UI 的工作流
使用 Pi 时最具杠杆效应的设计循环，是将参考图像变成可用、响应式的 UI，并反复迭代直到匹配——依靠多模态模型将输出与参考进行比较。由于 Pi 与提供商无关，请针对这一轮把它指向最擅长读取图像的模型。
从你拥有的最清晰的视觉参考开始——并包含多种状态（桌面端和移动端、悬停、空状态、加载中），而不只是一张主视觉图。
使用 /model 为这一轮选择强大的多模态模型，因为图像理解是决定截图到 UI 质量的关键。
提示词要具体；即使模型很强，模糊的提示词也会生成通用的 UI。
将你的设计系统和约定放在 Skill 中，并告诉 Pi 令牌和规范基础组件的位置。
运行开发服务器，让 Pi 在真实浏览器中渲染，调整到各个断点，然后通过将其实现与截图对比来迭代——而不只是确认它能构建。
预先给代理提供参考和具体约束：
保持提示词简短且聚焦，提交好的迭代并回退差的迭代（回退时告诉 Pi），这样每一轮都基于干净的基础构建。Pi 的分支式 JSONL 会话还让你可以探索替代方案，而不会丢失原始对话线程。
历史命令示例来自上一版指南；请在链接的供应商文档中核实当前语法。
从你拥有的最清晰的视觉参考开始——并包含多种状态（桌面端和移动端、悬停、空状态、加载中），而不只是一张主视觉图。
使用 /model 为这一轮选择强大的多模态模型，因为图像理解是决定截图到 UI 质量的关键。
提示词要具体；即使模型很强，模糊的提示词也会生成通用的 UI。
将你的设计系统和约定放在 Skill 中，并告诉 Pi 令牌和规范基础组件的位置。
运行开发服务器，让 Pi 在真实浏览器中渲染，调整到各个断点，然后通过将其实现与截图对比来迭代——而不只是确认它能构建。
预先给代理提供参考和具体约束：
保持提示词简短且聚焦，提交好的迭代并回退差的迭代（回退时告诉 Pi），这样每一轮都基于干净的基础构建。Pi 的分支式 JSONL 会话还让你可以探索替代方案，而不会丢失原始对话线程。
pi
# 在提示词中：
> 在
React + Vite + Tailwind + TypeScript 中实现 reference-desktop.png 和 reference-mobile.png。
复用我现有的设计系统组件和令牌（见 Skill）。
匹配间距、布局和层级；使其响应式。
在浏览器中渲染它，并反复迭代，直到它在各个断点上都与参考一致。历史命令示例来自上一版指南；请在链接的供应商文档中核实当前语法。
技能、扩展和主题
Pi 在运行时通过几个层面自我扩展，它们能清晰地映射到开放式设计工作流中。
技能：遵循 Agent Skills 标准的 Markdown 能力包——你的设计约定、设计令牌和审查清单持久且可移植的归宿。同一个技能可跨兼容的智能体使用，而不仅限于 Pi。
扩展和提示模板：TypeScript 扩展添加自定义工具、命令和 UI；可复用的提示模板通过 /name 运行。两者都让你无需离开终端即可编写验证循环脚本。
MCP 和主题：Pi 连接到 MCP 服务器以引入外部设计上下文（最相关的是 Figma MCP 服务器），主题会热重载，让你工作时终端 UI 保持可读。
这些都是可移植能力——尤其是技能和 MCP——正是 OpenDesign 旨在编排的那类东西，而不是按项目重新创建。
技能：遵循 Agent Skills 标准的 Markdown 能力包——你的设计约定、设计令牌和审查清单持久且可移植的归宿。同一个技能可跨兼容的智能体使用，而不仅限于 Pi。
扩展和提示模板：TypeScript 扩展添加自定义工具、命令和 UI；可复用的提示模板通过 /name 运行。两者都让你无需离开终端即可编写验证循环脚本。
MCP 和主题：Pi 连接到 MCP 服务器以引入外部设计上下文（最相关的是 Figma MCP 服务器），主题会热重载，让你工作时终端 UI 保持可读。
这些都是可移植能力——尤其是技能和 MCP——正是 OpenDesign 旨在编排的那类东西，而不是按项目重新创建。
Pi 与 Codex、Claude Code、Cursor、Gemini CLI 的设计对比
设计工作没有唯一的赢家——每个智能体都有不同的强项，经验丰富的团队会把它们组合使用。公允的总结如下：
Pi — 不绑定提供商且支持 BYOK — 可路由到任何模型（Anthropic、OpenAI、Google……）并在会话中途切换；MIT 许可，可自我扩展 — 为每项任务选择最佳模型而不受供应商锁定
Codex — 通过前端技能实现强大的视觉润色；沙盒化异步构建 — 委托异步构建和可移植的 AGENTS.md 规则
Claude Code — 具体的设计决策（十六进制、间距、字体）和能感知代码库的 UX — 前端推理和大上下文重构
Cursor — 通过实时预览和内联编辑形成可视化的构建与查看循环 — 在 IDE 内进行紧凑的迭代与观察式 UI 工作
Gemini CLI — 强大的多模态图像理解和 1M token 上下文；免费层级 — 截图密集型工作以及在上下文中保持整个设计系统
Pi 的切入角度与其他者正交：它是让你用自己的密钥使用上述任何底层模型的智能体。社区反复出现的结论仍然成立——品味来自人类：如果没有技能、参考和约束，它们都会默认采用通用审美。这才是真正要解决的问题，而且它是设计工具形态的问题，而不是模型形态的问题。
Agent — 设计优势 — 最适合
Pi — 不绑定提供商且支持 BYOK — 可路由到任何模型（Anthropic、OpenAI、Google……）并在会话中途切换；MIT 许可，可自我扩展 — 为每项任务选择最佳模型而不受供应商锁定
Codex — 通过前端技能实现强大的视觉润色；沙盒化异步构建 — 委托异步构建和可移植的 AGENTS.md 规则
Claude Code — 具体的设计决策（十六进制、间距、字体）和能感知代码库的 UX — 前端推理和大上下文重构
Cursor — 通过实时预览和内联编辑形成可视化的构建与查看循环 — 在 IDE 内进行紧凑的迭代与观察式 UI 工作
Gemini CLI — 强大的多模态图像理解和 1M token 上下文；免费层级 — 截图密集型工作以及在上下文中保持整个设计系统
Pi 的切入角度与其他者正交：它是让你用自己的密钥使用上述任何底层模型的智能体。社区反复出现的结论仍然成立——品味来自人类：如果没有技能、参考和约束，它们都会默认采用通用审美。这才是真正要解决的问题，而且它是设计工具形态的问题，而不是模型形态的问题。
Agent — 设计优势 — 最适合
常见陷阱，以及如何避免“AI 味”观感
对 AI 生成设计最常见的抱怨，就是它看起来千篇一律——柔和的渐变、悬浮面板、过大的圆角、夸张的阴影，以及那种“一眼就是 AI 做的”Inter 字体加紫色的调性。其他被反馈的问题还包括移动端布局错乱，以及指令泄漏到 UI 文案里。这些都不是 Pi 或某一个模型独有的问题；它们发生在任何 agent 缺少精心策划的设计上下文时。
添加审美技能：精心策划的设计技能会迫使 agent 敲定一个真实的设计方向，而不是沿用默认观感——而且由于它是可移植的技能，它能跨模型随你一起走。
在真实浏览器中验证：选一个多模态模型，让 Pi 跨断点渲染并自检，这样布局就不会在移动端悄无声息地崩坏。
提供 token 和参考：真实的设计 token 和参考截图，是对输出质量影响最大的单一杠杆。
把规则写在 Pi 会读取的地方：把“不要 hero 卡片、最多两种字体、品牌优先的层级”这类风格规则，放进一个 agent 每次运行都会加载的技能里。
注意，每一项缓解措施都是在为 agent 提供精心策划的设计上下文——与你路由到哪个提供商无关。而按项目手工维护这份上下文，正是 OpenDesign 所消除的苦役。
添加审美技能：精心策划的设计技能会迫使 agent 敲定一个真实的设计方向，而不是沿用默认观感——而且由于它是可移植的技能，它能跨模型随你一起走。
在真实浏览器中验证：选一个多模态模型，让 Pi 跨断点渲染并自检，这样布局就不会在移动端悄无声息地崩坏。
提供 token 和参考：真实的设计 token 和参考截图，是对输出质量影响最大的单一杠杆。
把规则写在 Pi 会读取的地方：把“不要 hero 卡片、最多两种字体、品牌优先的层级”这类风格规则，放进一个 agent 每次运行都会加载的技能里。
注意，每一项缓解措施都是在为 agent 提供精心策划的设计上下文——与你路由到哪个提供商无关。而按项目手工维护这份上下文，正是 OpenDesign 所消除的苦役。
在 OpenDesign 中使用 Pi 做设计
OpenDesign 正是上述工作流一直在要求的那层开源设计层。它把 Pi 当作第一方适配器，并用精心策划的技能与设计系统库、结构化的渲染管线以及本地桌面 UI 将其包裹起来——因此，让 Pi 表现出色的那份设计上下文从第一次运行起就已就位，而无需每次手工拼装。两者都是开源且本地优先的，这让它们的搭配浑然天成。
用你自己的提供商 API key（BYOK）或订阅登录进行认证——凭据留在你机器上的 ~/.pi/agent/auth.json 中，绝不会经由我们代理。
选一套设计系统和一个技能，然后生成品味一致的演示文稿、原型和落地页。
每一份产物和 DESIGN.md 文件都存放在你自己的仓库里，而不是托管云上。
同一个 Pi agent，同一套 key，同样可以自由切换模型——另外还围绕它构建了一套真实、可移植、开源的设计工作流。它本地优先且采用 MIT 许可，所以你的工作和凭据都不会离开你的机器。
安装 OpenDesign 并选择 Pi 作为你的 agent。
用你自己的提供商 API key（BYOK）或订阅登录进行认证——凭据留在你机器上的 ~/.pi/agent/auth.json 中，绝不会经由我们代理。
选一套设计系统和一个技能，然后生成品味一致的演示文稿、原型和落地页。
每一份产物和 DESIGN.md 文件都存放在你自己的仓库里，而不是托管云上。
同一个 Pi agent，同一套 key，同样可以自由切换模型——另外还围绕它构建了一套真实、可移植、开源的设计工作流。它本地优先且采用 MIT 许可，所以你的工作和凭据都不会离开你的机器。
安装 OpenDesign 并选择 Pi 作为你的 agent。
OpenDesign 与 Pi 有关联吗？
不。OpenDesign 是独立的，并将 Pi 作为社区支持的适配器集成。