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

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。pnpm10.33.x仓库通过packageManager固定为pnpm10.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 和 pnpmOpen 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:你的端口第二用命令确认端口有响应。假设端口是7456curl -I http://localhost:7456能看到 HTTP 状态码就说明本地服务至少已经在响应。第三在 Open Design 或你的原型工具里生成一个简单 artifact确认右侧预览 iframe、页面资源、按钮状态和移动端断点都能正常显示。这一步很重要。cpolar 只负责把端口转出去不负责修复本地页面本身。如果本地就是空白页外网链接打开也还是空白页。用 cpolar 把预览端口映射成 HTTPS 地址假设你的本地预览端口是7456直接开 HTTP 隧道cpolar http 7456如果你的端口是5175cpolar http 5175如果你的端口是3000cpolar 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 端口的终端里按CtrlC如果你通过 Web UI 创建了隧道就回到http://127.0.0.1:9200停止或删除对应隧道。常见问题排查npm install 或 pnpm install 失败先看 Node 版本。Open Design 当前要求 Node 24.x 和 pnpm 10.33.xnode -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 地址打不开按链路排查本机http://localhost:端口能不能打开。curl -I http://localhost:端口有没有响应。cpolar 是否已经登录并正常运行。http://127.0.0.1:9200里隧道是否在线。映射的端口是否和真实预览端口一致。如果你重启过 dev server端口变了旧的 cpolar 隧道还指向原端口外网地址就会打不开或显示旧内容。预览链接被缓存评审过程中改了页面同事还看到旧版本可以让对方加一个查询参数https://xxxx.cpolar.top/?v20260602-1也可以让对方强制刷新浏览器。你这边确认本地页面已经更新后再看 cpolar 外网地址是否跟着更新。移动端样式问题AI 生成的页面在桌面看正常不代表手机上正常。评审前至少用浏览器开发者工具切一次移动端宽度比如390px、430px、768px。重点看顶部导航是否挤压。表格是否横向溢出。弹窗是否超出屏幕。固定底部按钮是否挡住正文。字号和行高是否还适合阅读。把 cpolar HTTPS 地址发给手机浏览器或企业微信/飞书也能快速看真实移动端效果。一个推荐的评审工作流完整流程可以固定成这样本地启动 AI 原型工具 ↓ 生成产品页 / 仪表盘 / 移动端原型 ↓ 浏览器打开 localhost 预览 ↓ 确认页面、资源、移动端断点正常 ↓ cpolar http 预览端口 ↓ 复制 HTTPS 地址发给评审人 ↓ 收集反馈并现场修改 ↓ 评审结束关闭 cpolar 隧道这套流程的好处是边界清楚AI 工具、项目目录、Agent 登录态、API Key 都留在本机外部人员只访问一个临时预览页面。本地 AI 原型生成工具越强越需要一个轻量、可控的预览出口。cpolar 刚好适合这个位置不是替你上线也不是替你管项目而是在评审那几十分钟里把localhost变成别人能点开的 HTTPS 链接。你现在卡在哪一步本地启动、端口识别、样式预览、外网访问还是安全边界不确定可以在评论区说一下我按你的卡点继续拆。