开源AI设计

1. Install

Package manager (recommended):

```bash

Quickstart

Time to first artifact: about 3 minutes

Requires: one API key, ChatGPT subscription sign-in, or local Ollama

Runs on: macOS 12+ (Monterey or later), Windows 10+, Linux (glibc ≥ 2.31)

Preview and workflow

• Source-backed tweaks — the Tweaks panel reads the active preview file, not declarations in unrelated starters or previous tool results. A flat JSON object between /*EDITMODE-BEGIN*/ and /*EDITMODE-END*/ exposes values; optional TWEAK_SCHEMA chooses supported controls. Bind these values to the design (for example, --ocd-tweak-card-radius in CSS); discovering a declaration with tweaks() does not create a binding. Missing, intentionally empty, and invalid declarations have distinct explanations. Ask for useful controls in the current source rather than expecting a later generation to add them automatically. Saves merge only changed keys and reject conflicting source edits.

Conditional source saves compare the expected bytes with disk inside a per-canonical-file writer queue shared by the app's file IPC, agent text editor, scaffold, and import publications, including designs sharing a workspace. Agent replacements/inserts also check their cached source before writing and refresh the view on conflict for an explicit retry; explicit whole-file creation/replacement remains unconditional. Existing workspace rename leases are retained. This coordinates participating writers in one app process, not external editors, shell commands, other app processes, or hard-link aliases: an external change already visible at comparison is rejected, but an external write between comparison and publication cannot be made atomic by this in-process queue.

• Compact desktop chrome — workspace and settings headers use one row from 1,000 CSS pixels, with a two-row fallback at narrower widths and extra room for gallery tabs. Design/model tooltips preserve full names. Workspace paths and preview status share a wrapping summary row; expand the preview summary for connection settings without changing the active preview mode.
• Fullscreen preview — expand a runnable JSX/HTML preview within the app window without resizing sidebars manually. This works in Preview, a dedicated file tab such as App.jsx, and the Files tab's inline preview. Chat, file navigation, and tweak controls are temporarily hidden; the titlebar and Exit fullscreen remain available. Exit or press Escape to restore the previous layout without reloading the preview's forms or navigation state. Menus and artifact dialogs handle Escape first; changing designs or tabs leaves fullscreen. Other file types and connected URLs do not enable this mode.
• Readable preview controls — Comment mode, zoom, and Export retain visible labels and wrap below file tabs when space is tight. Zoom and export menus stay inside the window; use arrow keys / Home / End to navigate, Enter to select, and Escape to close and return focus. Preview zoom changes the artifact's display scale, not the app's control sizes or the artifact's source dimensions.
• Phone / tablet / desktop preview — true responsive frames, switch with one click
• Bounded interaction self-checks — preview can exercise up to 16 declarative steps and report the final screen and per-step failures. For native single-selection dropdowns, use {"action":"select","selector":"#category","value":"work"}, then assert the control's exact value and linked summary text. Selectors must uniquely identify a visible control; disabled selects/fieldsets/options/optgroups, multiple selects, and missing or duplicate option values are rejected. Values are capped at 2,000 characters; the existing 2-second step and 20-second interaction budgets apply. This does not verify untested routes or persistence between preview calls.
• Recovering from an oversized preview call — The 16-step limit counts actions and assertions. More than 16 rejects the entire call before rendering or executing any steps; the agent receives a recoverable validation error and can retry corrected arguments. Use independent short journeys, each starting from a fresh document and repeating its own required setup. Do not split a sequence into consecutive tails expecting browser state to carry over. Combine compatible assertions on the same selector where useful, preserve essential outcome/shared-state checks, and disclose untested paths rather than silently truncating them.
• Files panel — inspect multi-file artifacts (HTML, CSS, JS) before export
• Collapsible chat — fold the conversation into a narrow restore rail without resetting drafts, active generation, the previous panel width, or preview state.
• Instant design switching — the last five designs keep their preview iframes alive, so Hub ↔ Workspace and sidebar navigation stay zero-delay
• Connection diagnostic panel — one-click test for any provider, with actionable errors
• Per-generation token counter — see exactly how many tokens each run cost in the sidebar
• Settings with four tabs — Models, Appearance, Storage, and Advanced
• Light + dark themes, EN + 简体中文 UI with live toggle