SuperAPI AI 工具集

compose-preview-design-board

设计与创作

查看项目

更新于 10-16 05:54

技能介绍

用途:将 Compose @Preview 渲染出的 PNG 组织成一个自包含 HTML 设计板,按分类、分组、说明与布局呈现,方便作为结构化简报交给设计师或 Claude Design 等设计工具,而不是散落的截图。

主要能力:board spec 为 JSON,自上而下为顶级(title、tagline、footer、可选 palette、categories[])、Category(badge、title、intro、groups[])、Group(title、note、layout、items[])、Item(src、caption、可选 sub)。layout 支持 row(横向换行,适合手机屏)、grid(自动填充,适合主题色板)、wide(全宽,适合尺寸矩阵)。生成器会把每个 PNG 内联为 base64、缺失图显示占位而不构建失败,输出确定性 HTML。

使用方式:先用 compose-preview 渲染,如 compose-preview show --module <m> --json > /tmp/<m>-show.json;再编写 board spec;然后生成:python3 scripts/build-design-board.py --spec board-spec.json --out design-board.html(spec 也可从 stdin 传入)。导入 Claude Design 可选网页捕获(浏览器打开或用 GitHub Pages 提供服务)或文件上传。依赖 compose-preview,可先运行 compose-preview --version 检查,缺失时执行 npx skills add yschimke/skills --global --yes --skill compose-preview --skill compose-preview-design-board;无 Node 时用 curl -fsSL https://raw.githubusercontent.com/yschimke/skills/main/scripts/install.sh | bash。更新用 compose-preview update 与 npx skills update。目标为 Figma 时应改用 figma-catalog-import 技能。

限制:构建脚本为无依赖 Python 3,需按约定解析 spec 与 --base(默认当前目录),避免硬编码绝对路径。其他细节暂未提供。