npm - oh-my-design-cli - Versions diffs - 0.1.0 - Mend

oh-my-design-cli 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (317) hide show

package/LICENSE +21 -0
package/README.ja.md +145 -0
package/README.ko.md +245 -0
package/README.md +245 -0
package/README.zh-TW.md +145 -0
package/data/reference-tags.md +104 -0
package/data/synonyms.json +79 -0
package/data/vocabulary.json +516 -0
package/dist/bin/oh-my-design.js +858 -0
package/dist/bin/oh-my-design.js.map +1 -0
package/dist/chunk-6YNSV3VY.js +35 -0
package/dist/chunk-6YNSV3VY.js.map +1 -0
package/dist/chunk-MHFYGZSO.js +337 -0
package/dist/chunk-MHFYGZSO.js.map +1 -0
package/dist/chunk-N2JG6N4Q.js +264 -0
package/dist/chunk-N2JG6N4Q.js.map +1 -0
package/dist/chunk-OOQQEUGX.js +46 -0
package/dist/chunk-OOQQEUGX.js.map +1 -0
package/dist/chunk-OR5DHENY.js +250 -0
package/dist/chunk-OR5DHENY.js.map +1 -0
package/dist/customizer-CM76752R.js +8 -0
package/dist/customizer-CM76752R.js.map +1 -0
package/dist/index.d.ts +559 -0
package/dist/index.js +3113 -0
package/dist/index.js.map +1 -0
package/dist/init-STACB7E5.js +635 -0
package/dist/init-STACB7E5.js.map +1 -0
package/dist/install-skills-CM6VXFZJ.js +152 -0
package/dist/install-skills-CM6VXFZJ.js.map +1 -0
package/dist/learn-33LHKEJA.js +140 -0
package/dist/learn-33LHKEJA.js.map +1 -0
package/dist/reference-YMNAOXJQ.js +47 -0
package/dist/reference-YMNAOXJQ.js.map +1 -0
package/dist/reference-parser-TM3CJPNE.js +10 -0
package/dist/reference-parser-TM3CJPNE.js.map +1 -0
package/dist/remember-UAFA5B2O.js +78 -0
package/dist/remember-UAFA5B2O.js.map +1 -0
package/dist/sync-P7X4S2DK.js +404 -0
package/dist/sync-P7X4S2DK.js.map +1 -0
package/dist/templates/templates/design-md.hbs +44 -0
package/dist/templates/templates/partials/agent-prompt-guide.hbs +28 -0
package/dist/templates/templates/partials/color-palette.hbs +49 -0
package/dist/templates/templates/partials/component-stylings.hbs +28 -0
package/dist/templates/templates/partials/depth-elevation.hbs +31 -0
package/dist/templates/templates/partials/dos-donts.hbs +13 -0
package/dist/templates/templates/partials/layout.hbs +30 -0
package/dist/templates/templates/partials/responsive.hbs +25 -0
package/dist/templates/templates/partials/shadcn-tokens.hbs +64 -0
package/dist/templates/templates/partials/typography.hbs +43 -0
package/dist/templates/templates/partials/visual-theme.hbs +26 -0
package/package.json +68 -0
package/references/Claude-Design-Sys-Prompt.txt +421 -0
package/references/airbnb/DESIGN.md +427 -0
package/references/airbnb/README.md +23 -0
package/references/airbnb/preview-dark.html +234 -0
package/references/airbnb/preview.html +233 -0
package/references/airtable/DESIGN.md +107 -0
package/references/airtable/README.md +23 -0
package/references/airtable/preview-dark.html +165 -0
package/references/airtable/preview.html +164 -0
package/references/apple/DESIGN.md +496 -0
package/references/apple/README.md +24 -0
package/references/apple/preview-dark.html +420 -0
package/references/apple/preview.html +414 -0
package/references/baemin/DESIGN.md +260 -0
package/references/baemin/README.md +19 -0
package/references/bmw/DESIGN.md +180 -0
package/references/bmw/README.md +23 -0
package/references/bmw/preview-dark.html +211 -0
package/references/bmw/preview.html +210 -0
package/references/cal/DESIGN.md +259 -0
package/references/cal/README.md +23 -0
package/references/cal/preview-dark.html +449 -0
package/references/cal/preview.html +575 -0
package/references/claude/DESIGN.md +455 -0
package/references/claude/README.md +24 -0
package/references/claude/preview-dark.html +803 -0
package/references/claude/preview.html +826 -0
package/references/clay/DESIGN.md +304 -0
package/references/clay/README.md +23 -0
package/references/clay/preview-dark.html +316 -0
package/references/clay/preview.html +315 -0
package/references/clickhouse/DESIGN.md +281 -0
package/references/clickhouse/README.md +24 -0
package/references/clickhouse/preview-dark.html +834 -0
package/references/clickhouse/preview.html +786 -0
package/references/cohere/DESIGN.md +266 -0
package/references/cohere/README.md +24 -0
package/references/cohere/preview-dark.html +803 -0
package/references/cohere/preview.html +807 -0
package/references/coinbase/DESIGN.md +129 -0
package/references/coinbase/README.md +23 -0
package/references/coinbase/preview-dark.html +164 -0
package/references/coinbase/preview.html +163 -0
package/references/composio/DESIGN.md +307 -0
package/references/composio/README.md +24 -0
package/references/composio/preview-dark.html +958 -0
package/references/composio/preview.html +933 -0
package/references/cursor/DESIGN.md +322 -0
package/references/cursor/README.md +24 -0
package/references/cursor/preview-dark.html +393 -0
package/references/cursor/preview.html +383 -0
package/references/dcard/DESIGN.md +302 -0
package/references/dcard/README.md +12 -0
package/references/dcard/_research/forum-1440px.png +0 -0
package/references/dcard/_research.md +77 -0
package/references/elevenlabs/DESIGN.md +265 -0
package/references/elevenlabs/README.md +23 -0
package/references/elevenlabs/preview-dark.html +252 -0
package/references/elevenlabs/preview.html +251 -0
package/references/expo/DESIGN.md +281 -0
package/references/expo/README.md +24 -0
package/references/expo/preview-dark.html +533 -0
package/references/expo/preview.html +533 -0
package/references/ferrari/DESIGN.md +314 -0
package/references/ferrari/README.md +23 -0
package/references/ferrari/preview-dark.html +1162 -0
package/references/ferrari/preview.html +1122 -0
package/references/figma/DESIGN.md +399 -0
package/references/figma/README.md +24 -0
package/references/figma/preview-dark.html +822 -0
package/references/figma/preview.html +832 -0
package/references/framer/DESIGN.md +246 -0
package/references/framer/README.md +23 -0
package/references/framer/preview-dark.html +902 -0
package/references/framer/preview.html +883 -0
package/references/freee/DESIGN.md +308 -0
package/references/freee/README.md +12 -0
package/references/freee/_research/vibes-storybook-1440px.png +0 -0
package/references/freee/_research.md +77 -0
package/references/hashicorp/DESIGN.md +278 -0
package/references/hashicorp/README.md +24 -0
package/references/hashicorp/preview-dark.html +1202 -0
package/references/hashicorp/preview.html +1193 -0
package/references/ibm/DESIGN.md +332 -0
package/references/ibm/README.md +24 -0
package/references/ibm/preview-dark.html +443 -0
package/references/ibm/preview.html +428 -0
package/references/intercom/DESIGN.md +146 -0
package/references/intercom/README.md +23 -0
package/references/intercom/preview-dark.html +185 -0
package/references/intercom/preview.html +184 -0
package/references/kakao/DESIGN.md +261 -0
package/references/kakao/README.md +18 -0
package/references/karrot/DESIGN.md +252 -0
package/references/karrot/README.md +18 -0
package/references/kraken/DESIGN.md +146 -0
package/references/kraken/README.md +23 -0
package/references/kraken/preview-dark.html +169 -0
package/references/kraken/preview.html +168 -0
package/references/lamborghini/DESIGN.md +288 -0
package/references/lamborghini/README.md +23 -0
package/references/lamborghini/preview-dark.html +303 -0
package/references/lamborghini/preview.html +381 -0
package/references/line/DESIGN.md +375 -0
package/references/line/README.md +12 -0
package/references/line/_research/home-1440px.png +0 -0
package/references/line/_research.md +65 -0
package/references/linear.app/DESIGN.md +526 -0
package/references/linear.app/README.md +24 -0
package/references/linear.app/preview-dark.html +383 -0
package/references/linear.app/preview.html +373 -0
package/references/lovable/DESIGN.md +298 -0
package/references/lovable/README.md +24 -0
package/references/lovable/preview-dark.html +349 -0
package/references/lovable/preview.html +348 -0
package/references/mercari/DESIGN.md +294 -0
package/references/mercari/README.md +12 -0
package/references/mercari/_research/home-1440px.png +0 -0
package/references/mercari/_research.md +77 -0
package/references/minimax/DESIGN.md +257 -0
package/references/minimax/README.md +24 -0
package/references/minimax/preview-dark.html +1262 -0
package/references/minimax/preview.html +1248 -0
package/references/mintlify/DESIGN.md +341 -0
package/references/mintlify/README.md +24 -0
package/references/mintlify/preview-dark.html +409 -0
package/references/mintlify/preview.html +398 -0
package/references/miro/DESIGN.md +108 -0
package/references/miro/README.md +23 -0
package/references/miro/preview-dark.html +174 -0
package/references/miro/preview.html +173 -0
package/references/mistral.ai/DESIGN.md +261 -0
package/references/mistral.ai/README.md +24 -0
package/references/mistral.ai/preview-dark.html +806 -0
package/references/mistral.ai/preview.html +805 -0
package/references/mongodb/DESIGN.md +266 -0
package/references/mongodb/README.md +23 -0
package/references/mongodb/preview-dark.html +260 -0
package/references/mongodb/preview.html +259 -0
package/references/notion/DESIGN.md +492 -0
package/references/notion/README.md +24 -0
package/references/notion/preview-dark.html +372 -0
package/references/notion/preview.html +364 -0
package/references/nvidia/DESIGN.md +308 -0
package/references/nvidia/README.md +24 -0
package/references/nvidia/preview-dark.html +374 -0
package/references/nvidia/preview.html +366 -0
package/references/ollama/DESIGN.md +267 -0
package/references/ollama/README.md +24 -0
package/references/ollama/preview-dark.html +678 -0
package/references/ollama/preview.html +678 -0
package/references/opencode.ai/DESIGN.md +295 -0
package/references/opencode.ai/README.md +24 -0
package/references/opencode.ai/preview-dark.html +366 -0
package/references/opencode.ai/preview.html +357 -0
package/references/pinkoi/DESIGN.md +309 -0
package/references/pinkoi/README.md +12 -0
package/references/pinkoi/_research/browse-1440px.png +0 -0
package/references/pinkoi/_research.md +115 -0
package/references/pinterest/DESIGN.md +230 -0
package/references/pinterest/README.md +23 -0
package/references/pinterest/preview-dark.html +233 -0
package/references/pinterest/preview.html +232 -0
package/references/posthog/DESIGN.md +256 -0
package/references/posthog/README.md +23 -0
package/references/posthog/preview-dark.html +699 -0
package/references/posthog/preview.html +749 -0
package/references/raycast/DESIGN.md +268 -0
package/references/raycast/README.md +23 -0
package/references/raycast/preview-dark.html +606 -0
package/references/raycast/preview.html +688 -0
package/references/renault/DESIGN.md +311 -0
package/references/renault/README.md +23 -0
package/references/renault/preview-dark.html +406 -0
package/references/renault/preview.html +606 -0
package/references/replicate/DESIGN.md +261 -0
package/references/replicate/README.md +24 -0
package/references/replicate/preview-dark.html +828 -0
package/references/replicate/preview.html +831 -0
package/references/resend/DESIGN.md +303 -0
package/references/resend/README.md +23 -0
package/references/resend/preview-dark.html +355 -0
package/references/resend/preview.html +354 -0
package/references/revolut/DESIGN.md +185 -0
package/references/revolut/README.md +23 -0
package/references/revolut/preview-dark.html +234 -0
package/references/revolut/preview.html +233 -0
package/references/runwayml/DESIGN.md +244 -0
package/references/runwayml/README.md +24 -0
package/references/runwayml/preview-dark.html +664 -0
package/references/runwayml/preview.html +665 -0
package/references/sanity/DESIGN.md +357 -0
package/references/sanity/README.md +24 -0
package/references/sanity/preview-dark.html +990 -0
package/references/sanity/preview.html +1135 -0
package/references/sentry/DESIGN.md +262 -0
package/references/sentry/README.md +24 -0
package/references/sentry/preview-dark.html +626 -0
package/references/sentry/preview.html +951 -0
package/references/spacex/DESIGN.md +205 -0
package/references/spacex/README.md +23 -0
package/references/spacex/preview-dark.html +221 -0
package/references/spacex/preview.html +220 -0
package/references/spotify/DESIGN.md +246 -0
package/references/spotify/README.md +23 -0
package/references/spotify/preview-dark.html +231 -0
package/references/spotify/preview.html +230 -0
package/references/stripe/DESIGN.md +473 -0
package/references/stripe/README.md +24 -0
package/references/stripe/preview-dark.html +428 -0
package/references/stripe/preview.html +419 -0
package/references/supabase/DESIGN.md +255 -0
package/references/supabase/README.md +24 -0
package/references/supabase/preview-dark.html +977 -0
package/references/supabase/preview.html +955 -0
package/references/superhuman/DESIGN.md +252 -0
package/references/superhuman/README.md +23 -0
package/references/superhuman/preview-dark.html +973 -0
package/references/superhuman/preview.html +951 -0
package/references/tesla/DESIGN.md +286 -0
package/references/tesla/README.md +23 -0
package/references/tesla/preview-dark.html +947 -0
package/references/tesla/preview.html +925 -0
package/references/together.ai/DESIGN.md +263 -0
package/references/together.ai/README.md +24 -0
package/references/together.ai/preview-dark.html +892 -0
package/references/together.ai/preview.html +897 -0
package/references/toss/DESIGN.md +387 -0
package/references/toss/README.md +19 -0
package/references/uber/DESIGN.md +295 -0
package/references/uber/README.md +24 -0
package/references/uber/preview-dark.html +1120 -0
package/references/uber/preview.html +1119 -0
package/references/vercel/DESIGN.md +456 -0
package/references/vercel/README.md +24 -0
package/references/vercel/preview-dark.html +368 -0
package/references/vercel/preview.html +367 -0
package/references/voltagent/DESIGN.md +323 -0
package/references/voltagent/README.md +24 -0
package/references/voltagent/preview-dark.html +487 -0
package/references/voltagent/preview.html +766 -0
package/references/warp/DESIGN.md +253 -0
package/references/warp/README.md +23 -0
package/references/warp/preview-dark.html +500 -0
package/references/warp/preview.html +533 -0
package/references/webflow/DESIGN.md +109 -0
package/references/webflow/README.md +23 -0
package/references/webflow/preview-dark.html +147 -0
package/references/webflow/preview.html +146 -0
package/references/wise/DESIGN.md +173 -0
package/references/wise/README.md +23 -0
package/references/wise/preview-dark.html +230 -0
package/references/wise/preview.html +229 -0
package/references/x.ai/DESIGN.md +267 -0
package/references/x.ai/README.md +24 -0
package/references/x.ai/preview-dark.html +356 -0
package/references/x.ai/preview.html +407 -0
package/references/zapier/DESIGN.md +328 -0
package/references/zapier/README.md +24 -0
package/references/zapier/preview-dark.html +380 -0
package/references/zapier/preview.html +372 -0
package/skills/omd-apply/SKILL.md +85 -0
package/skills/omd-init/SKILL.md +167 -0
package/skills/omd-learn/SKILL.md +81 -0
package/skills/omd-remember/SKILL.md +44 -0
package/skills/omd-sync/SKILL.md +38 -0

package/references/zapier/preview.html ADDED Viewed

@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Zapier</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  @font-face {
+    font-family: 'Degular Display';
+    src: local('Degular Display');
+    font-weight: 500;
+    font-style: normal;
+  }
+  :root {
+    --zapier-black: #201515;
+    --cream: #fffefb;
+    --off-white: #fffdf9;
+    --charcoal: #36342e;
+    --warm-gray: #939084;
+    --sand: #c5c0b1;
+    --light-sand: #eceae3;
+    --mid-warm: #b5b2aa;
+    --orange: #ff4f00;
+    --shadow-tab-active: rgb(255, 79, 0) 0px -4px 0px 0px inset;
+    --shadow-tab-hover: rgb(197, 192, 177) 0px -4px 0px 0px inset;
+    --font-display: 'Degular Display', 'Inter', system-ui, -apple-system, sans-serif;
+    --font-sans: 'Inter', Helvetica, Arial, sans-serif;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--cream);
+    color: var(--zapier-black);
+    font-family: var(--font-sans);
+    font-size: 16px; font-weight: 400; line-height: 1.50;
+    -webkit-font-smoothing: antialiased;
+  }
+  /* NAV */
+  .nav {
+    position: sticky; top: 0; z-index: 100;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 12px 32px;
+    background: rgba(255, 254, 251, 0.9);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--sand);
+  }
+  .nav-brand { font-size: 14px; font-weight: 600; color: var(--zapier-black); text-decoration: none; }
+  .nav-links { display: flex; gap: 24px; list-style: none; }
+  .nav-links a { font-size: 14px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }
+  .nav-links a:hover { color: var(--zapier-black); }
+  .nav-cta {
+    display: inline-block; background: var(--orange); color: var(--cream);
+    padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 600;
+    text-decoration: none; border: 1px solid var(--orange); transition: opacity 0.15s;
+  }
+  .nav-cta:hover { opacity: 0.9; }
+  /* HERO */
+  .hero { padding: 96px 32px 80px; text-align: center; }
+  .hero h1 {
+    font-family: var(--font-display);
+    font-size: 56px; font-weight: 500; line-height: 0.90;
+    color: var(--zapier-black); margin-bottom: 20px;
+  }
+  .hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--charcoal); max-width: 600px; margin: 0 auto 32px; }
+  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+  .btn-orange {
+    display: inline-block; background: var(--orange); color: var(--cream);
+    padding: 8px 16px; border-radius: 4px; border: 1px solid var(--orange);
+    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
+    text-decoration: none; cursor: pointer; transition: opacity 0.15s;
+  }
+  .btn-orange:hover { opacity: 0.9; }
+  .btn-dark {
+    display: inline-block; background: var(--zapier-black); color: var(--cream);
+    padding: 20px 24px; border-radius: 8px; border: 1px solid var(--zapier-black);
+    font-family: var(--font-sans); font-size: 16px; font-weight: 600;
+    text-decoration: none; cursor: pointer; transition: all 0.15s;
+  }
+  .btn-dark:hover { background: var(--sand); color: var(--zapier-black); }
+  .btn-ghost {
+    display: inline-block; background: var(--light-sand); color: var(--charcoal);
+    padding: 20px 24px; border-radius: 8px; border: 1px solid var(--sand);
+    font-family: var(--font-sans); font-size: 16px; font-weight: 600;
+    text-decoration: none; cursor: pointer; transition: all 0.15s;
+  }
+  .btn-ghost:hover { background: var(--sand); color: var(--zapier-black); }
+  /* SECTIONS */
+  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
+  .section-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--warm-gray); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
+  .section-title { font-size: 32px; font-weight: 500; line-height: 1.25; margin-bottom: 32px; }
+  .section-divider { border: none; border-top: 1px solid var(--sand); margin: 0; }
+  /* COLORS */
+  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
+  .color-swatch { border-radius: 5px; overflow: hidden; border: 1px solid var(--sand); }
+  .color-swatch-block { height: 72px; width: 100%; }
+  .color-swatch-info { padding: 10px 12px; }
+  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
+  .color-swatch-hex { font-size: 12px; color: var(--warm-gray); font-family: var(--font-sans); }
+  .color-swatch-role { font-size: 11px; color: var(--warm-gray); margin-top: 3px; }
+  .color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }
+  /* TYPOGRAPHY */
+  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--light-sand); }
+  .type-sample:last-child { border-bottom: none; }
+  .type-meta { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }
+  /* BUTTONS */
+  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
+  .button-item { text-align: center; }
+  .button-label { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }
+  .btn-pill {
+    display: inline-block; background: var(--cream); color: var(--charcoal);
+    padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 500;
+    text-decoration: none; border: 1px solid var(--sand);
+  }
+  /* TABS */
+  .tab-row { display: flex; gap: 0; border-bottom: 1px solid var(--sand); margin-bottom: 24px; }
+  .tab-item {
+    padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--charcoal);
+    cursor: pointer; transition: box-shadow 0.15s;
+  }
+  .tab-item:hover { box-shadow: var(--shadow-tab-hover); }
+  .tab-item.active { color: var(--zapier-black); box-shadow: var(--shadow-tab-active); }
+  /* CARDS */
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
+  .card { background: var(--cream); border-radius: 5px; padding: 24px; border: 1px solid var(--sand); transition: border-color 0.2s; }
+  .card:hover { border-color: var(--charcoal); }
+  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.48px; margin-bottom: 8px; }
+  .card p { font-size: 14px; color: var(--charcoal); line-height: 1.50; }
+  .card-badge { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; letter-spacing: 0.5px; }
+  /* FORMS */
+  .form-group { margin-bottom: 20px; max-width: 400px; }
+  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--zapier-black); margin-bottom: 6px; }
+  .form-input {
+    width: 100%; background: var(--cream); color: var(--zapier-black);
+    border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;
+    font-family: var(--font-sans); font-size: 14px; outline: none;
+    transition: border-color 0.15s;
+  }
+  .form-input:focus { border-color: var(--orange); }
+  .form-input--focus { border-color: var(--orange); }
+  .form-input--error { border-color: #d32f2f; }
+  .form-textarea {
+    width: 100%; min-height: 80px; background: var(--cream); color: var(--zapier-black);
+    border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;
+    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
+  }
+  .form-state-label { font-size: 11px; color: var(--warm-gray); margin-top: 4px; }
+  /* SPACING */
+  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
+  .spacing-item { text-align: center; }
+  .spacing-block { background: var(--zapier-black); border-radius: 3px; margin-bottom: 6px; height: 28px; }
+  .spacing-value { font-size: 11px; font-weight: 500; color: var(--warm-gray); }
+  /* RADIUS */
+  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
+  .radius-item { text-align: center; }
+  .radius-box { width: 64px; height: 64px; background: var(--zapier-black); margin-bottom: 6px; }
+  .radius-label { font-size: 11px; font-weight: 500; color: var(--warm-gray); }
+  .radius-context { font-size: 10px; color: var(--warm-gray); }
+  /* ELEVATION */
+  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
+  .elevation-card { background: var(--cream); border-radius: 5px; padding: 20px; text-align: center; }
+  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+  .elevation-desc { font-size: 11px; color: var(--warm-gray); }
+  /* FOOTER */
+  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--sand); font-size: 13px; color: var(--warm-gray); }
+  .footer a { color: var(--orange); text-decoration: underline; }
+  @media (max-width: 768px) {
+    .hero h1 { font-size: 40px; }
+    .nav-links { display: none; }
+    .section { padding: 48px 20px; }
+    .card-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+<nav class="nav">
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#spacing">Spacing</a></li>
+  </ul>
+  <a class="nav-cta" href="#">Start Free</a>
+</nav>
+<section class="hero">
+  <h1>Design System<br>Inspired by Zapier</h1>
+  <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
+  <div class="hero-buttons">
+    <a class="btn-dark" href="#">Get Started</a>
+    <a class="btn-ghost" href="#">View Documentation</a>
+  </div>
+</section>
+<hr class="section-divider">
+<section class="section" id="colors">
+  <div class="section-label">01 / Colors</div>
+  <h2 class="section-title">Color Palette</h2>
+  <div class="color-group-label">Primary</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#201515"></div><div class="color-swatch-info"><div class="color-swatch-name">Zapier Black</div><div class="color-swatch-hex">#201515</div><div class="color-swatch-role">Primary text, headings</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#fffefb; border-bottom:1px solid #c5c0b1"></div><div class="color-swatch-info"><div class="color-swatch-name">Cream White</div><div class="color-swatch-hex">#fffefb</div><div class="color-swatch-role">Page background</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#fffdf9; border-bottom:1px solid #c5c0b1"></div><div class="color-swatch-info"><div class="color-swatch-name">Off White</div><div class="color-swatch-hex">#fffdf9</div><div class="color-swatch-role">Secondary surface</div></div></div>
+  </div>
+  <div class="color-group-label">Brand Accent</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#ff4f00"></div><div class="color-swatch-info"><div class="color-swatch-name">Zapier Orange</div><div class="color-swatch-hex">#ff4f00</div><div class="color-swatch-role">Primary CTA, active states</div></div></div>
+  </div>
+  <div class="color-group-label">Neutral Scale</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#36342e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Charcoal</div><div class="color-swatch-hex">#36342e</div><div class="color-swatch-role">Secondary text, borders</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#939084"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray</div><div class="color-swatch-hex">#939084</div><div class="color-swatch-role">Muted text, labels</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#c5c0b1"></div><div class="color-swatch-info"><div class="color-swatch-name">Sand</div><div class="color-swatch-hex">#c5c0b1</div><div class="color-swatch-role">Borders, dividers</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#b5b2aa"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Warm</div><div class="color-swatch-hex">#b5b2aa</div><div class="color-swatch-role">Alternate borders</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#eceae3"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Sand</div><div class="color-swatch-hex">#eceae3</div><div class="color-swatch-role">Ghost button bg, surfaces</div></div></div>
+  </div>
+</section>
+<hr class="section-divider">
+<section class="section" id="typography">
+  <div class="section-label">02 / Typography</div>
+  <h2 class="section-title">Typography Scale</h2>
+  <div class="type-sample"><div style="font-family:var(--font-display); font-size:56px; font-weight:500; line-height:0.90;">Display Hero</div><div class="type-meta">Display Hero — 56px / 500 / 0.90 / Degular Display</div></div>
+  <div class="type-sample"><div style="font-family:var(--font-display); font-size:40px; font-weight:500; line-height:0.90;">Display Hero SM</div><div class="type-meta">Display Hero SM — 40px / 500 / 0.90 / Degular Display</div></div>
+  <div class="type-sample"><div style="font-size:48px; font-weight:500; line-height:1.04;">Section Heading</div><div class="type-meta">Section Heading — 48px / 500 / 1.04 / Inter</div></div>
+  <div class="type-sample"><div style="font-size:36px; font-weight:500; line-height:normal; letter-spacing:-1px;">Sub-heading Large</div><div class="type-meta">Sub-heading LG — 36px / 500 / normal / -1px / Inter</div></div>
+  <div class="type-sample"><div style="font-size:24px; font-weight:600; line-height:normal; letter-spacing:-0.48px;">Card Title</div><div class="type-meta">Card Title — 24px / 600 / normal / -0.48px / Inter</div></div>
+  <div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.40; letter-spacing:-0.2px;">Body Large — Automate your work across thousands of app integrations. Build powerful workflows in minutes.</div><div class="type-meta">Body Large — 20px / 400 / 1.40 / -0.2px / Inter</div></div>
+  <div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.00;">Body Emphasis</div><div class="type-meta">Body Emphasis — 18px / 600 / 1.00 / Inter</div></div>
+  <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">Body Medium — Navigation and interface text</div><div class="type-meta">Body Medium — 16px / 500 / 1.25 / Inter</div></div>
+  <div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.16;">Body Semibold — Active states</div><div class="type-meta">Body Semibold — 16px / 600 / 1.16 / Inter</div></div>
+  <div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:normal;">Button Label</div><div class="type-meta">Button — 14px / 600 / normal / Inter</div></div>
+  <div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.43;">Caption — Labels and metadata</div><div class="type-meta">Caption — 14px / 500 / 1.43 / Inter</div></div>
+  <div class="type-sample"><div style="font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;">SECTION LABEL</div><div class="type-meta">Caption Upper — 14px / 600 / uppercase / 0.5px / Inter</div></div>
+  <div class="type-sample"><div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;">MICRO LABEL</div><div class="type-meta">Micro — 12px / 600 / uppercase / 0.5px / Inter</div></div>
+</section>
+<hr class="section-divider">
+<section class="section" id="buttons">
+  <div class="section-label">03 / Buttons</div>
+  <h2 class="section-title">Button Variants</h2>
+  <div class="button-row" style="margin-bottom:32px;">
+    <div class="button-item"><a class="btn-orange" href="#">Start Free</a><div class="button-label">Primary Orange</div></div>
+    <div class="button-item"><a class="btn-dark" href="#">Get Started</a><div class="button-label">Dark CTA</div></div>
+    <div class="button-item"><a class="btn-ghost" href="#">Learn More</a><div class="button-label">Ghost / Light</div></div>
+    <div class="button-item"><a class="btn-pill" href="#">Integrations</a><div class="button-label">Pill</div></div>
+    <div class="button-item"><span style="display:inline-block; background:rgba(45,45,46,0.5); color:#fffefb; padding:8px 16px; border-radius:20px; font-size:14px; font-weight:500;">Play Video</span><div class="button-label">Overlay</div></div>
+  </div>
+  <div class="section-label" style="margin-top:32px;">Tab Navigation</div>
+  <div class="tab-row">
+    <div class="tab-item active">Overview</div>
+    <div class="tab-item">Integrations</div>
+    <div class="tab-item">Pricing</div>
+    <div class="tab-item">Enterprise</div>
+  </div>
+</section>
+<hr class="section-divider">
+<section class="section" id="cards">
+  <div class="section-label">04 / Cards</div>
+  <h2 class="section-title">Card Examples</h2>
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-badge" style="background:rgba(255,79,0,0.1); color:var(--orange);">Integration</div>
+      <h3>Connect Your Apps</h3>
+      <p>Link your favorite tools and automate workflows between them. No code required, set up in minutes.</p>
+    </div>
+    <div class="card" style="border-color: var(--charcoal);">
+      <div class="card-badge" style="background:rgba(32,21,21,0.08); color:var(--zapier-black);">Featured</div>
+      <h3>AI Automation</h3>
+      <p>Build intelligent workflows with AI-powered actions. Transform, summarize, and route data automatically.</p>
+    </div>
+    <div class="card">
+      <div class="card-badge" style="background:var(--light-sand); color:var(--charcoal);">Workflow</div>
+      <h3>Multi-step Zaps</h3>
+      <p>Chain multiple actions together for complex automations. Trigger once, automate everything downstream.</p>
+    </div>
+  </div>
+</section>
+<hr class="section-divider">
+<section class="section" id="forms">
+  <div class="section-label">05 / Forms</div>
+  <h2 class="section-title">Form Elements</h2>
+  <div class="form-group"><label class="form-label">Zap Name</label><input class="form-input" type="text" placeholder="My automation"><div class="form-state-label">Default (sand border)</div></div>
+  <div class="form-group"><label class="form-label">Trigger App</label><input class="form-input form-input--focus" type="text" value="Gmail"><div class="form-state-label">Focus (orange border)</div></div>
+  <div class="form-group"><label class="form-label">Webhook URL</label><input class="form-input form-input--error" type="text" value="invalid-url"><div class="form-state-label">Error (red border)</div></div>
+  <div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your workflow..."></textarea></div>
+</section>
+<hr class="section-divider">
+<section class="section" id="spacing">
+  <div class="section-label">06 / Spacing</div>
+  <h2 class="section-title">Spacing Scale</h2>
+  <div class="spacing-row">
+    <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div>
+  </div>
+</section>
+<hr class="section-divider">
+<section class="section" id="radius">
+  <div class="section-label">07 / Radius</div>
+  <h2 class="section-title">Border Radius Scale</h2>
+  <div class="radius-row">
+    <div class="radius-item"><div class="radius-box" style="border-radius:3px"></div><div class="radius-label">3px</div><div class="radius-context">Spans</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Buttons</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:5px"></div><div class="radius-label">5px</div><div class="radius-context">Cards</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Large buttons</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">14px</div><div class="radius-context">Social icons</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Pills</div></div>
+  </div>
+</section>
+<hr class="section-divider">
+<section class="section" id="elevation">
+  <div class="section-label">08 / Elevation</div>
+  <h2 class="section-title">Elevation &amp; Depth</h2>
+  <div class="elevation-grid">
+    <div class="elevation-card" style="border: 1px solid var(--light-sand);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No border emphasis</div></div>
+    <div class="elevation-card" style="border: 1px solid var(--sand);"><div class="elevation-label">Level 1: Sand Border</div><div class="elevation-desc">1px solid #c5c0b1</div></div>
+    <div class="elevation-card" style="border: 1px solid var(--charcoal);"><div class="elevation-label">Level 1b: Strong</div><div class="elevation-desc">1px solid #36342e</div></div>
+    <div class="elevation-card" style="border: 1px solid var(--sand); box-shadow: var(--shadow-tab-active);"><div class="elevation-label">Level 2: Active Tab</div><div class="elevation-desc">Inset orange underline</div></div>
+    <div class="elevation-card" style="border: 1px solid var(--sand); box-shadow: var(--shadow-tab-hover);"><div class="elevation-label">Level 2b: Hover Tab</div><div class="elevation-desc">Inset sand underline</div></div>
+    <div class="elevation-card" style="border: 2px solid var(--orange);"><div class="elevation-label">Focus</div><div class="elevation-desc">Orange focus ring</div></div>
+  </div>
+</section>
+<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
+</body>
+</html>

package/skills/omd-apply/SKILL.md ADDED Viewed

@@ -0,0 +1,85 @@
+---
+name: omd:apply
+description: "프로젝트 루트의 DESIGN.md를 UI/스타일링/마이크로카피/모션 작업의 authoritative brand context로 적용합니다. 컴포넌트 만들기, CSS 수정, 카피 작성, 애니메이션 튜닝, 디자인 시스템 질문에 트리거됩니다. 사용자 교정이 발생하면 자동으로 omd remember를 호출해 preference log에 기록합니다."
+---
+# omd:apply — Brand Context Injection
+프로젝트 루트의 `DESIGN.md`를 읽고, UI 관련 모든 작업의 authoritative brand context로 사용한다. 작업 도중 사용자가 디자인 선택을 교정하면 `.omd/preferences.md`에 자동 기록한다.
+## 트리거 조건
+다음 중 하나가 감지되면 SKILL 전체를 로드한다.
+- 새 컴포넌트 생성 (button, card, dialog, nav, form 등)
+- 기존 컴포넌트 스타일 변경 (Tailwind 클래스, CSS, 토큰 값)
+- 마이크로카피 작성/수정 (버튼 라벨, empty state, 에러 메시지, tooltip)
+- 모션/트랜지션 추가
+- 색상·타이포그래피·스페이싱 조정
+- 디자인 시스템 관련 질문
+## Phase 1 — DESIGN.md 로드
+작업 시작 전:
+1. 프로젝트 루트의 `DESIGN.md`를 **전체 읽는다**. 요약하지 말고 실제 파일 내용을 Read 툴로 로드.
+2. `.omd/preferences.md`가 있으면 함께 읽는다. `status: pending` 엔트리들은 아직 DESIGN.md에 반영 안 된 교정사항 — **이들을 DESIGN.md보다 우선** 적용한다.
+3. Precedence 순서:
+   ```
+   .omd/preferences.md (pending) > DESIGN.md > framework defaults
+   ```
+DESIGN.md가 없으면 사용자에게 알리고 `omd init` 제안. 임의 생성하지 말 것.
+## Phase 2 — Brand Context 적용
+작업 전체에서 다음 규칙 강제:
+- **Token 값은 DESIGN.md에서만 인용한다.** 임의 hex, 임의 spacing 값, 임의 radius 사용 금지.
+- **Voice 섹션을 마이크로카피에 적용한다.** 문장 길이, 어휘 register, 은유 밀도를 DESIGN.md의 Voice 섹션에 맞춘다.
+- **Component 섹션에 명시된 규칙을 따른다.** 해당 컴포넌트 섹션이 있으면 variant / state / sizes를 그대로 사용.
+- **없는 토큰을 지어내지 않는다.** DESIGN.md에 없는 스펙이 필요하면 사용자에게 "이건 DESIGN.md에 없는데, 어떻게 할까요?" 물어본다.
+## Phase 3 — 교정 캡처 (Self-Report)
+**이것이 omd:apply의 차별화 포인트다. 반드시 수행.**
+턴을 끝내기 전, 이번 턴에 다음 중 하나라도 발생했는지 확인한다:
+1. 사용자가 당신의 디자인 선택을 명시적으로 교정 ("no, use X", "actually, Y", "don't use Z", "we never do W")
+2. 사용자가 당신이 쓴 토큰/값을 revert하거나 다른 값으로 교체
+3. 사용자가 "우리는 ~한다/하지 않는다" 형태의 디자인 원칙을 언급
+감지되면 턴 종료 전에 **반드시** 다음 커맨드를 Bash 툴로 실행:
+```bash
+omd remember "<교정 내용을 한 문장으로 요약>" --context "<수정된 파일 경로 또는 사용자 발화 요약>"
+```
+`--agent` 플래그는 생략한다. CLI가 환경변수(`CLAUDECODE`, `CODEX_SESSION_ID`, `OPENCODE` 등)로 자동 감지한다. 명시 override가 필요한 경우만 `--agent <name>`.
+예시:
+- 사용자: "CTAs는 절대 uppercase 쓰지 마"
+  → `omd remember "CTA buttons must never use uppercase text"`
+- 사용자가 `bg-brand-600`을 `bg-brand-500`으로 직접 바꿈
+  → `omd remember "primary CTA background should be brand-500, not brand-600" --context "src/components/Button.tsx"`
+- 사용자: "우리는 4pt grid가 아니라 8pt 써"
+  → `omd remember "spacing scale uses 8pt base, not 4pt"`
+scope는 note 내용에서 자동 추론된다 (keyword-based). 명시적으로 override가 필요하면 `--scope <value>` 추가 (e.g. `components.button`, `color`, `spacing`, `typography`, `voice`, `motion`, `layout`, `visualTheme`).
+## Phase 4 — 확인 메시지 (간결)
+교정을 기록했을 때만 턴 끝에 한 줄로 알린다:
+```
+📝 Logged to .omd/preferences.md — run `omd learn` to review, `omd learn --apply` to fold into DESIGN.md.
+```
+일반 작업에서는 이 메시지 불필요. 과하게 알리지 말 것.
+## 금지 사항
+- DESIGN.md가 없는데 임의로 생성하지 말 것 (사용자에게 `omd init` 제안).
+- preferences.md에 직접 쓰지 말 것. 항상 `omd remember` 커맨드를 경유.
+- 교정 감지 시 사용자에게 "기록할까요?" 묻지 말 것. 자동 기록 → 사후 한 줄 알림.
+- 같은 턴 내에서 같은 교정을 중복 기록하지 말 것.

package/skills/omd-init/SKILL.md ADDED Viewed

@@ -0,0 +1,167 @@
+---
+name: omd:init
+description: "프로젝트 루트에 DESIGN.md를 생성합니다. 사용자가 프로젝트를 묘사하면 67개 레퍼런스 중 가장 잘 맞는 것을 추천하고, 사용자가 고른 레퍼런스의 톤&매너를 preserve하면서 프로젝트 맥락 delta만 반영한 variation을 생성합니다. '디자인 시스템 만들어줘', 'DESIGN.md 세팅', 'brand 초기화', 'omd init' 같은 요청에 트리거됩니다. CLAUDE.md / AGENTS.md / Cursor rule shim도 함께 설치."
+---
+# omd:init — DESIGN.md Bootstrap
+프로젝트에 DESIGN.md + 4개 AI 코딩 에이전트용 shim을 한 번에 세팅한다. 레퍼런스 톤&매너는 **preserve**하고, 사용자 프로젝트 맥락은 controlled-vocabulary delta_set으로만 반영.
+## 전체 플로우
+```
+Phase 1: 사용자 맥락 파악 (1-2 질문)
+Phase 2: 레퍼런스 추천 (omd init recommend)
+Phase 3: 사용자가 1개 선택
+Phase 4: omd init prepare — context + delta_set 준비
+Phase 5: Hybrid variation으로 DESIGN.md 생성 (이 스킬의 핵심)
+Phase 6: omd sync --force로 shim 3종 설치
+Phase 7: 요약 출력
+```
+## Phase 1 — 맥락 파악
+사용자가 이미 충분한 description을 줬으면 skip. 부족하면 **최대 2개** 질문:
+1. 프로젝트 유형/도메인 (SaaS / 랜딩 / 대시보드 / 이커머스 / 커뮤니티 등)
+2. 분위기 키워드 (warm, minimal, premium, playful, dense, airy 등) — controlled vocab 참조 유도
+여러 질문을 한꺼번에 쌓지 말 것. 한 번에 하나씩, 또는 통합해서 한 번에.
+## Phase 2 — 레퍼런스 추천
+Bash:
+```bash
+omd init recommend "<사용자 description 전체>" --json
+```
+JSON 출력에서:
+- `recommendations` — top 5 references (id, category, score, matchedKeywords)
+- `delta_set` — description에서 추출된 controlled vocab 기반 축 이동
+- `delta_set.warnings` — conflict (e.g. "formal ↔ playful")
+- `delta_set.matchedKeywords` — 실제 매칭된 vocabulary 키워드
+사용자에게 제시할 때:
+- 5개 레퍼런스를 번호 + 한 줄 설명으로 나열 (description에 매칭된 keyword 1-2개 강조)
+- warnings 있으면 먼저 알린다: "formal과 playful이 충돌해요. 'primarily playful'처럼 한쪽을 우선시하면 변형에 더 잘 반영됩니다."
+## Phase 3 — 레퍼런스 선택
+사용자가 레퍼런스를 고르면 Phase 4로. `omd init recommend`의 출력에 없는 레퍼런스를 요청하면 그대로 사용 (e.g. "stripe로 해줘").
+## Phase 4 — Prepare
+```bash
+omd init prepare --ref <id> --description "<원본 description>" --json
+```
+이게 하는 일:
+- `references/<id>/DESIGN.md` 경로 확정 (JSON에 `reference_md` 필드로 전체 내용 포함)
+- 기존 `DESIGN.md`가 있으면 → `DESIGN_DEPRECATED.md`로 rename (메타 헤더 자동 삽입)
+- `.omd/init-context.json` 작성 (`delta_set`, `description` 담김)
+JSON 출력의 `reference_md`는 variation의 input이다. Read.
+## Phase 4.5 — Philosophy Layer 입력 수집 (CRITICAL)
+§11 (Brand Narrative), §12 (Principles), §13 (Personas)는 **레퍼런스의 검증된 historical facts에 기반**한다 — 창립년도, founder 이름, verbatim 인용, 공식 tagline 등. 이걸 단순 domain swap하면 **사용자 프로젝트에 거짓 brand claim을 ship**하는 사고가 난다.
+따라서 Phase 5B 진입 전에 사용자에게 다음 정보를 묻는다 (한 번에):
+```
+DESIGN.md의 §11-13 (Brand Narrative / Principles / Personas)에는 사실 정보가 들어갑니다. 다음을 알려주시거나 "skip"이라고 답해주세요:
+1. 프로젝트 이름 / 창립 시점 (대략)
+2. 핵심 thesis 한 문장 (e.g. Airbnb의 "Belong Anywhere")
+3. 공식 tagline 또는 거부하는 카테고리 default (e.g. "혼밥 시대의 가족 식사")
+4. 타겟 사용자 segment 2-4개 (e.g. "맞벌이 부부", "Chef Partner", "재구매 가족")
+답변 받으면 → Phase 5B에서 §11-13에 반영
+"skip" → §11-13은 [FILL IN: ...] placeholder + omd:limitation 코멘트로 처리
+```
+사용자가 부분 답변(예: 1만, 4만)을 주면 받은 부분만 사용하고 나머지는 skip 처리.
+## Phase 5 — Hybrid Variation 생성 (핵심)
+`.omd/init-context.json`의 `delta_set`과 Phase 4 JSON의 `reference_md`를 입력으로, **새 DESIGN.md를 작성**한다.
+### Phase 5A — Voice Fingerprint 내부 추출 (silent)
+출력하지 말 것. 작성 전, 레퍼런스 DESIGN.md에서 다음을 머릿속으로 파악:
+- 평균 문장 길이 밴드 (짧음/중간/긺)
+- 어휘 register (engineering-terse / editorial-warm / clinical / playful 중)
+- 은유 밀도 (없음/희소/빈번)
+- 기술 밀도 (token-heavy / prose-heavy / balanced)
+- 문단 리듬 (list-forward / paragraph-forward)
+Phase 5B에서 emit하는 모든 내러티브 문단은 이 fingerprint에 **정확히** 맞춰야 한다.
+### Phase 5B — 새 DESIGN.md emit
+**엄격 규칙 (위반 = regression)**:
+1. **Section 구조 frozen.** 레퍼런스의 H2/H3 heading을 같은 순서로 그대로. 새 섹션 추가 금지. 삭제 금지. 이름 변경 금지.
+2. **Token 값은 `delta_set`가 허가한 것만 변경.** `delta_set.axes`에 없는 토큰은 레퍼런스와 **byte-for-byte 동일**하게. "개선"하지 말 것. 색상 hex는 `delta_set.axes["color.hue_deg"]` / `["color.saturation_pct"]` / `["color.lightness_pct"]` 에 따라 **HSL** 변환으로 shift (도 단위 hue rotation, % 단위 saturation/lightness 가산). 정확한 hex 계산이 필요하면 `omd init prepare --json` 의 출력에 이미 적용된 stub-shifted DESIGN.md를 활용 가능 (단 stub은 narrative를 손대지 않으므로 token-only baseline일 뿐임 — voice 작업은 직접 수행).
+3. **내러티브 프로즈는 Phase 5A fingerprint에 매칭.** 도메인 예시를 프로젝트 맥락으로 교체할 때, 레퍼런스의 문장 길이/register/은유 밀도 그대로 유지. Vercel의 "Ship a deploy preview in seconds"를 "Ship a meal plan in seconds"로 바꾸는 건 OK. "Help families discover joyful dinners fast"로 바꾸는 건 voice violation.
+4. **Domain swap은 구체 명사만.** 동사 / 형용사 / framing 건드리지 말 것.
+5. **새 philosophy 도입 금지.** OmD v0.1 레이어, 없던 원칙을 추가하지 말 것. **Delta-derived 노트(예: "+0.005em casual tracking")도 새 bullet으로 넣지 말 것.** 기존 bullet에 자연스럽게 통합 (e.g. "Negative tracking on headings; light positive tracking on body for casual register").
+6. **해결 불가능한 delta는 top-of-file HTML comment로 표시.** `delta_set.axes`가 참조하는 token이 레퍼런스 DESIGN.md에 없으면 `<!-- omd:unresolved: <axis> -->` 상단 추가하고 해당 token은 건드리지 않는다.
+7. **Voice hints 반영.** `delta_set.voiceHints`는 Voice 섹션의 내러티브 문장에 반영하되, 레퍼런스 voice의 문장 스타일 안에서만 적용. "contractions ok"를 Voice 섹션의 원칙 bullet에 한 줄 추가하는 식.
+8. **§11-13 (Brand Narrative / Principles / Personas) 처리 분기.**
+   - **Phase 4.5에서 사용자가 정보를 제공한 경우**: 그 정보로 §11/12/13 작성. 단 verbatim 인용은 사용자가 직접 준 표현만 인용 부호로 감싸고, 그 외는 일반 prose. 레퍼런스의 시간 표현("In July 2014..."), 공식 인용 등은 모두 사용자 프로젝트 맥락으로 대체.
+   - **Phase 4.5에서 skip한 경우**: §11-13 본문을 `[FILL IN: <섹션 목적 한 줄>]` placeholder로 emit + 각 섹션 상단에 `<!-- omd:limitation Reference §X requires project-specific facts. Replace before shipping; do not fabricate. -->` 코멘트.
+   - **§14 (States), §15 (Motion)**: 일반 Hybrid 적용 (구체 명사만 swap).
+### Phase 5C — 파일 작성
+Write 툴로 `DESIGN.md`에 emit.
+## Phase 6 — Shim 설치
+```bash
+omd sync --force
+```
+이게 `CLAUDE.md`, `AGENTS.md`, `.cursor/rules/omd-design.mdc`를 생성/갱신하고 `.omd/sync.lock.json`을 업데이트한다.
+## Phase 7 — 요약 출력
+한 문단으로:
+- Base reference + 프로젝트 context 한 줄 요약
+- 적용된 주요 delta 2-3개 (e.g. "primary hex shifted warm by +12°, radius +4px")
+- 생성된 파일 목록 (DESIGN.md + shims)
+- DESIGN_DEPRECATED.md 있으면 언급
+- 다음 스텝: `omd:apply`로 UI 작업 시작하거나, `/omd:remember`로 선호 추가 로깅
+예시:
+```
+✓ DESIGN.md created (based on Airbnb, warm B2C marketplace context)
+  - primary hue shifted +12° (warmer coral)
+  - radius +6px (softer approach)
+  - voice hints: contractions ok, second person
+Shim files:
+  ✓ CLAUDE.md
+  ✓ AGENTS.md
+  ✓ .cursor/rules/omd-design.mdc
+Next:
+  - Start UI work — the omd:apply skill will inject DESIGN.md automatically
+  - Use `/omd:remember <note>` anytime you want to log a design preference
+```
+## 금지
+- Phase 5A fingerprint를 출력하지 말 것 (내부 전용).
+- `delta_set.axes`에 없는 token을 마음대로 바꾸지 말 것.
+- 레퍼런스에 없는 section/heading을 추가하지 말 것.
+- `.omd/init-context.json`을 직접 편집하지 말 것 (CLI가 관리).
+- DESIGN.md가 이미 있는데 백업 없이 덮어쓰지 말 것 — `omd init prepare`가 자동 rename하니 스킬이 별도 처리 불필요.