[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-77831":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":14,"starSnapshotCount":14,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},77831,"opendesign","manalkaff\u002Fopendesign","manalkaff","claude.ai\u002Fdesign open-sourced!",null,"HTML",181,19,107,0,13,38,74,39,3.9,"MIT License",false,"main",true,[],"2026-06-12 02:03:45","# OpenDesign\n\n## Why this exists\n\nClaude Design on claude.ai is excellent. But it's locked.\n\nLocked to the browser. Locked to Anthropic models. Locked to the web app — which means no access to your local files, no integration with your existing design system, and no way to use it inside the editor where your actual work happens.\n\nI built OpenDesign to fix that. Same philosophy as Claude Design — structured intake, context-matching, taste, a verifier that checks the output against the brief — but packaged as portable markdown skills you can install in Claude Code, Cursor, Codex, Gemini CLI, or OpenCode. It runs locally, reads your codebase, and works with whatever model you're on.\n\nYou own it. You can read every skill, fork it, and extend it.\n\n## What it does\n\nOpenDesign turns your AI coding agent into a designer with taste, opinions, and the discipline to restrain them. HTML is the output medium. Inside that medium it embodies whichever specialist the task calls for — deck designer, UX designer, prototyper, brand designer.\n\nIt doesn't generate generic AI output. It reads your actual codebase first.\n\n![OpenDesign extracting the ReelPilot design system live from the codebase](screenshot.png)\n*OpenDesign extracting a live design system from a real codebase — colors, typography, tokens, all sourced directly from `src\u002Fapp.css`.*\n\n## Showcase\n\n![OpenDesign demo](showcase1.gif)\n\n![OpenDesign demo 2](showcase2.gif)\n\n![OpenDesign demo 3](showcase3.gif)\n\nTen skills ship together. One is the entry point (`opendesign`); the others are loaded on demand by the workflow.\n\n## Available skills\n\n\u003C!-- SKILLS:START -->\n\n| Skill | Use when |\n|---|---|\n| `opendesign` | Starting any design task. Establishes the base role, workflow, and taste rules, and routes to specialist skills. |\n| `setup-opendesign` | Initialising OpenDesign for the first time in a project. Creates output folders, copies the viewer, and writes an empty manifest. Called automatically by `opendesign` — rarely needed directly. |\n| `run-opendesign` | Starting the preview server after a build. Serves `.\u002Fopendesign\u002F` on port 8289, handles duplicate prevention and python\u002Fnode detection, and prints a clickable link. Called automatically by `opendesign` — rarely needed directly. |\n| `create-design-system` | Producing a reusable design system or UI kit from an existing brand, codebase, or product. |\n| `frontend-design` | Designing without an existing brand system. Pushes for a committed, distinctive aesthetic. |\n| `wireframe` | Exploring the design space quickly — many rough ideas, not one polished direction. |\n| `interactive-prototype` | Asking for a working, clickable prototype that behaves like a real app. |\n| `make-a-deck` | Asking for a slide presentation. Fixed 1920×1080 canvas, chapter-driven titles. |\n| `make-tweakable` | Wanting in-design controls for toggling variants, colors, copy, or feature flags. |\n| `handoff-to-claude-code` | Handing a finished design off to a developer or coding agent for implementation. |\n\n\u003C!-- SKILLS:END -->\n\n## How the skills work together\n\n`opendesign` is the front door. On invocation it:\n\n1. Scans `.\u002Fopendesign\u002Fdesign-systems\u002F*\u002F` for existing systems (looking for `SKILL.md` or `tokens\u002Fcolors_and_type.css` as markers).\n2. Announces what it found and picks the right one, asks, or offers to create one.\n3. Runs a structured intake if the work is new.\n4. Routes to the specialist skill for the artifact (deck → `make-a-deck`, prototype → `interactive-prototype`, etc.).\n5. Forks a verifier subagent to review against the brief.\n\nDesign systems created by `create-design-system` are written to `.\u002Fopendesign\u002Fdesign-systems\u002F\u003Cname>\u002F` so `opendesign` can auto-discover them in future sessions. Multiple systems per project are supported — a marketing system, a product system, a deck template — and the agent picks based on task shape.\n\n## Installation\n\n**Note:** Installation differs by platform.\n\n### Claude Code\n\n```bash\n\u002Fplugin marketplace add manalkaff\u002Fopendesign\n\u002Fplugin install opendesign@opendesign\n```\n\n### Cursor\n\nIn Cursor Agent chat:\n\n```text\n\u002Fadd-plugin opendesign\n```\n\nOr search for \"opendesign\" in the plugin marketplace.\n\n### OpenAI Codex CLI\n\nOpen the plugin search:\n\n```bash\n\u002Fplugins\n```\n\nSearch for `opendesign` and select **Install Plugin**.\n\n### OpenAI Codex App\n\nIn the Codex app, click **Plugins** in the sidebar, find **OpenDesign** in the Design section, click the `+`, and follow the prompts.\n\n### Gemini CLI\n\n```bash\ngemini extensions install https:\u002F\u002Fgithub.com\u002Fmanalkaff\u002Fopendesign\n```\n\nTo update:\n\n```bash\ngemini extensions update opendesign\n```\n\n### OpenCode\n\nTell OpenCode:\n\n```\nFetch and follow instructions from https:\u002F\u002Fraw.githubusercontent.com\u002Fmanalkaff\u002Fopendesign\u002Fmain\u002F.opencode\u002FINSTALL.md\n```\n\n### Fork\n\nFork the repo, add your own skills under `skills\u002F`, and install your fork through whichever host you use.\n\n## Usage\n\nOnce installed, invoke with `\u002Fopendesign` and describe what you want. The agent picks up the right skills on its own.\n\n```\n\u002Fopendesign make a pitch deck for a seed-stage AI company, 10 slides\n```\n\n```\n\u002Fopendesign design a settings page for this React app — use our existing design system\n```\n\n```\n\u002Fopendesign explore a few options for the onboarding flow. rough sketches, nothing polished yet\n```\n\n```\n\u002Fopendesign extract our design system from the codebase and document it\n```\n\n## Upgrading\n\nIf you installed via the plugin marketplace, run `\u002Fplugin update opendesign` inside Claude Code.\n\nIf you cloned or submoduled, `git pull` in the repo.\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md). Quality bar is higher than coverage — consider extending an existing skill before adding a new one.\n\n## License\n\n[MIT](LICENSE)\n","OpenDesign 是一个将AI编码助手转变为具有品味和意见的设计师的工具。它通过读取实际代码库来提供结构化的输入、上下文匹配、风格选择以及输出验证等功能，并以可移植的Markdown技能形式呈现，适用于Claude Code, Cursor, Codex, Gemini CLI 或 OpenCode等平台。该工具支持本地运行，能够直接访问用户的设计系统和文件，极大提升了设计与开发工作的集成度。特别适合需要在已有代码基础上快速生成高质量设计方案的场景，如UI\u002FUX设计、原型制作及品牌设计等任务。",2,"2026-06-11 03:56:10","CREATED_QUERY"]