Open CoDesign 实战：用 Calm Spaces 冥想 App 示例跑通「Prompt → 原型 → HTML 导出」全链路

人工智能AI 应用桌面应用【免费下载链接】open-codesignOpen-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.项目地址https://gitcode.com/gh_mirrors/op/open-codesign点击查看免费下载本文是 Open CoDesign开源 Claude Design 替代方案gh_mirrors/op/open-codesign首个内置演示示例的端到端技术指南。它以仓库中的 examples/calm-spaces/README.md 为骨架讲清楚如何从零启动应用、用一句话生成手机端冥想 App 原型、在沙箱 iframe 中渲染并最终导出为独立 HTML 文件同时结合packages/与apps/desktop的源码说明 artifact 提取协议、Tailwind CDN 注入、CSS 变量设计令牌与「响亮失败」错误处理策略的实现原理。读完你将掌握 Open CoDesign 从提示词到可分发原型的最小可用闭环以及 Phase 2 滑块调参所依赖的底层机制。Calm Spaces 是什么Calm Spaces 是 Open CoDesign 的头号演示headline first demo对应的是 Claude Design 官方主页上的招牌示例。它是一份自包含的 HTML artifact在手机外框phone-frame中渲染一个冥想 App 的主屏 mockup包含冥想课程列表播放按钮柔和绿 / 蓝配色通过:root上的 CSS 自定义属性custom properties暴露的可调设计令牌design tokens。该示例在多语言模板库中也有对应条目例如英文版 packages/templates/src/locales/en.ts 中id: meditation-app的提示词为Design a mobile app prototype for a meditation app called Calm Spaces. Show a phone frame containing a home screen with a meditation list, play button, and progress tracker. Use serene typography, soft greens and blues, and lots of white space.中文版见 packages/templates/src/locales/zh-CN.tsCalm Spaces 冥想 App另有西语es、葡语pt-BR变体。这些内置演示通过 packages/templates/src/index.ts 的getDemos(locale)/getDemo(id, locale)按语言环境取用。运行环境准备1. 提供开发期 API KeyCalm Spaces 演示默认走 Anthropic 接口Anthropic 密钥开箱即用export VITE_OPEN_CODESIGN_DEV_KEYsk-ant-...该变量以VITE_前缀暴露给 Vite 渲染进程是仓库为本地开发准备的密钥注入机制README 中明确标注 Provide a dev API key在已打包应用中使用时密钥通常改由设置面板 / onboarding 流程写入本地存储参见 apps/desktop/src/main/auth-bridge.ts 对{ type: api_key, key }凭据的读写。如果你在仓库源码中搜索不到该变量的其他定义属正常现象——它只在 README 记录的开发路径中出现。2. 安装依赖并启动桌面应用在仓库根目录执行pnpm install pnpm --filter open-codesign/desktop dev项目使用 pnpm workspace 管理见 pnpm-workspace.yaml桌面端位于 apps/desktop其 package.json 中的 dev 脚本由 apps/desktop/scripts/dev.cjs 驱动。应用内操作步骤启动后在桌面应用内按如下顺序操作在左侧边栏点击Calm Spaces meditation app起始模板starter。该 starter 即上文meditation-app模板点击后提示词会被写入输入框见 apps/desktop/src/renderer/src/components/Sidebar.tsx 的handlePickStarter。按Send或直接回车发送。约 30 秒内右侧 iframe 渲染出设计。打开预览工具栏中的Export菜单 → 选择HTML→ 选择目标位置 →Save。在浏览器中执行open chosen-path即可看到脱离应用也能独立运行的同款设计。生成管线原理从提示词到沙箱 iframeartifact 协议与提取README 规定模型恰好输出一个artifact identifierdesign-1 typehtml …块。这一约束在源码中有对应实现packages/core/src/lib/artifact-collect.ts 的createDesignSourceArtifact会生成id: design-${index 1}、type: html的 artifact 对象并附带sourceFormat: jsx、renderRuntime: react、entryPath默认DEFAULT_SOURCE_ENTRY等元数据stripEmptyFences还会清理流式解析过程中残留的空 html 围栏fence外壳。沙箱 iframe 渲染被提取的 artifact 交给 orchestrator 后由 packages/runtime/src/index.ts 的buildPreviewDocument/buildStandaloneDocument包装成 iframesrcdoc文档buildPreviewDocumentpackages/runtime/src/index.ts#L611-L640会先剥离 CSP meta 标签再对 HTML 源码注入 JSX 运行时、预览视口支持与 overlay最后以wrapJsxAsSrcdoc包裹交互式预览使用INTERACTIVE_PREVIEW_SANDBOX allow-scripts allow-formspackages/runtime/src/index.ts#L642并通过 CSPform-action none收紧表单提交渲染端的 iframe 错误会通过iframe-errors.ts的unhandledrejection监听转发给 UI由CanvasErrorBar等组件呈现为可读信息。提示词的底层模板值得说明的是README 引用的docs/research/01-claude-design-teardown.md在当前仓库快照中未随附仓库 docs/research 目录现存11-custom-sliders.md与15-claude-design-prompts.md后者从命名看即 Claude Design 提示词拆解资料可作为了解该示例设计动机的补充阅读。HTML 导出单文件自包含产物如何生成导出器架构导出入口在 packages/exporters/src/index.tsEXPORTER_FORMATS [html, pdf, pptx, zip, markdown]。每个格式是独立的子路径模块通过动态import()懒加载exportArtifact内部分支调用使puppeteer-core、pptxgenjs、zip-lib等重依赖只在用户首次导出时才进入模块图控制冷启动体积。exportHtml 的完整处理链exportHtmlpackages/exporters/src/html.ts#L36-L46按以下链路生成单文件buildInlineHtmlDocument当配置了assetBasePath时先通过inlineLocalAssetsInHtml把 workspace 内的src/href/url()本地引用内联为 data URIinlineLocalAssets默认truebuildHtmlDocumentpackages/exporters/src/html.ts#L61-L80用buildStandaloneDocument生成独立文档外壳自动补!doctype html、meta charset、meta nameviewport注入meta namegenerator与注释横幅默认做两空格缩进美化默认文件名由 apps/desktop/src/main/exporter-ipc.ts 的buildDefaultExportPath生成{设计名}-{源码文件名}-{UTC 时间戳}.{扩展名}文件名片段经sanitizeFilenamePart做 NFKD 规范化清洗。Tailwind CDN 的智能注入README 指出 Tailwind 通过官方 CDNhttps://cdn.tailwindcss.com加载且导出器会在模型忘记时自动补上。实现位于 packages/exporters/src/html.ts常量TAILWIND_CDN https://cdn.tailwindcss.com、TAILWIND_TAG script src…/scriptL12-L13hasTailwindScriptL107-L122用transformHtmlElementBlocks遍历所有script标签解析其src的 hostname 是否为cdn.tailwindcss.com当opts.injectTailwind为真且检测不到时injectIntoHead把 CDN 标签插入head之后没有head则自动创建。导出 IPC 链路桌面端的导出由registerExporterIpc注册的codesign:exporthandlerapps/desktop/src/main/exporter-ipc.ts#L229-L296承载先parseRequest校验格式与 source非法格式抛EXPORTER_UNKNOWN再resolveExportSource从 workspace 读取源码含App.tsx等候选路径的自动回退随后弹出系统保存对话框用户取消时返回{ status: cancelled }保存成功则返回{ status: saved, path, bytes }供渲染端 toast。设计令牌与 Phase 2 滑块CSS 变量的作用README 强调 Calm Spaces 的所有颜色、间距、字体大小都是 CSS 变量这正是 Phase 2 滑块层slider tier要挂钩的对象。也就是说生成结果不是写死的样式而是把视觉参数收敛到:root的 CSS custom properties 上后续的滑块调参只需改写变量值即可实时反馈到预览 iframe无需重新生成。仓库 research 目录中的 docs/research/11-custom-sliders.md 从命名看即为该滑块方案的设计调研可结合阅读。这也是该示例被选为「头号演示」的原因之一它完整展示了「模型生成 令牌化 可调参数」的产品闭环。失败模式刻意响亮不留静默回退README 明确写道这条路径上没有任何静默回退There are deliberately no silent fallbacks anywhere in this path。三类典型失败及其表现如下场景表现未设置密钥assistant 消息提示你设置VITE_OPEN_CODESIGN_DEV_KEYPDF / PPTX / ZIP 导出README 记录的 Phase 1 行为抛出CodesignError错误码EXPORTER_NOT_READYtoast 提示 PDF export ships in Phase 2网络 / provider 错误以CodesignError错误码PROVIDER_ERROR传播呈现为以Error:开头的 assistant 回复需要如实指出的是EXPORTER_NOT_READY反映的是 README 撰写时Phase 1 早期的仓库快照。从当前源码看packages/exporters/src已实现 pdf.ts、pptx.ts、zip.tsexporter-ipc.ts的parseRequest也已接受这些格式且当前错误码注册表中不存在EXPORTER_NOT_READY码见下文说明仓库已进入 Phase 2 实施阶段该记录属于历史行为。错误码注册表与多语言文案CodesignError的错误码集中定义在 packages/shared/src/error-codes.tsprovider 相关码包括PROVIDER_AUTH_MISSING、PROVIDER_KEY_MISSING、PROVIDER_ERROR、PROVIDER_HTTP_4XX等导出相关码为EXPORTER_UNKNOWN、EXPORTER_NO_CHROME、EXPORTER_PDF_FAILED、EXPORTER_PPTX_FAILED、EXPORTER_ZIP_UNSAFE_PATH、EXPORTER_ZIP_FAILEDL83-L88。每个码都带用户可见文案与分类ERROR_CODE_DESCRIPTIONS并同步到 packages/i18n/src/locales/en.json 等四语言文件——例如PROVIDER_ERROR中文文案为 provider 返回错误请检查 API key 后重试。packages/i18n/src/locales/zh-CN.json。渲染端对PROVIDER_ERROR的呈现路径可在 apps/desktop/src/renderer/src/store.test.ts 的测试中看到。「响亮失败」原则PRINCIPLES §10意味着宁可把错误明明白白抛给用户也不要在背后吞掉异常换一个「看起来正常」的结果——这对一个以 AI 生成为核心的产品尤其重要因为静默回退会让用户误判模型能力与产物可信度。小结一条可复制的端到端链路Calm Spaces 演示浓缩了 Open CoDesign 的核心闭环多语言模板提示词 → 模型输出单一 HTML artifact → orchestrator 按design-1协议提取 → 沙箱 iframe 渲染 → HTML 导出器补全文档外壳与 Tailwind CDN → 单文件分发。如果你要接入自己的首个生成场景照此链路即可在packages/templates/src/locales增加模板条目、确保模型遵守 artifact 协议、把视觉参数令牌化并沿用「响亮失败」的错误处理策略。赞分享人工智能AI 应用桌面应用【免费下载链接】open-codesignOpen-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.项目地址https://gitcode.com/gh_mirrors/op/open-codesign点击查看免费下载相关推荐使用 awesome-codex-skills 的 smartproxy-automation基于 Rube MCP 与 Composio 驱动 Smartproxy 代理池自动化使用 awesome codex skills 的 smartproxy automation基于 Rube MCP 与 Composio 驱动 Smartp人工智能AI 应用桌面应用Reactotron 官方示例应用完全指南用 example-app 跑通 React Native / React JS 调试链路Reactotron 官方示例应用完全指南用 example app 跑通 React Native / React JS 调试链路 本文以 Reactotr开发工具DZNEmptyDataSet与冥想应用冥想记录为空时的展示DZNEmptyDataSet与冥想应用冥想记录为空时的展示 冥想应用中当用户首次使用或暂无冥想记录时空白的列表界面往往会让用户感到困惑。DZNEmptyUI组件上一篇M3E Canvas 功能清单30 多种 M3 组件、磁吸连接与点击预览一次讲透下一篇Qwen Image Edit 2509ComfyUI多图融合编辑工作流深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考