glyph-ai 0.4.1 → 0.4.2
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 +35 -47
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,34 +1,54 @@
|
|
|
1
1
|
# glyph-ai
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Design intelligence for Claude Code and Cursor.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
```bash
|
|
6
|
+
npx glyph-ai init
|
|
7
|
+
```
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
That's it. Start your dev server, open your app, and ask your AI agent:
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
> "Create a design direction for this project"
|
|
10
12
|
|
|
11
|
-
Glyph
|
|
13
|
+
Glyph scans your codebase, picks from the best references in the industry, and generates a visual direction tailored to what you're building. Every page, feature, and component you build after that follows it.
|
|
12
14
|
|
|
13
|
-
##
|
|
15
|
+
## Why
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
npx glyph-ai init
|
|
17
|
-
```
|
|
17
|
+
Vibe coding is design blind. You can ship a working app in an afternoon, but your AI agent can't tell why something looks off — why the spacing feels wrong, why the colors clash, why it looks like every other AI-generated UI.
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
Glyph gives your agent a sense of design. Not templates. Not themes. An opinionated visual direction built from real design systems (Linear, Stripe, Vercel, Apple, and more) that fits your specific app.
|
|
20
20
|
|
|
21
21
|
## How it works
|
|
22
22
|
|
|
23
|
+
1. **`npx glyph-ai init`** — Glyph detects your framework, scans your project, and sets up the MCP server
|
|
24
|
+
2. **"Create a design direction"** — Glyph generates `design.md` (new projects) or `redesign.md` (existing projects) with a complete visual system: colors, typography, spacing, components, motion
|
|
25
|
+
3. **"Give me 3 variations of this page"** — Your agent generates variations that follow the direction. They appear in a browser overlay. Click to preview, click to implement.
|
|
26
|
+
|
|
27
|
+
The direction is the source of truth. Once it exists, every design task follows it. Your agent never freelances — it executes within the constraints Glyph established.
|
|
28
|
+
|
|
29
|
+
## What you get
|
|
30
|
+
|
|
31
|
+
- **A visual direction** — not a generic theme, but a design system informed by the best products in your category
|
|
32
|
+
- **Live preview overlay** — variations render in your browser, side by side, with one-click apply
|
|
33
|
+
- **Automatic project detection** — Glyph infers what you're building (dashboard, SaaS, e-commerce, marketing site) and picks references accordingly
|
|
34
|
+
- **Works with your stack** — Next.js, Vite, Create React App. Tailwind or CSS. Your existing tokens are respected.
|
|
35
|
+
|
|
36
|
+
## Under the hood
|
|
37
|
+
|
|
38
|
+
Everything runs locally. No API keys, no external services, no data leaving your machine.
|
|
39
|
+
|
|
23
40
|
```
|
|
24
41
|
Your app (Next.js / Vite / CRA)
|
|
25
|
-
└── Glyph overlay (browser)
|
|
26
|
-
└── Glyph server (
|
|
27
|
-
└── MCP → Claude Code / Cursor
|
|
28
|
-
└── parallel variation runs
|
|
42
|
+
└── Glyph overlay (browser, dev only)
|
|
43
|
+
└── Glyph server (localhost:3013)
|
|
44
|
+
└── MCP tools → Claude Code / Cursor
|
|
29
45
|
```
|
|
30
46
|
|
|
31
|
-
|
|
47
|
+
- **`glyph init`** writes `.mcp.json` (Claude Code) and `.cursor/mcp.json` (Cursor) so your agent picks up Glyph's tools automatically
|
|
48
|
+
- **The MCP server** runs locally and gives your agent six tools: `generate_design_system`, `generate_variations`, `submit_variations`, `apply_variation`, `preview_draft`, and `scan_design_system`
|
|
49
|
+
- **The browser overlay** injects a dev-only script into your app that connects to the local server via WebSocket — shows variation previews, lets you click to apply
|
|
50
|
+
- **No LLM calls from Glyph** — your agent does the generation using your existing Claude/Cursor subscription. Glyph just provides the design intelligence (briefs, constraints, scoring rubrics)
|
|
51
|
+
- **Backups** are created automatically before any file is written. Click discard to restore.
|
|
32
52
|
|
|
33
53
|
## Commands
|
|
34
54
|
|
|
@@ -41,35 +61,3 @@ npx glyph-ai stop # Stop the server
|
|
|
41
61
|
|
|
42
62
|
- Node 18+
|
|
43
63
|
- Claude Code or Cursor
|
|
44
|
-
|
|
45
|
-
## Development
|
|
46
|
-
|
|
47
|
-
```bash
|
|
48
|
-
cd glyph
|
|
49
|
-
pnpm install
|
|
50
|
-
pnpm run dev:e2e
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
Starts three processes concurrently:
|
|
54
|
-
|
|
55
|
-
| Process | Location | Description |
|
|
56
|
-
| -------- | ----------------- | --------------------------------------------------- |
|
|
57
|
-
| Overlay | packages/overlay/ | React + Tailwind browser overlay (Vite watch build) |
|
|
58
|
-
| Server | packages/server/ | Express + WebSocket + MCP on :3013 |
|
|
59
|
-
| Demo app | product/ | Next.js test app on :3000 |
|
|
60
|
-
|
|
61
|
-
Open http://localhost:3000 -- the overlay loads at the bottom of the page.
|
|
62
|
-
|
|
63
|
-
**Build:**
|
|
64
|
-
|
|
65
|
-
```bash
|
|
66
|
-
pnpm run build # overlay → server → cli
|
|
67
|
-
pnpm run build:dist # builds + bundles into packages/cli/bundled/
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
**Environment variables:**
|
|
71
|
-
|
|
72
|
-
| Variable | Default | Description |
|
|
73
|
-
| -------------------- | --------------- | ------------------------ |
|
|
74
|
-
| `GLYPH_PORT` | `3013` | Server port |
|
|
75
|
-
| `GLYPH_PROJECT_ROOT` | `process.cwd()` | Root of the user's project |
|