# DESIGN.md with Windsurf

> Make Windsurf, now Devin Desktop, follow DESIGN.md with a workspace rule or AGENTS.md. Includes a sample rule and the four activation modes.

Canonical page: https://sitepeel.dev/guides/design-md-windsurf/

Save DESIGN.md in your project, then add a workspace rule in .windsurf/rules that tells the agent to follow it for UI files. Windsurf is now called Devin Desktop.

Published: 2026-10-24

Tool used in this guide: [Design MD generator](https://sitepeel.dev/design-md-generator/index.md)

## How to use it

1. **Add DESIGN.md to the project** Generate it from a site with Sitepeel, review it and save it in the workspace root.
2. **Create a workspace rule** Click the Customizations icon, open Rules and choose + Workspace, or create the rule file yourself.
3. **Pick a trigger** Use glob for your UI files, or always_on for a small, UI-heavy project.
4. **Ask for one screen** Name the page, its content and its main action. Ask which DESIGN.md tokens it used.
5. **Review the result** Compare the page with DESIGN.md at phone and desktop widths, then tighten the rule if needed.

## 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.

Example: .windsurf/rules/design.md

```
---
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

Windsurf rule triggers

| 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

- [Sample AGENTS.md section for DESIGN.md](https://sitepeel.dev/guides/design-md-codex/index.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

- [The agent still ignores the design? Check these five things](https://sitepeel.dev/guides/ai-ignoring-design-md/index.md)

## Questions and answers

### Is Windsurf now Devin Desktop?

Yes. Cognition renamed Windsurf to Devin Desktop on June 2, 2026, and its docs moved to docs.devin.ai. Rules in .windsurf/rules and the older .windsurfrules file still load; .devin/rules is now the preferred folder.

### Does Windsurf read AGENTS.md?

Yes. A root AGENTS.md works as an always-on rule; one in a subfolder applies when the agent works on files in that folder. Both AGENTS.md and agents.md are recognized.

### What is the Windsurf rules character limit?

Each workspace rule file is limited to 12,000 characters. The global rules file, global_rules.md, is limited to 6,000 characters.

### Where are Windsurf rules stored?

In .devin/rules/ or .windsurf/rules/ in your workspace, its subfolders, or parent folders up to the git root. Global rules live in ~/.codeium/windsurf/memories/global_rules.md.

## Further reading

- [Cognition: Windsurf is now Devin Desktop (June 2026)](https://devin.ai/blog/windsurf-is-now-devin-desktop)
- [Devin Desktop (formerly Windsurf) docs: Memories & Rules](https://docs.devin.ai/desktop/cascade/memories)
- [Devin Desktop (formerly Windsurf) docs: AGENTS.md](https://docs.devin.ai/desktop/cascade/agents-md)
- [Devin CLI docs: Rules & AGENTS.md](https://docs.devin.ai/cli/extensibility/rules)

## Related pages

- [What is DESIGN.md](https://sitepeel.dev/guides/what-is-design-md/index.md): DESIGN.md is a Markdown design-system file for AI coding agents. See its format, a small example, the official linter and how to make one from any site.
- [DESIGN.md with Cursor](https://sitepeel.dev/guides/design-md-cursor/index.md): Point Cursor at DESIGN.md with a project rule in .cursor/rules, AGENTS.md or an @ mention. Includes a sample .mdc rule and the four rule types.
- [DESIGN.md with Claude Code](https://sitepeel.dev/guides/design-md-claude-code/index.md): Import DESIGN.md into CLAUDE.md with @DESIGN.md so Claude Code follows your colors, type and spacing. Includes a sample CLAUDE.md and checks.
- [Use Design MD with AI](https://sitepeel.dev/guides/use-design-md-with-ai/index.md): Hand DESIGN.md to Cursor, Claude Code or another AI coding assistant: where to save it, two prompts to copy and how to review what it builds.
- [When AI ignores DESIGN.md](https://sitepeel.dev/guides/ai-ignoring-design-md/index.md): Your agent has DESIGN.md but the UI is still wrong? Check that it loads, remove conflicting rules, name real components and verify the result.