AI-translated from English; not yet reviewed by a fluent editor. # Usa una referencia DESIGN.md fijada en Claude Code para una página > Elige un archivo DESIGN.md fijado, dáselo a Claude Code para modificar una página que puedes editar y revisa el código y el resultado en ordenador y teléfono. By BIG CHANGE Editorial Published: 2026-10-20T00:01:06.937Z Updated: 2026-10-20T00:01:06.937Z Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide ![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png) AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted. Una página existente ofrece algo concreto que mejorar y proteger. La [colección Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.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](https://code.claude.com/docs/en/quickstart) 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](https://code.claude.com/docs/en/data-usage) y los [permisos de herramientas](https://code.claude.com/docs/en/permissions) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md). Elige un `design-md//DESIGN.md` que aporte una idea relevante para el problema definido. Lee el archivo completo antes de usarlo. El [ejemplo de Notion](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) 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](https://code.claude.com/docs/en/common-workflows) y, por separado, los [archivos de instrucciones del proyecto](https://code.claude.com/docs/en/memory); 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. ```markdown 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](https://bigchange.ai/blog/genspark-design-prototype-source-zip) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) 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`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) del repositorio exige conservar su aviso de copyright y permiso en copias o partes sustanciales. - La [guía de inicio de Claude Code](https://code.claude.com/docs/en/quickstart), las [indicaciones sobre referencias a archivos](https://code.claude.com/docs/en/common-workflows) y la [documentación de instrucciones del proyecto](https://code.claude.com/docs/en/memory) 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](https://code.claude.com/docs/en/costs), [uso de datos](https://code.claude.com/docs/en/data-usage) y [permisos](https://code.claude.com/docs/en/permissions) 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. ## Sources - [README fijado de Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Descripción principal del repositorio e instrucciones para copiar un solo archivo en el commit inmutable. Indica que son análisis de sitios públicos suministrados tal cual; sus afirmaciones sobre calidad son promocionales. El árbol completo revisado independientemente en este commit contiene 84 archivos DESIGN.md directos, una cifra vinculada a esa versión. - [Ejemplo Notion DESIGN.md en el commit fijado](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — Ejemplo de análisis de composición, espaciado, tipografía y componentes. Contradice la forma de los botones de cápsula o rectangulares, no establece comportamientos verificados de puntero o animación y sugiere un comando de análisis no verificado. Es análisis comunitario, no la especificación oficial de marca de Notion ni un permiso para copiar recursos. - [Licencia MIT de Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent; el aviso de copyright y permiso debe mantenerse en copias o partes sustanciales. La licencia no establece derechos sobre marcas, logotipos, tipografías propietarias o imágenes de los sitios representados. - [Inicio rápido de Claude Code](https://code.claude.com/docs/en/quickstart) — Requisitos oficiales de proyecto, cuenta o proveedor e inicio de sesión. El lector debe usar una vía compatible y su propio proyecto; BIG CHANGE no probó la instalación de Claude Code ni una cuenta de pago. - [Flujos habituales de Claude Code](https://code.claude.com/docs/en/common-workflows) — Indicaciones oficiales sobre el contexto explícito @file y el trabajo en proyectos. Respaldan referenciar deliberadamente el archivo copiado, sujeto a ajustes y límites, no la carga automática de un DESIGN.md cualquiera. - [Memoria de proyecto de Claude Code](https://code.claude.com/docs/en/memory) — Explica los archivos de instrucciones y su carga según la configuración. No establece que un DESIGN.md independiente se cargue por estar en el repositorio; esta guía no modifica la configuración de instrucciones. - [Costes de Claude Code](https://code.claude.com/docs/en/costs) — Contexto de uso y facturación según la cuenta. Una referencia Markdown no añade dependencias de paquetes, pero esta guía no establece un precio fijo de la tarea Claude Code, una cuota gratuita ni un ahorro de tiempo. - [Uso de datos de Claude Code](https://code.claude.com/docs/en/data-usage) — Tratamiento oficial de datos según la cuenta y comportamiento de las transcripciones locales. El propietario debe revisar la política antes de compartir código o recursos privados de clientes; no se afirma que todo sea exclusivamente local ni se hace una afirmación universal sobre entrenamiento. - [Permisos de Claude Code](https://code.claude.com/docs/en/permissions) — Controles oficiales de permisos de herramientas. Las instrucciones no conceden ni imponen por sí mismas acceso a herramientas; el lector debe inspeccionar las acciones propuestas y los archivos realmente modificados.