Guía
¿Sin diseñador? Toma prestado un sistema de diseño probado para tu app
Sabes reconocer un buen diseño cuando lo ves, pero no puedes crearlo desde cero. No hace falta. Elige un producto que admires, toma su sistema de diseño como DESIGN.md, cambia las partes que lo hacen suyo y tu agente de programación tendrá un sistema probado con el que crear tu app.
Probado significa puesto a prueba con usuarios reales: tipografía que se lee bien, espaciado que respira, botones que parecen botones. Conservas eso y pones tu propia identidad.
Escrita para fundadores en solitario y equipos pequeños. Actualizada el .
Qué vas a conseguir
- Una lista breve de lo que hace bueno a un sitio de referencia, para elegir uno que encaje con tu producto.
- Un DESIGN.md que puedes poner en tu repositorio como sistema de diseño inicial.
- Una separación clara entre lo que conservar (escala tipográfica, espaciado, radios, formas de los componentes) y lo que cambiar (color de marca, logo, fuentes, tono).
- Un prompt que hace el cambio por ti y una comprobación de que el resultado sigue leyéndose bien.
Cómo elegir un sitio de referencia
El sitio del que tomas prestado decide en gran parte cómo se sentirá tu app, así que dedica diez minutos a esto. Una buena referencia tiene estas características:
- El mismo tipo de producto. Un dashboard toma prestado bien de otro dashboard, no de una tienda de moda.
- Una densidad parecida. Si tu app son formularios y tablas, elige un sitio con formularios y tablas, no uno con un solo hero grande.
- Un color de acción claro. Cuando un solo color marca dónde hacer clic, cambiar la marca consiste en sustituir esa familia de color.
- Una tipografía que se lea bien. Abre el sitio en tu móvil y lee un párrafo. Si es cómodo, vale la pena tomar la escala tipográfica.
- Claro u oscuro, como lo quieras. Convertir un sistema pensado para modo oscuro en uno claro es un rediseño, no un retoque.
- Un aspecto que no sea la marca en sí. Si reconocerías el sitio solo por su color, tendrías que cambiar demasiado.
La galería de DESIGN.md se puede filtrar por categoría, así que es rápido comparar unos cuantos candidatos.
Pasos
Preselecciona dos o tres sitios
Usa las características de arriba. Las capturas de las pantallas que te gustan te ayudan a decidir después.
Consigue el DESIGN.md de tu favorito
Cópialo de su página de la galería, o pega la URL en la página de inicio de Design Extractor y haz una extracción Pro. Pro recorre las páginas clave del sitio y devuelve un archivo con colores, tipografía, espaciado, radios y recetas de componentes. ¿Es tu primera vez con el formato? Lee qué es un DESIGN.md.
Hazlo tuyo
Cambia la familia del color de marca, las fuentes si son comerciales, el nombre y el tono. El prompt de abajo lo hace de una vez.
Ponlo en tu repositorio y apunta a tu agente a él
Guárdalo como DESIGN.md en la raíz del repositorio. La guía de Claude Code y Cursor tiene la referencia que debes añadir.
Compruébalo
Pega el archivo editado en el validador de DESIGN.md gratuito. Comprueba la estructura y señala los colores de texto con poco contraste.
Ejemplo práctico: Notion
Supongamos que te gusta cómo se siente Notion. Este es su sistema de diseño tal como lo recoge el DESIGN.md de la galería, y lo que conservarías y cambiarías.
Colores
Tipografía
Formas
Los 12 primeros colores, los 6 primeros estilos tipográficos y los 4 primeros radios de Notion, renderizados a partir de su DESIGN.md. Haz clic en una muestra para copiar el valor hex.
Qué conservar y qué cambiar
| Parte del archivo | En el DESIGN.md de Notion | Qué hacer |
|---|---|---|
| Escala tipográfica | de hero-display, 96px, peso 600 a body, 16px, peso 400 | Conservar |
| Radios | xs 4px, sm 8px, md 12px, full 9999px | Conservar |
| Neutros | surface #FFFFFF, ink #000000 | Conservar |
| Formas de los componentes | 14 recetas de componentes con tamaños, padding, bordes y estados | Conservar |
| Color de marca | primary #0075DE, primary-focus #0075DE, primary-link #097FE8, primary-pressed #005BAB, primary-tint #E6F3FE | Cámbialo por tu color y sus tonos |
| Fuentes | Notion Inter, Lyon Text | Consérvalas solo si son de uso libre; si no, usa una alternativa |
| Nombre | name: Notion | Cámbialo por el nombre de tu producto |
| Tono | El Overview describe su personalidad | Reescríbelo en una o dos frases sobre la tuya |
| Logo e imágenes | No está en el archivo | Usa tu propio logo, iconos e ilustraciones |
### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.Extraído del sitio web público de Notion, no es una guía de marca oficial. Leer el DESIGN.md completo de Notion
Hazlo tuyo con un solo prompt
Tu agente de programación puede hacer la edición. Abre el repositorio que contiene el DESIGN.md y pega un prompt como este, con tu propio nombre, color y frase en lugar de los de Acme. Se escribió para esta guía con los nombres de tokens reales de Notion.
Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.Después lee el diff. Los valores hex cambian en dos lugares: los tokens colors de arriba y el CSS de cada receta de componente más abajo. Los dos tienen que cambiar a la vez, o los botones mantendrán el color antiguo.
Por qué no copiar una marca entera
Un sistema prestado es un punto de partida, no un disfraz. Publicar el aspecto de otro sin cambios te perjudica más de lo que te ayuda:
- La gente se da cuenta. Una app que parece un producto famoso con otro nombre se percibe como una copia, y eso cuesta confianza.
- La identidad no es tuya. Los logos, los nombres de producto, los colores característicos, las ilustraciones y los textos pertenecen a la marca. El espaciado, los tamaños de texto y los radios son el oficio común del que puedes aprender.
- Las fuentes tienen licencias. Una fuente comercial en su sitio no incluye una licencia para el tuyo.
- Vas a querer hacerlo crecer. Cuando los colores y el tono son tuyos, añadir pantallas se siente como construir tu producto, no el de otro.
La regla general: conserva la estructura y cambia la identidad. Como mínimo, sustituye el color de marca, el logo, cualquier fuente comercial y el tono. Los archivos de la galería se extraen del sitio web público de cada marca, no son guías de marca oficiales, y lo mismo vale para todo lo que extraigas.
Archivos usados en esta guía
Buenos puntos de partida de la galería. Cada página tiene el DESIGN.md completo, su paleta y su muestra tipográfica.
Software y SaaS · Productivity & NotesNotion
La página de inicio de marketing de Notion combina una sección principal en azul marino profundo (#02093a) con un cuerpo de fondo claro (#f6f5f4), y usa una tipografía personalizada (NotionInter) en todos los roles de texto. El diseño emplea una cuadrícula de 12 columnas con canaletas de 28px y un lenguaje de radios doble: 8px para las tarjetas y 9999px para las píldoras. Para los elementos flotantes de la interfaz, utiliza un sistema de sombras progresivas de varias capas. El azul de marca (#2537b1) impulsa los CTA y los destacados de acento, mientras que una escala de grises semántica (de gray-200 a gray-900) estructura toda la jerarquía de texto y superficies.
Viajes, transporte y logísticaAirbnb
El sistema de diseño de Airbnb se basa en una única fuente variable propietaria (Airbnb Cereal VF), una paleta de neutros casi monocromática anclada en el carbón profundo (#222222) y en grises claros, con el rosa coral distintivo de la marca, "Rausch" (#ff385c), reservado exclusivamente para los CTA principales y el logotipo. El diseño es una cuadrícula responsiva de tarjetas con fotografía, con proporciones generosas de imagen y texto, esquinas redondeadas de 20px en las tarjetas y un sistema de sombras ambientales de varias capas que crea una profundidad sutil sin contrastes marcados. La barra de búsqueda es un contenedor destacado con forma de píldora que unifica la acción principal del usuario.
Servicios profesionales y empresarialesShopify
La página de inicio de marketing de Shopify utiliza un vídeo de cabecera a pantalla completa de gran dramatismo, con un fondo casi negro (#02090a) que contrasta con fuerza con la barra de navegación blanca situada encima. El color de acento principal es un verde menta vibrante (#36f4a4), empleado con moderación para destacados y estados interactivos. La tipografía se reparte entre NeueHaasGrotesk, para los títulos de impacto y editoriales, e Inter-Variable, para el texto de interfaz y el cuerpo. Los botones de llamada a la acción tienen forma de píldora totalmente redondeada (border-radius: 9999px). En conjunto, el sistema transmite seguridad, alto contraste y aspiración, y está pensado para convertir a los visitantes en comerciantes.
Preguntas frecuentes
Toma prestado un sistema de diseño sin diseñador: preguntas
Respuestas breves a lo que la gente pregunta antes de probarlo.
Usar el espaciado, los tamaños de texto y los radios de las esquinas de un sitio como punto de partida es como se hacen la mayoría de las interfaces. Copiar su identidad no está bien: su logo, su nombre, su color de marca característico, sus ilustraciones o sus textos. Cambia todo eso y usa una fuente comercial solo si tienes la licencia. Los archivos de la galería se extraen de sitios web públicos, no son guías de marca oficiales.
Muchas marcas usan fuentes comerciales o personalizadas. El DESIGN.md nombra cada familia en sus tokens de tipografía, y su sección Typography suele sugerir una alternativa de código abierto con notas sobre el tracking y los pesos. Usa esa alternativa o elige una fuente gratuita con proporciones parecidas.
Leer y copiar un archivo de la galería no cuesta nada. Extraer un sitio que elijas usa créditos prepago: una extracción Pro cuesta 10 créditos y los paquetes empiezan en $5 for 50 credits. Los créditos no caducan y no hay suscripción.
No. Es un archivo de texto: los colores son valores hex, las fuentes son nombres, los tamaños son píxeles. Cambia los valores o pide a tu agente de programación que haga el cambio por ti, y después comprueba el resultado con el validador de DESIGN.md gratuito, que también señala los colores de texto con poco contraste.
¿Encontraste un sitio que admiras?
Pega su URL y obtén su sistema de diseño como DESIGN.md, listo para hacerlo tuyo.
Guías relacionadas
Haz que Claude Code y Cursor creen interfaces iguales a una web
Extrae un sitio que te guste, pon su DESIGN.md en tu repositorio y apunta a él a tu agente, con los prompts exactos para Claude Code y Cursor.
¿Vas a rehacer tu sitio? Extrae primero su sistema de diseño
Captura tu sitio actual como DESIGN.md antes de rehacerlo, cambiar de marca o de framework, y sabe qué revisar a mano.
Combina dos sitios de referencia en un solo diseño para un prototipo
Compara dos archivos DESIGN.md extraídos token a token y combínalos en una especificación para un prototipo, a mano o con tu agente.
Dale a tu agente de programación especificaciones de diseño bajo demanda con MCP
Conecta el servidor MCP para que tu agente pueda extraer el DESIGN.md de un sitio por su cuenta, esperar a que termine y trabajar a partir de él.