open-codesign-ai-design

What this skill does

```markdown
---
name: open-codesign-ai-design
description: Open-source Claude Design alternative — turn prompts into prototypes/slides/PDFs locally with any AI model (Claude, GPT, Gemini, Ollama) via BYOK
triggers:
  - "set up open codesign"
  - "use open codesign to generate UI"
  - "prompt to prototype with open codesign"
  - "add a model provider to open codesign"
  - "import claude code api key into open codesign"
  - "build a design skill module for open codesign"
  - "export prototype as PDF or PPTX from open codesign"
  - "configure ollama with open codesign"
---

# Open CoDesign AI Design Skill

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection

Open CoDesign is an MIT-licensed, local-first Electron desktop app that turns text prompts into polished HTML/JSX prototypes, slide decks, and marketing assets. It supports 20+ models via BYOK (Anthropic, OpenAI, Gemini, DeepSeek, Kimi, GLM, Ollama, OpenRouter, any OpenAI-compatible relay). No subscription, no mandatory cloud — credentials stay in `~/.config/open-codesign/config.toml`.

---

## Installation

### Pre-built binaries (fastest)

Download from [GitHub Releases](https://github.com/OpenCoworkAI/open-codesign/releases):

| Platform | File |
|---|---|
| macOS Apple Silicon | `open-codesign-*-arm64.dmg` |
| macOS Intel | `open-codesign-*-x64.dmg` |
| Windows x64 | `open-codesign-*-x64-setup.exe` |
| Linux x64 | `open-codesign-*-x64.AppImage` |

**macOS Gatekeeper bypass (unsigned v0.1.x):**
```sh
xattr -cr "/Applications/Open CoDesign.app"
```

**Homebrew (macOS):**
```sh
brew install --cask opencoworkai/tap/open-codesign
```

**Scoop (Windows):**
```sh
scoop bucket add opencoworkai https://github.com/OpenCoworkAI/scoop-bucket
scoop install open-codesign
```

### Build from source

```sh
git clone https://github.com/OpenCoworkAI/open-codesign.git
cd open-codesign
npm install
npm run build
npm start
```

Development mode with hot reload:
```sh
npm run dev
```

---

## Configuration

Credentials live in `~/.config/open-codesign/config.toml` (mode `0600`). Never commit this file.

### Manual config.toml

```toml
[providers.anthropic]
api_key = "$ANTHROPIC_API_KEY"   # set in shell; app reads env vars too
default_model = "claude-opus-4-5"

[providers.openai]
api_key = "$OPENAI_API_KEY"
default_model = "gpt-4o"

[providers.gemini]
api_key = "$GEMINI_API_KEY"
default_model = "gemini-2.0-flash"

[providers.ollama]
base_url = "http://localhost:11434"
default_model = "llama3.2"

[providers.openrouter]
api_key = "$OPENROUTER_API_KEY"
base_url = "https://openrouter.ai/api/v1"
default_model = "anthropic/claude-opus-4-5"

[app]
theme = "dark"           # "light" | "dark" | "system"
locale = "en"            # "en" | "zh-CN"
save_path = "~/Documents/open-codesign"
```

### One-click import from Claude Code / Codex

Open CoDesign auto-detects:
- `~/.config/claude/config.toml` (Claude Code)
- `~/.config/codex/config.toml` (OpenAI Codex CLI)

Click **Settings → Import from Claude Code** or **Import from Codex** — providers, models, and keys transfer in a single click with no copy-paste.

---

## Core TypeScript API

Open CoDesign exposes an internal TypeScript API used by both the Electron main process and renderer. When contributing or extending:

### Provider client factory

```typescript
// src/providers/factory.ts
import { createProviderClient } from '@open-codesign/providers';

const client = createProviderClient({
  provider: 'anthropic',           // 'anthropic' | 'openai' | 'gemini' | 'ollama' | 'openrouter'
  apiKey: process.env.ANTHROPIC_API_KEY!,
  model: 'claude-opus-4-5',
  baseUrl: undefined,              // override for OpenAI-compatible relays
});

const stream = await client.streamGenerate({
  systemPrompt: 'You are a UI designer...',
  userMessage: 'Create a SaaS pricing page with three tiers',
  temperature: 0.7,
  maxTokens: 8192,
});

for await (const chunk of stream) {
  process.stdout.write(chunk.text ?? '');
}
```

### Artifact generation

```typescript
// src/generation/artifact.ts
import { generateArtifact } from '@open-codesign/generation';

const artifact = await generateArtifact({
  prompt: 'A glassmorphism login card with email + password fields',
  outputFormat: 'html',     // 'html' | 'jsx' | 'react'
  skills: ['glassmorphism', 'landing-page'],   // built-in skill modules
  provider: 'anthropic',
  model: 'claude-opus-4-5',
  apiKey: process.env.ANTHROPIC_API_KEY!,
});

console.log(artifact.code);   // full HTML string
console.log(artifact.title);  // auto-generated title
console.log(artifact.skills); // skills the model selected
```

### Export artifact

```typescript
import { exportArtifact } from '@open-codesign/export';

// Export to PDF
await exportArtifact({
  artifactId: 'abc123',
  format: 'pdf',              // 'pdf' | 'pptx' | 'html' | 'zip' | 'markdown'
  outputPath: './output/design.pdf',
  options: {
    pageSize: 'A4',           // pdf only
    landscape: false,
  },
});

// Export to PPTX (slide deck)
await exportArtifact({
  artifactId: 'abc123',
  format: 'pptx',
  outputPath: './output/pitch-deck.pptx',
  options: {
    slideWidth: 1280,
    slideHeight: 720,
  },
});
```

### Comment-mode patch

```typescript
import { patchArtifactRegion } from '@open-codesign/generation';

// Rewrite only the region the user pinned
const patched = await patchArtifactRegion({
  artifactId: 'abc123',
  elementSelector: '#pricing-card-pro',
  comment: 'Make this card stand out more — use a gradient border and bold CTA',
  provider: 'anthropic',
  model: 'claude-opus-4-5',
  apiKey: process.env.ANTHROPIC_API_KEY!,
});

console.log(patched.diff);   // unified diff of the change
```

---

## Design Skill Modules

### Built-in skills (12)

`slide-deck` · `dashboard` · `landing-page` · `svg-charts` · `glassmorphism` · `editorial-typography` · `hero` · `pricing` · `footer` · `chat-ui` · `data-table` · `calendar`

Skills are selected automatically per prompt, but you can specify them explicitly:

```typescript
const artifact = await generateArtifact({
  prompt: 'Monthly revenue dashboard',
  skills: ['dashboard', 'svg-charts', 'data-table'],
  // ...
});
```

### Custom SKILL.md (project-level taste layer)

Create `SKILL.md` in your project root to teach the model your design system:

```markdown
# My Design System

## Colors
- Primary: #6366F1 (Indigo 500)
- Surface: #0F172A
- Text primary: #F8FAFC

## Typography
- Headings: Inter, weight 700, tracking -0.02em
- Body: Inter, weight 400, line-height 1.6

## Components
- Buttons: 8px border-radius, 44px min-height, always include focus ring
- Cards: 12px border-radius, 1px border rgba(255,255,255,0.08), backdrop-blur

## Rules
- Never use pure black backgrounds — use #0F172A or #020617
- Always include hover and focus states
- Prefer CSS Grid over flexbox for page-level layout
```

The app picks up `SKILL.md` automatically when it exists in the working directory.

---

## Ollama (local / offline)

```sh
# Install and pull a model
ollama pull llama3.2
ollama pull qwen2.5-coder:7b

# Verify it's running
curl http://localhost:11434/api/tags
```

In `config.toml`:
```toml
[providers.ollama]
base_url = "http://localhost:11434"
default_model = "qwen2.5-coder:7b"
```

Open CoDesign calls `/api/chat` (streaming) and `/api/tags` (model discovery) — no extra configuration needed once Ollama is running.

---

## OpenRouter / OpenAI-compatible relays

```toml
[providers.openrouter]
api_key = "$OPENROUTER_API_KEY"
base_url = "https://openrouter.ai/api/v1"
default_model = "google/gemini-2.0-flash-001"
```

Any relay that implements the OpenAI Chat Completions API (`/v1/chat/completions`) works here, including SiliconFlow, Together AI, and self-hosted vLLM.

---

## Project structure (for contributors)

```
open-codesign/
├── src/
│   ├── main/           # Electron main process (Node.js)
│   │   ├── ipc/        # IPC handlers for generation, export, settings
│   │   └── providers/  # Provider clients (Anthropic, OpenAI, Gemini…)
│   ├