oh-my-design-cli 0.1.0

package/README.md

@@ -0,0 +1,245 @@
+<p align="center">
+  <img src="logo-bg.png" width="480" alt="oh-my-design" />
+</p>
+
+<h1 align="center">oh-my-design</h1>
+
+<p align="center">
+  <strong>Generate DESIGN.md from 67 real company design systems.</strong> Interactive wizard. Zero AI calls.
+</p>
+
+<p align="center">
+  <strong>Now with the OmD v0.1 Philosophy Layer.</strong> Voice · Narrative · Principles · Personas · States · Motion — so Claude Code matches your brand, not the AI's default.
+</p>
+
+<p align="center">
+  <a href="LICENSE"><img src="https://img.shields.io/github/license/kwakseongjae/oh-my-design?style=flat-square" alt="License" /></a>
+  <a href="https://github.com/kwakseongjae/oh-my-design/stargazers"><img src="https://img.shields.io/github/stars/kwakseongjae/oh-my-design?style=social" alt="GitHub Stars" /></a>
+  <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome" />
+  <img src="https://img.shields.io/badge/AI%20calls-zero-blue?style=flat-square" alt="Zero AI" />
+  <img src="https://img.shields.io/badge/references-67-7c5cfc?style=flat-square" alt="67 References" />
+</p>
+
+<p align="center">
+  <a href="README.ko.md">한국어</a> | <a href="README.ja.md">日本語</a> | <a href="README.zh-TW.md">繁體中文</a> | English
+</p>
+
+---
+
+## What is oh-my-design?
+
+**oh-my-design (OmD)** is an open spec for giving AI coding agents enough brand context to produce on-brand UI instead of the AI's statistical default.
+
+`DESIGN.md` as [Google defined it](https://stitch.withgoogle.com/docs/design-md/overview/) is a **token document** — colors, typography, components. Necessary, but not sufficient. When an agent generates UI from tokens alone, the output is coherent but branded like nobody — it defaults to Inter-on-white, purple gradients, unjustified emojis. OmD v0.1 adds a **brand-philosophy layer** on top: **Voice · Narrative · Principles · Personas · States · Motion**. Drop an OmD `DESIGN.md` at your project root and the agent's output stops being generic and starts being yours.
+
+Three pieces:
+
+1. **[Spec](spec/omd-v0.1.md)** — versioned, additive to Google Stitch, MIT-licensed.
+2. **[Claude Code skill](.claude/skills/omd/SKILL.md)** — auto-applies the spec as a hard constraint when generating UI in Claude Code.
+3. **[67 reference files](references/)** — real-company `DESIGN.md` files you can fork, customize with the interactive builder, and ship.
+
+**No API keys. No AI calls. Everything runs client-side.**
+
+## Ecosystem v1 — agent integration (new)
+
+`oh-my-design` now ships a coding-agent ecosystem so `DESIGN.md` is **read and respected** by Claude Code, Codex, OpenCode, and Cursor while you work — not just generated once and forgotten.
+
+**Zero-install (recommended):**
+
+```bash
+cd my-project
+
+# 1. One-time: install agent skills (.claude/skills, .codex/skills, .opencode/agents)
+npx oh-my-design-cli install-skills
+
+# 2. Bootstrap DESIGN.md from a reference + your project description
+#    (run from inside Claude Code/Codex/OpenCode and the omd:init skill drives this)
+npx oh-my-design-cli init recommend "warm approachable B2C marketplace"
+npx oh-my-design-cli init prepare --ref airbnb --description "warm approachable B2C marketplace"
+
+# 3. Install / refresh shim files so all four agents read DESIGN.md
+npx oh-my-design-cli sync
+
+# 4. As you work, log preferences whenever the agent gets a design choice wrong
+npx oh-my-design-cli remember "CTAs are never uppercase"
+
+# 5. Periodically fold pending preferences into DESIGN.md
+npx oh-my-design-cli learn                            # list pending
+npx oh-my-design-cli learn --mark-applied <id>        # after the fold
+```
+
+**Or install globally for shorter commands:**
+
+```bash
+npm install -g oh-my-design-cli
+# Now use either `oh-my-design` or the short alias `omd`
+omd install-skills
+omd sync
+omd remember "..."
+```
+
+> **Status**: `v0.1.0` is the first ecosystem release. The CLI surface (sync / remember / learn / init prepare / install-skills) is stable + unit-tested. The agent-side Hybrid variation quality depends on the host LLM following the `omd:init` skill prompt — please file issues with archived sessions if results disappoint.
+
+### What gets installed
+
+| File | Owned by | Purpose |
+|---|---|---|
+| `DESIGN.md` | you | Single source of truth — brand & UI spec |
+| `CLAUDE.md` | `omd sync` | Pointer (`@./DESIGN.md`) for Claude Code |
+| `AGENTS.md` | `omd sync` | Pointer for Codex CLI **and** OpenCode (single file covers both) |
+| `.cursor/rules/omd-design.mdc` | `omd sync` | Auto-attaches DESIGN.md when Cursor edits UI files |
+| `.claude/skills/omd-*/SKILL.md` | `omd install-skills` | Claude Code skill bundle (5 skills) |
+| `.codex/skills/omd-*/SKILL.md` | `omd install-skills` | Codex skill bundle (5 skills) |
+| `.opencode/agents/omd-*.md` | `omd install-skills` | OpenCode agent bundle (5 agents) |
+| `.omd/preferences.md` | `omd remember` | Append-only design correction log |
+| `.omd/sync.lock.json` | `omd sync` | Drift detection state |
+
+Shim and skill files use a `<!-- omd:start -->` marker so user edits outside the marker are preserved across `omd sync` runs.
+
+### The five skills
+
+| Skill | Trigger | What it does |
+|---|---|---|
+| `omd:init` | "make me a DESIGN.md" / "set up brand" | Recommends a reference, asks for project description, generates a Hybrid variation that **preserves the reference's voice** while applying project-context deltas, writes DESIGN.md + shims |
+| `omd:apply` | Any UI / styling / microcopy / motion task | Loads DESIGN.md + pending preferences as authoritative brand context, **auto-logs** any user correction it detects via `omd remember` |
+| `omd:sync` | "shim drift" / "AGENTS.md sync" | Runs `omd sync` with appropriate flags |
+| `omd:remember` | "remember that ..." / "we don't ..." | Appends a structured entry to `.omd/preferences.md` |
+| `omd:learn` | "fold preferences into DESIGN.md" | Groups pending preferences by scope, proposes coherent DESIGN.md edits, flips status to applied |
+
+Source: [`skills/`](skills/) in this repo. `omd install-skills` copies these into your project's agent directories.
+
+### CLI commands
+
+```
+omd init recommend <description>   # tag-stem-matched reference suggestions (top-5)
+omd init prepare --ref <id> --description <text>
+                                   # stages .omd/init-context.json + delta_set
+omd install-skills [--agent ...]   # copy skills/* into .claude /.codex /.opencode
+omd reference list                 # list bundled reference ids
+omd reference show <id>            # print a reference DESIGN.md to stdout
+omd sync [--force | --check]       # write or audit shim files
+omd remember <note> [--scope ...]  # append a preference entry
+omd learn                          # list pending preferences
+omd learn --mark-applied <id>      # after applying to DESIGN.md
+omd learn --mark-rejected <id> --reason <text>
+```
+
+`omd sync --check` is CI-friendly: exit 1 if shims drifted or DESIGN.md changed without a follow-up sync.
+
+### What's deterministic vs. agent-driven
+
+| Layer | Done by | Why |
+|---|---|---|
+| Reference recommendation | CLI (tag + stem match + category-prior + MMR-style diversity) | Fast, no API key. Category-prior boosts domain-aligned refs (e.g. Consumer for "marketplace / family / subscription"). |
+| Token delta computation | CLI (controlled vocabulary of 41 keywords + ~75 synonyms, additive composition with clamp) | Deterministic; same description → same delta_set |
+| Color hex shift baseline | CLI (`apply-delta-stub`) — **color-only** | Fast deterministic preview. Does NOT shift radius / letter-spacing / spacing — that's the agent's job. |
+| Full token application + section structure preservation + voice rewrite | **Agent** (Claude Code / Codex / OpenCode) following `omd:init` skill | Stub is color-only; full delta application requires structured Markdown editing. The skill prompt enforces voice fingerprint preservation. |
+| §11–13 (Brand Narrative / Principles / Personas) | **Agent + user input** (Phase 4.5) | Reference content is project-specific facts (founding year, verbatim taglines, real personas). The skill collects facts in Phase 4.5 or marks as `[FILL IN: …]` with `omd:limitation` comments — never fabricates. |
+
+### Status
+
+This ecosystem is **v0.1.0** — the first agent-integration release. The CLI surface (sync / remember / learn / init prepare / install-skills) is stable and unit-tested (505 tests). The agent-side Hybrid variation quality depends on the host LLM following the `omd:init` skill prompt — see [`test/scenarios/WORKFLOWS.md`](test/scenarios/WORKFLOWS.md) for the verification map. Empirical results from real sessions are welcome — please file issues with archived `.omd/init-context.json` and the resulting `DESIGN.md`.
+
+## OmD v0.1 Philosophy Layer
+
+The 6 sections OmD adds on top of Google Stitch's 9:
+
+| Section | Purpose |
+|---|---|
+| **10. Voice & Tone** | Microcopy constraints — button labels, errors, onboarding |
+| **11. Brand Narrative** | The "why" — what the brand rejects, what it's trying to move |
+| **12. Principles** | 5–10 first-principles rules that break ties when tokens don't |
+| **13. Personas** | 2–4 concrete users so agents ground output in real use cases |
+| **14. States** | Empty / loading / error / skeleton patterns — prevents generic "No data found" |
+| **15. Motion & Easing** | Named duration + easing tokens — the dimension Stitch's 9 sections miss |
+
+**Ten references ship with a full Philosophy Layer today:**
+Toss · Claude · Line · Stripe · Linear · Vercel · Notion · Airbnb · Apple · Figma — each with voice, narrative, principles, personas, states, and motion sourced against public references.
+
+See [references/toss/DESIGN.md](references/toss/DESIGN.md) for a full OmD v0.1 example.
+
+## What's inside
+
+- **Builder** — pick a reference, tune colors / radius / dark mode, select components, hit Export. The **Philosophy** filter isolates the 10 references with a full brand philosophy.
+- **Design Systems Directory** ([oh-my-design.kr/design-systems](https://oh-my-design.kr/design-systems)) — 34 of the 67 references have a verified public design system or brand-guidelines page; the directory links straight out to each one with live thumbnails.
+- **Personal Curation** ([oh-my-design.kr/curation](https://oh-my-design.kr/curation)) — a short MBTI-style quiz that maps your design personality to one of the 67 references and drops you straight into the builder with that reference preloaded.
+
+## 67 Supported References
+
+| Category | Companies |
+|----------|-----------|
+| **AI & LLM** | Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI |
+| **Design Tools** | Airtable, Clay, Figma, Framer, Miro, Webflow |
+| **Developer Tools** | Cursor, Expo, Lovable, Raycast, Superhuman, Vercel, Warp |
+| **Productivity** | Cal.com, freee, Intercom, Linear, Mintlify, Notion, Resend, Zapier |
+| **Consumer Tech** | Airbnb, Apple, Baemin, Dcard, IBM, Kakao, Karrot, LINE, Mercari, NVIDIA, Pinkoi, Pinterest, SpaceX, Spotify, Uber |
+| **Fintech** | Coinbase, Kraken, Revolut, Stripe, Toss, Wise |
+| **Backend & DevOps** | ClickHouse, Composio, Hashicorp, MongoDB, PostHog, Sanity, Sentry, Supabase |
+| **Automotive** | BMW, Ferrari, Lamborghini, Renault, Tesla |
+| **Marketing** | Semrush |
+
+> Use the **country filter** in the builder to browse by region (Korea, Taiwan, Japan, France, Italy, Germany, UK, US).
+
+## Exported DESIGN.md
+
+Follows the [Google Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/overview/) — base sections 1–9, plus the OmD v0.1 Philosophy Layer (sections 10–15) when enabled:
+
+**Base (Google Stitch)**
+1. Visual Theme & Atmosphere
+2. Color Palette & Roles
+3. Typography Rules
+4. Component Stylings
+5. Layout Principles
+6. Depth & Elevation
+7. Do's and Don'ts
+8. Responsive Behavior
+9. Agent Prompt Guide
+
+**OmD v0.1 Philosophy Layer (additive)**
+
+10. Voice & Tone
+11. Brand Narrative
+12. Principles
+13. Personas
+14. States
+15. Motion & Easing
+
+Plus: Style Preferences, Included Components, Iconography & SVG Guidelines, Document Policies.
+
+## Project Structure
+
+```
+oh-my-design/
+  spec/              OmD v0.1 spec (authoritative)
+  .claude/skills/omd/ Claude Code skill bundle
+  references/        67 company DESIGN.md files
+  src/               CLI core (TypeScript)
+  web/               Next.js web builder
+    src/app/         Landing + Builder + Directory pages
+    src/components/  Wizard, Preview, Export
+  test/              CLI Vitest suite (unit/, integration/, scripts/)
+```
+
+Web tests are colocated next to source files (`web/src/**/*.test.ts`).
+
+## Testing
+
+Two suites, both under Vitest, both must pass:
+
+```bash
+npm test                # CLI: 370 tests — unit + per-reference smoke
+cd web && npm test      # Web: 88 tests — generate-css, config-hash, survey
+```
+
+The integration suite (`test/integration/all-references.test.ts`) runs the full generation pipeline against every `references/<id>/DESIGN.md`, so a malformed reference surfaces as a per-ref failure in PR review. See [test/README.md](test/README.md) for the folder convention and module-by-module coverage map.
+
+## Acknowledgments
+
+- [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) — the upstream collection of DESIGN.md files that seeded this project.
+- [kzhrknt/awesome-design-md-jp](https://github.com/kzhrknt/awesome-design-md-jp) — Japanese-market design-system references.
+
+oh-my-design extends these collections with an interactive customization wizard, A/B style preferences, component selection, a Design Systems directory, and a CLI export pipeline.
+
+## License
+
+[MIT](LICENSE)

package/README.zh-TW.md

@@ -0,0 +1,145 @@
+<p align="center">
+  <img src="logo-bg.png" width="480" alt="oh-my-design" />
+</p>
+
+<h1 align="center">oh-my-design</h1>
+
+<p align="center">
+  <strong>從 67 家真實企業的設計系統生成 DESIGN.md。</strong>互動式精靈。零 AI 呼叫。
+</p>
+
+<p align="center">
+  <strong>新增 OmD v0.1 Philosophy Layer。</strong>Voice・Narrative・Principles・Personas・States・Motion — 讓 Claude Code 輸出你的品牌,而不是 AI 的預設值。
+</p>
+
+<p align="center">
+  <a href="LICENSE"><img src="https://img.shields.io/github/license/kwakseongjae/oh-my-design?style=flat-square" alt="License" /></a>
+  <a href="https://github.com/kwakseongjae/oh-my-design/stargazers"><img src="https://img.shields.io/github/stars/kwakseongjae/oh-my-design?style=social" alt="GitHub Stars" /></a>
+  <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome" />
+  <img src="https://img.shields.io/badge/AI%20calls-zero-blue?style=flat-square" alt="Zero AI" />
+  <img src="https://img.shields.io/badge/references-67-7c5cfc?style=flat-square" alt="67 References" />
+</p>
+
+<p align="center">
+  繁體中文 | <a href="README.md">English</a> | <a href="README.ko.md">한국어</a> | <a href="README.ja.md">日本語</a>
+</p>
+
+---
+
+## 什麼是 oh-my-design?
+
+**oh-my-design (OmD)** 是一份開放規範,為 AI 編碼代理提供「足以產出品牌級 UI」的品牌脈絡,而不是依賴 AI 的統計預設值。
+
+[Google 提出的](https://stitch.withgoogle.com/docs/design-md/overview/) `DESIGN.md` 本質上是**令牌文件** — 色彩、字體、元件。必要,但不夠。只靠令牌產 UI,形狀看似合理,卻「不像任何品牌」,會收斂到 AI 的預設:Inter-on-white、紫色漸層、毫無緣由的 emoji。OmD v0.1 在其上疊加**品牌哲學層**:**Voice・Narrative・Principles・Personas・States・Motion**。將 OmD 格式的 `DESIGN.md` 放在專案根目錄,代理的輸出就不再通用,而是「你的」。
+
+三個組成部分:
+
+1. **[規範](spec/omd-v0.1.md)** — 版本化的 Google Stitch 擴充,MIT 授權。
+2. **[Claude Code skill](.claude/skills/omd/SKILL.md)** — 將規範作為硬性約束自動套用。
+3. **[67 個參考檔案](references/)** — 真實企業的 `DESIGN.md`,可以 fork、透過 builder 客製化後直接上線。
+
+**無須 API 金鑰。零 AI 呼叫。全部在客戶端執行。**
+
+## OmD v0.1 Philosophy Layer
+
+OmD 在 Google Stitch 的 9 個章節之上再加的 6 個章節:
+
+| 章節 | 用途 |
+|---|---|
+| **10. Voice & Tone** | 微文案約束 — 按鈕文字、錯誤訊息、導引流程 |
+| **11. Brand Narrative** | 「為什麼」 — 品牌拒絕什麼、試圖撼動哪個類別 |
+| **12. Principles** | 令牌無法裁決時用來拍板的 5〜10 條第一性原理 |
+| **13. Personas** | 2〜4 位具體使用者,讓代理輸出扎根於實際情境 |
+| **14. States** | Empty / loading / error / skeleton 模式 — 避免通用的「無資料」 |
+| **15. Motion & Easing** | 命名的 duration + easing 令牌 — Stitch 9 章節遺漏的維度 |
+
+**目前已有 10 個參考附帶完整的 Philosophy Layer:**
+Toss · Claude · Line · Stripe · Linear · Vercel · Notion · Airbnb · Apple · Figma — 每個都包含 voice、narrative、principles、personas、states、motion,全部基於公開來源撰寫。
+
+完整 OmD v0.1 範例請見 [references/toss/DESIGN.md](references/toss/DESIGN.md)。
+
+## 主要功能
+
+- **Builder** — 選擇參考、調整色彩 / radius / 深色模式、挑選元件,然後按下 Export。透過 **Philosophy** 篩選可以只顯示具備完整品牌哲學的 10 個參考。
+- **Design Systems 目錄** ([oh-my-design.kr/design-systems](https://oh-my-design.kr/design-systems)) — 67 個參考中有 34 個擁有官方設計系統或品牌指南頁面,可從目錄配合即時縮圖直接前往。
+- **Personal Curation** ([oh-my-design.kr/curation](https://oh-my-design.kr/curation)) — 透過 MBTI 風格的簡短測驗,將你的設計偏好對應到 67 個參考之一,並直接帶你進入已預選該參考的 Builder。
+
+## 67 個支援的參考
+
+| 類別 | 企業 |
+|------|------|
+| **AI & LLM** | Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI |
+| **設計工具** | Airtable, Clay, Figma, Framer, Miro, Webflow |
+| **開發者工具** | Cursor, Expo, Lovable, Raycast, Superhuman, Vercel, Warp |
+| **生產力** | Cal.com, freee, Intercom, Linear, Mintlify, Notion, Resend, Zapier |
+| **消費科技** | Airbnb, Apple, Baemin, Dcard, IBM, Kakao, Karrot, LINE, Mercari, NVIDIA, Pinkoi, Pinterest, SpaceX, Spotify, Uber |
+| **金融科技** | Coinbase, Kraken, Revolut, Stripe, Toss, Wise |
+| **後端 & DevOps** | ClickHouse, Composio, Hashicorp, MongoDB, PostHog, Sanity, Sentry, Supabase |
+| **汽車** | BMW, Ferrari, Lamborghini, Renault, Tesla |
+| **行銷** | Semrush |
+
+> 使用 Builder 中的**國家篩選器**按地區瀏覽 (韓國、台灣、日本、法國、義大利、德國、英國、美國)。
+
+## 匯出的 DESIGN.md
+
+以 [Google Stitch DESIGN.md 格式](https://stitch.withgoogle.com/docs/design-md/overview/)為基礎 — 1〜9 章節,加上選用的 OmD v0.1 Philosophy Layer(10〜15 章節):
+
+**基礎 (Google Stitch)**
+1. Visual Theme & Atmosphere
+2. Color Palette & Roles
+3. Typography Rules
+4. Component Stylings
+5. Layout Principles
+6. Depth & Elevation
+7. Do's and Don'ts
+8. Responsive Behavior
+9. Agent Prompt Guide
+
+**OmD v0.1 Philosophy Layer (附加)**
+
+10. Voice & Tone
+11. Brand Narrative
+12. Principles
+13. Personas
+14. States
+15. Motion & Easing
+
+另加:Style Preferences、Included Components、Iconography & SVG Guidelines、Document Policies。
+
+## 專案結構
+
+```
+oh-my-design/
+  spec/              OmD v0.1 規範 (正本)
+  .claude/skills/omd/ Claude Code skill 包
+  references/        67 家企業的 DESIGN.md 檔案
+  src/               CLI 核心 (TypeScript)
+  web/               Next.js 網頁 builder
+    src/app/         Landing + Builder + Directory 頁面
+    src/components/  Wizard、Preview、Export
+  test/              CLI Vitest 套件 (unit/、integration/、scripts/)
+```
+
+Web 測試與原始碼並列存放 (`web/src/**/*.test.ts`)。
+
+## 測試
+
+兩套測試套件,皆以 Vitest 執行,兩套都必須通過:
+
+```bash
+npm test                # CLI:370 個測試 — unit + 全 reference smoke
+cd web && npm test      # Web:88 個測試 — generate-css、config-hash、survey
+```
+
+整合套件 (`test/integration/all-references.test.ts`) 會對每個 `references/<id>/DESIGN.md` 執行完整的生成管線,因此損壞的 reference 會在 PR 審查時以單一 reference 的失敗形式呈現。資料夾規範與模組別覆蓋率對照表請參考 [test/README.md](test/README.md)。
+
+## 致謝
+
+- [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) — 啟動本專案的上游 DESIGN.md 集合。
+- [kzhrknt/awesome-design-md-jp](https://github.com/kzhrknt/awesome-design-md-jp) — 日本市場的設計系統參考。
+
+oh-my-design 在這些集合的基礎上加入了互動式客製化精靈、A/B 風格偏好、元件選擇、Design Systems 目錄與 CLI 匯出管線。
+
+## 授權
+
+[MIT](LICENSE)

package/data/reference-tags.md

@@ -0,0 +1,104 @@
+# Reference Tags
+
+Use this table to match user descriptions to reference candidates. Pick 3-6 references whose keywords best align with what the user described.
+
+## Matching Strategy
+
+1. Extract key signals from user conversation: project type, mood adjectives, color preferences, target audience
+2. Match against keywords below
+3. Prioritize references that match multiple signals
+4. Include at least one "safe" reference (vercel, linear.app, notion) if uncertain
+
+## Reference Characteristics
+
+| id | color | category | keywords |
+|---|---|---|---|
+| airbnb | #ff385c | Consumer | warm, inviting, tactile, approachable, cozy, marketplace |
+| airtable | #1b61c9 | Design Tools | clean, sophisticated, precise, structured, enterprise |
+| apple | #0071e3 | Consumer | reductive, precise, cinematic, premium, confident, minimal |
+| baemin | #2AC1BC | Consumer | playful, warm, irreverent, appetizing, friendly, cultural, korean, food-delivery |
+| bmw | #1c69d4 | Automotive | precise, angular, industrial, authoritative, engineered |
+| cal | #242424 | Productivity | monochrome, bold, architectural, restrained, confident |
+| claude | #c96442 | AI | warm, intellectual, editorial, literary, earthy, trustworthy |
+| clay | #000000 | Design Tools | playful, artisanal, quirky, warm, delightful, craft |
+| clickhouse | #faff69 | Backend | aggressive, high-contrast, electrifying, powerful, fast, neon |
+| cohere | #1863dc | AI | confident, professional, restrained, enterprise, sophisticated |
+| coinbase | #0052ff | Fintech | clean, trustworthy, financial, professional, blue |
+| composio | #0007cd | Backend | dark, developer-focused, bioluminescent, minimal, authoritative |
+| cursor | #f54e00 | Developer | warm, crafted, typographically-rich, organic, editorial |
+| dcard | #00324e | Consumer | social, forum, community, material-design, deep-navy, blue, taiwanese, anonymous, youth, magazine-like |
+| elevenlabs | #000000 | AI | elegant, restrained, ethereal, premium, airy, audio |
+| expo | #000000 | Developer | luminous, airy, monochromatic, premium, friendly, approachable |
+| ferrari | #DA291C | Automotive | editorial, cinematic, restrained, luxurious, precise, red |
+| freee | #285ac8 | Productivity | enterprise, blue, structured, semantic-tokens, japanese, saas, accounting, calm |
+| figma | #000000 | Design Tools | sophisticated, organic, precise, creative, black-white |
+| framer | #0099ff | Design Tools | cinematic, dark, seductive, precise, product-forward |
+| hashicorp | #000000 | Backend | enterprise, systematic, authoritative, token-driven, structured |
+| ibm | #0f62fe | Consumer | methodical, corporate, precise, engineered, systematic |
+| intercom | #ff5600 | Productivity | warm, confident, editorial, industrial, customer-service |
+| kakao | #FEE500 | Consumer | warm, friendly, functional, personal, sunshine, yellow, korean, messaging, super-app |
+| karrot | #ff6600 | Consumer | warm, approachable, trustworthy, local, energetic, orange, korean, marketplace |
+| kraken | #7132f5 | Fintech | clean, professional, trustworthy, purple, confident, crypto |
+| lamborghini | #FFC000 | Automotive | dark, theatrical, intimidating, nocturnal, luxurious, gold |
+| line | #07b53b | Consumer | green, pill-buttons, editorial, lifestyle, japanese, friendly, oversized-typography |
+| linear.app | #5e6ad2 | Productivity | precise, dark, engineered, calibrated, minimal, purple |
+| lovable | #1c1c1c | Developer | warm, approachable, analog, humanist, parchment |
+| minimax | #1456f0 | AI | clean, airy, approachable, colorful, product-forward |
+| mintlify | #18E299 | Productivity | calm, confident, legible, fresh, airy, clean, docs, green |
+| mercari | #ff333f | Consumer | red, marketplace, japanese, semantic-tokens, dense, commerce, mature |
+| miro | #5b76fe | Design Tools | clean, collaborative, pastel, geometric, visual |
+| mistral.ai | #fa520f | AI | warm, bold, maximalist, golden, European, declarative |
+| mongodb | #00ed64 | Backend | dark, organic, editorial, bioluminescent, forest, electric, green |
+| notion | #0075de | Productivity | warm, approachable, tactile, analog, understated, minimal |
+| nvidia | #76b900 | Consumer | industrial, engineering, high-contrast, disciplined, sharp |
+| ollama | #000000 | AI | minimal, grayscale, soft, approachable, rounded |
+| opencode.ai | #201d1d | AI | terminal, warm, monospace, utilitarian, developer-focused |
+| pinkoi | #f16c5d | Consumer | dense, multi-cultural, marketplace, asian, handcrafted, coral, locale-aware, commerce, bold-headings |
+| pinterest | #e60023 | Consumer | warm, cozy, craft-like, personal, inviting, handcrafted, red |
+| posthog | #F54E00 | Backend | irreverent, earthy, anti-corporate, playful, warm |
+| raycast | #FF6363 | Developer | dark, precise, macOS-native, trustworthy, fast, premium |
+| renault | #EFDF00 | Automotive | vibrant, energized, bold, French, forward-leaning |
+| replicate | #ea2804 | AI | bold, playful, energetic, high-contrast, community |
+| resend | #000000 | Productivity | cinematic, theatrical, premium, crystalline, precise, dark |
+| revolut | #494fdf | Fintech | confident, bold, restrained, premium, financial |
+| runwayml | #000000 | AI | cinematic, editorial, visual, dark, film |
+| sanity | #f36458 | Backend | dark, precise, structured, achromatic, disciplined |
+| sentry | #6a5fc1 | Backend | dark, vibrant, irreverent, technical, warm-purple |
+| spacex | #000000 | Consumer | cinematic, minimal, aerospace, industrial, immersive |
+| spotify | #1ed760 | Consumer | dark, immersive, content-first, tactile, rounded, green |
+| stripe | #533afd | Fintech | luxurious, precise, warm, premium, financial, refined, purple |
+| supabase | #3ecf8e | Backend | dark, developer, open-source, sophisticated, terminal, green |
+| superhuman | #cbb7fb | Developer | luxurious, clean, confident, restrained, premium, lavender |
+| tesla | #3E6AE1 | Automotive | minimal, cinematic, restrained, product-forward, clean |
+| together.ai | #ef2cc1 | AI | soft, airy, optimistic, pastel, light, gradient, pink |
+| toss | #3182f6 | Fintech | calm, confident, simple, trustworthy, optimistic, korean, banking |
+| uber | #000000 | Consumer | bold, confident, minimal, efficient, direct, black |
+| vercel | #171717 | Developer | restrained, compressed, engineered, minimal, philosophical |
+| voltagent | #00d992 | Backend | dark, electric, focused, developer, cockpit, engineering |
+| warp | #faf9f6 | Developer | warm, earthy, restrained, approachable, calm |
+| webflow | #146ef5 | Design Tools | clean, rich, confident, tool-forward, precise, blue |
+| wise | #9fe870 | Fintech | bold, fresh, optimistic, nature-inspired, lime, green |
+| x.ai | #ffffff | AI | brutalist, dark, minimal, terminal, engineering, restrained |
+| zapier | #ff4f00 | Productivity | warm, approachable, professional, organic, energetic, orange |
+
+## Shortcut Mappings
+
+Common user descriptions → recommended references:
+
+- "깔끔, 모던, 미니멀" → vercel, linear.app, cal, tesla, apple
+- "따뜻한, 친근한" → airbnb, notion, warp, lovable, claude
+- "다크모드, 개발자" → linear.app, raycast, supabase, composio, framer
+- "대시보드, 데이터" → linear.app, posthog, clickhouse, sentry
+- "이커머스, 마켓플레이스" → airbnb, karrot, pinterest, shopify
+- "핀테크, 금융" → stripe, toss, coinbase, revolut, wise
+- "SaaS, B2B" → vercel, notion, intercom, hashicorp, cohere
+- "크리에이티브, 디자인" → figma, framer, clay, replicate, miro
+- "럭셔리, 프리미엄" → apple, stripe, superhuman, ferrari, resend
+- "AI, LLM 서비스" → claude, cohere, mistral.ai, together.ai, x.ai
+- "한국 서비스" → toss, karrot, baemin, kakao
+- "대만 서비스" → pinkoi, dcard
+- "일본 서비스" → line, mercari, freee
+- "아시아 커머스, 디자이너 마켓" → pinkoi, airbnb, karrot, pinterest
+- "포럼, 커뮤니티" → dcard, intercom, posthog
+- "문서, 블로그" → mintlify, notion, cal, warp
+- "대담한, 에너지" → clickhouse, wise, replicate, mistral.ai, renault

package/data/synonyms.json

@@ -0,0 +1,79 @@
+{
+  "version": 1,
+  "map": {
+    "modern": "minimal",
+    "clean": "minimal",
+    "simple": "minimal",
+    "sleek": "minimal",
+    "refined": "elegant",
+    "sophisticated": "elegant",
+    "fancy": "elegant",
+    "upscale": "luxurious",
+    "high-end": "luxurious",
+    "premium-tier": "luxurious",
+    "fun": "playful",
+    "cheerful": "playful",
+    "whimsical": "playful",
+    "quirky": "indie",
+    "vibey": "indie",
+    "vibrant": "energetic",
+    "lively": "energetic",
+    "snappy": "energetic",
+    "fast": "energetic",
+    "quiet": "calm",
+    "peaceful": "calm",
+    "zen": "calm",
+    "meditative": "calm",
+    "relaxed": "calm",
+    "stuffy": "formal",
+    "stiff": "formal",
+    "buttoned-up": "formal",
+    "professional": "corporate",
+    "suits": "corporate",
+    "boardroom": "corporate",
+    "startup": "indie",
+    "scrappy": "indie",
+    "boutique": "indie",
+    "b2b": "enterprise",
+    "saas": "enterprise",
+    "ops": "enterprise",
+    "devtools": "technical",
+    "developer": "technical",
+    "engineer": "technical",
+    "code": "technical",
+    "api": "technical",
+    "arcade": "playful",
+    "cartoon": "playful",
+    "chunky": "bold",
+    "punchy": "bold",
+    "strong": "bold",
+    "heavy": "bold",
+    "gentle": "soft",
+    "tender": "soft",
+    "delicate": "soft",
+    "cozy": "warm",
+    "inviting": "warm",
+    "homey": "warm",
+    "welcoming": "approachable",
+    "natural": "organic",
+    "earthy": "organic",
+    "crafted": "handcrafted",
+    "artisanal": "handcrafted",
+    "sharp": "geometric",
+    "angular": "geometric",
+    "raw": "brutalist",
+    "harsh": "brutalist",
+    "tough": "rugged",
+    "outdoor": "rugged",
+    "honest": "trustworthy",
+    "reliable": "trustworthy",
+    "credible": "trustworthy",
+    "dense-ui": "dense",
+    "data-dense": "dense",
+    "airy-layout": "airy",
+    "roomy": "spacious",
+    "breathing-room": "spacious",
+    "packed": "compact",
+    "tight": "compact"
+  }
+}