Claude Design 开源替代品上榜：本地生成产品原型，如何用 cpolar 发给同事实时预览？

AI 原型工具现在最尴尬的一步，不是“能不能生成页面”，而是“生成完怎么给别人看”。你在本地跑完一个产品页、仪表盘或移动端交互稿，浏览器里看着挺像样，可链接还是 http://localhost:xxxx，产品经理、客户和异地同事点不开。

HelloGitHub 最近收录的 nexu-io/open-design，介绍里把它称为 Claude Design 的开源替代方案。它的方向很明确：本地优先、开源、用你机器上已有的 Claude Code、Codex、Cursor、Gemini CLI、OpenCode、Qwen 等编码 Agent 作为设计引擎，生成页面、PPT、移动端原型和设计系统风格稿。

这股热度不是单点冒出来的。掘金、CSDN 上 AI 编程、Canvas、Agent 工具相关内容持续升温，AI HOT 里围绕 Replit、原型生成和“一句话生成可交互页面”的讨论也在增加。开发者已经不满足于让 AI 只写一段代码，更想让它直接交付能打开、能评审、能继续改的界面。

这类工具解决的是“从一句需求到可看的设计 artifact”的问题。cpolar 解决的是后半段：把本机预览端口临时映射成一个外网 HTTPS 地址，让别人不用装环境、不进你电脑、不碰项目目录，也能打开预览页参与评审。

这篇只讲 AI 原型预览评审，不讲文件交换，也不把本地目录或终端暴露出去。

Open Design 这类工具适合解决什么问题

Open Design 的官方 README 里写得很直接：它是 local-first 的 Claude Design 开源替代品，支持本地运行，能自动检测 PATH 里的多种 coding-agent CLI，并通过 Skills 和 Design Systems 生成 artifact。

放到团队协作里，它常见的用法是：

• 产品经理写一句需求：做一个会员增长后台、活动落地页、移动端 onboarding 或数据看板。
• 设计/研发在本地运行 AI 原型工具，让 Agent 生成 HTML 页面、PPT 或多屏原型。
• 本机浏览器打开预览页，先检查布局、文案、交互状态和移动端表现。
• 临时开一个 cpolar HTTPS 地址，把预览页发给同事评审。
• 评审结束后关闭隧道，链接失效。

它不是用来替代生产发布的，也不适合把未脱敏的业务数据直接丢进去。最舒服的场景是“早期评审”：页面已经能看，但还没到部署、验收和上线那一步。

先核对 Open Design 的真实运行边界

我核对了 Open Design 当前公开 README 与 Quickstart，项目名称是 nexu-io/open-design。它的本地开发方式不是传统的 npm run dev，而是仓库根目录的 pnpm tools-dev 体系。

当前 Quickstart 给出的关键要求是：

• Node.js：~24，也就是 Node 24.x。
• pnpm：10.33.x，仓库通过 packageManager 固定为 pnpm@10.33.2。
• 本地开发入口：pnpm tools-dev run web 启动 daemon + web 前台服务。
• 后台入口：pnpm tools-dev 启动 daemon + web + desktop。
• Docker 生产模式默认打开 http://localhost:7456。

所以正文不把端口写死成某一个值。你要以启动日志打印的 Web URL 为准，再把那个端口交给 cpolar。

如果你用的是另一个 Claude Design 开源替代品，或者只是普通 Vite/Next.js/React 原型项目，下面的 cpolar 预览方法也一样成立：先确认本地浏览器能访问，再映射对应端口。

本地运行前，先检查 Node 和 pnpm

Open Design 当前要求 Node 24，先看本机版本：

node -v
corepack --version

如果你已经安装 Node 24，可以启用 Corepack，让仓库自动选择它锁定的 pnpm 版本：

corepack enable
corepack pnpm --version

在 Open Design 仓库里，corepack pnpm --version 应该输出 10.33.2。如果你的 Node 不是 24.x，先切到 Node 24，再继续安装依赖。

使用 nvm 的机器可以这样做：

nvm install 24
nvm use 24
corepack enable
corepack pnpm --version

使用 fnm 的机器可以这样做：

fnm install 24
fnm use 24
corepack enable
corepack pnpm --version

这里没有要求你一定装某个 AI Agent CLI。Open Design 支持检测本机已有的 Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen 等工具；如果没有本地 CLI，也可以按它的设置页走 BYOK API 模式。具体支持列表以项目 README 为准。

克隆、安装并启动本地预览

从 GitHub 克隆项目：

git clone https://github.com/nexu-io/open-design.git
cd open-design

安装依赖：

pnpm install

启动 daemon + web 前台服务：

pnpm tools-dev run web

启动后，终端会打印 Web 访问地址。打开它，比如：

http://localhost:7456

或者：

http://localhost:5175

实际端口以终端输出为准。Open Design 的 Quickstart 同时给出了 Docker 路径，Docker 模式打开的是：

http://localhost:7456

如果你跑的是普通前端原型项目，流程通常是：

npm install
npm run dev

或者：

pnpm install
pnpm dev

这类命令必须以项目 README 为准。关键不是命令名字，而是最终拿到一个本机可访问的预览地址，例如 http://localhost:3000、http://localhost:5173、http://localhost:7456。

本地访问验证：先确认 localhost 能打开

在映射公网之前，先在本机做三件事。

第一，浏览器打开启动日志里的地址，确认页面能加载：

http://localhost:你的端口

第二，用命令确认端口有响应。假设端口是 7456：

curl -I http://localhost:7456

能看到 HTTP 状态码，就说明本地服务至少已经在响应。

第三，在 Open Design 或你的原型工具里生成一个简单 artifact，确认右侧预览 iframe、页面资源、按钮状态和移动端断点都能正常显示。

这一步很重要。cpolar 只负责把端口转出去，不负责修复本地页面本身。如果本地就是空白页，外网链接打开也还是空白页。

用 cpolar 把预览端口映射成 HTTPS 地址

假设你的本地预览端口是 7456，直接开 HTTP 隧道：

cpolar http 7456

如果你的端口是 5175：

cpolar http 5175

如果你的端口是 3000：

cpolar http 3000

命令启动后，终端会显示公网访问地址。把其中的 https://... 地址复制出来，发给产品经理、客户或异地同事即可。

如果你更习惯 Web UI，也可以打开 cpolar 本地管理页：

http://127.0.0.1:9200

创建 HTTP 隧道时填写：

• 协议：http
• 本地地址：你的预览端口，例如 7456
• 域名类型：临时评审用随机域名即可
• 地区：按实际网络情况选择

创建成功后，在“在线隧道列表”里找到公网 HTTPS 地址。

给同事评审时，建议这样发链接

不要只甩一个链接。评审链接最好带上评审目标，不然别人打开后很容易把注意力放到不该看的地方。

可以这样发：

这是会员增长后台的 AI 原型预览：
https://xxxx.cpolar.top

这次主要看三点：
1. 首页指标是否覆盖日常运营判断
2. 新增活动弹窗的字段是否够用
3. 移动端窄屏下有没有明显错位

这个链接只临时开到今天评审结束。

对产品经理来说，重点是流程、信息层级和状态覆盖。对客户来说，重点是业务表达和视觉方向。对研发同事来说，重点是组件拆分、异常状态和后续实现成本。

cpolar 在这里不是发布平台，而是临时评审通道。你本地的 AI 原型工具继续留在本机，别人只看到预览页面。

安全边界：只暴露预览端口

这类 AI 原型工具经常涉及本地项目目录、Agent 登录态、API Key、模型代理配置和生成文件。发外链前，安全边界要先想清楚。

建议守住这几条：

• 只映射预览页面端口，例如 7456、5175、3000。
• 不要映射终端、SSH、数据库、文件管理器、项目目录浏览服务。
• 不要把包含 API Key、Cookie、内部域名、客户真实数据的页面发出去。
• 不要把 cpolar 临时链接长期公开在群公告、文档首页或社交平台。
• 评审结束后关闭隧道。
• 如果必须展示业务数据，先脱敏，用假姓名、假订单、假金额和假手机号。

临时关闭前台隧道很简单，在运行 cpolar http 端口 的终端里按：

Ctrl+C

如果你通过 Web UI 创建了隧道，就回到 http://127.0.0.1:9200 停止或删除对应隧道。

常见问题排查

npm install 或 pnpm install 失败

先看 Node 版本。Open Design 当前要求 Node 24.x 和 pnpm 10.33.x：

node -v
corepack pnpm --version

如果 Node 版本不对，先切到 Node 24。依赖安装失败时，再清理并重装：

pnpm store prune
pnpm install

如果你运行的是其他原型项目，按它的 README 选择 npm、pnpm、yarn 或 bun。不要混着装依赖，尤其不要在同一个项目里反复切包管理器。

端口冲突

启动时报端口被占用，先查占用进程。以 7456 为例：

lsof -i :7456

然后关闭占用进程，或者按项目文档换一个端口。Open Design 的 Quickstart 里给过重启并指定端口的例子：

pnpm tools-dev restart --daemon-port 7457 --web-port 5175

换端口后，cpolar 也要映射新端口：

cpolar http 5175

页面空白

先在本机打开 localhost。如果本机也是空白，优先看浏览器控制台和启动终端日志。

常见原因包括依赖没装完、Agent 生成的 artifact 有语法错误、前端框架热更新还没完成、浏览器缓存了旧文件。先刷新本地页面，再重新生成一个最小原型验证。

静态资源加载失败

外网能打开 HTML，但图片、字体或脚本丢了，通常是资源路径问题。

检查页面里是否写了只在本机成立的绝对路径，例如：

/Users/you/project/assets/demo.png

或依赖了未公开的内网地址。评审原型里更稳的做法是使用相对路径、内联关键样式，或者把资源放在本地预览服务能正常返回的目录里。

cpolar 地址打不开

按链路排查：

1. 本机 http://localhost:端口 能不能打开。
2. curl -I http://localhost:端口 有没有响应。
3. cpolar 是否已经登录并正常运行。
4. http://127.0.0.1:9200 里隧道是否在线。
5. 映射的端口是否和真实预览端口一致。

如果你重启过 dev server，端口变了，旧的 cpolar 隧道还指向原端口，外网地址就会打不开或显示旧内容。

预览链接被缓存

评审过程中改了页面，同事还看到旧版本，可以让对方加一个查询参数：

https://xxxx.cpolar.top/?v=20260602-1

也可以让对方强制刷新浏览器。你这边确认本地页面已经更新后，再看 cpolar 外网地址是否跟着更新。

移动端样式问题

AI 生成的页面在桌面看正常，不代表手机上正常。评审前至少用浏览器开发者工具切一次移动端宽度，比如 390px、430px、768px。

重点看：

• 顶部导航是否挤压。
• 表格是否横向溢出。
• 弹窗是否超出屏幕。
• 固定底部按钮是否挡住正文。
• 字号和行高是否还适合阅读。

把 cpolar HTTPS 地址发给手机浏览器或企业微信/飞书，也能快速看真实移动端效果。

一个推荐的评审工作流

完整流程可以固定成这样：

本地启动 AI 原型工具
        ↓
生成产品页 / 仪表盘 / 移动端原型
        ↓
浏览器打开 localhost 预览
        ↓
确认页面、资源、移动端断点正常
        ↓
cpolar http 预览端口
        ↓
复制 HTTPS 地址发给评审人
        ↓
收集反馈并现场修改
        ↓
评审结束，关闭 cpolar 隧道

这套流程的好处是边界清楚：AI 工具、项目目录、Agent 登录态、API Key 都留在本机；外部人员只访问一个临时预览页面。

本地 AI 原型生成工具越强，越需要一个轻量、可控的预览出口。cpolar 刚好适合这个位置：不是替你上线，也不是替你管项目，而是在评审那几十分钟里，把 localhost 变成别人能点开的 HTTPS 链接。

你现在卡在哪一步？本地启动、端口识别、样式预览、外网访问，还是安全边界不确定？可以在评论区说一下，我按你的卡点继续拆。