designagent-cli 0.1.0 → 0.2.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.
- package/README.md +18 -7
- package/dist/index.js +418 -803
- package/package.json +6 -8
package/README.md
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
|
-
# designagent
|
|
1
|
+
# designagent-cli
|
|
2
2
|
|
|
3
3
|
**The design brain Claude Code needs — web, mobile, any canvas, any framework.**
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
npx designagent init
|
|
6
|
+
npx designagent-cli init
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
> Published as **`designagent-cli`** on npm (the unscoped `designagent` is blocked by npm's typosquat filter). After a global install the command is still **`designagent`**.
|
|
10
|
+
|
|
11
|
+
Right now, Claude Code opens knowing nothing about your design — no system, no tokens, no taste. `designagent` fixes that in 60 seconds: it reads your codebase, reverse-engineers your design system, and writes it down so Claude Code understands it the way a senior design engineer would on day one.
|
|
12
|
+
|
|
13
|
+
## Commands
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npx designagent-cli init # scan + generate DESIGN.md / CLAUDE.md / DECISIONS.md
|
|
17
|
+
npx designagent-cli docs # visual design-system docs (colors, type, spacing, drift)
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Flags: `docs` accepts `--export` (static HTML), `--watch` (live reload), `--no-open`.
|
|
10
21
|
|
|
11
22
|
## What it generates
|
|
12
23
|
|
|
@@ -20,16 +31,17 @@ Right now, Claude Code opens knowing nothing about your design — no system, no
|
|
|
20
31
|
|
|
21
32
|
## The init flow
|
|
22
33
|
|
|
23
|
-
`designagent init` asks three questions:
|
|
34
|
+
`designagent init` scans your codebase, then asks three questions:
|
|
24
35
|
|
|
25
36
|
1. **Canvas** — Figma · Pencil · OpenPencil · None
|
|
26
37
|
2. **Design system** — Tailwind · shadcn/ui · Custom
|
|
27
38
|
3. **Framework(s)** — React · Vue · Svelte · React Native · SwiftUI · Jetpack Compose *(multi-select for monorepos)*
|
|
28
39
|
|
|
29
|
-
Then it generates all three files, lints `DESIGN.md` with `@google/design.md`, wires up `.mcp.json` for your canvas, and installs skills to `~/.designagent/skills/`.
|
|
40
|
+
Then it generates all three files, lints `DESIGN.md` with `@google/design.md`, wires up `.mcp.json` for your canvas, and installs skills to `~/.designagent/skills/`. If files already exist it offers **Augment / Migrate / Fresh**.
|
|
30
41
|
|
|
31
42
|
## Why it's different
|
|
32
43
|
|
|
44
|
+
- **Reverse-engineers, doesn't template** — pulls your real palette, spacing grid, type scale, and component inventory from source, and flags drift (hardcoded values that should be tokens) with file + line.
|
|
33
45
|
- **Web + native mobile from day one** — the only design-agent setup that covers SwiftUI and Jetpack Compose, not just web.
|
|
34
46
|
- **Canvas-agnostic** — sits *above* Figma, Pencil, and OpenPencil. Figma MCP gives Claude access; designagent gives Claude intelligence.
|
|
35
47
|
- **Built on Google's open token spec** — `DESIGN.md` is a real, linted, diffable, exportable standard, not a bespoke format.
|
|
@@ -39,10 +51,9 @@ Then it generates all three files, lints `DESIGN.md` with `@google/design.md`, w
|
|
|
39
51
|
|
|
40
52
|
`DESIGN.md` exports to real targets via the Google CLI:
|
|
41
53
|
|
|
42
|
-
```
|
|
54
|
+
```
|
|
43
55
|
npx @google/design.md export --format css-tailwind DESIGN.md # Tailwind v4 @theme
|
|
44
56
|
npx @google/design.md export --format dtcg DESIGN.md # W3C Design Tokens
|
|
45
|
-
npx @google/design.md lint DESIGN.md # validate
|
|
46
57
|
```
|
|
47
58
|
|
|
48
59
|
For SwiftUI and Jetpack Compose, the `design-to-code` skill generates the token bridge (`DesignTokens.swift` / `Theme.kt`) directly from `DESIGN.md`.
|