Give Windsurf a design system

Windsurf's Cascade agent is strong on code and unaware of your brand. Add the Identity Forge MCP server to Windsurf's config and it can browse, apply, and follow a real DESIGN.md and token set.

Updated July 13, 2026

Why Windsurf needs a design system

Cascade builds features end to end, but like every agent it re-decides styling each turn: a slightly different accent here, new spacing there, a fresh font on the next screen. A design system removes the guesswork: one set of semantic tokens and a written DESIGN.md that Cascade follows, so the whole app looks like one product instead of ten prompts.

Windsurf is a manual install (for now)

The identityforge install --client … command does not support Windsurf yet. Windsurf accepts the same standard MCP shape, so add the server by hand as shown below. The CLI and shadcn paths work without MCP.

The kit you'll install

Ambient Sage

After Work Chill

Double tap on a widget to edit settings

Save SettingsLearn more

Plus Jakarta Sans · 28 semantic tokens · light + dark

The free Ambient Sage kit, rendered from its real tokens: the system Cascade writes into your repo.

Install it (manual MCP config)

  1. 1

    Open Windsurf's MCP config

    In Windsurf, open Settings → Cascade → MCP servers and choose to edit the raw config (~/.codeium/windsurf/mcp_config.json).

  2. 2

    Add the identityforge server

    Paste the entry below into the mcpServers object (merge it alongside any existing servers).

    {
      "mcpServers": {
        "identityforge": {
          "command": "npx",
          "args": ["-y", "identityforge@latest", "mcp"]
        }
      }
    }
  3. 3

    Refresh MCP servers

    Back in Cascade's MCP panel, refresh so the identityforge tools load.

  4. 4

    Ask Cascade to theme the app

    Give product, audience, and mood; it uses search_themes, get_design_md, and apply_theme.

    Use Identity Forge to pick a clean, editorial theme for a
    recipe site, apply it, and follow the DESIGN.md.

Or skip MCP entirely

Because Windsurf can run terminal commands, the client-agnostic paths work without any config edit: Cascade (or you) just runs one command:

  1. 1

    CLI apply

    Writes DESIGN.md + a tokens file into the current directory. Ask Cascade to read DESIGN.md and wire the tokens in.

    identityforge apply ambient-sage
  2. 2

    shadcn registry

    Installs the kit's CSS variables directly for shadcn/ui projects.

    npx shadcn add https://identityforge.io/r/ambient-sage.json

The Cursor guide covers the same MCP flow with a supported install command, and the pillar guide links every tool. To understand the payload, read what a DESIGN.md is.

FAQ

How do I give Windsurf a design system?

Add the Identity Forge MCP server to ~/.codeium/windsurf/mcp_config.json using the standard mcpServers entry (command `npx`, args `-y identityforge@latest mcp`), refresh Cascade's MCP servers, then ask Cascade to pick and apply a kit. Or skip MCP and run `identityforge apply <slug>`.

Is there an install --client windsurf command?

Not yet. The CLI's install command currently supports claude-code, cursor, codex, gemini, vscode, opencode, and pi. Windsurf uses the same MCP shape, so you paste the server config manually.

Can I avoid editing config files?

Yes. Run `identityforge apply <slug>` to write DESIGN.md and tokens into the current directory, or `npx shadcn add https://identityforge.io/r/<slug>.json` for shadcn/ui projects. Neither needs an MCP config.