Diseño UI en Cursor: dónde va el prompt

Cursor tiene tres sitios donde poner una instrucción de diseño: el chat, un archivo de reglas y un documento que puede indexar. Cada uno encaja con un tamaño de trabajo distinto.

Un componente: el chat

Pon el menú de herramienta en Cursor, copia el prompt y pégalo en el chat con el archivo de destino abierto o referenciado con @. El prefijo pide CSS puro en la hoja de estilos existente. La costumbre de Cursor es meter los estilos inline en el JSX cuando el componente es pequeño; si ves style={{...}} en el diff, dile "mueve eso al archivo CSS" y lo hará.

Todo el proyecto: un archivo de reglas

Cursor lee .cursor/rules/*.mdc (proyectos antiguos: .cursorrules). Coge un prompt de estilo de las páginas de Estilos y guárdalo como una regla que se aplique a tus archivos de UI:

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

Que no pase de 200 palabras. Los archivos de reglas largos se truncan en el contexto, y las últimas líneas son las que desaparecen.

Documentación de referencia: indexa el markdown

Cursor puede indexar una URL como documentación. Añade https://designforai.dev/llms.txt en Docs dentro de los ajustes y ya puedes escribir "@Docs designforai use the neo-brutalist card" en el chat. El índice cubre cada página de snippet y de estilo en formato markdown.

A qué prestar atención

Composer a veces renombra las clases para seguir tu convención de nombres. Inofensivo si es consistente; comprueba que el CSS también se renombró.
Si Tailwind está en el proyecto, Cursor traducirá el CSS a utilidades a menos que la regla diga que no. El prefijo del prompt copiado ya lo cubre, pero un archivo de reglas necesita esa línea también.
Snippets animados: Cursor puede soltar los @keyframes en un archivo de componente donde los CSS modules acotan el nombre. Sigue funcionando, pero el nombre cambia, así que un segundo componente no puede reutilizarlo. Pon los keyframes en un archivo global.