메뉴
Use Open Design for agent-native UI prototypes, decks, motion, and hand-drawn diagrams — complementary to Decisions Mermaid viewer for technical charts.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
MUST USE when user wants to research/search/look up/find anything on the internet — e.g. "research this topic", "do a deep dive on X", "search the web for X", "see what people say about X", "look this up". Also MUST USE when user mentions any platform or shares any URL/link: Twitter/X, Reddit, Facebook, Instagram, YouTube, GitHub, Bilibili, XiaoHongShu, Xiaoyuzhou Podcast, LinkedIn/jobs/recruiting, V2EX, Xueqiu (stocks), RSS. 15 platforms, multi-backend routing (OpenCLI / per-platform CLIs / APIs). Zero config for 6 channels. Run `agent-reach doctor --json` to see which backend serves each platform right now. NOT for: writing reports/analysis/translation (this skill only FETCHES internet content); posting/commenting/liking (write operations); platforms that already have a dedicated skill installed (prefer that skill).
Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
Research what people actually say about any topic in the last 30 days. Pulls posts and engagement from Reddit, X, YouTube, TikTok, Hacker News, Polymarket, GitHub, and the web.
Turn ordinary text plans into rich interactive visual plans with diagrams, file maps, annotated code, open questions, and UI/prototype review when useful.
Turn a PR, branch, commit, or git diff into an interactive visual recap with diagrams, file maps, API/schema summaries, annotated diffs, and focused review notes.
Pick a design aesthetic from awesome-design-skills — bundled minimal/professional/enterprise/shadcn/bento; full catalog in reference for on-demand load.
| name | decisions-open-design |
| description | Use Open Design for agent-native UI prototypes, decks, motion, and hand-drawn diagrams — complementary to Decisions Mermaid viewer for technical charts. |
I am using Open Design when the deliverable is a design artifact (screen, deck, motion clip) — not a Mermaid technical chart.
Open Design is the open-source Claude Design alternative: local-first desktop app, 150+ DESIGN.md systems, skills, plugins, and an MCP server for coding agents.
| Need | Tool |
|---|---|
| ER diagram, sequence, flowchart, deployment graph | Decisions Mermaid (decisions-mermaid-diagrams, /diagram/) |
| UI screen / prototype in real CSS | Open Design Studio → Prototype |
| Pitch deck / slides | Open Design Studio → Deck |
| Hand-drawn / whiteboard / Excalidraw style | Open Design skill hand-drawn-diagrams |
| Motion / HyperFrames MP4 | Open Design Studio → HyperFrame |
| Brand-grade still image | Open Design Studio → Image |
../reference/open-design — nexu-io/open-design
Do not vendor the full monorepo into DecisionsAI; run the app or CLI from the reference clone.
../reference/open-design (Node 24 + pnpm — see QUICKSTART.md).cd ../reference/open-design
pnpm install # first time
od mcp install cursor # or codex, claude, copilot, …
bin/setup.py (merges catalog entries).Open Design MCP proxies project tools to the local daemon — it is not a cloud npx server. The app must be running.
The reference repo ships diagram-category skills (hand-drawn-diagrams, d3-visualization, frame-flowchart-sticky, …). Use those for visual diagrams; use Decisions Mermaid for text-native diagrams the agent can edit in chat and reopen from History.
| Also use | When |
|---|---|
decisions-mermaid-diagrams | Same ticket needs architecture chart + UI mockup |
decisions-visual-plan | Plan approval before Open Design generation |
decisions-design-references | Mobbin/Refero before UI direction |
decisions-ui-ideation | Ideation pass before Studio work |