← Home

Windsurf

Windsurf supports context injection via a rules file in your project root. Pair it with tokens.css in your stylesheet directory so Cascade suggestions naturally reference the correct token values.

Setup

Step 1: Create the rules file

Add a windsurf.rules or .windsurfrules file to your project root. Paste the Quick Reference (Section 0) from your exported layout.md into it:

markdown
# Design System Rules

<!-- Paste Quick Reference from layout.md here -->

Windsurf reads this file automatically and injects the content as context on every Cascade prompt.

Step 2: Copy tokens.css into your project

Copy tokens.css from your export bundle into your stylesheet directory:

bash
cp path/to/export/tokens.css src/styles/tokens.css

Step 3: Import tokens.css in your global stylesheet

Import the file at the top of your global CSS to make all design tokens available as CSS custom properties throughout your project:

css
/* In your globals.css or app.css */
@import "./tokens.css";

With the token values present in your source files, Cascade suggestions will naturally use the correct values when generating CSS or component styles.

Windsurf's Cascade also picks up context from files open in the editor. Keeping layout.md or tokens.css open in a tab during UI generation sessions gives Cascade the full token inventory to draw from.

Why tokens.css matters

The rules file tells Windsurf what design system to follow. The token file makes those values available as concrete CSS custom properties. When Cascade generates a component that uses var(--color-primary), the actual value is defined in tokens.css, so there is no guesswork and no magic strings.