--- title: "Crear desde un sitio que te gusta | Briks" url: https://briks.dev/es/docs/build-from-sites-you-like description: "Añade un sitio y hasta seis capturas que te gusten. Briks lee su diseño, espaciado, tipografía, movimiento y menús, y crea el tuyo con ese espíritu, sin copiar." last_updated: 2026-10-08 --- # Crear desde un sitio que te gusta Si has visto un sitio cuyo diseño o estilo te gusta, apunta Briks hacia él. Briks estudia cómo está armada la página y construye la tuya con ese espíritu, con tus propias palabras e imágenes. Esta página cubre cómo añadir un sitio y capturas de pantalla, qué lee Briks y qué nunca toma, y qué hacer cuando no se puede leer un sitio. 7 minutos de lectura Comprobado con el estudio el 8 de octubre de 2026 ## Añadir sitios y capturas de pantalla 1. Abre el paso Dónde: Show what you like Es el tercer paso de New project, marcado como **Optional**. El panel explica para qué sirve: «Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business.» 2. Añadir un sitio Dónde: A site to learn from Escribe o pega una dirección y pulsa **Add** o Enter. Puedes omitir https. Cada proyecto admite un sitio; si añades un segundo aparece "One site per project. Remove it to add another." El sitio se muestra como una etiqueta con una cruz para quitarlo. 3. Añadir capturas de pantalla Dónde: Screenshots Pulsa **Add screenshots** y elige archivos JPEG, PNG o WebP de menos de 12 MB cada uno. El contador muestra cuántos tienes, hasta **6 of 6**. 4. Indica qué muestra cada captura de pantalla Dónde: Screenshots Elige **Whole page** y, si lo sabes, la pantalla en la que se tomó: **Desktop**, **Tablet** o **Phone** (**Screen size: detect** lo averigua). O elige **One section** y escoge la parte que muestra, como hero, precios, testimonios o pie de página. 5. Continúa Dónde: Show what you like Pulsa **Next**. La revisión muestra la dirección del sitio y cuenta tus capturas de pantalla. También puedes traer un sitio desde el cuadro de briks.dev antes de registrarte: abre el menú **+**, elige **Add a site you like** y llegará a este paso después de registrarte. ## Lo que lee Briks Se lee un sitio en ancho de escritorio, tableta y móvil, después de que Briks haya respondido a cualquier banner de cookies y cerrado las ventanas emergentes. Se revisa: - **Maquetación:** las secciones de arriba abajo, el ancho del contenido, las columnas y qué cambia en un móvil. - **Espaciado:** el ritmo entre las secciones y dentro de ellas. - **Type:** los tamaños y pesos de los títulos y del texto, y el carácter de las tipografías. - **Colour:** el fondo, el color del texto y el acento. - **Motion:** lo que aparece o se desliza al hacer scroll, lo que queda fijo, las filas que se mueven solas y lo que hacen los enlaces y botones al pasar el cursor. - **El encabezado y su menú:** una fila sencilla de enlaces, desplegables o paneles grandes. Cada panel se abre y se revisa. - **Ilustraciones:** si la página usa dibujos en lugar de fotografías, tus imágenes se dibujan con un trazo similar. Una captura de pantalla le dice menos a Briks: la composición y la alineación, el espaciado, el tamaño del titular, los colores y si es claro u oscuro. Una captura marcada como **One section** habla solo de esa sección. ## Lo que nunca toma El panel lo dice claro: «Un sitio por proyecto. Medimos su estructura, su ritmo y su tipografía. No se copia nada.» En la práctica: - **Palabras.** Antes de publicar, Briks revisa tu sitio en busca de frases tomadas del sitio que te gusta y reescribe las que encuentre con la voz de tu propio negocio. Las frases de tu propio encargo no se tocan. - **Logotipos y nombres.** Tu encabezado lleva tu nombre, tu logotipo subido o una marca dibujada. - **Imágenes.** Las tuyas vienen de la biblioteca del estudio, se dibujan nuevas para ti o son las que añades tú. - **Otras empresas.** Una fila de logotipos de clientes o socios solo muestra los nombres que tú indiques. Las preguntas previas a la creación se redactan solo a partir de tu brief y de la dirección, nunca a partir del texto de la otra página. ## Un sitio, capturas de pantalla, o ambos Lo fielmente que Briks sigue un sitio depende de qué más le des. | Lo que añades | Qué hace Briks | | --- | --- | | Un sitio y nada más | Esa página define el orden de las secciones de tu página de inicio, pensado para tu negocio | | Un sitio con capturas de pantalla | Guían juntas la construcción, así que el sitio ya no marca el orden; una captura de pantalla de una sección decide esa sección | | Solo capturas de pantalla | Guían el diseño y el aspecto; la captura de una sección decide su sección | | Ajustes en **Your brand** | Prevalecen sobre cualquier referencia, así que tu acento sigue siendo tuyo aunque el sitio que te gusta sea verde | Señala la página exacta Briks lee la página de la dirección que indicas, no el sitio entero. Si es una página de precios que te gusta, pega la dirección de la página de precios en lugar de la de la página de inicio. ## Comparar la compilación con el sitio Una vez añadido un sitio, el paso también muestra **Measure the build against the reference**, desactivado por defecto. Con la opción activada, Briks compara la página construida con el sitio que te gusta antes de publicar y corrige las diferencias que mide. Solo se aplica cuando el sitio es tu única referencia, sin capturas de pantalla, porque es entonces cuando tu página sigue su diseño. Añade créditos y tiempo a la construcción, así que déjala desactivada a menos que te importe un parecido muy cercano. Más adelante se puede cambiar en **Preferences** como **Measure builds against the reference**. ## Cómo un sitio cambia el resto de la configuración - **No hay aspecto ni hero que elegir.** El paso **How it is built** dice "Your reference site decides the look and the hero, so there is none to choose." En briks.dev, **Pick a look first** se desactiva con "The site you like sets the look." Consulta [Elegir un aspecto](https://briks.dev/es/docs/pick-a-look). - **Menos preguntas.** Briks no pregunta por el diseño, el aspecto ni lo que encabeza la página, porque el sitio ya lo responde. - Los **dashboards** también pueden usar una referencia. Briks lee la pantalla para ver su navegación (una barra lateral o una barra superior) y cuántos paneles, tablas y gráficos tiene. La mayoría de los dashboards están tras un inicio de sesión, así que normalmente una captura de pantalla es la forma de mostrar uno. Mientras se ejecuta la creación, la conversación muestra un cuadro llamado **What your references decided**, que enumera lo que decidió cada referencia: el ancho del contenido, el ritmo, el menú del encabezado y cómo se mueven las cosas. ## Cuando un sitio no se puede leer La mayoría de las páginas públicas se leen bien. Estos son los motivos habituales por los que una no se lee: - **Está tras un inicio de sesión.** Briks ve lo que ve un visitante que no ha iniciado sesión. Usa capturas de pantalla para lo que esté tras un login. - **Rechaza a los visitantes automatizados.** Algunos sitios responden con una comprobación de robots en lugar de la página. Briks prueba una segunda vía de acceso y, si también está bloqueada, el sitio se omite. - **Los banners de cookies y las ventanas emergentes** rara vez son el problema, porque Briks responde al banner y cierra las ventanas emergentes antes de mirar. Si el sitio no se puede leer pero tus capturas de pantalla sí, la creación sigue sin él y el cuadro dice "1 reference could not be read and was skipped." Si no se puede leer nada de lo que añadiste, la creación se detiene en lugar de diseñar un sitio que no pediste. Una creación que se detiene así no se cobra, y la retención se devuelve. Lo que dice el estudio depende del motivo: | Lo que dice el estudio | Qué hacer | | --- | --- | | "The reference address couldn't be opened." y "Nothing was charged." | Pulsa **Build without it** para crear la misma petición con tus palabras y respuestas tal como estaban, y se vuelven a retener los créditos de un proyecto nuevo. O pulsa **Remove it**, que abre **Reference site** en **Preferences**, donde **Remove** quita la dirección. | | «The reference site turned the studio's browser away, so it could not be read. Please try a different reference.» | Empieza un proyecto nuevo con capturas de pantalla de la página en **Screenshots**, o con otro sitio. | | «No se pudo leer tu referencia por un error del sistema. Inténtalo de nuevo más tarde.» | Pulsa **Try again** más tarde. Tus palabras y respuestas se conservan, así que las preguntas no se repiten. O escribe en el cuadro para iniciarlo de nuevo con tus palabras nuevas añadidas. | El grupo **Reference site** en **Preferences** muestra la dirección hasta que el sitio se publica por primera vez, para que compruebes que se guardó como querías. Dónde 1. Projects 2. Your project 3. Settings 4. Preferences 5. Reference site ## Ejemplos prácticos Un sitio Una clínica dental que admira la calma de un hotel > Brief: una clínica dental familiar en Harrogate con cuatro dentistas, sábados por la mañana y un formulario de solicitud. Sitio añadido: la página de inicio de un pequeño hotel que al propietario le pareció tranquila y espaciosa. Nada más. La página de inicio de la clínica sigue el orden y el espaciado generoso de la página del hotel, con las palabras, los tratamientos y las imágenes propios de la clínica. El nombre, las fotos y los textos del hotel no aparecen en ningún sitio. Un sitio y una captura de pantalla Una tostaduría de café con un sitio y una captura de pantalla > Sitio: una tostaduría cuyo menú se abre en paneles grandes. Captura de pantalla: la cuadrícula de productos de una tienda, marcada **One section** con productos elegidos. **Your brand**: color de acento `#B4542D`. Con una captura de pantalla añadida, la página de la tostaduría ya no marca el orden de las secciones. Su menú de panel se conserva, la sección de productos sigue la captura y el acento propio del tostador se impone a los colores de la referencia. ## Preguntas frecuentes ### ¿Puedo añadir una referencia después de construir el sitio? Sí, como imagen. En el cuadro del estudio, adjunta una captura de pantalla, déjala marcada como **Reference** y di qué tomar de ella: `Haz que la sección de precios se parezca a esto, tres columnas con la del medio elevada.` ### ¿Puedo dar un sitio que pida contraseña? No de forma útil. Briks solo ve la página pública. Haz capturas de pantalla y añádelas en **Screenshots**. ### ¿Por qué ya no puedo elegir un estilo? Un sitio que te guste define el aspecto. Quítalo en **Show what you like** si prefieres elegir entre tres tableros. ## Sigue leyendo - [Compilando **Empieza un nuevo proyecto** Cada opción de Nuevo proyecto, paso a paso: tipo de proyecto, brief, un sitio que te guste, marca, imágenes, ajustes de creación y el coste de empezar.](https://briks.dev/es/docs/new-project) - [Compilando **Elige un estilo** Mira tres estilos antes de crear tu sitio: tablero de colores, tipografía, esquinas, botón y tarjetas con tus palabras de portada. Construye el que elijas.](https://briks.dev/es/docs/pick-a-look) - [Compilando **Cómo escribir un buen brief** Qué poner en un brief para acertar a la primera: negocio, público, páginas, acción principal, datos y tono, con seis ejemplos de antes y después.](https://briks.dev/es/docs/writing-a-brief) - [Compilando **Apps web y dashboards** Qué crean los tipos App y Dashboard, dónde viven sus registros y qué aún no está disponible, con ejemplos para reservas, stock y los pedidos de una cafetería.](https://briks.dev/es/docs/web-apps-and-dashboards) ¿Sigues atascado? Escribe a [hello@briks.dev](mailto:hello@briks.dev) con el nombre de tu proyecto y lo que esperabas ver. Una captura de pantalla ayuda.