design-pact 0.2.2 → 0.3.0

package/README.md

@@ -38,6 +38,9 @@ npx design-pact inspect design.md
 
 # Audit source files: find color literals outside the contract
 npx design-pact check design.md src/ app/
+
+# Derive a draft design.md from an existing codebase
+npx design-pact import src/ [--out design.md] [--force]
 ```
 
 ### `check` — enforce the contract
@@ -49,6 +52,19 @@ into CI or an agent loop: the agent generates UI against `design.md`, runs
 `check`, and fixes anything flagged. `node_modules` / build output are skipped
 automatically; whitelist intentional exceptions with `--allow "#hex,#hex"`.
 
+### `import` — adopt design-pact in an existing project
+
+`import` scans tailwind configs, CSS custom properties, and raw color usage,
+then assigns the six roles: colors from variables literally named
+background/primary/border/… win outright; the rest are filled by OKLCH
+heuristics (lightness, chroma, hue distance, contrast) and every assignment is
+labeled `named` / `heuristic` / `derived` in the summary so you know what to
+review. Radius, spacing, body font, and base size are detected when declared.
+The output is a complete design.md — dark face and status colors derived the
+same way the studio does it — and the command prints a studio URL to eyeball
+the palette before you commit to it. A dark codebase is handled correctly: it
+becomes the `@media (prefers-color-scheme: dark)` face.
+
 Outputs:
 
 | Format | File | Source |

package/SKILL.md

@@ -41,6 +41,18 @@ Then branch:
 
 ## Create — no design.md yet
 
+**If the project already has real styling** (a tailwind config, CSS custom
+properties, an established look), offer to derive the draft from it instead of
+inventing palettes:
+
+```bash
+npx design-pact import <src-dirs> --out design.md
+```
+
+Show the user the printed summary + studio link to confirm the mapping, then
+continue to **Apply**. Only fall through to palette proposal when the project
+is greenfield or the user wants a fresh direction.
+
 There's no design system yet. The division of labor: **you (the agent) do the
 creative part — clarify direction and propose 2–3 palettes; the web app does
 the deterministic part — render each palette so the user picks one visually,