Design Studio
Design Studio is Elftia's built-in AI design workbench. It combines three abstractions — design Skills, Design Systems, and Craft snippets — so that AI can generate deliverables such as web pages, posters, decks, and social graphics based on a consistent visual language, with support for in-place preview, Lint validation, and export.
Entry point: Design Studio in the left navigation (route /design-studio).
What the Trio Does
| Abstraction | Role | Source |
|---|---|---|
| Skill (design skill) | Encapsulates "what to make" as a reusable prompt + input schema — e.g. "product landing page," "event poster," "podcast cover." | 70+ built-in + user-defined |
| Design System | Encapsulates "what it looks like" as tokens + component references — color, typography, spacing, border radius, shadows, button styles, etc. | 140+ built-in + user-defined |
| Craft (snippet library) | Composable HTML / CSS / SVG fragments — decorative elements, layout skeletons, chart templates. | 7 built-in categories + user-defined |
When starting a new project, you choose the Mode + Skill + Design System axes. AI generates the output based on this context combined with the Craft library.
Four Modes
When creating a new project, choose one of the following modes. The mode determines the artifact type and editing flow:
| Mode | Artifact | Highlights |
|---|---|---|
| Prototype | Single-page HTML prototype | Default mode; left chat + right workspace, supports comments and surgical edits |
| Deck | Multi-page slides | iframe + next/previous page + fullscreen + quick overview + export PDF/PPTX |
| Template | Form-driven HTML | EJS subset placeholder templates; auto-generates a form; input refreshes the right-pane preview in real time |
| Design System | DESIGN.md + example page | Two-pane view (left: DESIGN.md source + token swatches / right: example dashboard); saved to <userData>/elftia/design-systems/<slug>/ |
Main Interface
Home (/design-studio)
Two top tabs, full-width layout (no sidebar):
| Tab | Content |
|---|---|
| Examples | Browse pre-built example projects by Skill; fork a new session with one click. |
| Design Systems | Browse built-in + custom Design Systems, preview template effects, and switch the default. |
Historical Design projects appear in the regular session list as sessions with kind='design' — they share the same origin as chat sessions and support branching, regeneration, and attachments.
Creating a New Project
The entry point is the DesignStudio persona on the new session page:
- On the new session page, select DesignStudio from the persona picker at the top
- Choose a Skill (left) + Design System (right)
- Describe your requirements and send
- AI outputs the artifact → the preview panel opens automatically
See New Session & Persona for details.
Artifact Preview
After AI generates an artifact (typically an HTML document), it triggers an "open workspace" action, switching the right pane to the preview panel:
- Preview — live-renders HTML; supports viewport width switching (mobile / tablet / desktop)
- Source — view the artifact source code (CodeMirror, copyable)
- Lint — automatically validates whether the artifact conforms to Design System constraints (out-of-range colors, fonts not in the token set, etc.)
Each message that produced an artifact also shows a separate Preview button — you can replay historical versions without switching the workspace back to the current one.
Export
The Export button at the top of the preview panel:
| Type | Output |
|---|---|
| HTML | Single-file HTML (inlined resources) |
| PNG / JPG | Viewport screenshot at a specified resolution |
| Multi-page PDF (suitable for posters, decks) | |
| Deck | Reveal.js-style multi-page slide package |
Source of Built-in Assets
The three directories design-skills/, design-systems/, and craft/ are materialized to the user data directory (<userData>/elftia/) on first launch — they are not written into the Elftia installation directory.
This means:
- You can customize built-in Skills / DS / Craft by editing files in the user directory directly
- Your edits will not be overwritten by Elftia upgrades (upgrades only add new files, never touch existing ones)
- The built-in assets originate from the upstream open-source project
nexu-io/open-design, pinned by commit snapshot
To upgrade to the latest upstream version (developer operation), see the developer docs: Built-in Resource Sync Process.
Relationship with the Chat System
Design projects are ordinary chat_sessions rows under the hood (kind='design'), so they:
- Support the same LLM configuration, provider switching, and API Key pool
- Support message branching and regeneration (each regeneration = a new artifact version)
- Support attachment uploads (reference images, brand assets)
- Appear mixed with regular chat sessions in the history sidebar; can have folders / tags added
Differences:
- Must be bound to a Skill + Design System, determined at session creation; cannot be changed mid-session
- The engine layer goes through the Design Adapter — not all engines support this.
claude-sdk/tinyelf/chatand others can be used directly via the Prompt Injection strategy;cli(Claude Code, Codex CLI) uses the FilePlaced strategy; the pureapiengine is not supported and displays a placeholder
0.1.7+ Always-on (No Experimental Flag Needed)
Since 0.1.7, Design Studio is enabled by default — no need to toggle it in Settings → System → Experimental Features. The 🎨 Design Studio entry appears directly in the navigation bar.
The only remaining requirement: the current LLM provider's engine must support the Design Adapter.
Support matrix:
| Engine Type | Supported | Injection Method |
|---|---|---|
claude-sdk | ✅ | Native skill loading; supports surgical-edit comments and local edits |
tinyelf | ✅ | Prompt Injection — SKILL.md + DESIGN.md inlined into the system prompt |
chat | ✅ | Prompt Injection (rejected if >16k tokens to prevent overflow) |
cli (Claude Code, Codex) | ✅ | FilePlaced — writes to .cursorrules / .aider.conf.yml etc. |
api | ❌ | Not supported; displays "Adapter unavailable" placeholder |
FAQ
| Problem | Solution |
|---|---|
| Design Studio page shows "Adapter unavailable" | The current LLM provider uses an engine that does not support the Design Adapter (most likely api); switch to Claude SDK / TinyElf / Chat / a supported CLI backend |
| Custom Design System not displayed | Check whether <userData>/elftia/design-systems/<your-ds>/ contains a manifest.json with a valid schema; click "Rescan" on the Design Systems tab |
| Built-in Skills / DS not updated after upgrading Elftia | This is by design — existing files are not overwritten (detected by SHA-1 for user edits). To reset a file, delete the corresponding file in the user directory; it will be re-materialized on restart |
| Lint in artifact preview reports "color out of range" | The artifact uses a color value not in the design tokens; either update the artifact to use tokens, or extend the Design System's token table |
| Surgical-edit (comments / Send to chat) unavailable | Only enabled under the claude-sdk engine. In other engines, the Comments drawer can only be viewed, not sent to chat |
Related Links
- Skill System — Design Studio's Skills reuse the Agent system's Skill abstraction
- LLM Providers — configure the model used by Design Studio
- Developer: Design Studio Architecture
- Developer: Built-in Resource Sync Process