# Makeables

> Merch you can hand out, made with your agent: stickers, badges, cards and kits for an event or a brand, ready for the print shop or the iPhone Wallet. Humans and coding agents share the same canvas.

## When to use Makeables

- The user wants stickers, a sticker sheet, badges or Wallet card artwork, for themselves, an event or a brand.
- The user shares a Luma or Eventbrite link and wants merch for that event, or a website and wants pieces in that brand.
- The user needs print-ready files (sheet PDFs with cut lines, badge fronts and backs) or a card installed in the iPhone Wallet.

Do not use Makeables for general illustration, slides, web pages or video.

How to call it: install the skill (npx skills add crafter-station/makeables-community --skill makeables --global), run makeables skills get core, then load one guide. Every docs page has Markdown: send Accept: text/markdown or open https://makeables.dev/docs/guides/<name>.md.

## Docs

- Docs: https://makeables.dev/docs
- Guides: https://makeables.dev/docs/guides
- About: https://makeables.dev/about
- Contact: https://makeables.dev/contact (railly@makeables.dev)
- Privacy: https://makeables.dev/privacy
- Sitemap: https://makeables.dev/sitemap.xml

## Start

- Badge studio: https://makeables.dev/make/badge
- Card studio: https://makeables.dev/make/card
- Gallery: https://makeables.dev/gallery
- Human and agent guide: https://makeables.dev/docs#agents
- Install CLI: npm install --global makeables
- Load the versioned workflow: makeables skills get core, then one guide: cards, badges, stickers, kits, sheets, images or wallet

Ask for a photo or local image path, then use makeables doctor to check dependencies.
Ask before installing missing agent-browser. Offer ai-cli only for requested image transformations.
Build with CLI commands (new, layer add, layer set, badge package, kit, brand), never custom scripts. For a brand or event, run makeables preflight first.

## Persistent preview

makeables studio start opens the operating system's default browser.
With an available built-in browser panel, start with --no-open --json and open data.url there.
Keep that process and the same preview tab alive for all iterations.
Only one tab owns the connection; do not open its private session URL in another browser for verification.

makeables studio tools --url "$MAKEABLES_URL" --json
makeables studio call badge_inspect --url "$MAKEABLES_URL" --params '{"section":"state"}' --json

The local connection uses the same editor tools and validation even without native WebMCP.
Use agent-browser for visual verification and connect to the existing preview when that browser supports it.
Do not replace the user's preview with agent-browser's separate automation browser.

## Browser tools

The /design page registers native WebMCP tools when document.modelContext is available:
badge_inspect, badge_edit, badge_set_participant, badge_set_image, badge_get_image, badge_view, badge_library, badge_export, badge_cancel.

Discover the actual tool metadata before invocation. Start with badge_inspect section state. Each edit requires the expectedRevision from current state or the last receipt. Invalid or stale changes are rejected. Edits share the UI's validation, locks and undo. To cancel, inspect operation.id and invoke badge_cancel with operationId. Completed writes and downloads are not rolled back.

With agent-browser:
agent-browser --session badges --webgpu open https://makeables.dev/design
agent-browser --session badges webmcp list badge_inspect --json
agent-browser --session badges webmcp invoke badge_inspect --params '{"section":"state"}' --json

## Generation boundary

The coding agent reasons about layouts. Browser tools never call an LLM or accept API keys.
The chat in the /make canvas runs a model server-side for signed-in visitors and returns the same editable documents.
Optional image generation/transformation runs externally with ai-cli and the user's AI Gateway credentials.
The agent can explicitly export an image, transform it, inspect it, and import its bytes.
Model reference support and transparent output vary. Gateway credits are separate from the coding agent subscription.

Shared profile/photo data and saved designs stay in this browser. Exported JSON has no embedded photos.
For an offline workflow, use makeables styles list, makeables design create and makeables design validate, then import the JSON and its images in the editor.