better-design 0.24.0 → 0.29.1

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 (4) hide show
  1. package/README.md +43 -1
  2. package/dist/index.js +3782 -1472
  3. package/dist/index.js.map +1 -1
  4. package/package.json +7 -3
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Give your coding agent design systems, UI and UX guidance, icons, and code reviews through MCP.
4
4
 
5
- Works with Codex, Claude Code, Cursor, VS Code, Windsurf, and other MCP clients.
5
+ Works with Codex, Claude Code, Cursor, VS Code, Devin, Antigravity, and other MCP clients.
6
6
 
7
7
  ## Install
8
8
 
@@ -15,12 +15,54 @@ npx better-design
15
15
 
16
16
  The first installs the agent skill. The second connects Better Design to your coding tools. Restart your agent after setup.
17
17
 
18
+ If you have no account, setup creates a free key for you. Using that key accepts the [Terms of Service](https://better-design.com/terms) at the version setup prints.
19
+
20
+ Install links can record where you found Better Design with `npx better-design --source docs`.
21
+ Supported source labels are `docs`, `github`, `claude_directory`, `openai_catalog`, `campaign`, and `unknown` (the default).
22
+ The installer sends this label when creating a free key and records npm as the install method. It does not infer your referral source or active client from the editors installed on your computer.
23
+
18
24
  ## Try it
19
25
 
20
26
  Ask your agent:
21
27
 
22
28
  > Use Better Design to build a settings page with my project's design system, then review it for accessibility and consistency.
23
29
 
30
+ ## Build a prototype from Figma
31
+
32
+ With the Better Design plugin open in a Figma file, `create-figma-prototype`
33
+ turns a frame into one HTML page built from that design system's components.
34
+ Name a frame, or omit the name to take the current selection. The server
35
+ starts a relay on `http://localhost:4397` that only the plugin talks to, so
36
+ the file never leaves your machine. This tool is local only: the hosted
37
+ connectors cannot reach your Figma.
38
+
39
+ A frame from a file that was not built from a Better Design library has no
40
+ components to map, so pass `mode: "model"` and a catalog `system`. The plugin
41
+ asks you to confirm the frame. Your agent is the model: the tool writes a
42
+ prompt file and the frame's image, your agent writes the page on its own
43
+ plan, and a second call with `frameId` and `answerPath` checks the page and
44
+ lists every layer that did not make it. No API key is needed. To use a local
45
+ model instead, pass `provider: "openai-compatible"`: the tool calls Ollama at
46
+ `http://localhost:11434/v1` with `gemma4:latest`, or the server in
47
+ `BETTER_DESIGN_MODEL_BASE_URL`, with `BETTER_DESIGN_MODEL_API_KEY` if it needs
48
+ one.
49
+
50
+ ## Map your product's features and flows
51
+
52
+ Your agent keeps a map of the product in `.better-design/feature-map.json`:
53
+ each feature, its flows, and the route, screen, components and data of every
54
+ step. `build-feature-map` drafts it from `git ls-files`, `read-feature-map`
55
+ names what a change to a flow touches, and `update-feature-map` adds, renames
56
+ or removes a feature or flow in one call. The map stays in your repository;
57
+ the tools store nothing.
58
+
59
+ ## Share your team's rules with every agent
60
+
61
+ Paste your team's rules into
62
+ [Team rules](https://better-design.com/dashboard/settings/team-rules), one
63
+ Markdown document of up to 32 KB. `get-team-rules` gives them to any agent
64
+ that uses your key, and `get-review-rules` checks the work against them.
65
+
24
66
  ## Review UI code
25
67
 
26
68
  Check changed JSX and TSX files in your project: