SuperAPI AI 工具集

design

设计与创作

查看项目

更新于 10-15 17:19

技能介绍

用途:在 Claude Code 中使用 Claude Design 预览版,把一份或多份 .dc.html 设计稿组装成多画板可缩放画布,并作为 Artifact 发布;每个 .dc.html 渲染为独立画板(独立沙箱预览 iframe),由 canvas.json 决定布局与启动视图。

主要能力:以辅助脚本 seed-canvas.mjs 从模板 payload.template.html 生成新画布文件,支持传入多个画板、图片(--image,存为裸 base64)与 canvas.json;脚本可校验(--check)与从已发布页面提取(--extract)回工作文件。保存能力(artifact-publish)可用时,查看者获得点击选择、属性面板、行内文本编辑、撤销重做,编辑本地保存后经 Save 发布给所有人;无该能力时画布只读,只能查看并导出 PNG/PDF。

必要用法:先读取应用现有设计系统与屏幕,逐像素匹配令牌与组件后编写 .dc.html 工作文件(Main.dc.html 为入口),多于一个画板时提供 canvas.json,再运行:node "<base directory>/seed-canvas.mjs" --template "<base directory>/payload.template.html" --out <名称>.html --title "<标题>" --artboard Main.dc.html --image hero.png --canvas canvas.json,然后用 Artifact 工具发布并固定 contract: "0.1.31"。更新时重新植入全新副本而非改已生成文件,再发布到同一路径。若缺少 node 或 bun,应停止说明无法组装,不得手改模板。

适用场景与限制:用作应用或网页界面设计、原型、海报等多画板视觉设计;编辑器与 claude.ai/design 不同等,发布后编辑器不再更新;保存需账号与组织策略许可,具体价格、收费与完整功能清单暂未提供。