Skip to content
UXClaim
Design Ops

AI Atelie

Local-first, open-source design tool. Bring your own AI agent (Claude Code, Kimi, Codex). Generate designs as HTML/JSX/CSS folders with instant tweaks, inspe...

View source More in Design Ops

What it does

AI Atelie is a local-first, open-source design atelier that lets you generate websites, banners, animations, and design systems using any AI agent CLI you already have installed — Claude Code, Kimi K2, Codex, or SDK-compatible models. Each design lives as a plain folder of HTML, JSX, and CSS that you and an agent shape together through chat, in-design controls, or direct editing.

How it works

Run designs locally in your browser with zero cloud round-trips. Three edit paths let you iterate at different speeds: tweak predefined controls instantly, use the inspector for ad-hoc CSS changes, or ask the agent to bake permanent changes into source. Projects are composable — fork skills, templates, and design systems. Output as standalone HTML, Canva designs, PNG/JPEG, or handoff packages for developers.

Use cases

  • Generate social media assets (LinkedIn banners, Instagram posts) with style variations
  • Build interactive prototypes with real working interactions
  • Create design systems and UI kits from scratch
  • Produce motion graphics and animated videos
  • Export designs for downstream tools (video editors, Canva, developer handoff)

Who benefits

Design practitioners and product teams who want AI-assisted design without cloud lock-in, proprietary formats, or rate limits. Ideal for solo designers, design ops teams, and anyone already using local AI agents.

Frequently asked questions

How do I install and run AI Atelie?
Clone the repo, install Bun 1.x, run `bun install && bun run dev`, then open http://localhost:5173. You'll need Claude Code, Kimi CLI, or another SDK-compatible agent on your PATH. The repo ships with a demo project so you can explore before creating your own.
What AI agents can I use with AI Atelie?
Claude Code (recommended, no API key needed), Kimi K2, Codex, or any SDK-compatible model. AI Atelie delegates to the CLI already on your PATH — you bring your own agent instead of using a proprietary bundled one.
How are designs stored and edited?
Designs live as plain HTML, JSX, and CSS folders — no proprietary canvas format. Edit through three paths: instant in-design tweaks (predefined controls), inspector CSS overrides, or ask the agent to make permanent source changes. All files are readable, diffable, and version-controllable.
What are skills and how do I create custom ones?
Skills are composable playbooks — nine ship by default (frontend-design, make-tweakable, interactive-prototype, create-design-system, animated-video, export, etc.). Add custom skills by dropping a `SKILL.md` file into the `skills/` folder. Claude Code auto-discovers them.
Can I export designs to other tools?
Yes. Export as standalone self-contained HTML, editable Canva designs, PNG/JPEG for video editors, or as developer handoff packages. The `export` skill handles all output formats.
Is AI Atelie fully local or does it use the cloud?
Fully local-first. Designs run in your browser with zero cloud round-trips. Your agent CLI (Claude Code, Kimi, etc.) handles AI tasks locally or via your own subscriptions — no gated runtime or proprietary cloud dependency.
What's the difference between AI Atelie and Claude Design?
Claude Design is closed, rate-limited, and gated to Anthropic's proprietary runtime. AI Atelie is open-source (MIT), lets you bring any AI agent, stores designs as plain HTML/JSX/CSS (not proprietary formats), and runs fully locally with no cloud lock-in.
Can I use starters and templates?
Yes. AI Atelie ships with starters like DesignCanvas.jsx, Stage16x9.jsx, and LowerThird.jsx that the agent drops into projects. Add custom starters or templates by registering them in the config files.

Glossary

Skills
Composable AI playbooks that define design tasks (e.g., frontend-design, make-tweakable, interactive-prototype). Claude Code auto-discovers SKILL.md files and uses them to guide agent behavior.
EDITMODE markers
Inline annotations in HTML/JSX that declare predefined controls for instant in-design tweaks without AI roundtrips — used for style parameters like copy, colors, and layout.
Starters
Ready-to-copy component templates (DesignCanvas.jsx, Stage16x9.jsx, LowerThird.jsx) that agents drop into projects to accelerate common design patterns like multi-variation canvases or broadcast formats.
Design atelier
A collaborative design studio workspace where designers and AI agents shape work together through chat, controls, and editing — inspired by traditional craft ateliers.

More in Design Ops

All →
Design Ops

AI Toolbox

Claude Code plugin with 13+ skills for code review, accessibility audits, design systems, and end-to-end feature planning backed by ClickUp.

Matisantillan11
Design Ops

Architect Playbook

Self-improving Claude Code audit skills for TypeScript/React codebases covering architecture, security, accessibility, performance, testing, and more.

BenSheridanEdwards
Design Ops

Chrome DevTools Skill

Browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization for Claude Code without MCP server setup.

ddfourtwo
Design Ops

Claude Canvas

AI-orchestrated visual production for Obsidian Canvas. Create presentations, flowcharts, mood boards, and knowledge graphs with intelligent layout.