@ design- parity/ adapter- claude- 设计
克劳德设计 ReferenceAdapter 页: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技能 用于拥有)和排放承诺的可读机读符号/组件。 这个 是一个被管理的 读作 计划 写作 技术, 没有 适配器可以读取的 API 调用,所以下面承诺的导出形状不变. 但它确实使 投入 机器生成和投入 而不是手写,并打开一个 较丰富的参考文献(符号,见下文)和aref → code反向索引 (已发运:buildReverseIndex内@design-parity/resolver) (中文(简体) ). 见 文件/设计-同步-影响。 。 。 .
后推为 /design-sync,而不是一个 CanvasWriter
设计-平等船舶 没有 claude-design CanvasWriter 不运行
代码对加拿大推回这个源。 没有克劳德设计公司写API,
财务报告和审定财务报表 /design-sync帆布回推是一个 人运行的互动终端
技能 ——它没有位置 在设计-公平 无人关注的 GitHub Action 路径
(PRINCIPLES.md 1"在CI循环中无AI",4"在平稳状态下无人参与",5).
因此,反方向—— 获得你所构建的克劳德设计—— 是
/design-sync 自己,由一个人经营 替换 老年人
compose-preview-design-board 技术
要导入手建的 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 普通文档, 并带有一个嵌入式交接 显示 :
<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 数据交换小组
文档,通常由 Claude Code 发布 /design-sync - 而不是一个 HTML
输出。 已经装入 @design-parity/core是因为 loadDtcgTokens 改为 a
仅指针 DesignReference数字 :
referenceImages实值[]财务报告和审定财务报表 没有光线 (无 HTML, 无布局) crypt)——参考文献仅提供符号遵守diff.linkMethod仍然是"manifest"(没有读取API;这是一个承诺) 存档).resolve丢出一个claude-design- 如果文件缺失, 前置错误不是 JSON,或失败 DTCG 计划验证.
// 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" }
这是两个形状中最丰富的: 符号表直接来自 同步设计系统 而不是导出内置的接发块 见 文件/设计-同步-影响。 。 。 .
现场提供原型机live: 参考,第85号
承诺的导出是一个被平整的单相框. 当a design-map.json 参考:
前缀 live:,适配器代替 驱动实际可点击
浏览器中的原型 并按每个配置抓取 视图 a 包括:
更真实的参考物,它也接收到任何静态输出的平地,以及一个
每个细胞的对数与候选设备的对数 × 断点成矩阵.
// 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数字 :
new ClaudeDesignAdapter({
liveRenderer: myPlaywrightRenderer,
liveViewports: [
{ size: "compact", width: 412 },
{ size: "expanded", width: 1280 },
],
});
resolve 当 live: 校正名称无路径
原型无法读取, 或配置的取景口无法渲染 .
使用量
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输入到
在现有控制装置内:
new ClaudeDesignAdapter({ rasterizer: myRasterizer });
预先交付的货物出口 src 图像从不引用光栅.
错误
resolve 当导出缺失时, 丢出一个清晰的前缀错误
块格式不当,缺少引用的符号文件或图像,或导出
componentId 与解脱相矛盾.