Supei — AI Design Canvas

English | 简体中文

Supei is an infinite-canvas AI design tool. Chat to generate HTML prototypes with live streaming preview, click any element for targeted feedback, compare variants side by side, and export a single-file interactive preview when the design settles — pulling "what should it look like" out of the AI coding loop: discuss first, implement later.

The interface follows the wonder.design language: layered near-black surfaces, Inter / Uncut Sans / JetBrains Mono, blue accent buttons, hairline strokes, frosted-glass overlays, and a persistent dark / light theme toggle. The AI side ships a distilled design methodology (tokens first, type scale, restrained palettes, asymmetric composition, CJK typesetting discipline, an anti-AI-template checklist) plus 9 built-in design styles — Auto / Editorial Magazine / Dark Tech / Swiss International / Warm & Friendly / Neo-Brutalism / Wabi-Sabi Minimal / Linear Dark SaaS / Bauhaus Composition — hard constraints applied to both full generation and incremental iteration.

Highlights

Canvas

• Infinite canvas: damped Ctrl/⌘+wheel zoom anchored at the cursor, hand tool in the bottom toolbar (left-drag anywhere, including over artboards), Space/middle-drag pan, marquee multi-select on empty space (Shift unions), arrow-key nudge (Shift = 10px), group drag with snap alignment & guides, fit-all
• Artboards: drag by header (snap alignment), batch-delete multi-select, Ctrl+A select all, Ctrl+C/V copy & paste (versions included, cascading offsets), unified context menu (keyboard navigable)
• Performance: low-zoom static snapshots (SVG foreignObject, cached in IndexedDB), offscreen iframes paused

Flat Artboards & Diff

• Figma-style flat boards: every AI iteration and every manual save creates a new board beside its source, and the source stays as-is; branches never overwrite each other
• Board compare: one click aligns same-parent variant boards in a row, dims the rest, and pins 方案 A/B/C badges
• Version compare is still available from a board menu when a board carries multiple versions (legacy projects); side-by-side panes with three-level diff highlights (content edits purple / style changes amber / deletions red, attribute signatures and <style> sheet diff included)

AI Collaboration

• v0-style plan card: clarifying questions + style direction + multi-variant generation; every question also accepts a free-text answer
• Reference attachments: the composer accepts picked, dragged, or pasted images and text files (md / txt / csv / code); images show as thumbnails on the message, and text content is folded into the prompt as generation context
• Page / component modes: the request decides whether to produce a full-page prototype or a single UI component, and the plan card lets you override it; components render as a state/variant specimen without page chrome
• Aider-style SEARCH/REPLACE incremental protocol: only what you mention changes, everything else preserved verbatim, automatic full-regeneration fallback
• Deep-thinking toggle: passes reasoning_effort=high (model permitting)
• Parallel variants: 1–3 differentiated boards from one prompt
• Local agents (desktop): add Claude Code / Codex as models in Settings and generate with your own logged-in subscription; token-level streaming, and stopping kills the CLI process tree

Manual Editing

• ✎ Edit tool: select an element, adjust font size / weight / line-height / letter-spacing / alignment / text color / background / size / radius / opacity / padding / margin in the inspector
• Double-click to edit text in place (Enter commits, Esc reverts); hold Alt and hover other elements to measure spacing
• Edits preview live in the artboard; Save creates a new board beside the source with the changes baked in, so the original stays intact. Pending edits are carried into the next AI iteration so manual work is never lost

Live Repo Preview (desktop)

• Pick a local frontend project from the top bar: the canvas runs its dev server (npm / pnpm / yarn / bun auto-detected) through a Go injecting proxy — HMR keeps working
• Click elements on the live page or just chat: the local agent edits repo source directly, and hot reload brings it back to the canvas
• Capture freezes the current page into an editable design (scripts removed, styles inlined, URLs absolutized, color scheme frozen) for AI iteration or manual editing; satisfied? Write back lets the agent apply a "design vs. capture" change list to your source

Web Capture & Share (desktop)

• Capture page: load any URL through the local proxy onto the canvas, close popups, settle the state, then capture it as a design
• Share: publish the whole project or a single artboard to the local LAN service (prefers port 7788) with a link and QR code; unpublish anytime

Delivery

• Per-artboard export .html / copy code
• Whole-project export: every latest artboard → one zero-dependency interactive preview page (sidebar navigation + keyboard paging, double-click to open)

Plugins (Design Infra)

Four plugin kinds (style / preset / template / icon) flow through one registry: create / edit / import / export (.md style packs or .json), hot-loaded from the user plugin directory (the desktop app watches it live). See docs/plugins.md.

Desktop App (mygo)

Besides the browser, desktop/ is a desktop shell built on mygo (Go + system webview, pure Go, no cgo):

cd desktop
go tool mygo dev      # desktop window (embeds Vite with --mode desktop)
go tool mygo build    # distributable installer into build/
go tool mygo doctor   # environment self-check (go / webview2 / toolchain)

The CLI comes from a go.mod tool directive configured in mygo.json — the desktop app needs only Go. Architecture:

• Frontend: the Vue app at the repo root is reused as-is; packaged releases embed ../dist.
• Go services (desktop/*.go, client generated by mygo generate into src/services/mygo-client.ts):
  • LLMService.Stream — OpenAI-compatible requests fired from Go, tokens streamed to the page over a Channel, bypassing browser CORS entirely; stopping = closing the Channel cancels the HTTP request;
  • StorageService.SaveHTML — exports through the native save dialog;
  • StorageService.ReadPluginDir / WatchPluginDir — read and watch the user plugin directory for hot reload;
  • AgentService.Detect / Run (agent.go) — detect and run local claude / codex: design mode is tool-less in an empty temp dir (a plain LLM), code mode edits your repo; prompts go via stdin, stream-json / JSONL events are parsed;
  • DevServerService.PickRepo / Start / Proxy (devserver.go) — run the repo dev server, detect its URL from output, then serve an injecting proxy (bridge script into HTML, CSP / X-Frame-Options stripped, HMR WebSocket passed through);
  • ShareService.Publish / List / Unpublish (share.go) — LAN sharing; pages live under the user config dir ai-design-canvas/shares/, links survive restarts.
• Child processes (CLIs, dev servers) hide their console window on Windows and are killed as a full process tree with taskkill /T on cancel — no orphaned node processes.
• The frontend branches in services/desktop.ts: the desktop bridge is probed at runtime with isMyGo(), and the same page opened in a plain browser falls back to the pure web path (direct fetch). One codebase, two shapes.

Windows notes (two classic pitfalls, handled/documented in desktop/main.go):

1. WebView2 runtime detection: mygo relies on the EdgeUpdate registry value. On slimmed-down systems the runtime files may exist while the record is missing, and the app exits silently — point the value at EdgeWebView\Application\<version> to fix.
2. GPU white screen: on some GPU/driver combos WebView2 hardware acceleration renders blank. main.go sets WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS=--disable-gpu by default; delete that block if your GPU is fine.

Quick Start

npm install
npm run dev        # http://localhost:5188

First run asks for a model: the model picker in the composer guides you to Settings → Model providers.

Connecting Real Models

Top bar → Settings → Model providers → + Add provider. Any OpenAI-compatible endpoint works; the settings dialog ships quick presets:

Provider	Base URL	Example model
Zhipu GLM	https://open.bigmodel.cn/api/paas/v4	glm-4.7
DeepSeek	https://api.deepseek.com/v1	deepseek-chat
OpenAI	https://api.openai.com/v1	gpt-4o
Magpie gateway (local)	http://127.0.0.1:3425/v1	fetched from the gateway

API keys are stored only in local localStorage. Desktop requests leave through the Go proxy (no CORS limits); in the browser, pick a provider that allows cross-origin calls. Bad configs get a clear error card with one-click retry instead of a hang.

Typical Workflow

1. New project → describe what you want in the chat (or tap a preset prompt); AI streams v1 artboard(s);
2. Turn on the ⌖ select tool and click a page element: the selection appears as a formatted chip in the composer (with one-tap quick commands like "more prominent" / "rounder"), describe the change and send — AI produces a new flat board to the right via the incremental protocol;
3. Compare siblings with "方案对比", or open a board menu's "对比上一版" for diff highlights;
4. "Export preview" produces the single-file interactive page for all artboards;
5. Full shortcut list lives behind the in-app ? help (17 entries).

Tech Stack

Vue 3 + TypeScript + Vite + Pinia + vue-router; antdv-next as the UI base, @antdv-next/x (Bubble) for the AI chat; IndexedDB persistence (artboard data + thumbnail cache); dual LLM path — desktop Go proxy / browser direct fetch against OpenAI-compatible SSE with runtime auto-detection.

Prototype artboards are self-contained HTML rendered in sandboxed iframes; selection works through a bridge script injected into the iframe (hover highlight, click interception, Ctrl+wheel zoom & keyboard forwarding). Iteration uses the Aider-style incremental protocol: the model outputs <<<<<<< SEARCH / ======= / >>>>>>> REPLACE blocks, matched exactly first then line-trimmed loosely, with automatic full regeneration fallback when any block fails.

The AI-side design system and built-in styles live in src/plugins/registry.ts (pluggable registry) and the SYSTEM_PROMPT in src/services/generator.ts; the end-to-end acceptance script is scripts/e2e-final.mjs.

Scripts

• npm run dev — dev server
• npm run build — type check + production build
• npm run preview — preview the build
• npm run build:desktop — desktop-mode build