Agent skill · design visual · aradotso
open-codesign-ai-design
open-codesign-ai-design — an agent skill for coding agents.
Why this skill is useful
Provides a local-first design tool that integrates with multiple AI models, enabling the generation of UI prototypes and marketing assets that the AI wouldn't generate on its own.
What it needs
Requires open-codesign installed locally. Requires anthropic, gemini, ollama, openai, openrouter account access. About 7k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
sh xattr -cr "/Applications/Open CoDesign.app" sh brew install --cask opencoworkai/tap/open-codesign sh scoop bucket add opencoworkai https://github.com/OpenCoworkAI/scoop-bucket scoop install open-codesign sh git clone https://github.com/OpenCoworkAI/open-codesign.git cd open-codesign npm install npm run build npm start sh npm run dev toml [providers.anthropic] apikey = "$ANTHROPICAPIKEY" # set in shell; app reads env vars too defaultmodel = "claude-opus-4-5" [providers.openai] apikey = "$OPENAIAPIKEY" defaultmodel = "gpt-4o" [providers.gemini] apikey = "$GEMINIAPIKEY" defaultmodel = "gemini-2.0-flash" [providers.ollama] baseurl = "http://localhost:11434" defaultmodel = "llama3.2" [providers.openrouter] apikey = "$OPENROUTERAPIKEY" baseurl = "https://openrouter.ai/api/v1" defaultmodel = "anthropic/claude-opus-4-5" [app] theme = "dark" # "light" "dark" "system" locale = "en" # "en" "zh-CN" savepath = "~/Documents/open-codesign" typescript // src/providers/factory.ts import { createProviderClient } from '@open-codesign/providers'; const client = createProviderClient({ provider: 'anthropic', // 'anthropic' 'openai' 'gemini' 'ollama' 'openrouter' apiKey: process.env.ANTHROPICAPIKEY!, 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 ?? ''); } 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.ANTHROPICAPIKEY!, }); console.log(artifact.code); …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/open-codesign-ai-design