glyph-ai

Design intelligence for Claude Code and Cursor.

npx glyph-ai init

That's it. Start your dev server, open your app, and ask your AI agent:

"Create a design direction for this project"

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.

Why

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.

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.

How it works

1. npx glyph-ai init — Glyph detects your framework, scans your project, and sets up the MCP server
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
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.

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.

What you get

• A visual direction — not a generic theme, but a design system informed by the best products in your category
• Live preview overlay — variations render in your browser, side by side, with one-click apply
• Automatic project detection — Glyph infers what you're building (dashboard, SaaS, e-commerce, marketing site) and picks references accordingly
• Works with your stack — Next.js, Vite, Create React App. Tailwind or CSS. Your existing tokens are respected.

Under the hood

Everything runs locally. No API keys, no external services, no data leaving your machine.

Your app (Next.js / Vite / CRA)
  └── Glyph overlay (browser, dev only)
        └── Glyph server (localhost:3013)
              └── MCP tools → Claude Code / Cursor

• glyph init writes .mcp.json (Claude Code) and .cursor/mcp.json (Cursor) so your agent picks up Glyph's tools automatically
• 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
• 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
• 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)
• Backups are created automatically before any file is written. Click discard to restore.

Commands

npx glyph-ai init   # Set up Glyph and start the server
npx glyph-ai stop   # Stop the server

Requirements

• Node 18+
• Claude Code or Cursor