better-design 0.15.1 → 0.19.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.
Files changed (4) hide show
  1. package/README.md +48 -35
  2. package/dist/index.js +2334 -510
  3. package/dist/index.js.map +1 -1
  4. package/package.json +3 -1
package/README.md CHANGED
@@ -1,49 +1,62 @@
1
- # better-design
1
+ # Better Design
2
2
 
3
- Design systems, UI principles, icons, and code review for AI coding agents. [better-design.com](https://better-design.com)
3
+ ## Give your AI real design skills
4
4
 
5
- ## Install
5
+ Better Design connects your coding agent to design systems, UI and UX guidance, icons, and quality reviews.
6
+
7
+ Use it to design and build for web, mobile, Shopify, 3D, and product video.
6
8
 
7
9
  ```bash
8
10
  npx better-design
9
11
  ```
10
12
 
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).
13
+ Run it once. The installer detects your supported coding tools and adds Better Design without overwriting their existing configuration.
14
+
15
+ Free. No account required.
16
+
17
+ Works with Codex, Claude Code, Cursor, VS Code, Windsurf, and other MCP clients.
12
18
 
13
- Already have a key? Set `BETTER_DESIGN_API_KEY`. Manage keys at [better-design.com/mcp](https://better-design.com/mcp).
19
+ ## What your agent can do
14
20
 
15
- > Set `"style": "new-york"` in `components.json` before running the shadcn command. The default `base-nova` style rewrites Radix `asChild` and breaks components.
21
+ - Find, generate, or extract a design system.
22
+ - Build with consistent, editable components and styles.
23
+ - Apply guidance for interfaces, interactions, motion, mobile, Shopify, and 3D.
24
+ - Find and install a matching icon library.
25
+ - Review accessibility, usability, content, and visual quality, against the guidance the session already loaded.
26
+
27
+ Your code stays in your repo and remains yours to change.
16
28
 
17
29
  ## Tools
18
30
 
19
31
  | Tool | Purpose |
20
32
  | --- | --- |
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. |
28
- | `get-ux-principle` | Load or search flow and interaction principles. |
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. |
36
- | `find-icons` | Search icons by name, library, and variant. |
37
- | `install-icons` | Write icon components into the project. |
38
- | `detect-icon-library` | Report which icon library a project already uses. |
39
-
40
- Every load-or-search tool takes `topic` when you know the name, or `query` when you are describing a problem.
41
-
42
- ## Options
43
-
44
- | Option | Description |
45
- | --- | --- |
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. |
33
+ | `find-design-system` | Find a catalog system for a requested interface. |
34
+ | `get-design-system-kit` | Retrieve installable React, HTML, or Shopify kit output. |
35
+ | `get-design-system-status` | Check a generated system's progress and result. |
36
+ | `create-design-system` | Generate a custom design system for a product. Pass an extracted token sheet as `brandCss` to build from the user's own brand instead of a catalog look-alike. |
37
+ | `preview-design-system` | Show a token-true preview for a system. |
38
+ | `get-ui-principle` | Load visual guidance for layout, type, color, polish, and accessibility. |
39
+ | `get-ux-principle` | Load guidance for flows, forms, navigation, errors, onboarding, and behavior. |
40
+ | `get-react-native-guide` | Load React Native and Expo build guidance. |
41
+ | `get-three-js-guide` | Load Three.js and React Three Fiber build guidance. |
42
+ | `get-motion-guide` | Load animation and motion guidance. |
43
+ | `get-review-rules` | Review UI output for visual, UX, content, accessibility, and motion issues. Names the principles this session already loaded and orders their rules first. |
44
+ | `check-comprehension` | Check whether a finished interface communicates clearly. Names the principles this session already loaded. |
45
+ | `extract-design-system` | Extract a brand from any mix of sources: pasted CSS, a computed-style sample from the live site, or a design-tokens export (W3C or Figma variables). |
46
+ | `extract-from-url` | Point it at a public URL: the server fetches the site's stylesheets, renders the page in a headless browser, and returns the brand as an oklch token sheet. |
47
+ | `find-icon-library` | Pick an icon library that fits the project. |
48
+ | `find-icons` | Find icons inside a selected library. |
49
+ | `install-icons` | Install selected icons into the local project. |
50
+ | `detect-icon-library` | Detect an existing icon library in the project. |
51
+ | `review-illustration` | Review illustration output against Better Design rules. |
52
+
53
+ ## Explore Better Design
54
+
55
+ [Design systems](https://better-design.com/design-systems) ·
56
+ [Templates](https://better-design.com/templates) ·
57
+ [Slides](https://better-design.com/slides) ·
58
+ [Shopify](https://better-design.com/shopify) ·
59
+ [Video](https://better-design.com/video)
60
+
61
+ [See Better Design](https://better-design.com) ·
62
+ [Installation guide](https://better-design.com/mcp/install)