Your idea.
Your agent. Your design.
Make a card, badge or sticker. 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. Load the cards and card-art-direction guides. Create an original card built around one motif, choose its physical stock and mark one to four foil or raised layers, show it to me in the live preview, and let's iterate.
Paste into your coding agent to get started.Pick a product and paste its prompt into your coding agent. The Makeables skill loads the matching guide from the CLI: cards, badges or stickers. Start from a style, an artwork reference 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 get core
makeables skills get cards
makeables skills get badges
makeables skills get stickers
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 card --style pearl --out card.json
makeables design create --style gtm --out badge.json
makeables new sticker --style typingmind-absolutely-right --out sticker.json
makeables design validate --file sticker.json
makeables submit --file sticker.json --dry-runEdit the JSON with your agent, validate it, then use Import JSON in the matching editor. Use makeables studio save to keep a portable package containing the design and every required image for later submission.