### Interactive Install Walkthrough Example

Source: https://github.com/nexu-io/open-design/blob/main/docs/install-guide.md

This is an example of the interactive installer wizard for Open Design. It shows the prompts for Docker image, port, CORS origins, and memory limit.

```bash
  ╔══════════════════════════════════════╗
  ║         O P E N   D E S I G N        ║
  ║          One-Click Installer         ║
  ╚══════════════════════════════════════╝

[open-design] OS: Linux ubuntu 24.04 (x86_64)
[open-design] Docker: Docker version 26.1.3, build b72abbb
[open-design] Compose: Docker Compose version v2.27.1

Docker image [ghcr.io/nexu-io/od:latest]:
Port [7456]:
Allowed origins (CORS, comma-separated, or empty) []:
Memory limit [384m]:

[open-design] Pulling image: ghcr.io/nexu-io/od:latest
[open-design] Starting Open Design...
[open-design] Waiting for health check (up to 60s)...
[open-design] Daemon is healthy (200 OK)
```

--------------------------------

### Install and Run Open Design

Source: https://github.com/nexu-io/open-design/blob/main/apps/landing-page/app/content/tutorials/open-design-31-skills-72-systems-popular-ai.md

Follow these steps to set up the Node.js environment, clone the repository, install dependencies, and start the development server. Ensure Node version 24 is installed and active.

```bash
# 1. Make sure you're on Node 24 (nvm shown; skip if you already are)
nvm install 24 && nvm use 24
corepack enable           # gives you the pinned pnpm

# 2. Clone and install
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install

# 3. Run it
pnpm tools-dev run web
```

--------------------------------

### Install and Run Open Design Locally

Source: https://github.com/nexu-io/open-design/blob/main/apps/landing-page/app/content/tutorials/open-design-full-walkthrough-self-hosted-alternative-ai-stack-engineer.md

Clone the repository, install dependencies using pnpm, and start the web server. This process may take a moment due to the number of dependencies.

```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install   # this pulls a lot of deps — give it a minute
pnpm tools-dev run web
```

--------------------------------

### Install and Development Commands

Source: https://github.com/nexu-io/open-design/blob/main/AGENTS.md

Use these commands for initial setup, running development servers, and checking project status.

```bash
pnpm install
pnpm nix:update-hash
pnpm tools-dev
pnpm tools-serve start updater
pnpm tools-dev start web
pnpm tools-dev run web --daemon-port 17456 --web-port 17573
pnpm tools-dev status --json
pnpm tools-dev logs --json
pnpm tools-dev inspect desktop status --json
pnpm tools-dev inspect desktop screenshot --path /tmp/open-design.png
pnpm tools-dev stop
pnpm tools-dev check
```

--------------------------------

### Install OD CLI and Start Headless Daemon

Source: https://github.com/nexu-io/open-design/blob/main/docs/plugins-spec.md

One-time setup to install the OD CLI globally and start the daemon in headless mode. Ensure the port is specified for headless operation.

```bash
# One-time setup: install the OD CLI as an npm global (publishable as @open-design/cli).
npm install -g @open-design/cli

# Start the daemon in headless mode — no web bundle, no electron, no browser.
od daemon start --headless --port 17456
```

--------------------------------

### Project Installation and Development Commands

Source: https://github.com/nexu-io/open-design/blob/main/docs/assets/_cover/star.html

Commands to clone the repository, install dependencies, and start the development server for the Open Design project.

```bash
git clone · pnpm install · pnpm dev
```

--------------------------------

### Run Open Design from Source

Source: https://github.com/nexu-io/open-design/blob/main/README.md

Clone the repository, install dependencies using pnpm, and start the web development server. Ensure you have Node.js and pnpm installed.

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

--------------------------------

### Install Dependencies and Run Web Dev Server

Source: https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md

Use this command to install project dependencies and start the web development server, which includes the daemon and web UI.

```bash
corepack enable
pnpm install
pnpm tools-dev run web # starts daemon + web in the foreground
# open the web URL printed by tools-dev
```

--------------------------------

### Install and Run Local Daemon + Web

Source: https://github.com/nexu-io/open-design/blob/main/docs/architecture.md

Install project dependencies and start the daemon and web foreground loop locally. Ensure reverse proxy configurations are set to handle SSE streams correctly.

```sh
pnpm install
pnpm tools-dev run web       # starts daemon + web foreground loop
```

--------------------------------

### Clone and Run Open Design Locally

Source: https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/html-ppt-course-module/example.html

Steps to clone the Open Design repository, install dependencies, and start the development server which includes the daemon and web UI. This setup runs locally, detecting coding agents on your PATH.

```bash
git clone https://github.com/nexu-io/open-design
cd open-design
pnpm install
pnpm tools-dev   # starts the daemon + web UI
```

--------------------------------

### Clone Repository and Run Installer

Source: https://github.com/nexu-io/open-design/blob/main/docs/install-guide.md

Clone the Open Design repository and execute the installation script to deploy the application. This script automates the setup process.

```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
bash deploy/scripts/install.sh
```

--------------------------------

### Copy Environment Template

Source: https://github.com/nexu-io/open-design/blob/main/deploy/README.md

Before starting, copy the example environment file to a new file named .env. This file will store your configuration settings.

```bash
cp .env.example .env
```

--------------------------------

### Run Full Development Environment

Source: https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md

Execute this command to start the daemon, web UI, and desktop shell in the background for a complete development setup.

```bash
pnpm tools-dev # starts daemon + web + desktop in the background
```

--------------------------------

### Install a Plugin from the Registry

Source: https://github.com/nexu-io/open-design/blob/main/docs/publishing-a-plugin.md

Refresh the marketplace sources and install a plugin. Installation preserves provenance, source, manifest digest, and archive integrity. Trusted sources install as trusted.

```bash
od marketplace refresh official
od plugin install figma-workflow
od plugin info figma-workflow --json
```

--------------------------------

### CI/CD Integration with Open Design CLI

Source: https://github.com/nexu-io/open-design/blob/main/docs/plugins-spec.md

Example of how to integrate Open Design CLI into a CI/CD pipeline, including starting a headless daemon, installing plugins, and starting a run.

```bash
npm i -g @open-design/cli && od daemon start --headless && od plugin install … && od run start --project … --follow
```

--------------------------------

### Prepare Environment Variables

Source: https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md

Navigate to the deploy directory and copy the example environment file. This file will be used to configure your Open Design instance.

```bash
cd deploy
cp .env.example .env
```

--------------------------------

### Install and Run Development Server

Source: https://github.com/nexu-io/open-design/blob/main/docs/skills-contributing.md

Bootstrap the project and run the development server for the web and daemon. This is typically done once or after significant manifest changes.

```bash
# 1. Bootstrap (only the first time, or after pulling main with manifest changes)
corepack enable
pnpm install

# 2. Run the daemon + web
pnpm tools-dev run web
```

--------------------------------

### Setup and Run Mock CLIs

Source: https://github.com/nexu-io/open-design/blob/main/mocks/README.md

First-time setup involves fetching recordings. Subsequent runs use a local cache. Set the PATH to override real CLIs, specify a trace to play back, and optionally disable delays for faster replay.

```bash
bash mocks/scripts/fetch-recordings.sh
export PATH="$PWD/mocks/bin:$PATH"
export OD_MOCKS_TRACE=04097377
export OD_MOCKS_NO_DELAY=1
echo "any prompt body" | opencode run
echo "any prompt"     | claude -p --output-format=stream-json
echo "any prompt"     | codex exec
```

--------------------------------

### Install GOV.UK Frontend

Source: https://github.com/nexu-io/open-design/blob/main/skills/taste-skill/SKILL.md

Install the GOV.UK Frontend toolkit.

```bash
npm install govuk-frontend
```

--------------------------------

### Compose and Open Worked Example

Source: https://github.com/nexu-io/open-design/blob/main/design-templates/open-design-landing-deck/README.md

Use these commands to generate and view the default worked example of the slide deck.

```bash
# 1. Compose the worked example.
npx tsx scripts/compose.ts inputs.example.json example.html

# 2. Open it.
open example.html
```

--------------------------------

### GSAP Get Property Example

Source: https://github.com/nexu-io/open-design/blob/main/plugins/_official/video-templates/frame-product-promo/source/index.html

Gets the current value of a specific property on a target object. Handles potential array targets and different property types.

```javascript
getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return"native"===e&&(e=""),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i}
```

--------------------------------

### Install and Launch Open Design Studio

Source: https://github.com/nexu-io/open-design/blob/main/design-templates/kami-landing/example.html

Steps to clone the repository, install dependencies, and launch the local development daemon for Open Design Studio.

```bash
git clone https://github.com/nexu-io/open-design
pnpm install
pnpm tools-dev
```

--------------------------------

### GSAP Get Tween By ID Example

Source: https://github.com/nexu-io/open-design/blob/main/plugins/_official/video-templates/frame-product-promo/source/index.html

Retrieves a specific tween using its unique ID.

```javascript
getById:function getById(t){return L.getById(t)}
```

--------------------------------

### Install Open Design from Source

Source: https://github.com/nexu-io/open-design/blob/main/apps/landing-page/app/content/tutorials/open-design-open-source-alternative-claude-design-tony-xhepa.md

Clone the repository, navigate to the directory, enable corepack, install dependencies with pnpm, and run the development server. Ensure Node.js version 24 is installed.

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

--------------------------------

### USAGE.md Example for Cherry Studio

Source: https://github.com/nexu-io/open-design/blob/main/specs/current/design-system-import-project.md

This example shows the content of a USAGE.md file, guiding agents on how to read and use design system files. It specifies read order, design highlights, and do/avoid lists.

```markdown
# Cherry Studio Usage

## Read Order

1. Read `DESIGN.md` for visual principles and product context.
2. Paste `tokens.css` into the first `<style>` block.
3. Use `components.manifest.json` for available component patterns.
4. Pull `preview/app.html` when layout fidelity matters.
5. Pull `source/snippets/*` only when verbatim source behavior matters.

## Design Highlights

- Compact desktop chat client.
- Vibrant green accent.
- Three-column chat layout.
- Ubuntu typography.

## Do

- Preserve compact controls and dense sidebars.
- Reuse brand assets when the product identity is visible.

## Avoid

- Marketing-style landing layouts for core app surfaces.
- Decorative gradients unless source evidence supports them.
```

--------------------------------

### Install Fluent UI Web Components

Source: https://github.com/nexu-io/open-design/blob/main/skills/taste-skill/SKILL.md

Install the framework-free Fluent UI Web Components and tokens.

```bash
npm install @fluentui/web-components @fluentui/tokens
```

--------------------------------

### macOS Lifecycle Management Commands

Source: https://github.com/nexu-io/open-design/blob/main/tools/pack/README.md

Commands for managing the lifecycle of packaged applications on macOS, including installation, starting, stopping, logging, and cleanup.

```bash
tools-pack mac install
```

```bash
tools-pack mac start
```

```bash
tools-pack mac stop
```

```bash
tools-pack mac logs
```

```bash
tools-pack mac uninstall
```

```bash
tools-pack mac cleanup
```

--------------------------------

### Example Transcript Data

Source: https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/hyperframes/references/captions.md

A sample JSON structure representing spoken text with start and end timestamps, used as input for caption generation.

```json
[
  { "text": "Hello", "start": 0.0, "end": 0.5 },
  { "text": "world.", "start": 0.6, "end": 1.2 }
]
```

--------------------------------

### Run Development Server

Source: https://github.com/nexu-io/open-design/blob/main/CONTRIBUTING.md

Start the development server, which includes the daemon and the web foreground loop.

```bash
pnpm tools-dev run web
```

--------------------------------

### GSAP Get Tweens Of Example

Source: https://github.com/nexu-io/open-design/blob/main/plugins/_official/video-templates/frame-product-promo/source/index.html

Retrieves all active tweens associated with a specific target object. The second argument can be used to include children.

```javascript
getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)}
```

--------------------------------

### Enable and Configure Web Frontend

Source: https://github.com/nexu-io/open-design/blob/main/nix/README.md

Enable the bundled Caddy file server and configure its host and allowed origins. This setup is useful for exposing the SPA on a LAN.

```nix
services.open-design.webFrontend = {
  enable = true;
  host = "0.0.0.0";  # caddy listener
  # Every external origin browsers will load the SPA from. The daemon
  # matches each entry against the browser's `Origin` header AND adds
  # its host:port to the `Host`-header allowlist (Caddy v2 reverse_proxy
  # preserves the original Host upstream by default), so list each
  # scheme + hostname combo you actually use.
  allowedOrigins = [
    "http://laptop.local:5174"
    "https://laptop.local:5174"
  ];
};
# On NixOS you also need:
services.open-design.openFirewall = true;
```

--------------------------------

### Docker Run Smoke Test

Source: https://github.com/nexu-io/open-design/blob/main/docs/plugins-spec.md

Verifies the container image starts correctly, the web UI renders, and plugin installation works within the container.

```bash
docker run smoke: image starts, web UI renders, od plugin install works inside the container.
```