企业官网建设流程全解析

Open Design Agent Kit 是一款可装入 GitHub Copilot Chat、Claude Code、Cursor 等编码 Agent 的开源 AI 设计工具包，无需桌面应用、无需 API Key，用一句对话就能生成落地页、演示文稿、数据报表。生成之后的问题来了：怎么把 AI 设计页面分享出去？本文面向新手，讲解三种分享发布方式——单个 HTML 文件、临时链接，以及一键部署到你自己的 Netlify、Vercel 与 GitHub Pages，全程由 Agent 自动完成，你只需说一声"发布"。

AI 设计页面分享的 3 种方式：一张表看懂

Open Design Agent Kit 生成的设计默认都是"已注册的 artifact"（仓库里的普通文件 + 清单），随时可以分享。官方把分享路径分成三类：

在 Claude Code / Claude Desktop 中还有第四种：发布为私有的Claude artifact（claude.ai 链接），适合跨设备继续编辑。

免账号临时链接：60 秒把 AI 设计发给团队

只想快速征求反馈？在对话框里直接说：

Publish the launch page so I can send the team a link.

Agent 会调用publish_open_design_artifact工具，把设计打包成可部署的exports/site/文件夹，然后生成临时链接。两种免账号主机：

• netlify-temporary：无需账号，约 60 分钟有效，认领前带密码保护（Netlify 界面会显示密码）；
• cloudflare-temporary：无需账号，60 分钟内任何拿到链接的人都能看。

小技巧：可以提前点名主机，跳过提问环节——"Give me a temporary Cloudflare link for the pricing page."。如果想把临时站永久保留，在一小时内打开 Agent 给出的claim URL并登录/注册对应平台即可。

一键部署 Netlify、Vercel、GitHub Pages：5 步自动流程

长期使用则选你自己的账号。Agent 会自动执行 5 步，在第 3 步停下来等你确认，没有你的"yes"，什么都不会上线：

1. 打包（Package）：页面连同引用的样式表、图片、字体、脚本一起复制到exports/site/，设计源文件绝不被改动；
2. 检查（Check）：通过npx运行对应主机 CLI，确认你已登录（临时链接则确认你未登录）；
3. 确认（Confirm）：Agent 明确告诉你"要发什么、谁能看、有效期多长、徽标是否开启"，等你点头；
4. 部署（Deploy）：只从exports/site/部署，命令失败时展示真实错误，Agent 不会乱猜别的命令；
5. 记录（Record）：链接写入 artifact 清单的metadata.shares。下次发布到同一主机会更新同一个站点，而不是新建。

需要提前准备的是各平台 CLI 登录：netlify login、vercel login、wrangler login或gh auth login。Agent 永远不会索要或保存你的 token。

各主机的可见性差异值得注意：

VS Code 与 Claude Code：一键发布入口

不同入口，同一个结果，不需要手敲命令：

• VS Code（GitHub Copilot Chat）：artifact 预览窗口的Share按钮提供三个选项——Download standalone HTML（下载单文件）、Get a temporary link（临时链接）、Publish to my hosting（发布到自己的托管），点击即自动把请求填进 Copilot Chat；聊天框里也可以用/open-design-publish命令走同样流程；
• Claude Code / Codex：open-design-publish技能（skill）会引导你走完整个流程；
• 命令行：npx @feimacode/open-design-agent-kit export .open-design/pitch/pitch.html --format standalone可直接导出单文件。

定制"Made with Open Design"徽标与链接预览卡片

发布出去的页面右下角默认带一个可关闭的 "Made with Open Design · Remix this" 小徽标——纯内联 HTML，不加载任何网络资源、不做任何追踪。想要去掉？

• 单次：发布时说一句 "publish it without the badge"（badge: false）；
• VS Code 永久关闭：设置项openDesign.share.badge；
• MCP 服务 / CLI 永久关闭：环境变量OPEN_DESIGN_SHARE_BADGE=0，或 CLI 参数--no-badge。

发布页还会自动带上og:title、og:description、twitter:card标签，链接贴进 Slack、X、LinkedIn 时能显示正常的预览卡片。想要预览图片的话，先用 导出 PNG 功能导出一张，首次发布后 Agent 会主动提议再部署一次把图片标签补上。

发布前自查清单与常见报错处理

打包阶段会自动报告这些"常见的坑"（不阻断发布，但修好体验更好）：

• 缺少<!DOCTYPE html>或<meta name="viewport">；
• 页面从其他站点加载脚本/样式；
• 单文件超过 5 MiB、页面超过 2 MiB；
• 文件位于点目录（dot-folder）下，部分主机不会托管。

遇到报错时对照处理（详见 docs/guides/share-and-publish.md）：

延伸阅读：相关文档与源码路径

• 分享发布完整指南：docs/guides/share-and-publish.md
• 发布工具参数详解：docs/reference/tools.md
• artifact 清单与exports/目录：docs/reference/artifact-manifest.md
• 分享徽标等设置项与环境变量：docs/reference/settings-and-env.md
• CLI 导出选项：docs/reference/cli.md
• MCP 服务器（Cursor 等 Agent 接入）：packages/mcp-server/README.md

一句话总结：设计在聊天里生成，分享只需一句话——临时链接 60 秒发出，永久链接由 Agent 替你走完打包、确认、部署全流程，最终沉淀为仓库里可以随时 diff 和再部署的普通文件。