目录
main
分支1739
标签28
+ 疑修
Web IDE
Scarlett
add Launch Week Vol.01 campaign page (#6647)


    

  • feat(landing-page): add Launch Week Vol.01 event page
    • 



Five-day campaign page at /community/events/launch-week/ for Aug 10–14.


Structure: full-screen campaign hero (stateless — nothing here needs a daily
edit), a pinned lineup panel beside a sticky stack of five drop cards, the
All-Week Pass / Community Open Call tickets, and a short closing CTA into
Discord and Feishu.


Drop state is derived, not authored. Each day flips at 08:00 UTC+8 (00:00 UTC,
no DST to resolve), computed client-side so a cached page still shows the right
day without a redeploy. Sealed days render as full cards with their contents
redacted, so the pile reads on day one when traffic peaks rather than as four
flat bars. ?preview=all and ?preview=1–5 simulate any day for review.


All CSS is scoped under .lw and the two campaign faces (Anton, IBM Plex Mono)
are self-hosted latin subsets, 36 KB total — no third-party font request, and
nothing leaks into the rest of the site.


Motion is limited to one entrance per element behind a
prefers-reduced-motion guard; with motion reduced every element renders in
its final state.


    

  • fix(landing-page): gate Launch Week preview and settle the page chrome
    • 



Preview modes now need a shared key (?preview=<day>&key=…); without it the
parameter is ignored and the real schedule applies, so the running order can’t
be read off a URL guess before each drop opens.


The page also stops borrowing .sub-main. That class assumes a normal article
column — a 140px top gap and a 48px bottom gap — which left dead space under
the nav and a beige seam between the closing CTA and the site footer. The page
now declares only the offset it needs (clearance for the sticky nav) and butts
straight against the footer, matching how the story pages sit.


Dropped our own copyright baseline: the site footer already carries it.


    

  • fix(landing-page): restore the Launch Week hero wash and size the closing CTA
    • 



The hero’s paper wash and drawing grid were never painting. Two causes stacked:
the rule hung off .hero::before, which globals.css already owns as a section
divider it sets to display: none, and even without that collision an absolute
pseudo-element inside the flex hero collapsed to a 1px sliver. The wash is now
its own .lw-wash element with explicit dimensions, so the paint reads at the
intended strength instead of full saturation.


The closing CTA was also shorter than the section CTAs on neighbouring
/community pages. It now carries a comparable height and headline scale.


    

  • fix(landing-page): drop the Launch Week masthead strip, rebuild the closing CTA
    • 



The strip under the site header repeated the logo beside it and read as a
second navigation bar. Removed; the date it carried moves into the hero as a
normal eyebrow, where a campaign page usually puts it.


The closing CTA now follows the house .v4final pattern used by the story and
community pages: a single left-aligned column stepping from eyebrow to headline
to copy to one row of buttons, over a darkened image rather than flat black.
Previously it split 60/40 with the buttons stranded in their own column, which
is why it read as under-designed next to its neighbours. The darkening image is
our own plate, so the campaign’s material carries to the last screen.


    

  • fix(landing-page): restore Launch Week’s screen-by-screen scroll rhythm
    • 



Scroll snapping was silently lost in the port. In the mockup it lived on html;
scoping every rule under .lw moved it onto <main>, which is not a scroll
port, so the property had no effect and the ticket section spilled past the fold.
It now sits on html:has(main.lw) — this stylesheet ships only with this page,
so the scope still holds — with scroll-padding-top so a snapped section clears
the sticky nav.


The hero and the ticket section also disagreed on what “one screen” meant. The
hero opens below the nav and takes 100svh - header; every later full-screen
section is reached with the nav scrolled away and takes the whole viewport.


Also rewrote the closing paragraph as one sentence — the previous four clipped
sentences read as a list rather than an invitation.


    

  • copy(landing-page): sharpen the Launch Week closing paragraph
    • 



Leads with what the community actually gives you — how to claim the perks, what
each drop really does, how to enter the Open Call — then the people, the team,
and what comes next. Drops the perk list that the two tickets already cover in
full, and stops naming Discord and Feishu in prose since the buttons below
already do.


    

  • feat(landing-page): lead the events page with Launch Week
    • 



Launch Week was buried in the “Coming soon” grid below a July recap, which read
as if the flagship event were an afterthought. It now opens the page as its own
band directly under the hero, and comes out of the grid so it appears once.


The band shows the approved key visual whole rather than a page screenshot —
the poster already carries the name, the dates, the five days, the challenge and
the Pass, so the only things laid over it are what it cannot say: that the week
is live, and where to go next. Those sit in a bar beneath the art instead of on
top of it.


The share card now uses the same key visual for the same reason.


    

  • fix(landing-page): scale the Launch Week band to a feature card
    • 



Full-bleed 16:9 made the poster over 600px tall and swallowed the page. It is
now a horizontal card the same size as the recap feature below it (352px), with
the art in a 16:9 column so the key visual still shows whole, and the copy the
poster cannot carry beside it.


    

  • fix(landing-page): let the Launch Week poster be the only loud thing
    • 



The copy column repeated the poster’s own palette — ink, acid, high contrast —
so the band read as two competing halves. It is now the same neutral white card
as every other event on the page, using the shared pill. The artwork carries the
campaign; the card carries the facts.


    

  • fix(landing-page): give every Launch Week day a sealed card
    • 



Only days 3–5 had a sealed twin, carried over from a mockup that assumed the
first two days were always already out. Before the week opens — and on day one,
when traffic peaks — the page was therefore short two and one cards.


Every day now has both halves, and the no-JS fallback shows all five sealed,
which is honest on any date; the script then opens whichever days have happened.


    

  • fix(landing-page): keep the TBA stamp clear of the stacked card above it
    • 



The stamp sat low enough in a sealed card that the next card in the sticky
stack sliced it in half. It now sits centred against the redacted lines, inside
the area the peek leaves visible.


    

  • seo(landing-page): tighten Launch Week metadata and image loading
    • 



Audit of the built page found the basics sound — canonical, 12 hreflang
alternates, full OG/Twitter set, one H1, no missing alt, in the sitemap — with
five gaps:


    

  • Title was 30 characters and carried no brand, wasting half the SERP line. Now
states what the week is and ends in “Open Design”.
    • 

  • Description opened on a sentence fragment and buried the premise; rewritten to
156 characters that lead with the dates and the promise.
    • 

  • Event schema lacked image, performer, offers and isAccessibleForFree,
which Google wants before it will render an event rich result.
    • 

  • Seventeen images all loaded eagerly on a page read a screen at a time; the ten
below the fold are now lazy with async decoding.
    • 

  • Target logos had no intrinsic size, so each one could shift layout on load.
    • 



    

  • i18n(landing-page): localise Launch Week into the ten non-English locales
    • 



Adds a body partial per active locale plus the meta table, wired through
localeFromPath like the story pages. The client script that writes drop states
receives this locale’s words too, so a translated page does not flip back to
English once it runs.


What stays English everywhere, deliberately: the campaign lockup
(“Launch Week Vol.01”), the kill questions — each reads against a competitor’s
brand name — the ticket furniture, and the rubber stamps, which are artwork with
the word cut into them.


CJK sets far wider than Anton at the same size, so zh/ja/ko get their own step
for the headline scales; without it the drop titles and the lineup title spilled
past two lines.


Translations are machine-drafted and want a native read per locale before this
goes to production.


    

  • i18n(landing-page): translate the closing headline as a whole line
    • 



“Get inside.” is split across two elements so the second half can take the acid
colour, and the word-level pass never matched the first half — every locale
shipped a literal “Get” followed by a translated fragment, and French read
“GET À L’INTÉRIEUR.” Each locale now supplies the whole headline, with its own
choice of which words carry the accent.


    

  • i18n(landing-page): drop the CJK word space, even out the join buttons
    • 



Splitting the closing headline so the second half can take the accent colour
left a space between the two halves — correct in Latin scripts, wrong in
zh/ja/ko, where “进来 一起做。” should read without the gap.


The two community buttons also sit at very different widths once translated
(“加入 DISCORD” beside “加入飞书群”); a shared minimum keeps the pair level in
every locale.


    

  • fix(landing-page): stop shipping unopened Launch Week drops in the HTML
    • 



Self-audit found the campaign’s central mechanism was not actually holding: a
static page sends its whole DOM to every visitor, so each unopened day’s
headline and target sat in view-source days early. The preview key gated the
display, never the markup — anyone could read the running order straight out of
the page.


Unopened drops are now dropped at build time. The sealed twin always ships; its
revealed counterpart is emitted only once its date has passed, so the secret is
never in the response. The cost is that a day opens on the next deploy rather
than on the hour, which needs a scheduled build during the week.


Also from the audit:


    

  • Mobile had no breakpoint at all. The kill list collapsed into an unreadable
row, the lineup kept its two-column desktop shape, and the pass ticket
overflowed because its grid track held the desktop intrinsic width. All three
now have a narrow-screen layout.
    • 

  • white-space: nowrap on the hero lockup keeps it on one line on desktop, but
every translated slogan is longer than the English and ran off a phone screen;
it wraps below 900px.
    • 

  • Six assets were left behind by earlier revisions and no longer referenced.
    • 



    

  • fix(landing-page): release Launch Week drops at request time, not build time
    • 



504a8e57 kept unopened drops out of the HTML by stripping them at build, which
bought secrecy at the cost of needing a deploy every morning of the week — five
scheduled production builds, each one able to fail on the one day it matters.


Serve them from a Pages Function instead. The page ships only the sealed cards;
/launch-week/drops returns the markup for days that have actually opened and
the browser slots it in. A day now flips on its own, and an unopened one is
never in a response for anyone to read early.


    

  • Revealed markup moves to _partials/launch-week-drops.ts, per locale.
    • 

  • Edge cache expires at the next 00:00 UTC boundary, so a stale day-1 response
cannot survive into day 2.
    • 

  • ?preview=N&key=… still rehearses any day, and is served no-store.
    • 

  • A failed fetch leaves the sealed cards up: it fails toward the pre-launch
page, never toward a leak.
    • 



Tests cover the boundary, the key gate, cache lifetime, locale fallback, and
that no locale partial carries revealed markup. Verified in the browser across
11 locales x 3 viewports, with scroll reveal and reduced motion.


    

  • fix(landing-page): drop the Watch button until its post exists
    • 



The X post for a day is not written when the page ships, so the button on the
live card pointed at href="#" — the most prominent control on the card, and
clicking it threw the visitor back to the top of the page for nothing.


Serve the button only once DROP_LINKS has that day’s URL. The card reads fine
without it: the kill strip becomes the closing line and the composition still
balances.


Filling a link in costs a production deploy and a landing-deployers approval,
so the comment says to batch the days rather than edit it each morning.


    

  • fix(landing-page): stop shipping the Launch Week preview key to visitors
    • 



The page carried PREVIEW_KEY in its inline script, so every visitor was served
the key that unlocks the unreleased days. Read it off the page, request
?preview=all&key=…, and the endpoint handed back all five days — the schedule
protected nothing. Caught in review on the PR preview deployment.


The key now comes from LAUNCH_WEEK_PREVIEW_KEY, a Pages secret, and appears
neither in the page nor in this repository — both are public, so a key in either
is a key everyone has. Unset means preview is off rather than open: a missing
secret must not open the week up.


The page no longer needs to know the key. It forwards whatever ?preview= and
?key= are in the URL and the endpoint decides; the response reports which
preview it honoured, and the day labels are rebuilt from that.


Two tests now guard the leak directly: one asserts the page source carries no
key, the other that no literal key sits in the function.


Requires LAUNCH_WEEK_PREVIEW_KEY on both the staging and production Pages
projects. Until it is set, preview is simply unavailable — the live schedule is
unaffected.




Co-authored-by: Scarlett Huang scarletthuang@Scarletts-MacBook-Air.local
2天前3144次提交
README.md

Open Design: The open-source Claude Design alternative

⚡ Open Design Cloud — the official model service. One recharge to use GPT, Claude, Gemini, and DeepSeek inside Open Design: 20+ flagship models, zero config, billed by real token usage. Try Open Design Cloud

🏅 The Open Design Fellow program is now open. If you also believe design should be open — become an Open Design Fellow, shape the product alongside the core team, and help more people take part in defining the future of design. Details → MAINTAINERS.md and Discord.

Open Design hero banner — the headline "The open-source Claude Design alternative" over a classical scene of columns and robed figures on a digital-code backdrop, with stat cards for design systems, plugins, coding agents, and media providers

Website · Download · Open Design Cloud · Discord · Follow @OpenDesignHQ

release license discord quickstart

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย

What is Open Design

🎨 The open-source Claude Design alternative.  🖥️ Local-first native desktop app for macOS and Windows.  ⚡ Composable skills, brand-grade DESIGN.md design systems, and ready-to-use plugins.  🖼️ Generates web · desktop · mobile prototypes, live dashboards / artifacts, decks, images, video, plus HyperFrames motion graphics. 🔒 Sandboxed iframe preview · HTML / PDF / PPTX / MP4 export.  🤖 Runs on Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity and 25 distinct local CLI executables, or any OpenAI-compatible endpoint via BYOK.

Open Design is what you get when the agent-native loop Anthropic shipped with Claude Design — discover the brief, lock the direction, stream the artifact, critique, deliver — stops being closed and becomes a filesystem of functional skills, rendering design templates, design systems, and plugins that the coding agents already on your laptop can read, write, and remix. Your CLI becomes the design engine, your laptop becomes the studio, and your team’s DESIGN.md becomes the brand contract.

It’s also the Figma alternative for the agent era — instead of pushing pixels on a canvas, it delivers single-page artifacts in real CSS, real fonts, real components, exported straight to HTML / PDF / PPTX / MP4 — already shaped by your design system, already runnable inside the agent you use every day.

Product tour

A quick look at what Open Design is and what it does. Start from Home, orchestrate repeat workflows with Automation, distill a brand contract in Design System, and extend with Plugins and integrations; inside any project’s Studio, the same design system streams out prototypes, live artifacts, HyperFrames, decks, and images.

Core pages

Home page
Home — the overview entry point. Pick a skill and a design system, type the brief, and kick off everything from one place.
Automation page
Automation — orchestrate repetitive design workflows into reusable, schedulable automations. 		Design System page
Design System — distill your team's DESIGN.md into a brand contract that shapes every output.
Plugin page
Plugin — browse, install, and distribute workflow plugins to extend generation on demand. 		Integrations page
Integrations — connect external systems and MCP tools, and use Open Design from any IDE, script, or automation.

Studio — many artifact types in one project

Inside a project’s Studio, the same design system streams out multiple artifact types:

Prototype
Prototype — single-page HTML artifacts that read your design system and render in a sandboxed iframe, previewable instantly and downloadable as source. 		HyperFrame
HyperFrame — programmatic motion and animated graphics, rendered to a real MP4 (e.g. 1920×1080 · 30fps).
Deck
Deck — pitch decks you can page through, navigate by keyboard, and export to PPTX / PDF. 		Image
Image — brand-grade images and visual assets, with high-resolution generation and download.

Platform Compatibility

Open Design ships as skills, a CLI, and an MCP server that mainstream coding agents consume natively. Once OD is installed, a single od mcp install <agent> wires the MCP server into that agent’s config, and you call the same tools from inside any agent.

Coding agent / platform          Status    One-line MCP server install                   
Claude Code ✅ Supported od mcp install claude
Codex CLI ✅ Supported od mcp install codex
DeepSeek Reasonix ✅ Supported od mcp install reasonix
Raven ✅ Supported od mcp install raven
Cursor ✅ Supported od mcp install cursor
VS Code + GitHub Copilot ✅ Supported od mcp install copilot
GitHub Copilot CLI ✅ Supported od mcp install copilot
OpenCode ✅ Supported od mcp install opencode
OpenClaw ✅ Supported od mcp install openclaw
Antigravity ✅ Supported od mcp install antigravity
Cline ✅ Supported od mcp install cline
Trae ✅ Supported od mcp install trae
Kimi CLI ✅ Supported od mcp install kimi
Kiro ✅ Supported od mcp install kiro
Pi Agent ✅ Supported od mcp install pi
Mistral Vibe CLI ✅ Supported od mcp install vibe
Hermes Agent ✅ Supported od mcp install hermes

od mcp install <agent> --print for a dry-run preview · --uninstall to remove · full list with od mcp install --help.

The 25 coding-agent CLIs Open Design supports — Claude Code · Codex · OpenCode · Hermes · Antigravity · Vela · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Amp · CodeBuddy · Mimo · AtomCode · Devin · Trae

No CLI installed? The BYOK proxy at POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream gives you the same loop (no process spawn) — paste baseUrl + apiKey + model, with presets for OpenAI, Atlas Cloud, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Atlas Cloud uses https://api.atlascloud.ai/v1 with your own key and OpenAI-compatible model ids such as qwen/qwen3.5-flash. Per-target SSRF protection blocks internal IPs / link-local / CGNAT at the daemon edge.

Runtime definitions live in apps/daemon/src/runtimes/defs/, with registration and shared stream handling under apps/daemon/src/runtimes/. See docs/agent-adapters.md for the adapter contract.

Demo

Four core product categories, all rendered by a coding agent running on your laptop. Click a thumbnail to see the real example.

1 · Prototypes — web · desktop · mobile

The default output surface. Single-page HTML artifacts that read your DESIGN.md and render in a sandboxed iframe.

Entry view
Entry view — pick a skill, pick a design system, type the brief. One surface for prototypes, dashboards, decks, mobile apps, magazine pages. 		Mobile onboarding
Mobile prototype — pixel-accurate iPhone 15 Pro chrome, multi-screen flows. The agent never redraws the phone frame; shared device frames live in assets/frames/.
Web prototype dating-web
Web prototype — an editorial dashboard with scrollbars, KPIs, and charts. Rendered straight from design-templates/dating-web/. 		Gamified app
Mobile app prototype — a three-screen gamified flow with XP ribbons and quest detail. Hand off straight to Cursor / Codex / Claude Code to turn into React/Next/Vue.

2 · Live artifacts & dashboards

Live dashboards, decision rooms, KPI walls — single-page artifacts that pull data through a tweaks panel and stay editable in place.

Live dashboard
Live dashboard — an editable KPI wall whose tweaks panel surfaces the parameters worth nudging. The agent emits a manifest, and the iframe re-renders without a reload. 		Decision room
Decision room — a multi-source briefing artifact for product / research / ops meetings.
GitHub dashboard
GitHub-style dashboard — repo metrics presented as a live artifact. 		Flow live dashboard
Flow live-dashboard template — a domain-specific KPI template, branded through the active DESIGN.md.

3 · Decks — magazine decks, weekly updates, pitches

Magazine deck (guizang-ppt)
Deck mode (guizang-ppt) — magazine layouts, WebGL hero, P0/P1/P2 checklists. Bundled verbatim from op7418/guizang-ppt-skill with its original license preserved. 		Swiss deck
Swiss International-style deck — grid-anchored, monochrome accents. One of 15 deck templates and 36 themes under design-templates/html-ppt-*/.

Every deck exports to HTML (single file, inlined assets), PDF (browser print, deck-aware), PPTX (agent-driven skill), ZIP (archive), or Markdown.

4 · Images — gpt-image-2, ImageRouter, custom API

Illustrated city food map
Illustrated city food map
Hand-drawn editorial travel poster		 Cinematic elevator scene
Cinematic elevator scene
Single-frame editorial still		 Cyberpunk anime portrait
Cyberpunk portrait
Profile avatar — neon face text		 3D stone staircase evolution
3D stone staircase
Hewn-stone infographic		 Glamorous portrait
Glamorous portrait
Editorial studio shot

93 ready-to-replicate prompts live in prompt-templates/ — preview thumbnails, full prompt body, target model, aspect ratio, and source attribution. One click drops a brief into the composer.

5 · Video & HyperFrames — agent-native motion graphics

HyperFrames is HeyGen’s open-source, agent-native video framework, integrated as a first-class citizen in Open Design. The agent writes HTML + CSS + GSAP, and HyperFrames renders it to a deterministic MP4 via headless Chrome + FFmpeg. Pair it with Seedance 2.0 for cinematic t2v / i2v, Veo 3 / Sora 2 / Kling 2 for routed model variants, and Suno v5 / Lyria 2 for the audio layer.

SaaS promo
30s SaaS product promo · 16:9 · UI 3D reveals		 TikTok karaoke
TikTok karaoke talking-head · 9:16 · TTS + word-synced captions		 Brand sizzle reel
30s brand sizzle reel · 16:9 · audio-reactive kinetic type		 Bar chart race
Bar chart race · 16:9 · NYT-style data infographic
Flight map
Flight map · 16:9 · Apple-style route reveal		 Logo outro
4s cinematic logo outro · 16:9 · piece-by-piece assembly + bloom		 Money counter
$0 → $10K money counter · 9:16 · Apple-style hype		 Website to video
Website-to-video · 16:9 · captures the site at 3 viewports

11 HyperFrames templates + 39 Seedance prompts ship with the repo. Catalog thumbnails © HeyGen; the framework is Apache-2.0. The OD-specific render workflow (composition cache, sandbox-exec workaround, MP4-as-chip) is detailed in design-templates/hyperframes/.

Why Open Design

In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly. It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic’s model, Anthropic’s skills, Anthropic’s surface. No checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent.

Open Design (OD) is the open-source alternative. Same loop, same artifact-first mental model, none of the lock-in:

  • 🤖 Agent-native, model-agnostic. We don’t ship an agent. The claude / codex / cursor-agent / copilot / hermes / kimi already on your PATH are the design engine. Swap with one click.
  • 🧠 Brand-grade by default. Every render reads the active package’s DESIGN.md as the core brand contract. 151 design-system packages ship with the repo; legacy packages may be DESIGN.md-only, while newer packages can add manifest.json, tokens.css, components, assets, and provenance. Drop a folder in, the picker finds it.
  • 🖥️ Local-first, BYOK at every layer. Native desktop apps for macOS (Apple Silicon + Intel) and Windows (x64). Linux AppImage on the optional release lane. Product analytics and session replay are consent-gated; scrubbed safety and reliability telemetry is always on. Before describing daemon data paths, contributors and operators MUST read AGENTS.md → Daemon data directory contract. This README MUST NOT restate it.
  • 🌍 Composable on four planes. Plugins carry runnable workflows · functional skills carry agent behavior · design templates carry rendering blueprints · design systems carry the brand. All four use portable, versionable directories that anyone can author and publish.
  • 🔁 Refresh an existing codebase. Hand a git repo + DESIGN.md to the agent and it refactors your real components to the brand spec. Dedicated plugins migrate Figma / Pencil workflows into React / Next.js / Vue code.
  • 🔒 Privacy by conviction. Everything runs where your data lives — your laptop, your team’s server, your Vercel project. When the network is needed, the BYOK proxy is SSRF-guarded.

Comparison

Claude Design Figma Lovable / v0 / Bolt Open Design
Open source ❌ ❌ ❌ ✅ Apache-2.0
Self-host / desktop ❌ ❌ ❌ ✅ macOS + Windows + Docker + Vercel web
Agent-native (runs in your CLI) Anthropic only ❌ Cloud agent only ✅ 25 CLIs + BYOK
Brand-grade DESIGN.md Proprietary Theme JSON Limited tokens ✅ 151 systems shipped
Skills / plugins / templates Closed Plugin store Closed ✅ 100+ functional skills · rendering templates · 277 plugins
HyperFrames (HTML→MP4) ❌ ❌ ❌ ✅ First-class
Refresh an existing repo to brand ❌ ❌ ❌ ✅ via agent + DESIGN.md
Minimum billing Pro / Max / Team Pro / Org Pro / Team BYOK · any compatible endpoint

Quick start

The fastest way to use Open Design. No Node, no pnpm, no clone.

After install: the app auto-detects every coding-agent CLI on your PATH, loads 100+ functional skills, the separate rendering-template catalog, and 151 design systems, and lets you type a brief in the entry view.

🤖 Install into your coding agent (no UI)

You can use Open Design without ever opening the GUI — call it as a skill, plugin, or MCP server inside Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi, and more.

If you installed the macOS desktop app via the DMG or Homebrew cask, your shell may still resolve od to Apple’s built-in /usr/bin/od octal-dump utility. In that case, open Settings → MCP server in the desktop app and copy the client-specific snippet; it uses absolute paths and does not rely on the bare od command.

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw
#         | antigravity | pi | vibe | hermes | cline | kimi | kiro
#         | trae | opencode

# Hosted equivalent for curl-based setup:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

install.sh is a thin shell wrapper around od mcp install; it exists so the hosted URL returns shell instead of the landing-page HTML fallback and fails fast if your shell resolves a non-Open-Design od binary.

macOS / WSL2 users: /usr/bin/od is a system octal-dump command and can shadow Open Design’s od command. Desktop-app users should prefer the Settings → MCP server snippet; WSL2 users should follow the WSL2 setup guide first.

Then, inside the agent:

> Use open-design to generate a landing page with the Linear design system

In a filesystem-backed local CLI run, the agent composes the selected functional skill or design template with your DESIGN.md, writes the canonical project files, and Open Design previews those files. A BYOK/plain-API run without filesystem tools instead returns one complete <artifact> block.

🐳 Run with Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://localhost:7456

macOS users: If the web UI shows Authorization: Bearer <OD_API_TOKEN> required, Docker Desktop bridge networking is the cause. See Docker Desktop on macOS for the fix.

🚀 Deploy on Sealos

Deploy on Sealos

The Sealos App Store template runs the published Open Design Docker image with persistent workspace storage and Basic Auth on the public proxy. For custom public or shared Docker deployments, follow the reverse-proxy and OPEN_DESIGN_ALLOWED_ORIGINS guidance in deploy/README.md.

🧑‍💻 Run from source

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Open the URL printed by tools-dev; development ports are allocated dynamically unless you pass explicit port flags.

Node ~24, pnpm 10.33.x. WSL2 users, see docs/wsl-setup.md; native Windows users, see docs/windows-troubleshooting.md. Full quickstart, env vars, Nix flake, and packaged build flow → QUICKSTART.md.

A full workflow — from brief to artifact

brief → plugin → direction → design system → artifact → handoff → memory

  1. A PM submits a brief. The plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard…
  2. A designer (or the agent) locks the direction. No brand? Pick from 5 curated directions. Have a brand? Drop a screenshot / URL → the agent connects GitHub, imports Figma, and codifies a reusable DESIGN.md.
  3. The agent creates the first deliverable. Plugin + functional skill or design template + DESIGN.md are bound. Filesystem-backed CLI runs write canonical project files and the preview follows them; BYOK/plain-API runs without file tools return one complete <artifact> block.
  4. Hand off to engineering. The artifact is real HTML/CSS — drop it into Cursor, Codex, or Claude Code to keep building as code. Or export PPTX / PDF / MP4 straight to marketing.
  5. Open Design gets smarter as you use it. Your screenshots, fonts, palettes, and confirmed artifacts accumulate as defaults for the next session. Less rework, less drift.

Use Open Design from your coding agent

Open Design ships a stdio MCP server and per-agent install scripts. Any MCP-compatible agent in another repo can read files from your local Open Design projects directly — tokens CSS, JSX components, entry HTML — as a structured API queryable by name. The agent always sees the live file, not a stale export.

# One-line install (16+ CLIs supported):
od mcp install <agent>

# Then the agent can:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json

Why MCP? Exporting and re-attaching a zip every iteration breaks flow. MCP exposes the design source directly — the agent always sees the live file.

For an agent starting from scratch, the installer places ~/.config/<agent>/open-design.json (or the platform equivalent) plus a copy-paste MCP snippet. Cursor gets a one-click deeplink; Claude Code gets a claude mcp add-json one-liner; every other agent gets JSON in the schema its config expects. On macOS desktop installs, prefer that Settings snippet over typing bare od mcp install <agent> in Terminal, because /usr/bin/od may win on PATH. Full per-agent flow → Settings → MCP server in the desktop app, or docs/agent-adapters.md.

Security model. Read-only by default, the daemon binds to 127.0.0.1, and SSRF is blocked at the proxy edge. LAN exposure requires an explicit OD_BIND_HOST plus OD_ALLOWED_ORIGINS. Connector credentials and live-artifact preview routes stay loopback-only regardless.

Internally-hosted model endpoints. To prevent SSRF, the daemon blocks provider base URLs that resolve to private/internal address ranges (RFC1918, link-local, CGNAT, and cloud-metadata IPs) by default, surfacing Internal IPs blocked. If you run an internally-hosted gateway (e.g. LiteLLM or Ollama on a VPN-only 10.x/192.168.x address), opt that host out with OD_ALLOWED_INTERNAL_HOSTS=<host1>,<host2>,... — a comma- or whitespace-separated list of bare hostnames or IPs (10.0.0.5, litellm.internal.corp; a host:port or full URL is accepted and reduced to its hostname; IPv6 must be bracketed, e.g. [fd00::1]). The allowlist is strict opt-in (empty by default), exact-host (no subdomain/substring matching), and applies only to provider endpoints you configure (connection test, model discovery, BYOK chat). It deliberately does not relax the guard on download URLs returned inside upstream responses, which stay blocked. A malformed entry — or CIDR notation, which is not supported — is dropped with a warning rather than silently trusted, so a typo never quietly widens (or fails to widen) the guard. Allowlisting a hostname trusts whatever it resolves to (like OD_ALLOWED_ORIGINS); allowlist the resolved IP instead if you want the DNS-resolved address re-checked.

Skills and design templates

100+ functional skills ship in skills/. Each follows the Agent Skills SKILL.md convention and supplies reusable agent behavior, references, or utilities. Renderable starters live separately in design-templates/; they may also use SKILL.md, but they populate the design-template catalog rather than the functional-skill registry.

Two modes anchor the design-template catalog: prototype (web/mobile/desktop single-page artifacts) and deck (horizontal-swipe presentations). Other templates cover image, video, audio, and utility surfaces. The scenario field groups templates by audience: design · marketing · operation · engineering · product · finance · hr · sale · personal.

Design template Mode Scenario What it produces
web-prototype prototype design Default landing page / hero
saas-landing prototype marketing Hero / features / pricing / CTA
dashboard prototype operation Admin / analytics (with sidebar)
mobile-app prototype design iPhone 15 Pro / Pixel framed app
mobile-onboarding prototype design Splash · value-prop · sign-in flow
social-carousel prototype marketing 3-card 1080×1080 carousel
email-marketing prototype marketing Table-fallback-safe brand email
magazine-poster prototype marketing Single-page magazine layout
motion-frames prototype marketing Looping CSS motion hero
sprite-animation prototype marketing 8-bit pixel animated explainer
pm-spec prototype product PM spec doc (with TOC + decision log)
team-okrs prototype product OKR scorecard
eng-runbook prototype engineering Incident runbook
finance-report prototype finance Exec finance summary
hr-onboarding prototype hr Role onboarding plan
guizang-ppt deck marketing Magazine-style web PPT (deck default)
html-ppt-* deck marketing 15 deck templates × 36 themes (master template in design-templates/html-ppt/)
hyperframes video marketing HTML → MP4 motion graphics (HeyGen OSS framework)
critique utility design Five-dimensional self-critique scoresheet
tweaks utility design AI-emitted tweaks-panel manifest

Full protocol and directory split → docs/skills-protocol.md. Registry endpoints: GET /api/skills for functional skills and GET /api/design-templates for rendering templates.

Design Systems

151 brand-grade design-system packages centered on DESIGN.md ship with the repo. Legacy packages may contain only that Markdown contract; newer packages can also carry manifest.json, compiled tokens.css, component fixtures, assets, and provenance evidence. The catalog mixes upstream-derived systems with project-owned additions; design-systems/README.md records the package shape and provenance. Switch a system → the next render uses the new tokens.

Full catalog (click to expand)

AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

Developer Tools — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

Productivity — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

Fintech — stripe · coinbase · binance · kraken · mastercard · revolut · wise

E-commerce — shopify · airbnb · uber · nike · starbucks · pinterest

Media — spotify · playstation · wired · theverge · meta

Automotive — tesla · bmw · ferrari · lamborghini · bugatti · renault

Other — apple · ibm · nvidia · vodafone · resend · spacex

Starters — default (Neutral Modern) · warm-editorial

Re-import the library via scripts/sync-design-systems.ts. Add your own brand → drop a DESIGN.md into design-systems/<brand>/. Full guide → design-systems/README.md.

Plugins

277 official plugins plus 183 remixable reference examples live in plugins/_official/. Each entry is a portable plugin directory anchored by open-design.json plus the payload required by its type: for example SKILL.md for agent workflows, template.json for media templates, or DESIGN.md for design-system entries. Jump straight to a category:

Category Count Contents
scenarios/ 13 Complete design scenarios — od-default, od-design-refine, od-figma-migration, od-code-migration, od-react-export, od-nextjs-export, od-vue-export, od-media-generation, od-new-generation, od-tune-collab, od-plugin-authoring, od-share-to-community, od-web-effect-extractor
image-templates/ 45 One-shot image prompts — editorial, cinematic, product, portrait
video-templates/ 63 HyperFrames / Seedance / Veo motion templates
design-systems/ 143 Brand DESIGN.md wrapped as plugins
atoms/ 13 Reusable UI fragments (buttons, heroes, KPI cards)
examples/ 183 Remixable reference outputs

Also plugins/community/ for community plugins and plugins/registry/ for the publishing flow.

What plugins can do

  • 🤖 Run in any coding agent — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… through the same skill protocol the agent already knows.
  • 🔁 Migrate Figma / Pencil workflows → React, Next.js, or Vue source. See od-figma-migration.
  • 🛠️ Refresh an existing codebase to a brand spec — point a plugin at a git repo + DESIGN.md, get a PR. See od-code-migration.
  • 💾 Persist custom workflows — your team’s reusable templates sit next to the shipped ones.

Using plugins

Plugins are at full parity across the web UI and the od CLI — same /api/plugins endpoints, pick whichever fits.

In the desktop / web app: open the Plugin page to browse the marketplace and click Install; inside a project’s Studio, plugins appear as composer chips you click to apply (with the inputs they declare).

On the command line (runs without a UI — this is the path external agents use):

od plugin list                       # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page"      # search by keyword
od plugin info od-default            # inspect a plugin's metadata, inputs, capabilities
od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default         # upgrade
od plugin uninstall od-default       # uninstall

Every command supports --json, so you can pipe it through jq / xargs into automation.

Building a plugin

An Open Design plugin requires open-design.json plus the payload required by its type. A workflow skill or scenario also includes SKILL.md; manifest-only template and design-system entries use their own payloads instead:

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omitted for other plugin types
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

Core open-design.json fields: specVersion (currently 1.0.0), name (stable ID), version (semver), optional compat.agentSkills[].path (points at ./SKILL.md when the entry exposes an Agent Skill), od.kind (skill / scenario / atom / bundle), od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode (the output surface, e.g. prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario), od.capabilities[] (declare the minimum — a restricted install grants only prompt:inject by default), od.inputs[] (apply-time parameters).

Scaffold + validate locally:

od plugin scaffold --id my-plugin --title "My Plugin"   # generate the skeleton
od plugin validate ./my-plugin                          # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

Full field set and runtime contract → plugins/spec/SPEC.md; developing a plugin with a coding agent → plugins/spec/AGENT-DEVELOPMENT.md; copy-paste minimal templates → plugins/spec/examples/.

Contributing a plugin

  1. Drop the plugin folder into plugins/community/ (third-party plugins), or — to ship it bundled with Open Design — into the matching tier of plugins/_official/.
  2. Pass validation: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
  3. Fill the PR using the template in plugins/spec/CONTRIBUTING.md (ID, version, lane, mode, capabilities, trigger examples; attach a screenshot / preview for visual plugins).
  4. To publish to an external registry (skills.sh / ClawHub / standalone GitHub) → plugins/spec/PUBLISHING-REGISTRIES.md.

Plugin registry endpoint: GET /api/plugins. Directory overview → plugins/README.md (简体中文).

Architecture

┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│  chat · file workspace · iframe preview · settings · import · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  local daemon (Express+SQLite)  │   ─→ any OpenAI-compatible BYOK,
   │                                  │       SSRF-guarded at the edge
   │  /api/skills    /api/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Local runtime definitions come from runtimes/registry.ts;                 │
   │  the base registry has 26 definitions (including byok-opencode),           │
   │  backed by 25 distinct local CLI executables because byok-opencode shares │
   │  the OpenCode executable. See docs/agent-adapters.md.                     │
   │  composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘
Layer Stack
Frontend Next.js 16 App Router + React 18 + TypeScript
Daemon Node 24 · Express · SSE streaming · better-sqlite3
Storage Before changing or documenting daemon storage paths, you MUST read AGENTS.md → Daemon data directory contract. This README MUST NOT restate it.
Preview Filesystem runs render canonical project files; BYOK/plain-API runs parse one complete <artifact> block into a sandboxed srcdoc iframe
Export HTML (inlined) · PDF (browser print) · PPTX (agent-driven) · ZIP · Markdown · MP4 (HyperFrames)
Desktop Electron shell + sandboxed renderer + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Lifecycle One entry point: pnpm tools-dev (start / stop / run / status / logs / inspect / check)

Full architecture → docs/architecture.md. Skill protocol → docs/skills-protocol.md. Agent adapter contract → docs/agent-adapters.md.

Roadmap

  • Daemon + 26 runtime definitions across 25 distinct coding-agent CLI executables + skill/design-template registries + design-system catalog
  • Web app + chat + question form + 5-direction picker + todo progress + sandboxed preview
  • 100+ functional skills · separate rendering-template catalog · 151 design-system packages · 5 visual directions · 5 device frames
  • SQLite-backed projects · conversations · messages · tabs · templates
  • Multi-provider BYOK proxy (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) with OpenAI-compatible presets including Atlas Cloud + SSRF guard
  • Claude Design ZIP import (/api/import/claude-design)
  • Sidecar protocol + Electron desktop + IPC automation
  • Artifact lint API + 5-dim self-critique pre-emit gate
  • 0.8.0 — plugin marketplace infrastructure (261 official plugins, manifest spec, per-agent install scripts)
  • 0.9.0 — Open Design Cloud (official model service built into the app: zero config, one-click sign-in)
  • 0.10.0 — the all-in-one design workspace: the whole craft loop in one window (references → material → interactive editing → motion → handoff)
  • 0.11.0 — The Bazaar: built in the open — a community marketplace of plugins and design systems anyone can pick from and contribute to
  • 0.12.0 — Brand-backed Design System: turn the brand you already own into a reusable, portable DESIGN.md system
  • 0.13.0 — Stay in Flow: native session resume, faster model picking, and export straight to screenshot-backed PPTX / PDF
  • Packaged Electron builds — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (optional lane)
  • Comment-mode surgical edits — partially shipped; reliable targeted patching in progress
  • AI-emitted tweaks panel UX — not yet implemented
  • npx od init to scaffold a project with DESIGN.md
  • Plugin SDK + od plugin {add,list,remove,test,publish} CLI
  • Figma / Pencil → React / Next / Vue migration plugins (alpha)
  • Refresh-existing-codebase plugin (point at a git repo + DESIGN.md)

Phased delivery → docs/roadmap.md.

Community

Real people behind every channel.

  • 💬 Discord — daily chat, plugin sharing, questions → discord.gg/mHAjSMV6gz
  • 🐦 X / Twitter — release notes, milestones, behind the scenes → @OpenDesignHQ
  • 🗣️ GitHub Discussions — deep Q&A, RFCs, “show your work” → Discussions
  • 🐛 GitHub Issues — bug reports, feature requests → Issues

The good-first-issue and help-wanted labels are the easiest way in.

Contributing

Open Design keeps moving because contributors — designers, engineers, prompt authors — keep showing up. Many of the most-used skills, design systems, and plugins were written by people outside the core team.

🎯 Where to start (max leverage, min change)

Want to ship… How Where
A new functional skill Drop a folder with SKILL.md + optional assets/ + references/ skills/ · spec in docs/skills-protocol.md
A new rendering design template Add a renderable SKILL.md bundle design-templates/
A new design system Drop a package centered on DESIGN.md; add manifest.json, tokens.css, components, assets, or provenance when needed design-systems/<brand>/
A new plugin Drop open-design.json + the type-specific payload under a category folder plugins/community/ · spec in plugins/spec/SPEC.md · agent dev guide in plugins/spec/AGENT-DEVELOPMENT.md
Support a new coding-agent CLI One runtime definition + registry entry; add a parser only for a new wire format apps/daemon/src/runtimes/defs/
Fix a bug or polish UI Browse the good-first-issue label Issues →
Translate the docs Update the README.<lang>.md files TRANSLATIONS.md

🤖 Contributing as an agent

If you are the agent reading this, the fastest path is:

# 1. Boot locally
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web

# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number>   # create a branch and worktree

# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. Open the PR
gh pr create --fill

Full agent-friendly contribution flow, code style, and PR bar → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

🏅 Open Design Fellow program

We’re recruiting Open Design Fellows around the world — Fellows shape the product alongside the core team, represent Open Design officially in their region, and grow the community locally, backed by funded support ($1,000 / MR), free LLM credits, and a direct review track. Details → MAINTAINERS.md and the announcement on Discord.

Maintainers

They carry a lot of the load — daily maintenance, review, and community support.

@Nagendhra-web
@Nagendhra-web
Maintainer 		@Sid-Qin
@Sid-Qin
Maintainer 		@YOMXXX
@YOMXXX
Maintainer

Maintainer rules, promotion criteria, and the exit protocol → MAINTAINERS.md (also Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

Contributors

Thanks to everyone who has taken part — code, docs, feedback, a sharp issue, a new skill, a new design system.

Open Design contributors

Repository activity

Open Design — repository metrics

The SVG above is regenerated daily by .github/workflows/metrics.yml using lowlighter/metrics.

Star us

Star Open Design on GitHub — github.com/nexu-io/open-design

If this saved you thirty minutes, give it a ★. Stars don’t pay rent — but they tell the next designer, agent, and contributor that this experiment is worth their attention. One click, three seconds, a real signal.

Open Design star history

References & lineage

Project Role
Claude Design The closed-source product this repo is the open-source alternative to.
alchaincyf/huashu-design The design-philosophy compass — junior-designer workflow, brand-asset protocol, anti-AI-slop checklist, five-dimensional critique.
op7418/guizang-ppt-skill The magazine-style web PPT skill, bundled verbatim under design-templates/guizang-ppt/. Default for deck mode.
lewislulu/html-ppt-skill The HTML PPT Studio family — 15 deck templates, 36 themes, 31 page layouts, animation runtime, magnetic-card presenter mode.
OpenCoworkAI/open-codesign The first open-source Claude Design alternative; UX patterns we borrow (streaming-artifact loop, sandboxed iframe, live agent panel).
multica-ai/multica The daemon + adapter architecture — PATH-scan agent detection, local daemon as the only privileged process.
VoltAgent/awesome-design-md Historical source of the original 9-section DESIGN.md schema and 70 upstream-derived systems; current packages may extend that baseline.
bergside/awesome-design-skills Source of the 57 design skills added under design-systems/.
heygen-com/hyperframes The HTML→MP4 motion-graphics framework, integrated as the first-class hyperframes-html in Open Design.
Claude Code skills The SKILL.md convention we adopt verbatim.

Detailed provenance → docs/references.md.

License

Apache-2.0. Bundled skills and templates with their own LICENSE files retain those licenses, including design-templates/guizang-ppt/ (MIT, @op7418), design-templates/html-ppt/ (MIT, @lewislulu), and skills/web-clone/ (MIT, @Jane-xiaoer).

关于
typescripthtmlcss
README.md
1.9 GB
邀请码
    Gitlink（确实开源）
  • 加入我们
  • 官网邮箱：gitlink@ccf.org.cn
    • QQ群
  • QQ群
    • 公众号
  • 公众号

版权所有：中国计算机学会技术支持：开源发展技术委员会
京ICP备13000930号-9 京公网安备 11010802047560号