---
title: "Refero DESIGN.md"
description: "el archivo que le enseña a Claude cómo se ve algo caro"
url: https://www.tododeia.com/community/refero-design-md
tags: ["diseño", "DESIGN.md", "refero", "página web", "ui-ux-pro-max", "webkit", "gratis"]
---

# Refero DESIGN.md

el archivo que le enseña a Claude cómo se ve algo caro

## Qué resuelve

Lo que construyes con inteligencia artificial se ve hecho con inteligencia artificial, y no es culpa de Claude: arranca de cero cada vez y nadie le enseñó cómo se ve algo caro. Se arregla con un archivo de texto. Refero Styles tiene más de dos mil sistemas de diseño de marcas reales convertidos en archivos DESIGN.md —colores, tipografía, espaciado, componentes, motion, accesibilidad y las reglas de «esto no se usa», todo en valores concretos y no en adjetivos— y verlos y copiarlos no cuesta nada. Esta guía no es otra lista de herramientas de diseño: es la cadena de cuatro pasos que va del estilo de una marca famosa a tu página publicada con su dirección. Uno, sacas el DESIGN.md de Refero, o del repositorio gratuito de 73 archivos si prefieres no salir de GitHub, y aquí está cuándo conviene cada uno. Dos, y esta es la parte que nadie cuenta: en vez de pegarlo en el chat cada vez que empiezas algo, lo envuelves en una habilidad y Claude lo tiene puesto siempre, en la terminal, en la app y en Cowork; la plantilla del envoltorio se baja desde esta misma página. Tres, se lo entregas a UI/UX Pro Max con el prompt que lo obliga a respetarlo en vez de inventarse otra paleta. Y cuatro, lo publicas con Web Kit, que construye y sube el sitio a Vercel en seis fases. Con la letra chica que importa: qué parte de Refero es gratis y cuál no, que un DESIGN.md copia el estilo y no la marca ni el contenido ajeno, qué pasa cuando le das dos archivos a la vez, y por qué el archivo se queda viejo el día que la marca cambia.

## De un vistazo

- **Nivel**: Intermedio
- **Temas**: diseño, DESIGN.md, refero, página web, ui-ux-pro-max, webkit, gratis
- **Idioma**: Español
- **Precio**: Gratis

## Repositorios que usa

- [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill): Skill de UI/UX con 79 estilos, 192 paletas y 74 pareos de fuentes para diseñar y clonar webs.
- [Hainrixz/claude-webkit](https://github.com/Hainrixz/claude-webkit): Toolkit para que Claude Code construya landing pages — 6 fases automatizadas + deploy.
- [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md): 73 archivos DESIGN.md de sitios famosos: copias uno a tu proyecto y Claude diseña con ese estilo.

## La guía completa

> Este documento es el resumen. La guía completa —con los prompts, las capturas y los pasos— vive en la página HTML de /community/refero-design-md. Ábrela ahí.

## Enlaces relacionados

- [Todas las guías](https://www.tododeia.com/community)

---

Este documento es la versión markdown de https://www.tododeia.com/community/refero-design-md — el sitio negocia por `Accept: text/markdown`. Índice para agentes: https://www.tododeia.com/llms.txt