Claude Design 迁移说明（2026-10-18）

维护人	日期	状态	定位
项目 Agent	2026-10-18	当前	记录二期原型与设计系统从 Claude Design 迁入仓库的来源、结构和更新方法

1. 背景

国内使用 Claude Code 存在账号可用性风险。二期原型和设计系统原先只存在于 Claude Design 画布，账号一旦不可用，团队会同时失去源文件和评审入口。2026-10-18 把两个画布的源文件导出到仓库，并做成可直接打开、可交互的静态站点。

需求依据不受本次迁移影响：需求仍以 docs/prd/二期需求-SSOT.md 和主 Epic 为准，原型只承载页面与操作表达。

2. 来源

内容	Claude Design 画布	导出日期	仓库位置
二期 Hi-Fi 原型	二期 Hi-Fi，46 个画板	2026-10-18	`phase2/interactive/`
创信贸易设计系统	创信贸易设计系统，第 5 版	2026-10-18	`design-system/`

两个画布都是公开分享链接，导出时不需要登录账号。导出保留文件内容、画布元数据和组件预览，不保留 Claude 的编辑能力。

3. 目录结构

docs/design/
├── design-system/
│   ├── README.md            # 设计规范正文
│   ├── tokens.json          # 颜色、文字、间距、圆角、阴影、布局 token
│   ├── design-system.json   # 画布元数据（组件、库、资产）
│   ├── index.html           # 由脚本生成的静态查看页
│   ├── components/
│   │   ├── bundle.css       # Cx 设计系统样式
│   │   ├── bundle.js        # Cx 组件与 navFor、labelWidthFor
│   │   ├── index.d.ts       # 组件类型说明
│   │   ├── lib/             # React 18、antd 6、dayjs、图标库
│   │   └── */preview.html   # 16 个组件预览（已补齐依赖）
│   └── assets/Logos/        # 品牌图标
└── phase2/interactive/
    ├── index.html           # 46 个画板的检索与入口
    ├── canvas.json          # 画板标题、尺寸与画布坐标
    ├── support.js           # DC 运行时（含 React）
    └── B*.dc.html           # 46 个可交互画板

原型画板引用 ../../design-system/components/，组件预览引用同目录的 ../lib/ 和 ../bundle*.js|css。设计系统只有一份，原型和预览共用，不再各自复制。

4. 本地查看

在仓库根执行：

python3 -I scripts/design/serve.py

脚本默认服务 docs/design，只绑定 127.0.0.1:8766，并把 .md、.json、.html 按 UTF-8 返回。

打开：

总入口：http://127.0.0.1:8766/index.html
可交互原型：http://127.0.0.1:8766/phase2/interactive/index.html
设计系统：http://127.0.0.1:8766/design-system/index.html

必须通过 HTTP 打开，不能用 file://。画板需要加载同目录的 support.js 和设计系统脚本。

5. 重新生成

设计系统查看页和原型索引页都由脚本生成：

python3 -I scripts/design/build_design_system_site.py
python3 -I scripts/design/build_interactive_index.py

build_design_system_site.py 还会检查每个 components/*/preview.html，缺少依赖时补上 React、antd 和 bundle 的引用。脚本只读仓库文件，不访问网络。

6. 从 Claude Design 更新

画布有更新时，按以下步骤重新导出，再执行上面的生成脚本：

1. 用浏览器打开画布的公开分享链接。 2. 在开发者工具中找到 frame.claudeusercontent.com/_f/<版本>/ 下的 _files.json。 3. 下载 _files.json 中 project/ 和 index.html 的文件；画板项目的运行时是 artifact-type/dc-runtime.js，另存为 phase2/interactive/support.js。 4. 设计系统项目下载 project/README.md、tokens.json、design-system.json、components/ 和 assets/。 5. 把画板里的 ds/cx/components/ 引用改为 ../../design-system/components/。 6. 执行第 5 节的两个生成脚本，打开页面核对控制台无错误、交互可用。 7. 更新本文件的导出日期和画布版本。

导出时只读取公开画布内容，不需要账号凭据；不要把浏览器 cookie、令牌或账号信息写入仓库。

7. 验证记录

2026-10-18 在本机静态服务上核对：

检查	结果
设计系统查看页	正常渲染 README、颜色、文字、间距、圆角、阴影、布局、组件和资产
组件预览	AppShell 等预览正常渲染，依赖从本地加载，无外网请求
原型索引	46 个画板全部列出，搜索可用，缩略图正常
画板运行	B01、B09 等画板正常渲染，控制台无资源错误
交互	B01 切换菜单与岗位正常；B09 表单控件正常显示和输入

更完整的浏览器验收在发布到托管地址后按评审范围执行。

8. 托管

两个公开评审入口，内容同源：

入口	地址	说明
妙搭	`https://hq50l0w7z6o.feishu.link/app/app_17g876ju0xh`	应用 `app_17g876ju0xh`，公开访问、不要求登录；lark-cli 使用配置档 `personal`（`cli_a93f87828379dcca`）
Cloudflare Pages	`https://chuangxin-mockups.pages.dev`	项目 `chuangxin-mockups` 的 production
Cloudflare 预览	`https://prototype-20261018.chuangxin-mockups.pages.dev`	分支 `prototype-20261018`，用于发布前核对

另一个 lark-cli 配置档为 鸣蝉（cli_aa8dfe4990781cd8），用于公司侧任务；妙搭发布固定使用 personal。

妙搭会在 HTML 的 <head> 开头注入 <base href="/app/app_17g876ju0xh/">，普通相对路径会按应用根解析。发布妙搭前先生成专用副本：

python3 -I scripts/design/build_miaoda_site.py
lark-cli apps +html-publish --profile personal --as user --app-id app_17g876ju0xh --path build/design-miaoda

build_miaoda_site.py 会把 *.dc.html 改名为 *.html，把链接和资源路径改成相对应用根的路径，目录入口保留 index.html。Cloudflare 直接发布 docs/design：

npx wrangler pages deploy docs/design --project-name=chuangxin-mockups --branch=main

托管只影响评审入口，不影响仓库内源文件的权威性。

本页由仓库内的 Markdown 源文件生成；修改内容请改源文件后重新运行 python3 -I scripts/design/build_doc_pages.py。