Claude Design

Source code
Claude Design

A local-first design platform and component workspace that bridges AI agents and visual design. Paired with a local privileged daemon and an Electron runtime, the application detects installed agent CLIs, processes design systems, runs specialized design skills, and streams dynamic code changes directly into a sandboxed preview iframe.

Design System & Component Inspector

Design System & Component Inspector

Designed specifically to support agentic workflows, the system provides a dual-track web UI and a command-line interface, making UI generation and token editing fully automatable.

Overview

Claude Design (Carousel Design System) is a local-first UI canvas and design system explorer built to enable tight collaboration between developers and AI coding agents. By detecting installed code-agent CLIs (like Claude Code), the platform runs design skills, manages branding design systems, and streams generated artifacts directly into a sandboxed, hot-reloading iframe preview.

The workspace features a visual playground where users can browse, audit, and approve component libraries, color palettes, and interactive templates in real time.

Local-First Canvas & Agent Integration

The application operates as a thin Electron runtime wrapper paired with a local privileged daemon. This daemon serves as the central control plane, orchestrating process boundaries and exposing capabilities:

  • Dual-Track Interface: Features both a desktop/web UI and a robust od CLI subcommand ecosystem to allow external scripts or LLMs to query and edit the workspace without rendering the UI.

  • Sandboxed Preview: Executes and renders preview pages securely, establishing IPC socket connections between the web workspace and daemon sidecars.

  • Structured Token Reviews: Provides inline voting (e.g. Looks Good / Needs Work...) on generated components and palette variations, allowing rapid iteration on design systems.

Design Architecture & Tokens

The system manages design tokens and styling configurations dynamically, organizing them into logical, responsive blocks:

  • Color Palettes: Pre-configured palettes for Cream, Dark, and Semantic themes with exact hex-value bindings.

  • Brand Assets: Standardized components (such as brand marks, logo bricks, and graphics) served directly from the local asset directories.

  • Slide Decks & Carousels: Generates clean, responsive HTML slides using layout cards and transition systems, facilitating simple content repurposing.

Project stack

More projects