figma-make-exporter

Files (1)

• SKILL.md

SKILL.md (first lines)

# Figma 导出壳子规范

本技能用于把当前页面补齐为可导出的 Figma Make 资产结构，并确保最终通过后台导出接口拿到的产物是 `名称.fig`。

这里的最终下载产物不是 `.make` 压缩包，而是项目目录中的 `canvas.fig` 二进制文件。后台会直接把它以 `名称.fig` 的文件名下载给用户。

## 核心目标

- 让当前页面具备稳定的 Figma 导出资产
- 确保导出的 `canvas.fig` 与当前 Axhub 页面内容一致
- 保留所有原始 Figma Make 资产，避免后续无法再次回写导出

## 关键原则

1. **先同步页面，再执行 pack**

如果当前页面的真实入口是根目录 `index.tsx` / `style.css`，而导出壳子使用的是 `src/App.tsx` / `src/index.css`，那么必须先把两者同步，再运行 `canvas-fig-sync.mjs pack`。

不要只更新根目录页面却直接回写旧的 `src/App.tsx`，否则导出的 `.fig` 内容会和当前页面不一致。

2. **优先做“薄壳”同步**

只要结构允许，优先让导出壳子复用当前页面入口，而不是再维护一套容易漂移的拷贝：

- `src/App.tsx` 优先作为薄包装，直接复用当前页面主组件或共享组件
- `src/index.css` 优先复用或导入根目录 `style.css` 的真实样式来源
- 如果必须复制代码，也要在本次任务里一起更新到一致

3. **保留原始资产**

如果目录里已经存在以下文件，必须保留：

- `canvas.fig`
- `meta.json`
- `ai_chat.json`
- `thumbnail.png`
- `canvas.code-manifest.json`
- `images/`

4. **使用固定目录结构**

为了降低后续维护成本，页面目录采用固定职责分层：

```text
<page>/
├── index.tsx          # Axhub 运行时适配层
├── style.css          # 根入口样式转发层
└── src/
    ├── App.tsx        # Figma 导出薄壳
    ├── main.tsx       # Vite 挂载层
    ├── index.css      # Figma 入口样式层
    ├── components/    # 页面视觉与交互主体
    └── styles/        # 共享样式
```

固定约束：

- 根目录 `index.tsx` 只做 Axhub 运行时适配，不再复制一套页面视觉实现
- `src/App.tsx` 只做 Figma 导出薄壳，不再复制一套页面业务逻辑
- 共享页面主体应尽量落在 `src/components/**`
- 共享样式应尽量落在 `src/styles/**`

如果你在生成或改造这些文件，请直接在 `index.tsx`、`src/App.tsx`、`src/main.tsx` 顶部写清楚职责注释，提醒后续维护者不要让两套入口漂移

5. **执行本技能后的最终项目必须符合上述固定结构**

这不是建议项，而是验收约束。

如果当前项目结构不满足这套职责分层，执行本技能时应先重构到该结构，再继续生成或回写 `canvas.fig`。

## 当前导出产物

后台导出接口：

```text
GET /api/export-make?path=prototypes/<page-name>
```

接口行为：

- 使用 `canvas-fig-sync.mjs pack` 把当前源码回写到 `canvas.fig`
- 刷新 `canvas.code-manifest.json`
- 更新 `meta.json.exported_at`
- 直接下载 `canvas.fig`，文件名为 `名称.fig`

## 使用场景

### 场景 A：项目由 Figma Make 导入，已有 `canvas.fig`

此时目标不是新建结构，而是把当前页面同步回已有导出壳子，然后重新回写 `canvas.fig`。

**步骤**：

1. 检查并同步当前页面和导出壳子

重点核对：

- 根目录 `index.tsx`
- 根目录 `style.css`
- 导出壳子 `src/App.tsx`
- 导出壳子 `src/index.css`
- 导出壳子依赖的 `src/components/**`、`src/pages/**`、`src/styles/**`

2. 回写 `canvas.fig`

```bash
node scripts/canvas-fig-sync.mjs pack \
  --fig src/prototypes/<page-name>/canvas.fig \
  --from src/prototypes/<page-name> \
  --prune-missing \
  --sanitize-for-export
```

3. 刷新 manifest

```bash
node scripts/canvas-fig-sync.mjs inspect \
  --fig src/prototypes/<page-name>/canvas.fig \
  --manifest src/prototypes/<page-name>/canvas.code-manifest.json

From fern-ok/prototype-demo, Apache-2.0.

More from fern-ok/prototype-demo