better-design 0.7.0 → 0.7.6
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 +42 -40
- package/dist/index.js +2345 -1296
- package/dist/index.js.map +1 -1
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -1,50 +1,52 @@
|
|
|
1
|
-
# better-design
|
|
1
|
+
# better-design
|
|
2
2
|
|
|
3
|
-
Design systems, UI
|
|
3
|
+
Design systems, UI principles, icons, and code review for AI coding agents. [better-design.com](https://better-design.com)
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Install
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npx better-design
|
|
8
|
+
npx better-design
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Run it once. The installer detects your installed MCP clients (Claude Code, Cursor, VS Code, Windsurf, Zed, Cline, JetBrains, and more), writes the config merge-safe, and drops an auto-invoke rule so agents use Better Design on UI work automatically. Get an API key at [better-design.com/mcp](https://better-design.com/mcp).
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
<summary>Manual setup & flags</summary>
|
|
15
|
-
|
|
16
|
-
Claude Code:
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer YOUR_API_KEY"
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
Every other client: per-client config at [better-design.com/mcp](https://better-design.com/mcp).
|
|
23
|
-
|
|
24
|
-
`setup` flags: `--client <ids>` (skip detection) · `--project` (vs default `--global`) · `--api-key <key>` · `--no-rule` (skip the CLAUDE.md/AGENTS.md rule) · `--dry-run` · `--yes`.
|
|
25
|
-
|
|
26
|
-
Supported clients: Claude Code, Cursor, VS Code (Copilot), Windsurf, Zed, Cline, Claude Desktop, OpenCode, Amp, Codex CLI, Continue.dev.
|
|
27
|
-
|
|
28
|
-
</details>
|
|
29
|
-
|
|
30
|
-
## What you can ask
|
|
31
|
-
|
|
32
|
-
- **"use better-design"** → pick a system from the catalog; the agent installs it (tokens + every component) via shadcn.
|
|
33
|
-
- **"create a design system that…"** → generates a custom one and hands back a single `npx shadcn add` command for your Next.js project.
|
|
34
|
-
- **Building any UI** → it auto-loads design principles + WCAG/visual review rules so the output isn't generic AI slop.
|
|
13
|
+
> 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.
|
|
35
14
|
|
|
36
15
|
## Tools
|
|
37
16
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
48
|
-
| `
|
|
49
|
-
|
|
50
|
-
|
|
17
|
+
The server exposes MCP tools only; it does not register prompts.
|
|
18
|
+
|
|
19
|
+
| Tool | Purpose |
|
|
20
|
+
| --- | --- |
|
|
21
|
+
| `find-design` | Search the Better Design catalog and return design system IDs. (For building an app, prefer `create-design-system` to generate the user's own brand.) |
|
|
22
|
+
| `resolve-design-system` | Deprecated alias of `find-design`, kept one release for backward compatibility. |
|
|
23
|
+
| `get-design-system-docs` | Return shadcn install commands and component source for a design system. Default path in any real project (filesystem + terminal): build real React components. |
|
|
24
|
+
| `create-design-system` | Start a custom design system generation job. |
|
|
25
|
+
| `check-design-system-status` | Poll a generated design system and return the install command when ready. |
|
|
26
|
+
| `preview-design-system` | Return a token-true visual preview for a catalog design system. |
|
|
27
|
+
| `get-design-system-html` | Export a framework-free HTML/CSS kit (real tokens + each system's real component material: card depth, button gradient/rim, switch fill, badge radius) for inline chat canvases only (ChatGPT canvas / Claude artifact) with no filesystem or build step; otherwise use `get-design-system-docs` and build React. Takes a catalog `designSystemId` OR a generated `projectId`; lists covered vs interactive-excluded components. |
|
|
28
|
+
| `get-ui-principle` | Load or search visual UI principles. |
|
|
29
|
+
| `get-ux-principle` | Load or search flow and interaction principles. |
|
|
30
|
+
| `get-review-rules` | Return the Better Design self-review checklist. |
|
|
31
|
+
| `resolve-icon-library` | Find an icon library for an app or project style. |
|
|
32
|
+
| `search-icons` | Search icons by name, library, and variant. |
|
|
33
|
+
| `install-icons` | Generate local icon components in the target project. |
|
|
34
|
+
| `detect-icon-library` | Read an existing icon-library manifest and report the active library. |
|
|
35
|
+
|
|
36
|
+
## Setup Behavior
|
|
37
|
+
|
|
38
|
+
`npx better-design` prompts for an API key, clients, install scope, and whether to add auto-invoke rules. For non-interactive runs, set `BETTER_DESIGN_API_KEY` and pass `--global` or `--project`.
|
|
39
|
+
|
|
40
|
+
Client configs are merged into existing JSON, JSONC, TOML, or dedicated config files without removing other MCP servers. Existing files are backed up before writes, and files that contain bearer tokens are written with owner-only permissions.
|
|
41
|
+
|
|
42
|
+
The installer resolves scope per client before writing. If a client supports the requested scope, it uses that scope. If a client supports only one scope, the installer falls back to that supported scope and marks the summary, for example `installed project (only scope this client supports)`. Auto-invoke rule targets use the same resolved per-client scope, so project-only clients such as Continue get project rules while global-only clients keep manual or global rule guidance.
|
|
43
|
+
|
|
44
|
+
Relevant configuration:
|
|
45
|
+
|
|
46
|
+
| Option | Description |
|
|
47
|
+
| --- | --- |
|
|
48
|
+
| `BETTER_DESIGN_API_KEY` | API key used for non-interactive setup. |
|
|
49
|
+
| `BETTER_DESIGN_API_URL` | Overrides the MCP API base URL for generated client configs. |
|
|
50
|
+
| `--global` | Install at user/global scope when the client supports it. |
|
|
51
|
+
| `--project` | Install in the current project when the client supports it. |
|
|
52
|
+
| `--help` | Print setup usage. |
|