⌘

Try now

Join the waitlist

Welcome to Eden

The design system that evolves.

Your tokens, components and business knowledge, with an agent that uses them and a canvas to refine the result. Real code from the first prompt.

Try now

Join the waitlist

Plans for teams and agencies →

01 · You and your agent

Designer and agent, on the same page.

Ask your agent for a change, or make it yourself. Nothing ships until you say so.

Why it works

Your design system takes part in the work.

Most tools treat a design system as a library of tokens and parts. In Eden it’s an active participant: the Hub keeps what your business knows, your agent designs with it, Studio edits through it, and every change stays on it. You stay in charge without writing code or engineering prompts.

01

Foundation

Design decisions, not raw values. Color roles, type styles, spacing steps and modes, each named for what it means. Change a decision once and everything built on it follows.

02

Registry

Components that know themselves: their parts, variants, states and behavior, and the rules for when to use them. Your agent reads all of it before it builds.

03

Studio

A canvas that understands both. The rail offers your tokens and each component’s real options, so every edit, yours or your agent’s, lands on your system.

04

Hub

What your business knows: brand, tone of voice, clients and decisions, and who on your team can change what. Your agent checks in with it before it builds.

What’s inside

Everything Eden gives you, in six parts.

A starter system, yours to shape.

Atoms, components and sections

Eden starts you with a working library: buttons, fields, cards, headers, heroes and more. Your agent reaches for them first, so what it builds is consistent from the first page.

A Foundation you control

Colors, type, spacing and radii live in one place. Change a value and everything built on it follows.

Ask your agent to change it as you make decisions, and it changes the Foundation, not one page.

A Foundation from a live site

Your agent reads a site’s colors, type and spacing into a Foundation, and shows you what it matched and what’s still open.

Color modes

Give any section a Color mode from the rail: Light, Brand, Subtle or Dark, or Auto to pick the one that reads best. Each mode’s colors are your tokens.

Desktop and Mobile

Both boards sit side by side. An edit on Desktop shows on both; an edit on Mobile stays on Mobile, and Reset brings back Desktop’s value.

Section edges

Coming soon

Give a section’s edge a shape: curves, scallops, waves and angles, with the depth and count you set.

Print mode

Start a print project and design flyers, cards and posters at real paper sizes, with bleed, safe zone, crop marks and die cuts, on the same grid and tokens.

Export a PDF, or PNG, JPEG and TIFF up to 600 ppi, in CMYK when a printer needs it.

Contrast, kept readable

Set a section’s Color mode to Auto and it takes whichever mode reads best on its own fill.

Health lists any text or icon below WCAG AA contrast on the page, so you can fix it with your own tokens.

Make them, vary them, keep them consistent.

Three ways to make one

By hand on the canvas, by asking your agent, or by capturing one from a live site.

Capture from any site

Capture foundation and components from live websites and make them your own.

Pick a card, a banner or a menu on a live site with Eden’s capture tools. Bring it in as it is, or rebuilt from your own components. Nothing joins your library until you approve it.

Edit the master

Change the master and every copy follows, on every page.

Variants

Sizes, states and styles side by side, each designed for Desktop and Mobile.

Drafts

A new component starts as a Draft you can still shape in place. Approve it and it becomes the master.

Vibe code, then design. Same file.

Prompt the running page

In Live the real page runs. Hold on anything to point at it and say several changes at once. Studio makes what it can right away, and the rest goes to your agent.

Fine-tune on the canvas

Press ⇧⌘E and you’re back on the canvas, on that page. Adjust padding, type, color and layout by hand, on your tokens.

Active prompting

Select a section, turn on Listen and say “Eden, make the hero darker.” The change lands on what you selected.

Real code

The page is plain HTML, CSS and JavaScript in your project. There’s nothing to export.

Try things without breaking the system.

Free while you explore

An exploration stays an exploration until you commit it. Then every value is one of your tokens.

Mood boards

Built from your references and context. Tune it, edit it, then use it as your Foundation.

Bring it back

Keep what works: approve a Draft into your system, or propose the change to your Foundation for whoever owns it.

Advanced component management.

Locks and permissions

Lock what’s approved. Only the roles you choose can change it; anyone else can propose a change.

History

Every saved version of a component is kept. Look back through its changes and restore any of them.

Tags, kits and rules

Tag components and gather them into kits, so you and your agent find the right one fast.

Write when to use a component and what to avoid. Your agent reads the rules before it builds.

Effects you can’t draw by hand.

Shaders and liquid metal

Live shaders, like liquid chrome that follows the cursor, each with presets to start from and controls in the rail.

Gradient mesh and image effects

Moving mesh fills, and effects on your own pictures: duotone, pixels, glitch and more.

Studios you share

Coming soon

Make a studio your own, share it with other designers, and change theirs in your own Studio.

For designers · Free

For designers, it’s free.

You get the full design tool, your own agent working beside you, and a place for each client’s brand and files. Use it for paid client work too.

02 · Your system, respected

Your agent stays on your system.

Eden checks every page your agent builds against your tokens and components, on desktop and mobile. It fixes what’s off and asks you when it isn’t sure.

Always on-system

Off-system values get caught.

If a value isn’t one of your tokens, Eden moves it to the closest one. If nothing is close, it asks you instead of guessing.

Any platform

One page, adapted by your agent.

The page Studio writes is plain HTML, CSS and JavaScript. Your agent adapts it for your platform, like a Shopify section in Liquid, and the design stays on your system.

03 · Plain code, any platform

Plain code, any platform.

Studio writes plain HTML, CSS and JavaScript, so your agent can adapt the same page to the platform you ship on. A Shopify theme in Liquid, for example: your agent turns the page into a section with its settings, on your tokens.

Studio, up close

Vibe coding produces the material.
Studio makes it designable.

These are Studio’s real tools, working on the page. Start from a preset or a component and adjust from there, always with your tokens.

Try it now

Try Studio on a real page.

Open Studio in a new tab and work on a real page: change its tokens, swap a component, run it in Live. Nothing to install. There’s no agent or agent chat in the demo: they come when you install Eden in Claude Code.

Try it now

04 · Your context

Your client and project context, in one place.

Keep each client’s brand guide, tone of voice, references and decisions together. Your agent reads them in Claude Code today; Codex and Cursor are coming soon.

Business Truth

What each client does and who their customers are. Correct it once and every project uses the correction.

Library

Tone of voice, brand guide and design system, approved once and inherited by every project.

Your agent app

Claude Code today, with Codex and Cursor coming soon. Everyone on the team reaches the same context.

Context

Brand guides, decks and docs in folders, for Eden to design from.

Sources

The catalogues, exports and drives Eden reads, and the projects drawing on them now.

Connections

A Drive folder, a shared link or pasted text, connected for more context.

Media

Logos, photos and video, ready to use in any project.

Projects

Every project starts from its client’s context, with what that client has sent.

05 · Your components

Your components, managed and evolved in Studio.

01

Create

Select what you made, right-click and choose Create component. Name it, pick its category, keep it in the project or the business, and file it in a kit.

02

Edit and variants

Open the master from any copy. Its sizes and states sit side by side; change a token, save, and every copy follows.

03

Tags

Tag a component with the words you search for in Components and @. Tags your agent adds are marked.

04

Rules

Write when to use a component and where it doesn’t belong. Your agent reads them before it builds.

05

History

See every change, who made it and when. Each saved version is kept, and any of them can be restored.

06

Locks

Lock a component from its master. Anyone without the role to unlock it is told who can, and can comment to them.

06 · Studios

Studios for the effects you can’t draw by hand.

A studio is a focused place in Eden Studio for one kind of thing: a shader, a gradient mesh, liquid metal, an image effect. Its controls sit in the rail, and what it makes becomes a style you can use anywhere in the project. Each one below is running live, in Studio’s own engines.

A designer’s studio

Liquid Metal

Liquid chrome, lit, that follows your cursor. Eight presets, from Polished chrome to Molten.

A designer’s studio

Grain Gradient

Two colors and a grain you control: the angle, where the color drops off, and the grain’s size, softness and spread.

Built into Studio

Gradient Mesh

Colors that move and blend, from a preset or your own palette.

Built into Studio

Image effects

Your own pictures, worked: halftone, duotone, fluted glass, glitch and more.

Join the Discord

For teams and agencies

Work together on one system.

Teams and agencies pay for the shared side of Eden. Everyone works from the same system, with roles, locks and a separate space for each client.

See Eden for teams

Agency partners

Why it’s free

Built out of necessity. Shared by design.

I spent six months battling AI to build the tool I couldn’t find: one that lets designers at every level bring agents into their work without giving up control of the canvas.

Eden is that blend. Code-first design, a fluid canvas, work crafted by hand, and an agent when you want one.

I want designers to come out of the AI era more relevant, not pushed aside by slop automation. Eden gives you the tools and the control to stay in charge of what gets made.

That’s why Eden Studio is free for designers. The businesses and brands you work with pay for the shared system, and for your expertise.

This is the tool you need, and deserve, to enter the AI era of design with confidence.

Joshua Vizzacco, founder of Eden

Read why I built Eden →

Community

Help shape Eden.

Tell us what you need.

Eden is built with the designers who use it. What you ask for shapes what we build next, and the conversation is on Discord now.

Join the Discord

Questions

Can Eden be scraped or copied?

No. Eden is protected, and our terms forbid it.

You can't scrape, copy, mirror or reverse engineer Eden, its engine or its tools, or rebuild them to avoid paying. We watch for scraping, and a key used to scrape Eden is disabled immediately. Your access key is yours alone.

What you make is always yours: your designs, your code and your business's content.

What is Eden?

A design tool where the canvas is your code.

You design by hand, your agent helps when you ask, and it all uses your own components and tokens. What you make is HTML and CSS in your project, ready to ship.

Is Eden really free for designers?

Yes. Eden Studio is free for individual designers.

You run Studio inside Claude Code, with Codex and Cursor coming soon. You get the full design tool, your Foundation and components, and your own projects, and you can use it for paid client work. Your agent app's subscription is your own; Eden doesn't sell AI usage. The paid plans are for teams that share a system: Team, Agency Partner and Brand / Corporate.

Does it work with Claude?

Yes. Eden is built and tested with Claude Code today, and Studio opens beside your chat. Support for Codex, Cursor and other agent apps is coming soon.

Your context comes with you: everyone on your team reaches the same brand, notes and components before they build.

Do I need API keys?

Not in your agent app.

Eden is designed to run inside the agent app you already subscribe to, like Claude Code, on your own plan, so there are no API keys to set up and no usage bill from us. Support for Codex and Cursor is coming soon.

You can also run Eden in a browser if you want, but the agent work there uses API credits.

How is Agency Partner different from Team?

Team is for one business. Agency Partner is for agencies with many clients.

Each client is its own business, with its own Foundation, components, files and projects, and the client owns its work. A small studio working in one shared business only needs Team.

Will I run into bugs?

Probably. Eden is in early release, and we’re improving it every week.

If something breaks, tell us on the Eden Discord what you were doing, with a screenshot. We read every report and work to fix it.

Ideas too: if something would make Eden better for you, we want to hear it.

What’s coming for the community?

Eden opens up to the community, soon.

You’ll be able to extend Studio, build your own tools, and share them with other designers, with credit for what you make: component libraries, design kits, Foundation systems, shaders and visual effects, Studio tools, design patterns, and experiments and studies.

Own your system. Enable your agents. Give designers back control.

Join the waitlist

⌘ Eden

Terms and conditions

Privacy

Built by artofthecart.com

Founded by Joshua Vizzacco