DesignMode

DesignMode is a focused workspace for creating design and media projects inside the desktop app. It keeps each project in your local workspace, gives you reusable design systems and prompt templates, and lets you preview, edit, comment, export, and review generated assets in one place.

Use DesignMode when you want a structured project instead of a regular chat task.

Turn on DesignMode

1. Open Settings.
2. Go to DesignMode.
3. Turn on DesignMode.
4. Choose optional defaults, such as a default design system or DesignMode skill.
5. Review the dependency list. Missing tools only affect the export or render formats that need them.

You can open DesignMode from the left sidebar after it is enabled.

Start a Project

1. Open DesignMode from the sidebar.
2. Choose a surface: Document, Image, Video, Audio, Slide deck, Prototype, From template, Campaign, or Other.
3. Add a project name and brief.
4. For product or UI work, choose a design system and optional inspiration systems.
5. For image or video work, choose a prompt template if you want a prepared starting point.
6. Adjust media settings such as aspect ratio, model, duration, voice, or fidelity.
7. Click Create.

DesignMode creates a local project folder with the brief, selected references, generated assets, comments, sketches, exports, and provenance records.

You can also start from an existing local folder. Use Import folder, choose a directory in your workspace, and DesignMode links it as read-only project context instead of copying every file.

Browse Existing Assets

The DesignMode start screen has searchable tabs:

Each tab includes search and filters so you can narrow the catalog before opening a preview or creating a project.

Use Design Systems

Design systems define the visual direction for a project. They include palette, typography, spacing, component guidance, and style rules.

1. Open the Design systems tab.
2. Search or filter by category.
3. Click a design system to preview it.
4. Use Showcase to see a styled sample.
5. Use Tokens to inspect palette and typography.
6. Use DESIGN.md to read the source guidance.
7. Click Use as default if you want new projects to start with that system.

Design systems are most useful for documents, prototypes, decks, templates, and campaigns.

Work Inside a Project

A project workspace includes:

For HTML prototypes, selectable regions can include target markers. In Comment or Edit mode, click a region and add feedback or a targeted instruction.

Use Cmd/Ctrl+P inside a project to open the quick file switcher. Opened files appear as tabs above the viewer, and you can drag tabs to reorder them. You can also select multiple files in the file browser and delete them together; DesignMode keeps the deletion local to the project and removes deleted outputs from the asset gallery.

When Design Jury is enabled by your workspace, use it from the project header after a project has a reviewable HTML, Markdown, or text output. The review shows an overall score, role-by-role scores, must-fix items, quick wins, and a saved summary path in the project.

Import a Design

Use Import Claude Design ZIP when you already have an HTML prototype or design package.

1. Click Import Claude Design ZIP from the new project panel.
2. Choose the archive or files.
3. Review the import report.
4. Fix any blocking issues, or continue only when you understand the warnings.

Imports are checked for unsafe paths, unsupported archive entries, oversized files, and major lint problems.

Export a Project

Open the export drawer from the project toolbar. Available formats depend on the files in the project and on your local dependencies.

Common outputs include:

Exports include disclosure metadata for generated assets, including provider, model, prompt record, references, output path, and task id when available.

For PDF export, DesignMode uses the best path available on your machine. On supported macOS desktop builds, it can save PDF bytes directly. If a renderer dependency is missing, it falls back to the system print dialog or browser print flow.

For portable handoff, export a Design package. The package includes source artifacts, assets, provenance, design-system snapshots, and review transcripts, but never includes provider keys.

Budgets

DesignMode has its own project budgets. Configure them in Settings > DesignMode.

When a project gets close to a limit, the project header shows a warning. When a request would exceed the limit, DesignMode blocks it before starting the task.

Dependencies

The dependency panel shows which local tools are available. You do not need every tool to use DesignMode.

If a dependency is missing, only the related export or render action is unavailable.

Tips

• Use a design system before generating a prototype or deck so the prompt has clear visual rules.
• Use Resolved Prompt to inspect what DesignMode will send to the generator.
• Use Design Jury for a second pass before sharing a prototype, deck, or campaign.
• Use Project Debug when you need to inspect task history, prompts, render logs, and provenance.
• Run lint before exporting HTML or text files.
• Keep large generated files in the project asset folders so exports can include provenance.

Related Docs

• Media Generation -- Provider setup for image and video generation
• MCP and Skills -- Skills and extensions used by agent workflows
• Workspace Security -- How local workspace access is protected