[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-11246":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":38,"readmeContent":39,"aiSummary":40,"trendingCount":15,"starSnapshotCount":15,"syncStatus":41,"lastSyncTime":42,"discoverSource":43},11246,"oh-my-design","kwakseongjae\u002Foh-my-design","kwakseongjae","Give your AI coding agent a design system. One command installs 221 hand-verified company DESIGN.md references + skills into Claude Code, Codex, Cursor, and OpenCode. Free, MIT, zero AI calls.","https:\u002F\u002Foh-my-design.kr",null,"HTML",241,23,1,0,11,24,90,33,4.14,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33,34,35,36,37],"cli","design-md","design-system","design-tokens","google-stitch","nextjs","open-source","react","shadcn-ui","tailwindcss","typescript","vibe-coding","2026-06-12 02:02:30","\u003Cp align=\"center\">\n  \u003Cimg src=\".github\u002Fassets\u002Flogo-bg.png\" width=\"480\" alt=\"oh-my-design\" \u002F>\n\u003C\u002Fp>\n\n\u003Ch1 align=\"center\">oh-my-design\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\n  \u003Cstrong>One-command bootstrap for skill-driven design with your AI coding agent.\u003C\u002Fstrong> 107 real company design systems. Zero AI calls in the install. Then you just talk to your agent.\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Foh-my-design-cli\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Foh-my-design-cli?style=flat-square&color=cb3837\" alt=\"npm version\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Foh-my-design-cli\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Foh-my-design-cli?style=flat-square&color=cb3837\" alt=\"npm downloads\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"LICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fkwakseongjae\u002Foh-my-design?style=flat-square\" alt=\"License\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkwakseongjae\u002Foh-my-design\u002Fstargazers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fkwakseongjae\u002Foh-my-design?style=social\" alt=\"GitHub Stars\" \u002F>\u003C\u002Fa>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Freferences-107-7c5cfc?style=flat-square\" alt=\"107 References\" \u002F>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCLI%20commands-1-blue?style=flat-square\" alt=\"One CLI command\" \u002F>\n\u003C\u002Fp>\n\n---\n\n## What is oh-my-design?\n\n**oh-my-design (OmD)** turns your AI coding agent (Claude Code \u002F Codex \u002F OpenCode \u002F Cursor) into a senior product designer with a working memory of your brand. You install once. After that, you just describe what you want — components, screens, copy, assets, charts — and the agent applies your project's design system, picks the right asset medium, and ships.\n\n`DESIGN.md` is the brand spec ([Google Stitch](https:\u002F\u002Fstitch.withgoogle.com\u002Fdocs\u002Fdesign-md\u002Foverview\u002F) tokens + the brand-philosophy layer: Voice \u002F Narrative \u002F Principles \u002F Personas \u002F States \u002F Motion). 107 real-company DESIGN.md files ship in this package. Pick one, customize through conversation, ship.\n\n**No API keys. No external infra. Everything runs inside your existing CLI session.**\n\n## Install\n\n```bash\nnpx oh-my-design-cli install-skills\n```\n\nThen restart your agent (Cmd+Q in Claude Code, then relaunch) so the new skills + agents are loaded.\n\nThat is the only CLI command you will run. Everything else is natural language to your agent.\n\n## Upgrading\n\nSkills and agents evolve every release. To pick up the latest bundle in an existing project:\n\n```bash\nnpx oh-my-design-cli@latest install-skills\n```\n\nIdempotent. Managed files (those carrying the `\u003C!-- omd:installed-skill -->` marker at the top) are refreshed in place. Files you edited that don't have the marker are left untouched (status `skipped-drift`). Pass `--force` if you really want to overwrite your custom edits.\n\nRestart your agent after re-running so the refreshed skills + agents are loaded.\n\n**Check what's installed vs what's latest:**\n\n```bash\nnpx oh-my-design-cli --version       # what your project currently uses\nnpm view oh-my-design-cli version    # latest on the registry\n```\n\n**What's new each release:** [CHANGELOG.md](.\u002FCHANGELOG.md). Every release entry says what changed in the skills, agents, hooks, CLI, and data. If a change requires anything beyond a re-install — for example a migration of `DESIGN.md` frontmatter — it will be called out at the top of that entry.\n\n## How to use omd with your AI\n\nOpen Claude Code (or Codex \u002F OpenCode) in your project. Just talk:\n\n> \"Set up the design system for a calm B2B fintech dashboard.\"\n> Agent picks a reference from 107 (likely Linear or Stripe), proposes a hybrid DESIGN.md, asks for confirmation, writes the file plus shims.\n\n> \"Make the empty-state for the search results page.\"\n> Agent reads DESIGN.md, builds the component with brand tokens, picks an inline SVG illustration matching the voice, drops in microcopy that follows the §10 voice rules.\n\n> \"Design the entire onboarding from scratch — Toss-style for a family meal-tracking app.\"\n> Agent invokes the harness — runs the 10-phase pipeline (discovery, research, IA, wireframes, components, assets, microcopy, validation, handoff), spawns sub-agents in parallel where possible, asks you 3 mandatory checkpoints, hands back a v0\u002FCursor-ready package.\n\n> \"Render a 3D water glass for the hero.\"\n> Agent recommends Blender, walks you through install-on-demand (it does not bundle it in the upfront bootstrap), then renders with materials cited from DESIGN.md §2 and §6.\n\n> \"Add a daily-intake line chart.\"\n> Agent reads your `package.json`, sees `recharts` is installed, builds the chart with brand colors, no library mismatch.\n\n> \"We never use uppercase CTAs.\"\n> Agent silently appends to `.omd\u002Fpreferences.md`. Next time anyone makes a CTA, that rule applies. Later you can say \"fold preferences into DESIGN.md\" and the agent merges by scope.\n\n## What's in the install\n\n| Path | Owner | Purpose |\n|---|---|---|\n| `.claude\u002Fskills\u002Fomd-*\u002FSKILL.md` | install-skills | Claude Code skill bundle (apply \u002F harness \u002F init \u002F learn \u002F remember \u002F sync \u002F reference-capture \u002F asset-fetch \u002F experiment-gallery) |\n| `.codex\u002Fskills\u002Fomd-*\u002FSKILL.md` | install-skills | Codex skill bundle |\n| `.opencode\u002Fagents\u002Fomd-*.md` | install-skills | OpenCode agent bundle |\n| `.claude\u002Fagents\u002Fomd-*.md` | install-skills | 11 canonical sub-agents (master + 10 specialists) |\n| `.claude\u002Fdata\u002F*` | install-skills | 107-reference fingerprints, vocabulary, opt-out corpus |\n| `.claude\u002Fhooks\u002F*.cjs` | install-skills | UserPromptSubmit \u002F SessionStart \u002F PostToolUse hooks |\n| `.claude\u002Fskills\u002Fskill-rules.json` | install-skills | Skill activation rules |\n| `references\u002F*\u002FDESIGN.md` | bundled | 107 real design systems |\n| `DESIGN.md` | your agent (after init flow) | Your project's authoritative brand spec |\n| `CLAUDE.md` \u002F `AGENTS.md` \u002F `.cursor\u002Frules\u002Fomd-design.mdc` | omd-sync skill | Pointers so every agent reads DESIGN.md |\n| `.omd\u002Fpreferences.md` | omd-remember skill | Append-only design correction log |\n| `.omd\u002Fruns\u002F\u003Cid>\u002F` | omd-harness skill | Per-harness-run artifacts (briefs, wireframes, eval, handoff zips) |\n\n## The 9 skills + 11 agents\n\nSkills (loaded into your agent's context based on prompt triggers):\n\n**Core flow**\n- **omd:apply** — DESIGN.md as authoritative context for every UI task. Routes complex requests (assets, charts, full screens, a11y audit) to specialized sub-agents.\n- **omd:init** — Bootstrap DESIGN.md from a reference + project description. 107 references, hybrid variation that preserves the reference voice while shifting only user-named axes.\n- **omd:harness** — `\u002Fomd-harness \u003Ctask>` to run the 10-phase design pipeline. 7 hero archetypes (rule 9) match brand vibe to layout (center-text \u002F carousel \u002F split-screen \u002F editorial \u002F dashboard \u002F quote-led \u002F left-character). Reveal safety net (rule 10), wordmark-only logo (rule 5), container-inner consistency (rule 7), decomposed hero (rule 8).\n- **omd:remember** — Captures user corrections to `.omd\u002Fpreferences.md` automatically when the agent detects them.\n- **omd:learn** — Folds pending corrections back into DESIGN.md by scope.\n- **omd:sync** — Maintains the shim files (CLAUDE.md \u002F AGENTS.md \u002F Cursor mdc) so every agent reads your DESIGN.md.\n\n**Live capture + assets** (v1.3.x)\n- **omd:reference-capture** — Live brand site CDP\u002Fplaywright inspect → `assets\u002F_reference\u002F\u003Cid>\u002F` with tokens.json + structure.json + fonts.json + `.live-inspect-proof.json` + screenshots + LICENSE-NOTE\u002Fattribution. Phase 3.9 browser-harness fast-path: 3-5× faster than playwright MCP when available.\n- **omd:asset-fetch** — Free-license asset catalog with verified URLs. DiceBear CC0 (notionists\u002Florelei avatars), Lucide ISC icons, Picsum CC0 \u002F Loremflickr Flickr-CC photos, SIL OFL display fonts (Bricolage Grotesque \u002F Space Grotesk \u002F DM Serif Display \u002F Fraunces). Strict anti-patterns: handcrafted character SVG forbidden, brand creative work never in product DOM.\n- **omd:experiment-gallery** — N-brand experiment results in a single comparison index.html. iframe scaled previews + wow ratings + multi-turn deltas + per-brand IP audit. Reusable across batches.\n\nSub-agents — 1 orchestrator + 10 specialists (invoked by the master or directly by skills):\n\n- **omd-master** — Conversational state machine, runs the harness phases. opus.\n- **omd-ux-researcher** — Reads bundled references, validates Tier-1 official design system URLs. opus.\n- **omd-ui-junior** — Generates wireframes and component manifests from DESIGN.md. sonnet.\n- **omd-ux-engineer** — Section-level interaction \u002F motion \u002F IA \u002F mobile \u002F perceived-perf audit + code-level fixes. NN\u002Fg heuristics + Refactoring UI + Web Vitals + WAI-ARIA. Senior advisor; pairs with `omd-ui-junior` (generator). opus.\n- **omd-asset-curator** — Picks asset medium (inline SVG \u002F chart library \u002F Lottie \u002F Rive \u002F Unsplash \u002F 3D), generates inline code or sources external. Stack-aware (recharts vs chartjs vs custom SVG, lucide vs heroicons, etc.). sonnet.\n- **omd-3d-blender** — Blender MCP renderer with just-in-time install walkthrough. opus.\n- **omd-microcopy** — Voice-consistent copy generation tied to DESIGN.md §10. sonnet.\n- **omd-ux-writer** — Section-level copy audit + 2-3 strong alternatives + A\u002FB hypothesis. Podmajersky \u002F Erika Hall \u002F Mailchimp \u002F Stripe \u002F GitHub voice docs integrated. Senior advisor; pairs with `omd-microcopy` (generator). opus.\n- **omd-a11y-auditor** — WCAG checks. haiku.\n- **omd-persona-tester** — Adversarial 4-persona walkthrough (V\u002FJ\u002FF\u002FS). sonnet.\n- **omd-critic** — Root-cause analysis when the user iterates. opus.\n\n## What it is not\n\n- It is not a collection of CLI commands. There is one bootstrap command. Everything else is skill prose.\n- It is not an SDK. If you need the matching algorithm or shim format, look at the skill markdown directly.\n- It does not generate emojis as icons. Asset agent prefers inline SVG (Lucide-matched or custom).\n\n## Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md) for release history. Migrating from 0.1.x: see [MIGRATION.md](MIGRATION.md).\n\n## License\n\nMIT — see [LICENSE](LICENSE). References belong to their respective companies; reproduced for educational reference.\n","oh-my-design 是一个用于生成设计系统文件（如 DESIGN.md）的工具，包含来自107家真实公司的品牌令牌、组件和设计理念。其核心功能是通过单个命令行指令将这些设计资源导入到你的AI编码助手（如 Claude Code）中，使助手能够根据你的项目设计系统来创建组件、界面等。项目采用HTML语言编写，并支持多种前端技术栈如React、Next.js、Tailwind CSS等。它非常适合需要快速集成成熟设计体系的开发场景，尤其是当团队希望利用AI辅助进行界面开发时。整个过程无需额外的API密钥或外部基础设施支持，所有操作都在现有的CLI会话内完成。",2,"2026-06-11 03:31:31","CREATED_QUERY"]