Sitio web de podcasts retro rosa
For profile, small brands, and event landing page.
Instrucciones
**Paso 1 · Breve resumen（一次问完，宁多勿少）**
用 AskUserQuestion 一次性确认这些字段,不要分多轮慢慢挤:
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现，建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / lema（会出现在椭圆手写气泡里，可中可英可西语，越个性越好；用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：Acerca de / Últimos lanzamientos / Contacto / Suscribirse，用户可加可减）
5. 各区块文案（用户没准备就自动按主题填占位文案，语气要俏皮、第一人称、带点自嘲）
6. 图片来源：用户上传 vs. habilidad 自动生成（默认自动生成）
7. 邮箱、社媒 identificador 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后，把所有字段整理进一个内部 breve 备用，下面所有步骤都从这个 breve取数，不要再回头追问。
**Paso 2 · 套用规范的 7 段式骨架**
这个风格的页面结构是固定的,不要发明新结构。把 breve 里的内容硬塞进下面 7 段：
1. **Top Nav**：左侧品牌名（小字 todo en mayúsculas）+ 右侧 3–4个导航链接（todo en mayúsculas，下划虚线）。背景延续顶部玫粉色。
+巨型手写体品牌名横跨整宽。**这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 到 1/2 被人像的下半部分遮挡,呈现「字从人像背后钻出来」的报刊封面感。判断标准：在最终截图上，品牌名顶端的字母（如L、l 的圆头、k 的上划）应该被人像 alfa 通道盖住，看不到完整字形。如果能完整看到品牌名所有字母，就是失败的堆叠，必须重做。→右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **Acerca de**:左侧大写小标题 "ABOUT ME"（红色）+ 右侧大段副标题（红色 todo en mayúsculas, 2 行换行）→下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰，比如嘴唇）→ 右侧 3 列等宽小字正文。背景：米杏。
4. **Últimos lanzamientos / Destacados**：标题 "THE LATEST DROPS"（或对应主题词）+ 两张高瘦矩形卡片，卡片标题用 en mayúsculas黑色压在图片下半部。卡片上方各有 "TEMPORADA X EPISODIO Y" + 半色调红色耳机插画。背景：米杏。
5. **Por qué/Misión**：顶部左右并排两张椭圆图（用 Por qué 区生成的两张人物近景照片，不要用 icon 替代）→大写小标题 "¿POR QUÉ DEBÍAS SINTONIZARTE?" → 4 列等宽小字正文（每列一段，问句结尾）→ 右侧椭圆手写气泡 "Únete a mi lista de correo" 形式 + Icono de emoji / Icono SVG / Material Iconos）替代真实照片**。
6. **Contacto**: 左侧 "CONTACTO" + 右侧 "¡DÉGAME!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →右侧再来一颗椭圆手写气泡 + 半色调红色复古电脑/电话插画。背景：米杏。
7. **Héroe del pie de página**: 再次让巨型手写体品牌名横跨全宽出现一遍（同 Héroe叠化逻辑：底部插画/装饰元素遮挡品牌名顶部）→ 右上一颗椭圆手写气泡 → 底部小字 "Términos y soporte · Política de privacidad · Diseñado con [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过，不要硬塞；但顺序不能乱.
**Paso 3 · 准备图片资产（用户没传就自己生）**
Breve descripción:
- 用户**已上传**图片：直接用，但提醒用户照片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏。不满足就在下一步靠装饰图救场.
- 用户**未上传**:调用 generateImage 生成下面这 6 张（每张独立调用,prompt必须按下面写法精确控制风格，否则出图不对味）：
**A. 主体肖像图（Héroe 用，椭圆裁切）**
```
Retrato editorial vintage de los años 70: mujer con blazer rojo terracota, sosteniendo un micrófono cromado retro, fondo de cortina de terciopelo azul marino oscuro o rojo, iluminación cálida de tungsteno, grano de película suave, collar de perlas, lápiz labial rojo, mirando hacia abajo o de lado, composición de portada de revista, paleta de colores cálidos y apagados, tomada en película de 35 mm, formato vertical 3:4.
```
**B. Acerca de 区椭圆图（桌面录制场景）**
```
Mesa de grabación de podcast vintage, micrófono cromado retro, gafas sobre guiones, vaso de agua, cortina de terciopelo verde al fondo, superficie de madera cálida, estilo editorial de los años 70, iluminación cálida y suave, grano de película, paleta de colores terracota y verde bosque, formato 3:4
```
**C / D. Últimos lanzamientos 两张卡片图（与 breve 主题相关）**
根据用户的两个 "último lanzamiento" 标题分别生成。例如标题是 "videojuegos retro" → 一只手拿着粉色任天堂 3DS在窗帘前的复古照片。要求：复古胶片质感、暖色调、构图竖向 3:4。
**MI. ¿Por qué 区椭圆图 ×2（不同视角的人物近景）**
```
Fotografía editorial vintage en primer plano de una mujer con blazer rojo, sosteniendo un teléfono giratorio naranja retro en la oreja, con una cortina de terciopelo verde de fondo, iluminación cálida de los años 70, grano de película, formato 3:4.
```
+
```
Primer plano de las manos de una mujer con mangas rojas tecleando en una máquina de escribir antigua, sobre un escritorio de madera cálida, con efecto de grano de película y ambiente editorial de los años 70. Formato 3:4.
```
**F. 4–5 个半色调复古装饰元素（必须透明背景！）**
这一组是风格灵魂,每个独立生成,**必须用 gemini-3.1-flash-image-preview 模型**（GPT Image 处理透明 alpha 不可靠），prompt模板：
```
Ilustración bitonal de [objeto], representada únicamente con puntos rojo ladrillo, estilo de impresión de revista vintage de los años 70, patrón de puntos de semitono visible, el sujeto está aislado sobre un fondo totalmente transparente con canal alfa, sin relleno de fondo, estilo recorte PNG, composición plana simple, solo se ven los puntos rojos, todo lo demás es transparente
```
[objeto] 依次替换为：megáfono（喇叭）/ auriculares（耳机）/ labios rojos（嘴唇）/ cabeza de jirafa（长颈鹿头）/ televisor de tubo retro o escritorio de los años 80 computadora (老电视或老式电脑).
**保险措施**：即使用了正确的 rápido,模型可能仍然给出米白底而非真透明。所以在 Paso 4 con CSS里**必须给所有半色调装饰图加 `modo de mezcla: oscurecer;`**，让米白底自动融入页面背景，只保留红点图案。这是兜底规则，不能省略。
生成完所有图后把 URL 收集到一个清单里,标注每张图归属哪个区块.
**Paso 4 · 调用 generar página web 一次性出页（视觉 DNA 必须完整传过去）**
调 generateWebpage，prompt 里**完整粘贴**下面这份 Style DNA，再附上 Paso 1 的 breve 内容和 Paso 3 的图片清单。as_artifact: true。
---
**【Estilo ADN · 必须严格遵守】**
**色板（CSS 变量级精度）**：
- `--rose`: #F4A8A0（顶部玫粉，Hero 与 Pie de página 背景）
- `--cream`: #E5DCC2（中段米杏，Acerca de / Lo último / Por qué / Contacto 背景）
- `--ladrillo`: #B8472D（标题/导航文字/装饰描边）
- `--tinta`: #2C1810（正文小字）
- `--crema-ligera`: #F2EBD8（气泡内部填充）
顶部玫粉到米杏之间用 8–16px 的渐变过渡带，不要硬切。Hero顶部到画布顶上沿带一点紫灰晕染（rgba(150,140,180,0.25) 径向渐变到 rose），呼应原稿。
**字体配对（必须用 Google Fonts CDN 加载）**:
- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Sail"` 或 `"Pacifico"` 或 `"Hola Título"`，三选一，要丰满有圈、复古糖果感。品牌名字号要爆炸大，escritorio 至少 18vw，溢出感强。
- 标题/导航/正文小字：`"Oswald"` 或 `"Bebas Neue"`，全部 `text-transform: mayúsculas`，字距 `letter-spacing: 0.06em`。正文小字 12–13px，行高1.4。
- 不要再引入第三种字体.
**Héroe 叠化的精确实现（不能省略，不能改）**:
- Sección de héroe 高度设为 `100vh` 或 `95vh`，使用 `posición: relativa` + `overflow: oculto`。
- 椭圆人像图：`posición: absoluta`，水平居中（`izquierda: 50%; transformar: traducirX(-50%)`），垂直方向 `top: 5vh`，高度约 `70vh`，宽度按 3:4 比例计算（约 `52vh`），`z-index: 2`，`border-radius: 50% / 60%`，`object-fit: cubierta`。
- 巨型品牌名：`posición: absoluta`，水平居中，垂直方向 `arriba: 50vh`（**关键**：这个数值要让文字的顶部边线落在人像的纵向中部偏下区域，而不是人像下方）。`tamaño de fuente: 28vw`,`altura de línea: 0,85`,`color: var(--crema-claro)`,`índice z: 1`（**比人像低**），`espacio en blanco: nowrap`。
- 检查标准:渲染后人像的 alfa通道（人像椭圆边缘）必须能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，调小`top` 值（让字往上挪）或增加人像高度。
- 椭圆台词气泡：`posición: absoluta; derecha: 6%; arriba: 25%; Índice z: 3`，气泡和它指向的方位之间一条竖直虚线。
- 半色调装饰图（喇叭等）：`posición: absoluta; derecha: 3%; arriba: 10%`, y 140px,**必须配 `modo de mezcla: oscurecer`**。
- 整个 Hero 区不要用 flex/grid 把元素排成行列——元素之间是绝对定位的叠加关系.
**布局法则（其他区块）**:
- Tamaño del archivo: 1280 px, tamaño estándar.
- 区块之间用 `border-top: 1px discontinuo var(--brick)` 横线分隔.
- 椭圆图：`radio-borde: 50% / 60%`（横向稍扁的鸭蛋形），不要正圆。
- 椭圆手写气泡:`border-radius: 50% / 70%`,背景 `var(--cream-light)`,描边 `1px discontinuo var(--brick)`，内边距充足，气泡里的字用显示字体 + brick 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`borde-izquierdo: 1px discontinuo var(--brick)` 配 `posición: absoluta`，长度60–120px），末端点一个小红圆点。这是这个风格的标志符号，每个区块至少出现一处。
- Resolución de pantalla 120–180px, **modo de mezcla-mezcla: oscurecer`**。
**Por qué 区的硬性规则**:
- 必须用 Paso 3 生成的两张 Por qué 真实人物椭圆照片，左右并排放在区块顶部。
- **禁止**用 emoji、Material Icon、Font Awesome 等任何通用 icon 替代照片或填充 "feature 卡片"。这个风格不存在 "feature 卡片" 概念。
- 4 列正文是横向多列文字流，不是 4 个图标卡片。
**正文写法**:
- Navegación, etiqueta de sección, título de la tarjeta, título y TODO EN MAYÚSCULAS.
- 正文小字段落用多列（CSS `column-count: 3` 或 `column-count: 4`）实现窄栏报刊感，不要单列大段。
- 标题色一律 `var(--brick)`, 正文色 `var(--ink)`。
**页脚**：保留 "Términos y soporte · Política de privacidad · Diseñado con [品牌名]" 三行小字，左下角对齐，米杏色。
**响应式**:移动端品牌字号降到 28vw（保持），多列正文降到单列，椭圆图缩到 70%宽度居中，装饰图缩到 80px 并保留位置。Hero 叠化在移动端依然成立——人像高度可以缩到50vh，品牌字 arriba 跟着调到 35vh 维持遮挡关系.
---
把 breve 里 7 段文案、图片 URL 清单（标注每张归属）一起塞进 generateWebpage 的 Prompt，让它一次出页。
**Paso 5 · 交付 + 微调入口**
生成完后，把 página web 链接给用户，然后用一句话主动给出 3 个最高频的微调方向，让用户直接点：
1. 换主体肖像图（重新跑 Paso 3 的 A 图，换一种姿态/服装）
2. 调色板偏移（比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构，只换色值）
3. 加 / 删 / 重排区块（按 Paso 2 的 7 段骨架调整）
用户选了哪一项就只重跑对应步骤，不要全量重生。
Descripción
Esta herramienta crea un sitio web único de una sola página, con un estilo retro distintivo, perfecto para podcasters, marcas personales o pequeñas empresas que buscan una presencia online única. Captura la estética de las revistas vintage y el diseño editorial de los años 70. Los usuarios pueden proporcionar el nombre de su marca, un eslogan atractivo y contenido para varias secciones como "Acerca de", "Últimos lanzamientos" y "Contacto". La herramienta genera de forma inteligente una página web completa y visualmente atractiva. Entre sus principales características se incluyen la creación de una impactante sección "Héroe" con texto e imágenes superpuestos, bloques de contenido dinámicos y navegación personalizada. También ofrece generación de imágenes mediante IA para lograr un estilo vintage consistente, incluyendo elementos decorativos de semitonos y fotografías de época, si el usuario no proporciona las suyas. El proceso consiste en recopilar las preferencias y el contenido del sitio web, y luego ensamblar un diseño de página completa que se ajusta a un lenguaje visual específico. El resultado final es una página web activa, con una URL única, lista para compartir. Los usuarios también disponen de opciones para realizar ajustes rápidos, como cambiar las imágenes principales, modificar la paleta de colores o reordenar las secciones, garantizando así que el sitio web final se ajuste perfectamente a su visión.
Por qué recomendamos esta habilidad
Esta habilidad crea un sitio web vibrante con temática retro y una sección principal única con capas, ideal para podcasters y pequeñas marcas. Su distintiva estética vintage y sus meticulosos detalles de diseño lo hacen destacar.
Habilidades relacionadas
Ver todo
Presentación de animación de partículas (HTML)
Esta habilidad genera un sitio web elegante de una sola página con una impactante estética futurista en blanco y negro, ideal para mostrar un nuevo producto, el portafolio de un artista o una tarjeta de presentación digital. Está diseñada para personas o empresas que necesitan una presencia en línea visualmente impactante sin la complejidad del desarrollo web tradicional. La habilidad produce un archivo HTML autocontenido con 4 o 5 secciones de desplazamiento suave, cada una diseñada para captar la atención con tipografía minimalista y elementos de alto contraste. El fondo cobra vida con una animación monocromática personalizada, como partículas fluidas o sutiles degradados de ruido, que crea una atmósfera dinámica y de alta tecnología sin depender de medios externos. Al cargar, la página recibe a los visitantes con una atractiva animación principal: un texto con forma de ceja aparece, seguido de un dramático efecto de "mezcla" para el título principal y una suave aparición gradual para el subtítulo. El contenido de las secciones siguientes aparece con fluidez a medida que el usuario se desplaza, lo que garantiza una experiencia inmersiva y sin interrupciones. Todas las imágenes proporcionadas por el usuario se convierten automáticamente a escala de grises para mantener la coherencia del tema visual. El resultado final es una página web adaptable, accesible y de alto rendimiento, que se entrega como un único archivo HTML listo para su implementación.
ImagenPóster de landing page YouMind
Transforma tu contenido en una narrativa visual impactante con un Póster estilo landing page de YouMind. Esta habilidad crea hermosos pósters infográficos que captan la atención con una estética natural retro-futurista única. Perfecto para mostrar datos clave, aspectos destacados de proyectos o características de productos, tu información se presentará en un formato sofisticado y fácil de digerir. Aprovechando una paleta de colores equilibrada entre fríos y cálidos con una base gris azulado claro y sutiles acentos en beige melocotón, cada póster transmite una sensación de interfaz moderna. Espera tipografía elegante, con Source Han Serif para títulos y sans-serif limpia para el cuerpo del texto, garantizando legibilidad. El diseño utiliza una cuadrícula Bento dinámica, organizando tu contenido en tarjetas visualmente atractivas de bordes suaves con amplio espacio de respiro, evitando diseños abarrotados. Más allá de lo visual impactante, la habilidad integra elementos de diseño sutiles como un grano fino uniforme de película, renderizado impresionista e iconos opcionales de vidrio esmerilado para tus puntos de datos. Se puede agregar un único prisma triangular translúcido como acento elegante, mientras que el logotipo oficial de YouMind siempre se coloca discretamente para mantener la coherencia de marca. Esto da como resultado una infografía profesional, aireada y moderna que comunica eficazmente tu mensaje.
Confirmación de asistencia a la boda
Esta herramienta genera un sitio web elegante y de estilo editorial para bodas o eventos, perfecto para parejas que buscan una invitación online moderna y sofisticada. Está diseñada para quienes desean una presencia digital distintiva para su día especial, más allá de las plantillas tradicionales. La herramienta captura una estética única inspirada en el diseño editorial de alta gama, con un fondo blanco impecable, tipografía sans-serif de gran tamaño y cálidos detalles en rojo. Puede integrar las imágenes que proporciones o generar dos imágenes cinematográficas al estilo Wes Anderson: un banner principal y una imagen de la historia, con una pareja luciendo una gorra de béisbol roja característica, sobre fondos urbanos o jardines con una cálida iluminación de la hora dorada. Los usuarios solo tienen que proporcionar detalles clave como nombres, fecha y lugar del evento. La herramienta crea una página web completa y adaptable, que incluye una barra de navegación fija, una sección principal destacada, un formulario de confirmación de asistencia, una sección dedicada a "Nuestra historia", detalles del evento e información de contacto. El resultado final es una página web HTML lista para usar, que se entrega como un artefacto y que se puede personalizar aún más si es necesario.
Sitio web de podcasts retro rosa
For profile, small brands, and event landing page.
Instrucciones
**Paso 1 · Breve resumen（一次问完，宁多勿少）**
用 AskUserQuestion 一次性确认这些字段,不要分多轮慢慢挤:
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现，建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / lema（会出现在椭圆手写气泡里，可中可英可西语，越个性越好；用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：Acerca de / Últimos lanzamientos / Contacto / Suscribirse，用户可加可减）
5. 各区块文案（用户没准备就自动按主题填占位文案，语气要俏皮、第一人称、带点自嘲）
6. 图片来源：用户上传 vs. habilidad 自动生成（默认自动生成）
7. 邮箱、社媒 identificador 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后，把所有字段整理进一个内部 breve 备用，下面所有步骤都从这个 breve取数，不要再回头追问。
**Paso 2 · 套用规范的 7 段式骨架**
这个风格的页面结构是固定的,不要发明新结构。把 breve 里的内容硬塞进下面 7 段：
1. **Top Nav**：左侧品牌名（小字 todo en mayúsculas）+ 右侧 3–4个导航链接（todo en mayúsculas，下划虚线）。背景延续顶部玫粉色。
+巨型手写体品牌名横跨整宽。**这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 到 1/2 被人像的下半部分遮挡,呈现「字从人像背后钻出来」的报刊封面感。判断标准：在最终截图上，品牌名顶端的字母（如L、l 的圆头、k 的上划）应该被人像 alfa 通道盖住，看不到完整字形。如果能完整看到品牌名所有字母，就是失败的堆叠，必须重做。→右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **Acerca de**:左侧大写小标题 "ABOUT ME"（红色）+ 右侧大段副标题（红色 todo en mayúsculas, 2 行换行）→下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰，比如嘴唇）→ 右侧 3 列等宽小字正文。背景：米杏。
4. **Últimos lanzamientos / Destacados**：标题 "THE LATEST DROPS"（或对应主题词）+ 两张高瘦矩形卡片，卡片标题用 en mayúsculas黑色压在图片下半部。卡片上方各有 "TEMPORADA X EPISODIO Y" + 半色调红色耳机插画。背景：米杏。
5. **Por qué/Misión**：顶部左右并排两张椭圆图（用 Por qué 区生成的两张人物近景照片，不要用 icon 替代）→大写小标题 "¿POR QUÉ DEBÍAS SINTONIZARTE?" → 4 列等宽小字正文（每列一段，问句结尾）→ 右侧椭圆手写气泡 "Únete a mi lista de correo" 形式 + Icono de emoji / Icono SVG / Material Iconos）替代真实照片**。
6. **Contacto**: 左侧 "CONTACTO" + 右侧 "¡DÉGAME!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →右侧再来一颗椭圆手写气泡 + 半色调红色复古电脑/电话插画。背景：米杏。
7. **Héroe del pie de página**: 再次让巨型手写体品牌名横跨全宽出现一遍（同 Héroe叠化逻辑：底部插画/装饰元素遮挡品牌名顶部）→ 右上一颗椭圆手写气泡 → 底部小字 "Términos y soporte · Política de privacidad · Diseñado con [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过，不要硬塞；但顺序不能乱.
**Paso 3 · 准备图片资产（用户没传就自己生）**
Breve descripción:
- 用户**已上传**图片：直接用，但提醒用户照片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏。不满足就在下一步靠装饰图救场.
- 用户**未上传**:调用 generateImage 生成下面这 6 张（每张独立调用,prompt必须按下面写法精确控制风格，否则出图不对味）：
**A. 主体肖像图（Héroe 用，椭圆裁切）**
```
Retrato editorial vintage de los años 70: mujer con blazer rojo terracota, sosteniendo un micrófono cromado retro, fondo de cortina de terciopelo azul marino oscuro o rojo, iluminación cálida de tungsteno, grano de película suave, collar de perlas, lápiz labial rojo, mirando hacia abajo o de lado, composición de portada de revista, paleta de colores cálidos y apagados, tomada en película de 35 mm, formato vertical 3:4.
```
**B. Acerca de 区椭圆图（桌面录制场景）**
```
Mesa de grabación de podcast vintage, micrófono cromado retro, gafas sobre guiones, vaso de agua, cortina de terciopelo verde al fondo, superficie de madera cálida, estilo editorial de los años 70, iluminación cálida y suave, grano de película, paleta de colores terracota y verde bosque, formato 3:4
```
**C / D. Últimos lanzamientos 两张卡片图（与 breve 主题相关）**
根据用户的两个 "último lanzamiento" 标题分别生成。例如标题是 "videojuegos retro" → 一只手拿着粉色任天堂 3DS在窗帘前的复古照片。要求：复古胶片质感、暖色调、构图竖向 3:4。
**MI. ¿Por qué 区椭圆图 ×2（不同视角的人物近景）**
```
Fotografía editorial vintage en primer plano de una mujer con blazer rojo, sosteniendo un teléfono giratorio naranja retro en la oreja, con una cortina de terciopelo verde de fondo, iluminación cálida de los años 70, grano de película, formato 3:4.
```
+
```
Primer plano de las manos de una mujer con mangas rojas tecleando en una máquina de escribir antigua, sobre un escritorio de madera cálida, con efecto de grano de película y ambiente editorial de los años 70. Formato 3:4.
```
**F. 4–5 个半色调复古装饰元素（必须透明背景！）**
这一组是风格灵魂,每个独立生成,**必须用 gemini-3.1-flash-image-preview 模型**（GPT Image 处理透明 alpha 不可靠），prompt模板：
```
Ilustración bitonal de [objeto], representada únicamente con puntos rojo ladrillo, estilo de impresión de revista vintage de los años 70, patrón de puntos de semitono visible, el sujeto está aislado sobre un fondo totalmente transparente con canal alfa, sin relleno de fondo, estilo recorte PNG, composición plana simple, solo se ven los puntos rojos, todo lo demás es transparente
```
[objeto] 依次替换为：megáfono（喇叭）/ auriculares（耳机）/ labios rojos（嘴唇）/ cabeza de jirafa（长颈鹿头）/ televisor de tubo retro o escritorio de los años 80 computadora (老电视或老式电脑).
**保险措施**：即使用了正确的 rápido,模型可能仍然给出米白底而非真透明。所以在 Paso 4 con CSS里**必须给所有半色调装饰图加 `modo de mezcla: oscurecer;`**，让米白底自动融入页面背景，只保留红点图案。这是兜底规则，不能省略。
生成完所有图后把 URL 收集到一个清单里,标注每张图归属哪个区块.
**Paso 4 · 调用 generar página web 一次性出页（视觉 DNA 必须完整传过去）**
调 generateWebpage，prompt 里**完整粘贴**下面这份 Style DNA，再附上 Paso 1 的 breve 内容和 Paso 3 的图片清单。as_artifact: true。
---
**【Estilo ADN · 必须严格遵守】**
**色板（CSS 变量级精度）**：
- `--rose`: #F4A8A0（顶部玫粉，Hero 与 Pie de página 背景）
- `--cream`: #E5DCC2（中段米杏，Acerca de / Lo último / Por qué / Contacto 背景）
- `--ladrillo`: #B8472D（标题/导航文字/装饰描边）
- `--tinta`: #2C1810（正文小字）
- `--crema-ligera`: #F2EBD8（气泡内部填充）
顶部玫粉到米杏之间用 8–16px 的渐变过渡带，不要硬切。Hero顶部到画布顶上沿带一点紫灰晕染（rgba(150,140,180,0.25) 径向渐变到 rose），呼应原稿。
**字体配对（必须用 Google Fonts CDN 加载）**:
- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Sail"` 或 `"Pacifico"` 或 `"Hola Título"`，三选一，要丰满有圈、复古糖果感。品牌名字号要爆炸大，escritorio 至少 18vw，溢出感强。
- 标题/导航/正文小字：`"Oswald"` 或 `"Bebas Neue"`，全部 `text-transform: mayúsculas`，字距 `letter-spacing: 0.06em`。正文小字 12–13px，行高1.4。
- 不要再引入第三种字体.
**Héroe 叠化的精确实现（不能省略，不能改）**:
- Sección de héroe 高度设为 `100vh` 或 `95vh`，使用 `posición: relativa` + `overflow: oculto`。
- 椭圆人像图：`posición: absoluta`，水平居中（`izquierda: 50%; transformar: traducirX(-50%)`），垂直方向 `top: 5vh`，高度约 `70vh`，宽度按 3:4 比例计算（约 `52vh`），`z-index: 2`，`border-radius: 50% / 60%`，`object-fit: cubierta`。
- 巨型品牌名：`posición: absoluta`，水平居中，垂直方向 `arriba: 50vh`（**关键**：这个数值要让文字的顶部边线落在人像的纵向中部偏下区域，而不是人像下方）。`tamaño de fuente: 28vw`,`altura de línea: 0,85`,`color: var(--crema-claro)`,`índice z: 1`（**比人像低**），`espacio en blanco: nowrap`。
- 检查标准:渲染后人像的 alfa通道（人像椭圆边缘）必须能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，调小`top` 值（让字往上挪）或增加人像高度。
- 椭圆台词气泡：`posición: absoluta; derecha: 6%; arriba: 25%; Índice z: 3`，气泡和它指向的方位之间一条竖直虚线。
- 半色调装饰图（喇叭等）：`posición: absoluta; derecha: 3%; arriba: 10%`, y 140px,**必须配 `modo de mezcla: oscurecer`**。
- 整个 Hero 区不要用 flex/grid 把元素排成行列——元素之间是绝对定位的叠加关系.
**布局法则（其他区块）**:
- Tamaño del archivo: 1280 px, tamaño estándar.
- 区块之间用 `border-top: 1px discontinuo var(--brick)` 横线分隔.
- 椭圆图：`radio-borde: 50% / 60%`（横向稍扁的鸭蛋形），不要正圆。
- 椭圆手写气泡:`border-radius: 50% / 70%`,背景 `var(--cream-light)`,描边 `1px discontinuo var(--brick)`，内边距充足，气泡里的字用显示字体 + brick 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`borde-izquierdo: 1px discontinuo var(--brick)` 配 `posición: absoluta`，长度60–120px），末端点一个小红圆点。这是这个风格的标志符号，每个区块至少出现一处。
- Resolución de pantalla 120–180px, **modo de mezcla-mezcla: oscurecer`**。
**Por qué 区的硬性规则**:
- 必须用 Paso 3 生成的两张 Por qué 真实人物椭圆照片，左右并排放在区块顶部。
- **禁止**用 emoji、Material Icon、Font Awesome 等任何通用 icon 替代照片或填充 "feature 卡片"。这个风格不存在 "feature 卡片" 概念。
- 4 列正文是横向多列文字流，不是 4 个图标卡片。
**正文写法**:
- Navegación, etiqueta de sección, título de la tarjeta, título y TODO EN MAYÚSCULAS.
- 正文小字段落用多列（CSS `column-count: 3` 或 `column-count: 4`）实现窄栏报刊感，不要单列大段。
- 标题色一律 `var(--brick)`, 正文色 `var(--ink)`。
**页脚**：保留 "Términos y soporte · Política de privacidad · Diseñado con [品牌名]" 三行小字，左下角对齐，米杏色。
**响应式**:移动端品牌字号降到 28vw（保持），多列正文降到单列，椭圆图缩到 70%宽度居中，装饰图缩到 80px 并保留位置。Hero 叠化在移动端依然成立——人像高度可以缩到50vh，品牌字 arriba 跟着调到 35vh 维持遮挡关系.
---
把 breve 里 7 段文案、图片 URL 清单（标注每张归属）一起塞进 generateWebpage 的 Prompt，让它一次出页。
**Paso 5 · 交付 + 微调入口**
生成完后，把 página web 链接给用户，然后用一句话主动给出 3 个最高频的微调方向，让用户直接点：
1. 换主体肖像图（重新跑 Paso 3 的 A 图，换一种姿态/服装）
2. 调色板偏移（比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构，只换色值）
3. 加 / 删 / 重排区块（按 Paso 2 的 7 段骨架调整）
用户选了哪一项就只重跑对应步骤，不要全量重生。
Descripción
Esta herramienta crea un sitio web único de una sola página, con un estilo retro distintivo, perfecto para podcasters, marcas personales o pequeñas empresas que buscan una presencia online única. Captura la estética de las revistas vintage y el diseño editorial de los años 70. Los usuarios pueden proporcionar el nombre de su marca, un eslogan atractivo y contenido para varias secciones como "Acerca de", "Últimos lanzamientos" y "Contacto". La herramienta genera de forma inteligente una página web completa y visualmente atractiva. Entre sus principales características se incluyen la creación de una impactante sección "Héroe" con texto e imágenes superpuestos, bloques de contenido dinámicos y navegación personalizada. También ofrece generación de imágenes mediante IA para lograr un estilo vintage consistente, incluyendo elementos decorativos de semitonos y fotografías de época, si el usuario no proporciona las suyas. El proceso consiste en recopilar las preferencias y el contenido del sitio web, y luego ensamblar un diseño de página completa que se ajusta a un lenguaje visual específico. El resultado final es una página web activa, con una URL única, lista para compartir. Los usuarios también disponen de opciones para realizar ajustes rápidos, como cambiar las imágenes principales, modificar la paleta de colores o reordenar las secciones, garantizando así que el sitio web final se ajuste perfectamente a su visión.
Por qué recomendamos esta habilidad
Esta habilidad crea un sitio web vibrante con temática retro y una sección principal única con capas, ideal para podcasters y pequeñas marcas. Su distintiva estética vintage y sus meticulosos detalles de diseño lo hacen destacar.
Habilidades relacionadas
Ver todoPresentación de animación de partículas (HTML)
Esta habilidad genera un sitio web elegante de una sola página con una impactante estética futurista en blanco y negro, ideal para mostrar un nuevo producto, el portafolio de un artista o una tarjeta de presentación digital. Está diseñada para personas o empresas que necesitan una presencia en línea visualmente impactante sin la complejidad del desarrollo web tradicional. La habilidad produce un archivo HTML autocontenido con 4 o 5 secciones de desplazamiento suave, cada una diseñada para captar la atención con tipografía minimalista y elementos de alto contraste. El fondo cobra vida con una animación monocromática personalizada, como partículas fluidas o sutiles degradados de ruido, que crea una atmósfera dinámica y de alta tecnología sin depender de medios externos. Al cargar, la página recibe a los visitantes con una atractiva animación principal: un texto con forma de ceja aparece, seguido de un dramático efecto de "mezcla" para el título principal y una suave aparición gradual para el subtítulo. El contenido de las secciones siguientes aparece con fluidez a medida que el usuario se desplaza, lo que garantiza una experiencia inmersiva y sin interrupciones. Todas las imágenes proporcionadas por el usuario se convierten automáticamente a escala de grises para mantener la coherencia del tema visual. El resultado final es una página web adaptable, accesible y de alto rendimiento, que se entrega como un único archivo HTML listo para su implementación.
ImagenPóster de landing page YouMind
Transforma tu contenido en una narrativa visual impactante con un Póster estilo landing page de YouMind. Esta habilidad crea hermosos pósters infográficos que captan la atención con una estética natural retro-futurista única. Perfecto para mostrar datos clave, aspectos destacados de proyectos o características de productos, tu información se presentará en un formato sofisticado y fácil de digerir. Aprovechando una paleta de colores equilibrada entre fríos y cálidos con una base gris azulado claro y sutiles acentos en beige melocotón, cada póster transmite una sensación de interfaz moderna. Espera tipografía elegante, con Source Han Serif para títulos y sans-serif limpia para el cuerpo del texto, garantizando legibilidad. El diseño utiliza una cuadrícula Bento dinámica, organizando tu contenido en tarjetas visualmente atractivas de bordes suaves con amplio espacio de respiro, evitando diseños abarrotados. Más allá de lo visual impactante, la habilidad integra elementos de diseño sutiles como un grano fino uniforme de película, renderizado impresionista e iconos opcionales de vidrio esmerilado para tus puntos de datos. Se puede agregar un único prisma triangular translúcido como acento elegante, mientras que el logotipo oficial de YouMind siempre se coloca discretamente para mantener la coherencia de marca. Esto da como resultado una infografía profesional, aireada y moderna que comunica eficazmente tu mensaje.
Confirmación de asistencia a la boda
Esta herramienta genera un sitio web elegante y de estilo editorial para bodas o eventos, perfecto para parejas que buscan una invitación online moderna y sofisticada. Está diseñada para quienes desean una presencia digital distintiva para su día especial, más allá de las plantillas tradicionales. La herramienta captura una estética única inspirada en el diseño editorial de alta gama, con un fondo blanco impecable, tipografía sans-serif de gran tamaño y cálidos detalles en rojo. Puede integrar las imágenes que proporciones o generar dos imágenes cinematográficas al estilo Wes Anderson: un banner principal y una imagen de la historia, con una pareja luciendo una gorra de béisbol roja característica, sobre fondos urbanos o jardines con una cálida iluminación de la hora dorada. Los usuarios solo tienen que proporcionar detalles clave como nombres, fecha y lugar del evento. La herramienta crea una página web completa y adaptable, que incluye una barra de navegación fija, una sección principal destacada, un formulario de confirmación de asistencia, una sección dedicada a "Nuestra historia", detalles del evento e información de contacto. El resultado final es una página web HTML lista para usar, que se entrega como un artefacto y que se puede personalizar aún más si es necesario.
Encuentra tu próxima habilidad favorita
Explora más habilidades de IA seleccionadas para investigación, creación y trabajo cotidiano.