Local-first, open-source alternative to Anthropic's Claude Design. MIT-licensed, BYO agent CLI — Claude Code, Kimi, Codex, or any SDK-compatible model. Composable skills · three edit paths · designs as plain HTML/JSX/CSS folders · run locally, no cloud round-trip. Generate banners, thumbnails, websites, animations, design systems.
This repository also configures its own agents. See what ai-atelie tells them →
Skill Claude Code
Keep the canvas surface coherent across its three places — the canonical starter at mcp/starters/DesignCanvas.jsx, the byte-identical demo copy at web/projects/demo/design-canvas.jsx, and the host-side wiring in web/src/lib/tweakBridge.ts plus mcp/CANVASPROTOCOL.md. Use whenever the diff touches any of those files, or…
Skill Claude Code
Run and triage AI Atelie's Critical User Journey (CUJ) for every PR — the single end-to-end test that proves a user can open the app, create a project, drive the Claude Code agent, and see the canvas render. Before running, gate by inspecting the PR diff for changes that plausibly affect the journey (routes…
Skill Claude Code
Aesthetic and convention guide for editing AI Atelie's own chrome — the editor, canvas frame, toolbars, sidebars, dialogs, settings, projects screen. Use whenever the diff touches web/src/ (especially .module.css, index.css, styles/themes.css, lib/theme.ts) or any user-facing component on the host app. Opts into the…
Skill Claude Code
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
Skill Claude Code
Run AI Atelie's journey suite and inject inline-rendering evidence (per-journey video + screenshot, in a 4-column markdown table) into the current PR's body. Use whenever the user says "post evidence", "run journeys", "update PR with videos", or after ship-task opens a PR. Wraps bun run journeys; idempotent — re-runs…
Skill Claude Code
Draft a Conventional Commits 1.0.0 message for the AI Atelie repo. Use whenever the user asks to commit, or after staging changes in this repo. Enforces the closed scope set (api|web|mcp|skills|repo|deps), imperative subjects, and a body that reads well in the auto-generated CHANGELOG.md (changelogen + bumpp pipeline).
Skill Claude Code
Take an AI Atelie task — issue, ticket, or ad-hoc ask — all the way from description to merged-ready PR. Use whenever the user says "implement X and ship it", "work on issue.
Skill Claude Code
Drive a real browser against AI Atelie's running dev server to verify a change works, and capture screenshots + video as PR evidence. Use whenever the user asks to "verify in browser", "prove it works", "add PR evidence", or before opening a PR that touches web/ or any user-facing surface. Assumes bun run dev is…
Skill Claude CodeCodex
Timeline-based motion design — animated explainer-style HTML artifacts where time advances and elements enter or exit on a schedule. Reach for this when motion IS the design, not a flourish on a static layout.
Skill Claude CodeCodex
Skill to use if user asks you to create a design system or UI kit.
Skill Claude CodeCodex
Pick one of eleven named aesthetic directions before writing any code, then execute it with discipline. Forces commitment to a specific look so output stops converging on the AI-default white-purple-Inter aesthetic.
Skill Claude CodeCodex
Run a structured anti-slop audit on the design just produced before declaring done. Catches the recognizable AI-default patterns (Tailwind indigo, two-stop trust gradients, emoji-as-icons, generic display fonts, rounded-card-with-left-border, and 20+ more) so they can be fixed before the user sees them.
Skill Claude CodeCodex
Read or write a Google-spec DESIGN.md at the project root — the cross-tool aesthetic spec that grounds every prompt in this project. Use when the user asks to capture, update, or import a design system, or when starting a project that should have a documented aesthetic direction.
Skill Claude CodeCodex
Export a selected element from the canvas as PNG, JPEG, OGraf bundle, Lottie, or video. Saves to the project's exports/ folder; the chat renders the result inline as an artifact card.
Skill Claude CodeCodex
Developer handoff package.
Skill Claude CodeCodex
Build a clickable, hi-fi prototype of a product or flow — not a wireframe, not a static mock. The user can navigate, toggle states, and feel the interaction. Reach for this whenever the design has flows, multi-screen states, or many-option situations.
Skill Claude CodeCodex
Add in-design tweak controls.
Skill Claude CodeCodex
Single self-contained file that works offline.
Skill Claude CodeCodex
Export as an editable Canva design.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: