designagent-cli 0.1.0

package/dist/templates/design-md/shadcn.md

@@ -0,0 +1,142 @@
+---
+name: {{PROJECT_NAME}}
+version: alpha
+description: Design tokens for {{PROJECT_NAME}}. shadcn/ui-flavored neutral defaults — edit to match your brand.
+colors:
+  primary: "#18181B"
+  on-primary: "#FAFAFA"
+  secondary: "#F4F4F5"
+  on-secondary: "#18181B"
+  tertiary: "#3F3F46"
+  on-tertiary: "#FAFAFA"
+  neutral: "#71717A"
+  surface: "#FFFFFF"
+  on-surface: "#09090B"
+  error: "#B91C1C"
+  on-error: "#FAFAFA"
+  outline: "#E4E4E7"
+typography:
+  headline-display:
+    fontFamily: Geist
+    fontSize: 3rem
+    fontWeight: 600
+    lineHeight: 1.1
+    letterSpacing: "-0.02em"
+  headline-lg:
+    fontFamily: Geist
+    fontSize: 2.25rem
+    fontWeight: 600
+    lineHeight: 1.15
+    letterSpacing: "-0.01em"
+  headline-md:
+    fontFamily: Geist
+    fontSize: 1.5rem
+    fontWeight: 600
+    lineHeight: 1.25
+  body-lg:
+    fontFamily: Geist
+    fontSize: 1.125rem
+    fontWeight: 400
+    lineHeight: 1.6
+  body-md:
+    fontFamily: Geist
+    fontSize: 1rem
+    fontWeight: 400
+    lineHeight: 1.6
+  body-sm:
+    fontFamily: Geist
+    fontSize: 0.875rem
+    fontWeight: 400
+    lineHeight: 1.5
+  label-lg:
+    fontFamily: Geist
+    fontSize: 0.875rem
+    fontWeight: 500
+    lineHeight: 1.4
+  label-md:
+    fontFamily: Geist
+    fontSize: 0.75rem
+    fontWeight: 500
+    lineHeight: 1.4
+  label-sm:
+    fontFamily: Geist
+    fontSize: 0.6875rem
+    fontWeight: 500
+    lineHeight: 1.3
+spacing:
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+rounded:
+  none: 0px
+  sm: 4px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  full: 9999px
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.md}"
+    padding: 12px
+  button-secondary:
+    backgroundColor: "{colors.secondary}"
+    textColor: "{colors.on-secondary}"
+    rounded: "{rounded.md}"
+    padding: 12px
+  card:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.on-surface}"
+    rounded: "{rounded.lg}"
+    padding: 16px
+  input:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.on-surface}"
+    rounded: "{rounded.md}"
+    padding: 8px
+---
+
+## Overview
+
+Design tokens for **{{PROJECT_NAME}}** in the shadcn/ui idiom — a restrained neutral (zinc) base with a near-black primary. Export to a Tailwind v4 `@theme` block with:
+
+```
+npx @google/design.md export --format css-tailwind DESIGN.md
+```
+
+Map these to your `globals.css` CSS variables (`--primary`, `--background`, `--foreground`, …). Swap the palette for your brand, then re-lint.
+
+## Colors
+
+shadcn leans on a neutral scale with a single strong primary. `surface`/`on-surface` are background/foreground; `secondary` is the muted button/chip; `outline` is the border token.
+
+## Typography
+
+`Geist` across the scale, tight tracking on headlines. `headline-*` for titles, `body-*` for prose, `label-*` for controls.
+
+## Layout
+
+4px-based spacing scale. Use for padding, gaps, and margins consistently.
+
+## Elevation & Depth
+
+shadcn is flat by default — borders (`outline`) and subtle shadows over heavy elevation. One soft shadow for popovers/menus; cards rely on border + surface contrast.
+
+## Shapes
+
+`rounded.md` (8px) is the shadcn default radius for buttons and inputs; `lg` for cards, `full` for pills/avatars.
+
+## Components
+
+Primitives composed from tokens, mirroring shadcn's `Button`, `Card`, and `Input`. Extend by composition.
+
+## Do's and Don'ts
+
+- **Do** map tokens to your CSS variables and reference them everywhere.
+- **Do** keep AA contrast on every surface/foreground pair.
+- **Don't** hardcode hex in components — reference color tokens.
+- **Don't** drift off the spacing or radius scale.

package/dist/templates/design-md/tailwind.md

@@ -0,0 +1,149 @@
+---
+name: {{PROJECT_NAME}}
+version: alpha
+description: Design tokens for {{PROJECT_NAME}}. Tailwind-flavored defaults — edit to match your brand.
+colors:
+  primary: "#1D4ED8"
+  on-primary: "#FFFFFF"
+  secondary: "#334155"
+  on-secondary: "#FFFFFF"
+  tertiary: "#6D28D9"
+  on-tertiary: "#FFFFFF"
+  neutral: "#64748B"
+  surface: "#FFFFFF"
+  on-surface: "#0F172A"
+  error: "#B91C1C"
+  on-error: "#FFFFFF"
+  outline: "#CBD5E1"
+typography:
+  headline-display:
+    fontFamily: Inter
+    fontSize: 3rem
+    fontWeight: 700
+    lineHeight: 1.1
+    letterSpacing: "-0.02em"
+  headline-lg:
+    fontFamily: Inter
+    fontSize: 2.25rem
+    fontWeight: 700
+    lineHeight: 1.15
+  headline-md:
+    fontFamily: Inter
+    fontSize: 1.5rem
+    fontWeight: 600
+    lineHeight: 1.25
+  body-lg:
+    fontFamily: Inter
+    fontSize: 1.125rem
+    fontWeight: 400
+    lineHeight: 1.6
+  body-md:
+    fontFamily: Inter
+    fontSize: 1rem
+    fontWeight: 400
+    lineHeight: 1.6
+  body-sm:
+    fontFamily: Inter
+    fontSize: 0.875rem
+    fontWeight: 400
+    lineHeight: 1.5
+  label-lg:
+    fontFamily: Inter
+    fontSize: 0.875rem
+    fontWeight: 500
+    lineHeight: 1.4
+  label-md:
+    fontFamily: Inter
+    fontSize: 0.75rem
+    fontWeight: 500
+    lineHeight: 1.4
+  label-sm:
+    fontFamily: Inter
+    fontSize: 0.6875rem
+    fontWeight: 500
+    lineHeight: 1.3
+spacing:
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+rounded:
+  none: 0px
+  sm: 4px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  full: 9999px
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.md}"
+    padding: 12px
+  button-secondary:
+    backgroundColor: "{colors.secondary}"
+    textColor: "{colors.on-secondary}"
+    rounded: "{rounded.md}"
+    padding: 12px
+  card:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.on-surface}"
+    rounded: "{rounded.lg}"
+    padding: 16px
+  input:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.on-surface}"
+    rounded: "{rounded.sm}"
+    padding: 8px
+---
+
+## Overview
+
+Design tokens for **{{PROJECT_NAME}}**, expressed in the Tailwind idiom. Export to a Tailwind v4 `@theme` block with:
+
+```
+npx @google/design.md export --format css-tailwind DESIGN.md
+```
+
+These are sensible defaults — replace the palette and type with your brand, then re-lint.
+
+## Colors
+
+Role-based palette. Pair each surface/role with its `on-*` foreground for legible, AA-compliant contrast.
+
+- `primary` / `on-primary` — primary actions and key emphasis.
+- `secondary` / `on-secondary` — secondary actions and supporting UI.
+- `tertiary` / `on-tertiary` — accents and highlights.
+- `surface` / `on-surface` — backgrounds and the content on them.
+- `neutral` — muted text, dividers, disabled states.
+- `outline` — borders and separators.
+- `error` / `on-error` — destructive actions and error states.
+
+## Typography
+
+`Inter` across the scale. `headline-*` for titles, `body-*` for prose, `label-*` for UI text and controls. Line heights are unitless multipliers of font size.
+
+## Layout
+
+Spacing scale in multiples of 4px (`xs`=4 → `xxl`=48). Use these for padding, margin, and gaps. No off-scale values.
+
+## Elevation & Depth
+
+Keep elevation minimal. Prefer a single subtle shadow for raised surfaces (cards, menus) and rely on `surface`/`outline` contrast for separation rather than stacking shadows.
+
+## Shapes
+
+Corner radii from `none` to `full`. `sm` for inputs, `md` for buttons, `lg` for cards, `full` for pills and avatars.
+
+## Components
+
+Token-composed primitives. Each component references color, shape, and spacing tokens so a change to the scale propagates everywhere. Extend by composing these, not by hardcoding values.
+
+## Do's and Don'ts
+
+- **Do** reference tokens (`{colors.primary}`) instead of raw values.
+- **Do** keep every `on-*` / surface pair at WCAG AA contrast.
+- **Don't** introduce off-scale spacing or one-off font sizes.
+- **Don't** add raw hex in components — point at a color token.

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "designagent-cli",
+  "version": "0.1.0",
+  "description": "The design brain Claude Code needs. npx designagent-cli init — web, mobile, any canvas, any framework.",
+  "type": "module",
+  "bin": {
+    "designagent": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && bun build src/index.ts --target node --outfile dist/index.js --external @clack/prompts --external @google/design.md --external picocolors --external postcss --external ts-morph && node scripts/copy-assets.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "bun ./test/smoke.mjs && bun ./test/e2e.mjs",
+    "dev": "bun run src/index.ts",
+    "start": "node dist/index.js"
+  },
+  "keywords": [
+    "claude-code",
+    "design-system",
+    "design-tokens",
+    "design.md",
+    "cli",
+    "figma",
+    "ai",
+    "designagent"
+  ],
+  "author": "Sherizan Sheikh",
+  "license": "MIT",
+  "dependencies": {
+    "@clack/prompts": "^0.9.0",
+    "@google/design.md": "^0.2.0",
+    "picocolors": "^1.1.1",
+    "postcss": "^8.4.49",
+    "ts-morph": "^24.0.0"
+  },
+  "//deps": "scanner + docs + studio are bundled into dist/index.js at build time (bun build) — not runtime deps. postcss (scanner) and ts-morph (studio) are external runtime deps. @designagent/* stay workspace devDependencies so the bundler can resolve them.",
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/node": "^22.10.0",
+    "@designagent/scanner": "workspace:*",
+    "@designagent/docs": "workspace:*",
+    "@designagent/studio": "workspace:*"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://designagent.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sherizan/designagent.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/sherizan/designagent/issues"
+  }
+}