Quickstart

Windcraft is a design coherence layer for AI-assisted code generation. It sits between your AI coding tool (Cursor, Claude Code, Lovable, v0) and your repo, keeping every generated page in lockstep with one design system.

1. Create an account

Sign up at app.windcraft.io/sign-up, then subscribe to start creating projects. $29 / month, 14-day money-back guarantee. We don't offer a free trial — AI tooling is expensive to operate and trials get exhausted by automated runs.

2. Create your first project

From the dashboard, click New project. Pick a name and the platforms you target (web, mobile, or both). You'll get an API key — copy it now, you won't see it again.

3. Wire the CLI to your repo

# In your project root
npx windcraft login --api-key wc_live_… --project-id <project-id>
npx windcraft init --yes

init detects your stack (Next.js, Tailwind, Expo) and writes .windcraft/config.json. It also pulls the first sync — Tailwind config, CSS variables, RN theme, and TS token types all land in your repo.

4. Edit tokens in the dashboard

Open /projects/<id>/tokens. Edit colors, spacing, typography, line-height, shadows. Auto-saves every 1.5 seconds, each save creates a new version. Use the diff button on any version to compare against the previous one.

5. Sync to your repo

npx windcraft sync

Atomic writes with backups in .windcraft/backups/. Run whenever the cloud version is newer than your local files. Use --watch to keep it open and re-sync automatically; --commit to land the result as a chore(windcraft): commit.

6. Connect your GitHub repo (optional)

In the project's settings, click Connect repository. Windcraft installs a webhook and gains the ability to open sync PRs directly — push a token change in the dashboard, click Open sync PR, review and merge.

7. Wire MCP for Cursor / Claude Code

Add to ~/.cursor/mcp.json or ~/.claude.json:

{
  "mcpServers": {
    "windcraft": {
      "command": "npx",
      "args": ["windcraft", "mcp"]
    }
  }
}

For remote consumers, run the server over HTTP: npx windcraft mcp --http 4444.

Restart your editor. AI tools now query Windcraft for tokens, contracts, and rules before writing code.

8. Catch violations

npx windcraft check

Runs the static analyzer over your .tsx / .jsx files. Errors and warnings with file:line refs. Use --fix to auto-fix what's safe.

From here: read the concepts, explore the CLI, or see the rule reference.

On this page