better-design 0.12.0 → 0.15.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.
- package/README.md +25 -45
- package/dist/index.js +967 -71
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -8,62 +8,42 @@ Design systems, UI principles, icons, and code review for AI coding agents. [bet
|
|
|
8
8
|
npx better-design
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
Run it once.
|
|
11
|
+
Run it once. It creates a free key, writes the config into the MCP clients you already have, and merges rather than overwriting. No signup. [See a page per client](https://better-design.com/mcp/install).
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
Already have a key? Set `BETTER_DESIGN_API_KEY`. Manage keys at [better-design.com/mcp](https://better-design.com/mcp).
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
> After install, set `"style": "new-york"` in `components.json` before running the shadcn command (the default `base-nova` style rewrites Radix `asChild` and breaks components). The returned install instructions include this.
|
|
15
|
+
> Set `"style": "new-york"` in `components.json` before running the shadcn command. The default `base-nova` style rewrites Radix `asChild` and breaks components.
|
|
18
16
|
|
|
19
17
|
## Tools
|
|
20
18
|
|
|
21
|
-
The server exposes MCP tools only; it does not register prompts.
|
|
22
|
-
|
|
23
19
|
| Tool | Purpose |
|
|
24
20
|
| --- | --- |
|
|
25
|
-
| `find-design-system` |
|
|
26
|
-
| `create-design-system` |
|
|
27
|
-
| `get-design-system-status` | Poll a
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `get-ui-principle` | Load or search visual
|
|
21
|
+
| `find-design-system` | Search the catalog for a look to build on. |
|
|
22
|
+
| `create-design-system` | Generate a custom design system. |
|
|
23
|
+
| `get-design-system-status` | Poll a generation job and return the install command. |
|
|
24
|
+
| `get-design-system-kit` | Return the implementation kit: React components, framework-free HTML, or Shopify Liquid. |
|
|
25
|
+
| `preview-design-system` | Return a token-true visual preview. |
|
|
26
|
+
| `extract-design-system` | Pull a semantic token set out of a project's existing CSS. |
|
|
27
|
+
| `get-ui-principle` | Load or search visual principles. |
|
|
32
28
|
| `get-ux-principle` | Load or search flow and interaction principles. |
|
|
33
|
-
| `get-react-native-guide` |
|
|
34
|
-
| `get-
|
|
35
|
-
| `
|
|
36
|
-
| `
|
|
37
|
-
| `
|
|
29
|
+
| `get-react-native-guide` | React Native and Expo implementation guidance. |
|
|
30
|
+
| `get-three-js-guide` | Three.js and React Three Fiber implementation guidance. |
|
|
31
|
+
| `get-motion-guide` | Building a product demo video in code. |
|
|
32
|
+
| `get-review-rules` | The self-review checklist. `category`: `accessibility`, `visual-design`, `animation`, `content`, `comprehension`, `all`. |
|
|
33
|
+
| `check-comprehension` | Check a finished screen against the mom test, the 15 second test, and the screenshot test. |
|
|
34
|
+
| `review-illustration` | Render an SVG you drew, look at it, report what is visibly wrong. |
|
|
35
|
+
| `find-icon-library` | Find an icon library that fits the project. |
|
|
38
36
|
| `find-icons` | Search icons by name, library, and variant. |
|
|
39
|
-
| `install-icons` |
|
|
40
|
-
| `detect-icon-library` |
|
|
41
|
-
|
|
42
|
-
## Retrieve Principles
|
|
43
|
-
|
|
44
|
-
Use `topic` when you know the principle or one of its aliases. Use `query` when you want the most relevant sections for a specific design problem.
|
|
45
|
-
|
|
46
|
-
```text
|
|
47
|
-
get-ui-principle({ topic: "blur test" })
|
|
48
|
-
get-ui-principle({ query: "group this dense settings screen with clearer proximity" })
|
|
49
|
-
get-ux-principle({ topic: "reward design" })
|
|
50
|
-
get-ux-principle({ query: "confirm a high-stakes action with control rather than celebration" })
|
|
51
|
-
get-ux-principle({ topic: "clarity audit" })
|
|
52
|
-
get-ux-principle({ topic: "motion brief" })
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
The principle tools return complete documents for topic lookups and focused document sections for natural-language searches. After implementation, call `get-review-rules({ category: "all" })` so the same hierarchy, accessibility, motion, copy, and reward guidance is applied during review.
|
|
56
|
-
|
|
57
|
-
## Setup Behavior
|
|
37
|
+
| `install-icons` | Write icon components into the project. |
|
|
38
|
+
| `detect-icon-library` | Report which icon library a project already uses. |
|
|
58
39
|
|
|
59
|
-
|
|
40
|
+
Every load-or-search tool takes `topic` when you know the name, or `query` when you are describing a problem.
|
|
60
41
|
|
|
61
|
-
Options
|
|
42
|
+
## Options
|
|
62
43
|
|
|
63
44
|
| Option | Description |
|
|
64
45
|
| --- | --- |
|
|
65
|
-
| `-y`, `--yes` |
|
|
66
|
-
| `
|
|
67
|
-
| `--
|
|
68
|
-
| `--
|
|
69
|
-
| `--help` | Print setup usage. |
|
|
46
|
+
| `-y`, `--yes` | Skip prompts. Agents and CI run this way by default. |
|
|
47
|
+
| `--global` | Install at user scope, where the client supports it. |
|
|
48
|
+
| `--project` | Install in the current project, where the client supports it. |
|
|
49
|
+
| `--help` | Print usage. |
|