Usa una referencia DESIGN.md fijada en Claude Code para una página

Una página existente ofrece algo concreto que mejorar y proteger. La colección Awesome DESIGN.md de VoltAgent reúne análisis en texto sin formato de sitios públicos que puedes mostrar a un agente de programación con IA. Esta guía usa un archivo del commit del 14 de octubre de 2026 como referencia visual para un cambio acotado en Claude Code. El resultado solo se considera válido cuando inspeccionas personalmente el código cambiado y la página renderizada.

BIG CHANGE revisó el repositorio fijado y la documentación de Claude Code. No ejecutamos Claude Code, editamos una página, medimos el tiempo ni inspeccionamos un resultado generado. El árbol fijado contiene 84 archivos directamente bajo design-md/*/DESIGN.md; la cifra corresponde a ese commit, no a un tamaño permanente del catálogo.

El gran cambio

• Qué cambia: Un único análisis de diseño, fijado a una versión, puede proporcionarse como contexto explícito para modificar una página autorizada.
• Por qué importa: El propietario puede aprovechar una idea útil de composición o espaciado y comprobar el resultado frente al contenido, la identidad y el funcionamiento reales de la página.
• Qué vigilar: La referencia es un análisis comunitario. Sus detalles de marca e incluso algunas instrucciones internas pueden ser incorrectos o inadecuados para tu página.

Antes de empezar

Necesitas una página y un repositorio que puedas modificar, una copia de trabajo o rama, una forma de renderizar la página localmente y acceso a Claude Code mediante una cuenta o proveedor compatible. Identifica el archivo que cambiarás y cómo tu proyecto inicia y comprueba normalmente esa página. Anota su público, textos y enlaces esenciales, colores, tipografías y logotipo aprobados y el único problema visual que quieres resolver. Conserva esas decisiones del propietario junto a la copia para evaluar la propuesta.

Revisa la política de datos y los permisos de herramientas de tu cuenta antes de proporcionar material privado de clientes. Claude Code procesa las instrucciones y el contenido del proyecto según las condiciones de la cuenta; un proyecto local no convierte la sesión del modelo en exclusivamente local. Confirma que puedes compartir los textos, recursos o código privados que expondría la tarea.

Usa una referencia en una página

1. Abre el README de la colección fijada. Elige un design-md/<name>/DESIGN.md que aporte una idea relevante para el problema definido. Lee el archivo completo antes de usarlo. El ejemplo de Notion muestra el formato: propuestas de composición, tipografía, espaciado y componentes. También describe botones de tipo cápsula y rectangulares. Esa contradicción exige decidir por tu cuenta, no pedir a Claude Code que cumpla cada línea.
2. Copia ese único DESIGN.md fijado al proyecto de trabajo, por ejemplo en design-reference/DESIGN.md. Registra al lado la URL original, la ruta y el commit 3b605329240ce735b510037cca322f1831fdd7f8. Conserva con la copia el aviso de copyright y permiso MIT del repositorio. La referencia Markdown no necesita instalar paquetes. La licencia cubre el material del repositorio; no autoriza el uso del logotipo, archivos tipográficos, imágenes ni marca de la empresa representada.
3. Desde el proyecto autorizado, abre Claude Code y proporciona explícitamente el archivo copiado como contexto. Anthropic documenta las referencias a archivos y, por separado, los archivos de instrucciones del proyecto; colocar un DESIGN.md independiente en una carpeta no demuestra que Claude Code lo haya cargado. Sustituye la ruta de página y las reglas del propietario entre corchetes por valores reales y confirma que Claude Code leyó la referencia antes de aceptar cambios.

Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.

4. Lee las diferencias propuestas antes de ejecutarlas o aceptarlas. Comprueba cada archivo, texto y enlace modificado. Rechaza cualquier dependencia, recurso o cambio en otra página que no hayas solicitado. Usa el comando de ejecución documentado de tu proyecto para renderizar la página. Ábrela con una anchura de ordenador y otra de teléfono; examina la página real, no la descripción de lo que pretendía el agente.
5. Compara el resultado visual con tus requisitos escritos. Comprueba que siguen los textos y enlaces previstos, los títulos tienen un orden útil, textos y controles ofrecen contraste suficiente y el diseño móvil no corta contenido ni exige desplazamiento horizontal. Accede mediante el teclado a enlaces, botones, menús y formularios afectados y utilízalos. Prueba cualquier interacción cambiada, incluidos sus estados visibles de foco y error. Registra la revisión, anchuras, comprobaciones y defectos. Acepta el cambio solo cuando las comprobaciones se superen en tu página.

Si Claude Code omite la referencia, señala de nuevo el archivo y pídele identificar las secciones utilizadas. Si contradice tus reglas de marca, elimina esa indicación de la petición y corrige el código afectado. Si falla un enlace, el recorrido del foco o una interacción, restaura el comportamiento anterior y haz un cambio menor. Si no puedes renderizar la página o inspeccionar el resultado, no aceptes el cambio hasta poder hacerlo.

La colección reúne descripciones comunitarias de otros sitios, suministradas tal cual por sus responsables. Su archivo de Notion contiene geometrías de botones contradictorias, comportamientos al pasar el puntero no documentados y un comando de análisis de código que esta guía no ha verificado. Usa las comprobaciones conocidas de tu proyecto, no ese comando sugerido. El uso de Claude Code y los posteriores costes de alojamiento o recursos dependen de tu cuenta y proyecto; aquí no se establece un tiempo de edición ni una calidad final garantizada.

Como alternativa para trabajar en páginas con ayuda de IA, nuestra guía de prototipos de Genspark explica cómo copiar un prototipo alojado e inspeccionar su ZIP de código exportado. Esa tarea parte de otro artefacto y tiene otro criterio de finalización.

Fuentes y lecturas adicionales

• El README fijado de VoltAgent describe la colección y su análisis de sitios públicos suministrado tal cual. La cantidad de archivos procede del árbol recursivo fijado, no de una afirmación sobre versiones futuras.
• El Notion DESIGN.md fijado ilustra el formato y sus contradicciones internas. No es una especificación aprobada por Notion ni otorga derechos sobre sus recursos.
• La licencia MIT del repositorio exige conservar su aviso de copyright y permiso en copias o partes sustanciales.
• La guía de inicio de Claude Code, las indicaciones sobre referencias a archivos y la documentación de instrucciones del proyecto de Anthropic establecen el acceso y el contexto explícito. No verifican esta edición ni la carga automática de la referencia independiente.
• La documentación de Anthropic sobre costes, uso de datos y permisos explica el uso y los controles según la cuenta. No se probó ninguna sesión, factura ni página resultante para esta guía.