# @design-parity/adapter-claude-design 中文文档

规范地址：https://npmcn.com/package/%40design-parity/adapter-claude-design/

版本：1\.18\.0
npm 元数据更新时间：2026-11-07T13:54:22.695Z
中文译文更新时间：2026-11-12T02:01:15.070Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40design-parity/adapter-claude-design
原文对照：https://npmcn.com/package/%40design-parity/adapter-claude-design/?lang=original
项目主页：https://github.com/yschimke/design-parity/tree/main/packages/adapters/claude-design#readme
源码仓库：https://github.com/yschimke/design-parity

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：94.5 kB，34 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-06-14T05:42:49.526Z
- 最新版本发布：2026-11-07T13:54:22.334Z
- 近 30 天下载量：4109（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：102（近 12 个月 102 个）

## 中文简介

Claude Design Reference 适配器:通过设计-map.json解决一个承诺的HTML导出,将它毫无头绪地光滑化,并正常化为设计参考. Claude Design没有读取 API 和 Figma 导出 .

## 安装

```sh
npm install @design-parity/adapter-claude-design
```

也可以使用：`pnpm add @design-parity/adapter-claude-design`、`yarn add @design-parity/adapter-claude-design`、`bun add @design-parity/adapter-claude-design`

## README

# @ design- parity/ adapter- claude- 设计

克劳德设计 [`ReferenceAdapter`](https://npmcn.com/package/core/src/types.ts) 页:1 设计平等。 仅取决于 `@design-parity/core`。 。 。 .

## 没有克劳德设计读取API

Claude Design(自2026-06起的beta)曝光 **没有读取 API 和 Figma 导出**, (中文(简体) ), 所以——与法格玛适配器(REST + 代码连接)甚至斯地克(SDK)不同——那里 运行时不需要获取 。 参考文献为 **承诺的 HTML 导出** 检查了消费者的回购。 因为没有机器链接 电话,信件总是一个 `design-map.json` 条目和结果 `DesignReference` 总是 `linkMethod: "manifest"`。 。 。 .

> **`/design-sync` (2026-06): (中文(简体) )** 克劳德代码 `/design-sync` 现在同步一个设计 包括将已建成的UI带回 Claude Design (反向方向: [`compose-preview-design-board`](https://github.com/yschimke/skills) 技能 用于拥有)和排放承诺的可读机读符号/组件。 这个 是一个被管理的 _读作 计划 写作_ 技术, **没有** 适配器可以读取的 API 调用,所以下面承诺的导出形状不变. 但它确实使 投入 _机器生成和投入_ 而不是手写,并打开一个 较丰富的参考文献(符号,见下文)和a `ref → code` 反向索引 (已发运: `buildReverseIndex` 内 `@design-parity/resolver`) (中文(简体) ). 见 [文件/设计-同步-影响](https://npmcn.com/docs/claude-design-sync-impact.md)。 。 。 .

### 后推为 `/design-sync`,而不是一个 CanvasWriter

设计-平等船舶 **没有 `claude-design` `CanvasWriter`** 不运行 代码对加拿大推回这个源。 没有克劳德设计公司写API, 财务报告和审定财务报表 `/design-sync`帆布回推是一个 **人运行的互动终端 技能** ——它没有位置 在设计-公平 无人关注的 GitHub Action 路径 (PRINCIPLES.md 1"在CI循环中无AI",4"在平稳状态下无人参与",5). 因此,反方向—— 获得你所构建的克劳德设计—— 是 `/design-sync` 自己,由一个人经营 **替换** 老年人 [`compose-preview-design-board`](https://github.com/yschimke/skills) 技术 要导入手建的 HTML。 动作只读的工作保持不变: 承诺的参考 并传播它。 (Contrast Figma, 地点) `FigmaCanvasWriter` + 键 选入 `code-led` 推倒的存在 正是因为那座桥是一个 非交互式 REST/ plugin 写入。 )

```
design-map.json ──▶ design/reference/*.html ──▶ rasterize ─┐
   (manifest)         (committed export)        (headless)  ├─▶ DesignReference
                          └─ handoff manifest ──▶ tokens ───┘     (manifest)
```

## HTML 导出

承诺导出为 HTML 普通文档, 并带有一个嵌入式交接 显示 :

```html
<script type="application/design-parity+json">
  {
    "componentId": "ui/Card.kt#OfferCard",
    "tokens": { "spacing": { "padding": 16 }, "radius": { "corner": 12 } },
    "images": [
      { "state": "default", "theme": "light", "size": "medium",
        "src": "./offer-card.light.png" }
    ]
  }
</script>
```

-   **`images[].src`** ——一个预发式PNG,相对于HTML文件解决. 内容 `width`编号 :`height` 因此参考维度可以 永远不要从承诺字节中漂移。 无的变体 `src` (或出口 没有 `images` 完全没有) **无光地头** 从文档.
-   **`tokens`** ——内含 `DesignTokens`,或通往交接符的字符串路径 文件( 相对于 HTML) , 用于符号遵守检查 .
-   **`componentId`** ——可选;在提交时必须与组件相匹配 解决者要求, 否则 `resolve` 掷出.

## 同步的代号 :`.json` 页:1

当a `design-map.json` 参考结束于 **`.json`**适配器视之为 **同步设计系统标志文物** 承诺 [W3C DTCG 数据交换小组](https://tr.designtokens.org/) 文档,通常由 Claude Code 发布 `/design-sync` - 而不是一个 HTML 输出。 已经装入 `@design-parity/core`是因为 `loadDtcgTokens` 改为 a **仅指针** `DesignReference`数字 :

-   `referenceImages` 实值 `[]` 财务报告和审定财务报表 **没有光线** (无 HTML, 无布局) crypt)——参考文献仅提供符号遵守diff.
-   `linkMethod` 仍然是 `"manifest"` (没有读取API;这是一个承诺) 存档).
-   `resolve` 丢出一个 `claude-design`\- 如果文件缺失, 前置错误不是 JSON,或失败 DTCG 计划验证.

```jsonc
// design-map.json — point the ref at the synced DTCG document
{ "code": "ui/Card.kt#OfferCard", "source": "claude-design",
  "ref": "design/design-system.tokens.json" }
```

这是两个形状中最丰富的: 符号表直接来自 同步设计系统 而不是导出内置的接发块 见 [文件/设计-同步-影响](https://npmcn.com/docs/claude-design-sync-impact.md)。 。 。 .

## 现场提供原型机`live:` 参考,第85号

承诺的导出是一个被平整的单相框. 当a `design-map.json` 参考: 前缀 **`live:`**,适配器代替 **驱动实际可点击 浏览器中的原型** 并按每个配置抓取 **视图** a 包括: 更真实的参考物,它也接收到任何静态输出的平地,以及一个 每个细胞的对数与候选设备的对数 × 断点成矩阵.

```jsonc
// design-map.json — opt one component into live-render
{ "code": "ui/Card.kt#OfferCard", "source": "claude-design",
  "ref": "live:design/prototypes/offer-card.html" }
```

-   **专访.** 仅a `live:`\- 前缀的可读读取此路径;每个未前缀的可读读取 继续打火机 **静态导出** 路径,不变。 镜像 `figma:` 编号 : `stitch:` 参考计划.
-   **多视港.** 每个配置 `LiveViewport` 变成一个 `Image` 键入 联合国 `size` 插槽( e)`compact` 编号 : `medium` 编号 : `expanded`) (中文(简体) ). 默认为单个 紧凑框架; 通过 `liveViewports` 更广阔的矩阵.
-   **同样的合同.** 结果是正常的 `DesignReference` 与 `linkMethod: "manifest"` ——diff引擎无法从静态输出中分辨出.
-   **注射可导出器.** 默认 `browserLiveRenderer` 无头驱动器 铬/铬 `PATH` (一组) `CHROME_BIN`)精神上与 发光器——不捆绑浏览器自定义依赖性. 已经打电话了 运行 **剧作家** (或主机渲染器) `liveRenderer`数字 :

```ts
new ClaudeDesignAdapter({
  liveRenderer: myPlaywrightRenderer,
  liveViewports: [
    { size: "compact", width: 412 },
    { size: "expanded", width: 1280 },
  ],
});
```

`resolve` 当 `live:` 校正名称无路径 原型无法读取, 或配置的取景口无法渲染 .

## 使用量

```ts
import { ClaudeDesignAdapter } from "@design-parity/adapter-claude-design";

const adapter = new ClaudeDesignAdapter();
const ref = await adapter.resolve(
  "ui/Card.kt#OfferCard",          // resolver-supplied code handle
  "design/reference/offer-card.html", // the design-map ref (repo-relative)
  { repoRoot: process.cwd(), env: process.env },
);
```

### 牧场化

将原始 HTML 变体缩写为 `browserRasterizer`,驱动 a 无头 **铬/铬已经上线 `PATH`** (一组) `CHROME_BIN` 指向一个 特定二进制) ——不绑定浏览器自定义依赖,保留 软件包唯一的运行时间依赖 `@design-parity/core`输入到 在现有控制装置内:

```ts
new ClaudeDesignAdapter({ rasterizer: myRasterizer });
```

预先交付的货物出口 `src` 图像从不引用光栅.

## 错误

`resolve` 当导出缺失时, 丢出一个清晰的前缀错误 块格式不当,缺少引用的符号文件或图像,或导出 `componentId` 与解脱相矛盾.

## 常见问题

### @design-parity/adapter-claude-design 是什么？

Claude Design Reference 适配器:通过设计-map\.json解决一个承诺的HTML导出,将它毫无头绪地光滑化,并正常化为设计参考\. Claude Design没有读取 API 和 Figma 导出 \.

### 如何安装 @design-parity/adapter-claude-design？

在项目目录运行 npm install @design-parity/adapter-claude-design，或使用 pnpm add / yarn add / bun add。

### @design-parity/adapter-claude-design 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @design-parity/adapter-claude-design 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @design-parity/adapter-claude-design 可以商用吗？

@design-parity/adapter-claude-design 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @design-parity/adapter-claude-design 的下载量有多少？

根据 npm 官方下载统计，@design-parity/adapter-claude-design 在 2026/10/12 – 2026/11/10 这 30 天内被下载 4,109 次，日均约 137 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @design-parity/adapter-claude-design 还在维护吗？

最新版本 1\.18\.0 发布于 2026/11/07（4 天前）；至今共发布 102 个版本，其中过去 12 个月发布了 102 个；首次发布于 2026/06/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。