Easel - UI Design with Live Code Preview

macOS AI workspace for designing and iterating prototypes with Claude or Codex

Unclaimed

Updated Jul 2026 · Added Jul 2026

github.com

PrototypingFreeprototyping

Visit Easel

Share: X in LinkedIn

Add your screenshot here

Image or video shown in this spot

What is Easel?

Easel is a macOS workspace for AI-assisted product design and frontend iteration powered by Codex or Claude. It combines a local project library, design-system setup, AI chat, and live web preview with point-and-click inspection in a native SwiftUI app. Users can describe a UI, watch it build in real-time, and refine it by clicking directly on the result, making rapid prototyping and iteration seamless.

Explore Easel

Need help implementing Easel - UI Design with Live Code Preview?

Find verified specialists who work with Easel - UI Design with Live Code Preview

Browse specialists

Key Features of Easel

Build prototypes with Codex or Claude
Live web preview with point-and-click inspector
Design system creation and reuse
AI chat interface for describing UI changes
Local project library
Toggle inspector to click and edit elements
Switch between AI providers anytime
Design system import from DESIGN.md
Multiple element queue editing
Direct source file editing

Who Should Use Easel?

Rapidly prototype UI designs with AI assistance

Iterate on frontend designs by clicking elements

Build and maintain reusable design systems

Refine Claude-started designs locally

Hand off prototypes to development

Create on-brand designs across projects

Easel: Pros & Cons

✓Pros

Native macOS SwiftUI application
Supports multiple AI providers (Codex and Claude)
Point-and-click interface for element editing
Live preview alongside chat
Design system reusability keeps designs on-brand
Free and open source (MIT license)
Switchable AI models anytime
Local project management

Frequently Asked Questions about Easel

What AI models does Easel support?

Easel supports both Codex and Claude. You can pick your preferred provider in Settings and switch between them anytime.

What operating system does Easel require?

Easel is a macOS-only application that requires macOS 26.2 or later.

Can I use my own design system in Easel?

Yes. You can create a design system from scratch, import it from a DESIGN.md file, or have Easel generate one with AI. Your design system can then be reused across multiple projects.

How does the point-and-click inspector work?

Toggle the inspector with Cmd+Shift+I, then click any element in the live preview. Easel will send that element as context to the AI chat so you can give instructions like 'make this button bigger.'

Is Easel open source?

Yes, Easel is open source under the MIT license and available on GitHub.