—tags: [“ai-agent”、“anthropic”、“claude”、“Open Source”、“自托管”] {</* 资源信息 />}人工智能驱动的设计工具正在以惊人的速度发展。虽然 Claude Design、v0 by Vercel 和 Figma AI 等专有平台引起了广泛关注，但越来越多的开发人员和设计师社区要求一些根本不同的东西：透明度、所有权和不受供应商锁定的自由。 Open Codesign 是一种Open Source Claude Design 替代方案，已迅速积累了超过 6,809 颗 GitHub 星星，并正在重新定义技术团队处理 AI 辅助原型设计的方式。Open Codesign 由 OpenCoworkAI 构建并在 MIT 许可下发布，它体现了一种与现代开发人员产生深刻共鸣的理念：您的提示、您的模型、您的笔记本电脑。这款桌面本机应用程序将自然语言提示转换为精美的原型、幻灯片和营销资产——完全本地化，无论您使用的是哪种大型语言模型。在这份综合指南中，我们探讨了开放式协同设计的特殊之处、如何设置它、它与专有替代方案的比较，以及为什么它值得在您的设计工作流程中占据中心位置。—

Open Codesign：拥有 5,790 多个星星的Open Source Claude 设计替代方案 — dibi8.com

## 什么是开放式协同设计及其重要性Open Codesign 是一款 MIT 许可的桌面应用程序，基于 Electron、React 19、Vite 6 和 Tailwind CSS v4 构建。从本质上讲，它弥合了自然语言和可用于生产的设计工件之间的差距。输入诸如"带有 glassmorphism 英雄部分、定价卡和带有时事通讯注册的页脚的现代 SaaS 登陆页面" 之类的提示，几秒钟之内，Open Codesign 就会生成一个完全交互式的 HTML 原型，其中包含悬停状态、响应断点和已连接的空状态。但开放代码设计不仅仅是一个简单的代码生成器。随着v0.2.0（代理设计）的发布，该工具已发展成为true正的本地设计代理，配有工作区支持的会话、经过许可的工具访问以及通过"DESIGN.md"文件持久设计内存。每个设计都成为一个会话，JSONL 历史记录存储在本地工作区文件夹中，这意味着您的迭代永远不会丢失，并且您的设计决策始终可以检查。### 为什么Open Source方法很重要人工智能设计工具领域主要由在纯云架构上运行的闭源平台主导。这些工具虽然方便，但也带来了一些痛点：- 订阅锁定：无论使用情况如何，每月费用都会累积。

供应商依赖性：您被迫采用单一提供商的模型（仅限 Claude、仅限 GPT-4o 等）。
数据隐私问题：您的提示、设计和知识产权均在远程服务器上处理。
有限的可导出性：生成的工件通常带有受限的格式或水印。
没有离线功能：纯云工具在没有连接的情况下就会变成砖块。开放式代码设计解决了所有这些问题。由于它是本地优先和 BYOK（自带密钥），因此您可以完全控制数据、模型选择和预算。 MIT的许可证意味着您可以派生它、修改它、在内部自行托管它，甚至可以在它的基础上构建商业产品——没有任何问题。—

核心特性：多模型支持、本地优先、BYOK### 多模型架构：自由选择Open Codesign 最引人注目的特色之一是其统一的提供商模型。与 Claude Design（仅限 Anthropic）或 Vercel 的 v0（主要是 GPT-4o）不同，开放式设计支持跨不同提供商生态系统的 20 多个模型：| Provider | Supported Models | #

|———-

|—————–

| | Anthropic | Claude 3.5 Sonnet, Claude 3 Opus, Claude Code configurations | | OpenAI | GPT-4o, GPT-4 Turbo, Codex models via API or ChatGPT Plus subscription | | Google | Gemini 1.5 Pro, Gemini Ultra | | DeepSeek | DeepSeek-V3, DeepSeek-Coder | | OpenRouter | Universal access to hundreds of frontier and open models | | SiliconFlow | High-performance Chinese LLM endpoints | | Local / Self-hosted | Ollama (Llama, Mistral, Qwen, Phi, and more) | | Custom | Any OpenAI-compatible relay endpoint |动态模型选择器特别优雅。开放代码设计不是提供硬编码的候选名单，而是查询每个提供商的实时模型目录。当 Anthropic 发布新的 Claude 模型或 OpenAI 发布更新的 GPT 版本时，它会自动出现在您的选择器中 - 无需更新应用程序。对于已订阅 ChatGPT Plus、Pro 或 Team 的用户，Open Codesign 为 Codex 模型提供直接 OAuth 登录。无需 API 密钥管理 - 只需进行身份验证并开始设计。### 本地优先架构：您的数据归您所有Open Codesign 中的每个设计会话都存储在本地磁盘上。 v0.2.0 工作区模型为每个项目创建一个专用文件夹，其中包含：- session.jsonl — 完整的对话和工具调用历史记录

DESIGN.md — 共享设计系统内存（品牌标记、颜色决策、版式规则）
以原生格式生成工件文件（HTML、CSS、JS）
版本快照可即时回滚该架构带来了实实在在的好处：1. true正的离线功能：在飞机上开始设计，在没有 Wi-Fi 的机舱中完成设计。

无限版本历史：SQLite 支持的会话存储意味着每次迭代都会被保留，没有任意限制。
零服务器依赖：应用程序完全在您的计算机上运行。没有任何后端服务会宕机、更改条款或被收购。
Git 友好：因为设计是文件夹中的纯文件，所以您可以"git init"任何项目并将您的设计历史记录视为源代码。### BYOK：自带密钥BYOK 模型很简单：Open Codesign 是一款免费应用程序。您只需为通过现有提供商账户消耗的 LLM 代币付费。与基于订阅的设计工具相比，这创建了一个完全透明的成本结构。设置提供商只需不到 60 秒的时间。对于现有的 Claude Code 或 Codex CLI 用户来说，一键导入功能非常神奇 - Open Codesign 会检测您现有的 ~/.config/claude/config.toml 或 Codex 提供程序配置并自动导入所有设置。无需复制粘贴，无需手动输入 API 密钥，也不会出现拼写错误。API 密钥存储在具有"0600"文件权限的"~/.config/open-codesign/config.toml"中，遵循与 Claude Code、“gh” CLI 和 SSH 私钥相同的安全约定。除了直接传输到您选择的提供商的 API 端点之外，密钥绝不会传输到任何地方。—

设置和配置指南＃＃＃安装Open Codesign 通过多种渠道分发二进制文件：- macOS：".dmg"安装程序或 Homebrew（“brew install open-codesign”） #

Windows：.exe 安装程序或 winget（winget install OpenCoworkAI.open-codesign）
Linux：.AppImage 或 Scoop 包
来源：使用 pnpm install && pnpm build 克隆并构建该应用程序启动时会进入一个干净的、有四个选项卡的设置界面，涵盖模型、外观、存储和高级首选项。### 配置您的第一个提供商#### 选项 A：一键导入（推荐 Claude Code / Codex 用户）1. 打开设置→型号

单击 “从 Claude Code 导入” 或 “从 Codex 导入”
Open Codesign自动读取您现有的提供商配置
验证导入的设置并单击**“测试连接”**#### 选项 B：手动输入 API 密钥1. 打开设置→型号
选择您的提供商（Anthropic、OpenAI、Gemini 等）
将您的 API 密钥粘贴到安全密钥字段中
从动态选择器中选择您喜欢的默认模型
单击 “测试连接” 进行验证 — 诊断面板将显示延迟、模型可用性以及任何特定于继电器的问题#### 选项 C：ChatGPT 订阅登录1. 打开设置→型号
单击**“使用 ChatGPT 登录”**
在浏览器中完成 OAuth 流程
返回开放式代码设计 — Codex 模型现在无需 API 密钥即可使用#### 选项 D：当地 Ollama1. 确保 Ollama 在本地运行（ollamaserve）
打开设置→模型→添加提供商→Ollama
Open Codesign 自动检测 http://localhost: 11434
选择您拉取的模型（例如"llama3.2"、“qwen2.5”、“mistral”）### 设置您的工作区配置提供程序后，主界面将显示 Hub - 包含 15 个内置演示和您最近的设计的库。单击"新设计"将创建一个工作区支持的会话。在生成之前，您可以选择：- 选择一项或多项设计技能（幻灯片、仪表板、登陆页面、SVG 图表、玻璃形态、编辑排版、英雄、定价、页脚、聊天 UI、数据表、日历）

附加DESIGN.md文件来建立品牌令牌
选择输出格式首选项（HTML、React 组件或 PPTX）—

与 Claude Design、Figma AI 和 v0.dev 的比较| Feature | Open Codesign | Claude Design | v0 by Vercel | Figma AI | #

|———

|——————

|—————

|————–

|———-

设计系统和原型设计能力### 十二种内置设计技巧通用AI Tools往往会产生通用输出。 Open Codesign 附带十二个内置设计技能模块，它们充当专门的代理，每个模块都经过训练（通过系统提示和上下文注入）以在特定领域产生更高质量的输出：1. 幻灯片 — 具有主布局的演示就绪 PPTX 生成 #

仪表板 — 包含表格、图表和 KPI 卡的数据密集型管理面板
登陆页面 — 以营销为中心的页面，包含英雄部分、社交证明和 CTA
SVG 图表 — 可访问、响应式的数据可视化
Glassmorphism — 具有背景模糊和分层深度的现代半透明 UI
编辑版式 — 具有漂亮的字体层次结构的长篇阅读体验
英雄部分 - 高影响力的首屏作品
定价页面 — 比较表、功能网格和分层卡
页脚 — 具有导航、法律和新闻通讯模块的综合页脚模式
聊天 UI — 带有气泡布局和状态指示器的消息传递界面
数据表 — 可排序、可过滤的表格数据呈现
日历 - 具有调度视图的事件驱动的日期界面在编写一行 CSS 之前，模型会推理哪些技能适合概要，然后选择适当的布局意图、设计系统一致性规则和对比指南。无论您选择哪种底层法学硕士，这种"内置品味"层都可以显着提高输出质量。### DESIGN.md：设计系统的共享内存"DESIGN.md"文件是 Open Codesign 最具创新性的功能之一。您不必强迫模型记住各个回合的品牌决策（这会导致漂移），而是将设计系统写入 Markdown 文件中：``降价

Acme Corp 设计系统 #

颜色 #

主要：#0F172A (slate-900)
口音：#3B82F6（蓝色-500）
表面：#F8FAFC (slate-50)

版式 #

title: 国米、700 重量、紧密跟踪
主体：Inter，400 重量，1.6 线高

间距 #

基本单位：4px
部分填充：垂直 64 像素


## 代码示例和提示### 示例 1：SaaS 登陆页面**提示：**

为名为"Pulse"的以开发人员为中心的 API 监控工具创建登陆页面。包括：一个带有动画渐变背景的黑暗英雄，三张带有 Lucide 图标、显示 JSON 响应的代码片段、包含三个的定价部分层级，以及带有 GitHub 和 Twitter 链接的页脚。``` 为名为"Pulse"的以开发人员为中心的 API 监控工具创建登陆页面。包括：一个带有动画渐变背景的黑暗英雄，三张带有 Lucide 图标、显示 JSON 响应的代码片段、包含三个的定价部分层，以及带有 GitHub 和 Twitter 链接的页脚。使用玻璃形态技能对于功能卡。 ``e 2：投资者推介材料提示：

为种子阶段的金融科技初创公司制作 6 张幻灯片的融资演讲稿。 幻灯片 1：标题
与大排版。 幻灯片 2：问题（带有图标的 3 个要点）。 幻灯片 3：
解决方案屏幕截图占位符。 幻灯片 4：牵引力指标（ARR、用户、增长率）。 
幻灯片 5：商业模式画布。 幻灯片 6：团队照片占位符和联系人。 
导出为 PPTX。 
````**结果：** 可下载的".pptx"文件，其中包含主幻灯片布局、可编辑文本框和占位符图像 - 可以在 PowerPoint、Keynote 或 Google Slides 中进行自定义。### 示例 3：评论驱动的优化生成仪表板后，单击预览中的任意元素并拖放"``
为种子阶段的金融科技初创公司制作 6 张幻灯片的融资演讲稿。 幻灯片 1：标题
与大排版。 幻灯片 2：问题（带有图标的 3 个要点）。 幻灯片 3：
解决方案屏幕截图占位符。 幻灯片 4：牵引力指标（ARR、用户、增长率）。 
幻灯片 5：商业模式画布。 幻灯片 6：团队照片占位符和联系人。 
导出为 PPTX。 
`` 示例 4：AI 调整的滑块生成后，Open Codesign 在专用面板中显示 **AI 发出的调整参数**：```
javascrip
t
// 生成的调整模式
{
"heroBackground": { "type": "颜色", "value": "#0F172A" },
"cardBorderRadius": { "type": "范围", "min": 0, "max": 32, "value": 16 },
"headingFont": { "type": "select", "options": ["Inter", "Geist", "Manrope"], "value": "Inter" },
“sectionGap"：{"类型"："范围"，"最小值"：24，"最大值"：128，"值"：64 }
}
````调整滑块和预览实时更新
- 无需新提示。---

## 开发人员和设计师的用例### 对于前端开发人员- **快速原型```
使此 KPI 卡使用强调色而不是灰色，增加指标
字体大小为 32px，并添加一个带有 +12% 标签的向上趋势小箭头。 
``执行。 
- **设计交接**：导出干净的 HTML/CSS 作为像素完美实现的参考。 
- **电子邮件模板**：生成具有内联样式的响应式电子邮件 HTML（与所有主要客户端兼容）。### 对于产品设计师- **构思加速**：探索 10 个布局方向，而之前绘制一个布局方向所需的时间。 
- **设计系统文档**：使用"DESIGN.md"来编纂和发展动态设计系统。 
- **St```
javascrip
t
// 生成的调整模式
{
"heroBackground": { "type": "颜色", "value": "#0F172A" },
"cardBorderRadius": { "type": "范围", "min": 0, "max": 32, "value": 16 },
"headingFont": { "type": "select", "options": ["Inter", "Geist", "Manrope"], "value": "Inter" },
"sectionGap"：{"类型"："范围"，"最小值"：24，"最大值"：128，"值"：64 }
}
第一天。 
- **品牌探索**：使用不同的技能模块迭代视觉识别方向。### 对于企业团队- **本地部署**：MIT 许可证和本地优先架构使开放式设计适合气隙环境。 
- **成本控制**：BYOK 意味着无需按席位 SaaS 订阅 — 只需现有 API 合同。 
- **可审核性**：每个设计决策都存储在纯文本会话文件中，满足合规性要求。---＃＃ 结论开放式协同设计代表了人工智能设计工具领域的一个有意义的转折点。 虽然专有平台将继续为重视便利性而非控制性的临时用户提供服务，但开放式代码设计是专门为越来越多拒绝为了易用性而放弃所有权的开发人员、设计师和技术团队而构建的。凭借其**多模型灵活性**、**本地优先架构**、**BYOK 经济**以及现在的**代理工作区会话**，开放式协同设计提供了闭源替代方案 90% 的价值，同时消除了 100% 的锁定。 超过 6,809 颗 GitHub 星星不仅仅是一个流行度指标，它们代表了社区用他们的分叉和贡献投票，以采用更开放的方式实现人工智能辅助创造力。对于已经投资了 Claude Code 或 Codex 的团队来说，一键导入可以让采用变得顺畅。 对于运行本地模型的 Ollama 用户来说，它是唯一尊重您完全离线工作流程的专业级设计工具。 对于介于两者之间的每个人来说，MIT的许可证可确保您的设计工具策略永远不会受到供应商定价页面或收购时间表的束缚。如果您尚未探索开放式代码设计，则设置时间不到 90 秒。 您的下一个原型很快就会出现——这一次，它true正属于您。---

## 推荐的自托管基础设施如果您想 24/7 可靠地运行该堆栈，基础设施的选择很重要：- **{< aff "digitalocean" "footer-cta-legacy" "DigitalOcean" >}}** — 200 美元免费赠金，为期 60 天，覆盖全球 14 个以上区域。 运行Open SourceAI Tools的独立开发者的默认选项。 
- **{< aff "htstack" "footer-cta-legacy" "HTStack" >}}** — 从中国大陆低延迟访问的香港 VPS。 这与托管 dibi8.com 的 IDC 是同一个 IDC——在生产中经过了实际考验。*附属链接 - 它们不会花费您额外的费用，并且有助于保持 dibi8.com 的运行。**由 dibi8 技术团队撰写。 如需更深入地了解人工智能Dev Utils、Open Source工作流程和设计工程，请关注我们的博客 [dibi8.com](https://dibi8.com)。*

开放式协同设计：Claude 设计开源替代方案 6

设置和配置指南＃＃＃安装Open Codesign 通过多种渠道分发二进制文件：- macOS：".dmg"安装程序或 Homebrew（“brew install open-codesign”） #

与 Claude Design、Figma AI 和 v0.dev 的比较| Feature | Open Codesign | Claude Design | v0 by Vercel | Figma AI | #

颜色 #

版式 #

间距 #

💬 留言讨论

设置和配置指南＃＃＃ 安装Open Codesign 通过多种渠道分发二进制文件：- macOS：".dmg"安装程序或 Homebrew（“brew install open-codesign”） #

与 Claude Design、Figma AI 和 v0.dev 的比较| Feature | Open Codesign | Claude Design | v0 by Vercel | Figma AI | #

颜色 #

版式 #

间距 #

🔗 相关资源推荐

💬 留言讨论

设置和配置指南＃＃＃安装Open Codesign 通过多种渠道分发二进制文件：- macOS：".dmg"安装程序或 Homebrew（“brew install open-codesign”） #