Sample Windsurf rule for DESIGN.md
Save this as .windsurf/rules/design.md. Devin Desktop prefers .devin/rules/ but still reads .windsurf/rules/. The glob trigger applies the rule whenever the agent reads or edits a matching file.
---
trigger: glob
globs: src/**/*.tsx
---
Follow DESIGN.md in the project root for all UI work.
- Read DESIGN.md before changing components, pages or styles.
- Use its color, typography, spacing and radius tokens. No new hex values.
- Reuse existing components and follow its Do's and Don'ts.
- If DESIGN.md has no rule for a case, say so instead of inventing one.
Choose an activation mode
TipPoint to DESIGN.md instead of pasting it into a rule: one file stays the source of truth and under the 12,000-character limit.
| Mode | trigger value | When the rule applies |
|---|---|---|
| Always On | always_on | Every message: the full rule is in the system prompt |
| Model Decision | model_decision | The description is always shown; the full rule is read when relevant |
| Glob | glob | When the agent reads or edits a file matching globs |
| Manual | manual | Only when you type @ and the rule name |
Rule locations and AGENTS.md
- Workspace: .devin/rules/*.md (preferred) or .windsurf/rules/*.md, one rule per file
- The older single .windsurfrules file in the workspace root is still read
- Global: ~/.codeium/windsurf/memories/global_rules.md, always on, up to 6,000 characters
- AGENTS.md in the root is always on; in a subfolder, it applies to files in that folder
- Auto-generated memories stay on your machine, so keep design rules in a rule or AGENTS.md
Check what the agent built
- Ask which DESIGN.md tokens and components it used
- Search the diff for new hex values and one-off sizes
- Compare the page with DESIGN.md at phone and desktop widths
- Rule ignored? Check its trigger and that the globs match the files you’re editing