Agent skill · design visual · aradotso
open-design-ai
open-design-ai — an agent skill for coding agents.
Why this skill is useful
Adds a local-first design workflow with 19 skills and the ability to export various design artifacts, which the AI cannot generate on its own.
What it needs
Requires node, pnpm installed locally. About 8k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
bash git clone https://github.com/nexu-io/open-design.git cd open-design pnpm install pnpm dev bash pnpm build vercel deploy bash pnpm build npm start bash Required only when using the Anthropic API BYOK fallback (not needed if you rely on a local agent CLI) ANTHROPICAPIKEY=$ANTHROPICAPIKEY Optional: pin which agent the daemon prefers ODAGENT=claude # claude codex cursor gemini opencode qwen Optional: override the port the local daemon listens on ODDAEMONPORT=4242 Optional: working directory for on-disk project folders ODWORKSPACEDIR=$HOME/.open-design/workspace Browser (Next.js) │ streaming SSE / WebSocket ▼ Local Daemon (src/daemon/) │ spawns agent CLI in a real on-disk project folder ▼ Agent CLI (claude / codex / gemini / …) │ Read · Write · Bash · WebFetch against workspace ▼ Skill stack (skills/<name>/SKILL.md + seed template + checklist) │ structured <artifact> tag in agent output ▼ Sandboxed iframe preview (srcdoc, vendored React 18 + Babel) yaml skills/web-prototype/SKILL.md --- name: web-prototype description: Interactive single-page web prototype od: mode: prototype # prototype deck template platform: web scenario: landing preview: iframe designsystem: linear # default design system slug triggers: build me a landing page create a web prototype make a SaaS homepage --- typescript // src/app/api/design/route.ts (simplified excerpt) const response = await fetch('/api/design', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ skill: 'web-prototype', // skill slug designSystem: 'linear', // design system slug (optional) direction: 'modern-minimal', // visual direction (optional, no-brand fallback) brief: 'A SaaS pricing page for a developer tool', discovery: { // answers from the turn-1 discovery form surface: 'web', audience: 'developers', tone: 'technical', scale: 'single-page', }, }), }); // Response is a Server-Sent Events stream const reader = response.body!.getReader(); const decoder = new TextDecoder(); while (true …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/open-design-ai