Your idea.
Your agent. Your design.
Make a card, badge, sticker, kit or brand. Your agent opens the shared Design Studio, composes editable layers and keeps refining the same preview with you.
One prompt. Your agent takes it from there.
Install and use the makeables skill from crafter-station/makeables-community.
Paste into your coding agent to get started.Pick a product and paste its prompt into your coding agent. The Makeables skill loads the core guide and one guide for the job: cards, badges, stickers, kits, sheets, images or wallet. Start from a style, an artwork reference, an event URL or your own idea.
Personalized badges need a portrait and display name. Cards and stickers do not. A style reference supplies inspiration; your agent asks only for missing details. Creating, editing, saving and exporting need no account.
Prefer to install manually?
npx skills add crafter-station/makeables-community --skill makeables --global
npm install --global makeables
makeables skills get coreThe first command installs makeables. The second adds the skill to your coding agent. Choose your agent in the installer, then start a session with the skill available.
The preview stays with you.
Your agent opens the canvas in your session's built-in browser when one is available. Otherwise it opens your default browser. That same tab stays editable while you work together.
“Bigger type. More contrast. Keep my photo, and make the back feel like a festival ticket.”
Keep asking in the same conversation. Move a layer yourself, change the name, flip the design or ask your agent for a different direction. The agent reads your latest changes before applying its own.
Keep the local preview process running while you design. At the end, save in the editor or export a PNG and the editable design. Keep your original photo and any generated artwork too.
Ready to share? Submit from the same workflow.
Cards, badges and stickers all use /submit. The studio's Submit action carries your editable design into its preview, credits and consent form. Your agent can send the same package directly with makeables submit.
makeables submit --file design.makeables.json --dry-run
makeables submit --file design.makeables.json --yes
makeables submit status --file design.makeables.jsonApprove the exact design before submitting, then connect your account when asked. Submissions stay private while pending review and join the gallery after approval. Packages preserve editable layers, materials and images. Badges also include their participant details; stickers have one transparent material preview and no participant data. Only the author can withdraw a submission.
Explore community designs ↗A starting point, never a ceiling.
Ask for the energy of Vibecode Fest, the photographic character of She Ships, a pixel-art hackathon pass, a holographic sticker or something entirely yours. Your agent can compose each face, move and layer graphics, reshape the typography, treat your portrait and tune the physical material.
The catalog styles are references. Every supported layer and material control is available to your agent. Stickers share the layer editor, versioned library and sidebar gallery, with glitter, holographic and vinyl finishes. Drag a corner to curl the sheet, explore six physical material layers, or use the bottom dock to change styles. A focused preview gives the sticker more room while Save, PNG and Submit stay close. PNG exports preserve transparency and exclude the stage, shadows and peel.
Image generation, only when you want it.
For pixel art, a new illustration or a transformed photo, your agent can offer ai-cli. It asks before installing it or starting a paid generation. Ordinary layout changes and editable photo filters need neither.
# Optional: only for AI image transformations
npm install --global ai-cliGeneration uses your AI Gateway credentials and credits, separately from your coding agent's subscription. Your agent prepares the image outside the website, checks the result and brings it back into the same design. Your keys stay in your local environment.
The small skill stays up to date.
The installed skill is a short entry point. It loads its complete workflow directly from your installed CLI, so the commands and instructions travel together.
makeables skills list
makeables skills get core
makeables skills get kits
makeables preflight
makeables doctorCLI and browser connection details
Native WebMCP and the local preview connection share the same editor tools, validation, revision checks and undo. The local connection lets your agent edit the visible canvas even when its browser has no native WebMCP. Agent-browser can use a compatible existing browser connection; it cannot attach to every browser automatically.
makeables studio start --product card
makeables studio start --product badge
makeables studio start --product sticker
# For an agent with a built-in browser panel
makeables studio start --product sticker --no-open --jsonUse the returned session URL for tool discovery and edits. The local process listens only on your computer. Keep its session URL private and its preview tab open. The skill handles this connection during normal use.
Prefer a document?
makeables new sticker --blank --name Logo --out sticker.json
makeables layer add --file sticker.json --sticker logo.png
makeables layer add --file sticker.json --kind text --params '{"text":"Ship it"}'
makeables render --file sticker.json --appearance material --out sticker.png
makeables submit --file sticker.json --dry-runEvery piece is a JSON document your agent edits with CLI commands, never with custom scripts. Use Import JSON in the matching editor to see it live, and makeables badge package or makeables studio save for a portable package. For an event or brand, makeables brand from-url collects the cover, logos and palette, and makeables brand preview shows the page your brand gets at /brands/<slug> after review.