1 added, 1 removed. Audit A to A.
---
name: compose-preview-design-board
description: Assemble rendered Compose @Preview PNGs into a single self-contained HTML design board for Claude Design and other design-tool imports. Use when turning a set of rendered previews into one coherent design brief — grouped, captioned, and ordered — rather than handing over loose screenshots. Pairs with the compose-preview skill.
---
# Compose Preview — Design Board
Assemble the PNGs produced by `compose-preview` into a single, self-contained
HTML **design board** — categories, groups, captions, and layout — so a set of
renders travels as one coherent brief instead of loose screenshots. The board
is built for import into Claude Design (and similar design tools).
This skill assumes the **compose-preview** skill is installed — it owns the
renderer, CLI, and Gradle plugin that produce the PNGs this skill arranges.
Check first with `compose-preview --version`; if it's missing, ask the user to
run the bootstrap installer (which covers the compose-preview skills):
```sh
- curl -fsSL https://raw.githubusercontent.com/yschimke/compose-ai-tools/main/scripts/install.sh \
+ curl -fsSL https://raw.githubusercontent.com/yschimke/skills/main/scripts/install.sh \
| bash
```
## Source
This skill is maintained at
[github.com/yschimke/skills](https://github.com/yschimke/skills) under
`skills/compose-preview-design-board/`. To check for updates, compare the
installed copy against `main` (e.g. `git ls-remote
https://github.com/yschimke/skills HEAD`). The renderer and CLI that produce
the input PNGs ship from
[github.com/yschimke/compose-ai-tools](https://github.com/yschimke/compose-ai-tools).
## When to use this skill
- You have a set of rendered `@Preview` PNGs and want to hand them to a designer
or to Claude Design as a structured brief — grouped by feature/screen, with
captions and intent notes — not a flat folder of images.
- You want one portable artifact (a single HTML file, images inlined) that can
be opened in a browser, served from a branch / GitHub Pages, or dropped into a
design tool.
For *rendering* the previews, see the **compose-preview** skill. For *reviewing*
a UI PR by diffing base vs head renders, see **compose-preview-review**. This
skill is the export/presentation step that sits on top of those.
## Workflow
1. **Render previews.** Use the compose-preview CLI to produce PNGs and the
manifest of what was rendered:
```sh
compose-preview show --module <m> --json > /tmp/<m>-show.json
```
2. **Write a board spec.** A JSON document describing how to arrange the renders
(categories → groups → items, each item pointing at a PNG path). See
[Board spec schema](#board-spec-schema) below.
3. **Generate the HTML.** Build one self-contained file from the spec — every
referenced PNG inlined as base64, missing PNGs shown as visible placeholders
rather than failing the build, and **deterministic output** (no timestamps or
random ids, so re-runs diff cleanly). Run your project's builder if it ships
one; otherwise generate it from the [contract below](#the-builder-script):
```sh
# spec may also be piped on stdin instead of --spec
python3 scripts/build-design-board.py --spec board-spec.json --out design-board.html
```
4. **Import to Claude Design.** Pick the route that fits:
- **Web capture (best fidelity)** — open `design-board.html` in a browser, or
serve it (GitHub Pages / a branch), and use Claude Design's web capture on
the page.
- **File upload** — drag the `.html` (or the individual PNGs) into Claude
Design's drop zone.
- **Connect the GitHub repo** for design-system context alongside the board.
Grouping, captions, and flow order travel with the images, so the board reads
as one brief rather than a pile of screenshots.
**Targeting Figma instead?** Don't hand-place these renders into Figma from
here — use the [**figma-catalog-import**](../figma-catalog-import/SKILL.md)
skill. It owns the Figma side (the `@design-parity/figma-plugin`, reconcile
by `componentId`, mode-awareness) and takes either a whole-system catalog or
this board's curated render set. Claude Design is a light HTML/PNG drop-in and
stays here; Figma is the one heavy destination and lives there.
## Board spec schema
JSON, top-down:
| Level | Fields |
|---|---|
| **Top level** | `title`, `tagline`, `footer`, optional `palette` (colour swatches), `categories[]` |
| **Category** | `badge`, `title`, `intro`, `groups[]` |
| **Group** | `title`, `note` (the design intent / rationale), `layout`, `items[]` |
| **Item** | `src` (PNG path from compose-preview), `caption`, optional `sub` (state / size / theme) |
`layout` controls how a group's items are arranged:
- `"row"` — left-to-right wrapping; good for phone screens.
- `"grid"` — auto-fill grid; good for theme swatches and tiles.
- `"wide"` — full-width frames; good for size matrices.
## The builder script
A reference builder ships beside this `SKILL.md` at
[`scripts/build-design-board.py`](scripts/build-design-board.py) — a small,
dependency-free Python 3 script (no `pip install`). It reads the spec, inlines
every image, and writes one self-contained HTML file. Swap in your project's own
builder if you have one, as long as it holds the same contract:
- reads the spec from `--spec <file>` **or** stdin, and writes to `--out <file>`
**or** stdout;
- inlines every item `src` PNG as a `data:image/png;base64,…` URI, so the output
is one file with **no external dependencies**;
- renders a missing or unreadable PNG as a **visible placeholder** — never fails
the build;
- emits **deterministic** HTML — no timestamps, random ids, or absolute paths —
so re-runs diff cleanly;
- resolves item `src` paths against `--base` (default: the current directory),
so a spec stays portable — never hardcode an absolute checkout path like
`/home/user/<project>`, or the board breaks in every other checkout.
## Related
- [**compose-preview** skill](../compose-preview/SKILL.md) — render the
`@Preview` PNGs this board is built from: CLI, Gradle plugin, capture modes.
- [**compose-preview-review** skill](../compose-preview-review/SKILL.md) —
review a UI PR by rendering base and head and diffing them.
- [**compose-design-catalog** skill](../compose-design-catalog/SKILL.md) — the
whole-system sibling of this skill: instead of a curated subset, catalog an
entire component system into a durable, tool-neutral bundle.
- [**figma-catalog-import** skill](../figma-catalog-import/SKILL.md) — take a
board or catalog **into Figma** (plugin + reconcile). The Figma destination
adapter for both arrangers.