Design for AI

Cursor UI design: where the prompt goes

Cursor has three places to put a design instruction: the chat, a rules file, and a doc it can index. Each one suits a different size of job.

One component: the chat

Set the tool menu to Cursor, copy the prompt, paste it into the chat with the target file open or referenced with @. The prefix asks for plain CSS in the existing stylesheet. Cursor's habit is to inline styles into JSX when the component is small; if you see style={{...}} in the diff, say "move that to the CSS file" and it will.

The whole project: a rules file

Cursor reads .cursor/rules/*.mdc (older projects: .cursorrules). Take a style prompt from the Styles pages and save it as a rule that applies to your UI files:

---
description: Design direction for all UI
globs: src/**/*.tsx, src/**/*.css
alwaysApply: true
---
(paste the style prompt)

Tokens: --bg:#faf6f1; --fg:#1a1a1a; --accent:#f26207; --radius:12px;
Never add a CSS framework. Keep hover and focus-visible states on every interactive element.

Keep it under 200 words. Long rule files get truncated in context and the last lines are the ones that vanish.

Reference docs: index the markdown

Cursor can index a URL as documentation. Add https://designforai.dev/llms.txt under Docs in settings, and you can then write "@Docs designforai use the neo-brutalist card" in chat. The index covers every snippet and style page in markdown form.

What to watch