Site de podcast retrô rosa
For profile, small brands, and event landing page.
Instruções
**Etapa 1 · 收集 brief（一次问完，宁多勿少）**
用 askUserQuestion 一次性确认这些字段，不要分多轮慢慢挤：
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现，建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / slogan（会出现在椭圆手写气泡里，可中可英可西语，越个性越好;用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：Sobre / Últimos lançamentos / Contato / Inscrever-se，用户可加可减）
5. 各区块文案(用户没准备就自动按主题填占位文案,语气要俏皮、第一人称、带点自嘲)
6. 图片来源:用户上传 vs. habilidade 自动生成（默认自动生成）
7. 邮箱、社媒 handle 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后，把所有字段整理进一个内部 breve取数,不要再回头追问。
**Etapa 2 · 套用规范的 7 etapas**
这个风格的页面结构是固定的，不要发明新结构。把 brief 里的内容硬塞进下面 7 段：
1. **Navegação superior**：左侧品牌名（小字 todas em letras maiúsculas）+ 右侧 3–4个导航链接(todas em maiúsculas，下划虚线）。背景延续顶部玫粉色。
2. **Herói（核心叠化效果，最关键的一段，不能做成上下堆叠）**：椭圆裁切的人物/主体大图 +巨型手写体品牌名横跨整宽。**这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 到1/2 被人像的下半部分遮挡，呈现「字从人像背后钻出来」的报刊封面感。判断标准：在最终截图上，品牌名顶端的字母（如L、l 的圆头、k 的上划）应该被人像 alfa 通道盖住,看不到完整字形。如果能完整看到品牌名所有字母，就是失败的堆叠，必须重做。→右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **Sobre**：左侧大写小标题 "SOBRE MIM"（红色）+ 右侧大段副标题（红色 em letras maiúsculas，2 行换行）→下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰，比如嘴唇）→ 右侧 3 列等宽小字正文。背景：米杏。
4. **Últimos lançamentos / Destaque**：标题 "OS ÚLTIMOS DROPS"（或对应主题词）+ 两张高瘦矩形卡片，卡片标题用 em letras maiúsculas黑色压在图片下半部。卡片上方各有 "TEMPORADA X EPISÓDIO Y"形式的小字说明（横虚线分隔）。左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画。背景：米杏。
5. **Por que / Missão**：顶部左右并排两张椭圆图（用 Por que 区生成的两张人物近景照片，不要用 ícone 替代）→大写小标题 "POR QUE VOCÊ DEVE SINTONIZAR?" → 4 列等宽小字正文（每列一段，问句结尾）→ 右侧椭圆手写气泡 "Entre na minha lista de e-mails" 形式 +半色调红色复古插画（比如长颈鹿或猫）。背景：米杏。**禁止用通用 ícone（emoji / ícone SVG / Material Icons）替代真实照片**。
6. **Contato**：左侧 "CONTATO" + 右侧 "HIT ME UP!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →右侧再来一颗椭圆手写气泡 + 半色调红色复古电脑/电话插画。背景：米杏。
7. **Footer Hero**：再次让巨型手写体品牌名横跨全宽出现一遍（同 Hero叠化逻辑：底部插画/装饰元素遮挡品牌名顶部）→ 右上一颗椭圆手写气泡 → 底部小字 "Termos e suporte · Privacidade Política · Projetado com [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过，不要硬塞;但顺序不能乱。
**Etapa 3 · 准备图片资产（用户没传就自己生）**
这个风格强依赖图片，没图就崩了。检查 breve:
-用户**已上传**图片：直接用, 但提醒用户照片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏。不满足就在下一步靠装饰图救场。
- 用户**未上传**：调用 generateImage 生成下面这 6 张（每张独立调用，prompt必须按下面写法精确控制风格，否则出图不对味）：
**UM. 主体肖像图（Herói 用，椭圆裁切）**
```
Fotografia editorial vintage dos anos 70, retrato de mulher vestindo blazer vermelho-terracota, segurando um microfone cromado retrô, fundo de cortina de veludo azul-marinho ou vermelho escuro, iluminação quente de tungstênio, granulação suave do filme, colar de pérolas, batom vermelho, olhando para baixo ou para o lado, composição de capa de revista, paleta de cores quentes e suaves, fotografada em filme 35mm, vertical 3:4.
```
** B. Sobre 区椭圆图（桌面录制场景）**
```
Mesa de gravação de podcast vintage, microfone cromado retrô, óculos sobre papéis de roteiro, copo d'água, cortina de veludo verde ao fundo, superfície de madeira em tons quentes, estilo editorial dos anos 70, iluminação suave e quente, granulação de filme, paleta de cores em terracota e verde-floresta, formato 3:4.
```
**C / D. Últimos lançamentos 两张卡片图（与 breve 主题相关）**
根据用户的两个 "latest drop" 标题分别生成。例如标题是 "videogames retrô" → 一只手拿着粉色任天堂 3DS在窗帘前的复古照片。要求：复古胶片质感、暖色调、构图竖向 3:4。
**E. Por que 区椭圆图 ×2（不同视角的人物近景）**
```
Fotografia editorial vintage em close-up de uma mulher com blazer vermelho, segurando um telefone de disco laranja retrô no ouvido, fundo com cortina de veludo verde, iluminação quente dos anos 70, granulação do filme, 3:4.
```
+
```
Primeiro plano das mãos de uma mulher com mangas vermelhas digitando em uma máquina de escrever antiga, em uma mesa de madeira em tom quente, com textura granulada, estilo editorial dos anos 70, formato 3:4.
```
**F. 4–5 个半色调复古装饰元素（必须透明背景！）**
这一组是风格灵魂，每个独立生成，**必须用 gemini-3.1-flash-image-preview 模型**（GPT Image 处理透明 alpha 不可靠），prompt模板:
```
Ilustração em duotono de meio-tom de [objeto], renderizada apenas com pontos vermelho-tijolo, estilo de impressão de revista vintage dos anos 1970, padrão de pontos de meio-tom visível, o objeto está isolado em um fundo totalmente transparente com canal alfa, sem preenchimento de fundo, estilo recorte PNG, composição plana simples, apenas os pontos vermelhos visíveis, todo o resto transparente
```
[objeto] 依次替换为：megafone（喇叭）/ fones de ouvido（耳机）/ lábios vermelhos（嘴唇）/ cabeça de girafa（长颈鹿头）/ TV de tubo retrô ou desktop dos anos 1980 computador（老电视或老式电脑）。
**保险措施**：即使用了正确的 prompt，模型可能仍然给出米白底而非真透明。所以在 Passo 4 em CSS里**必须给所有半色调装饰图加 `mix-blend-mode: escurecer;`**，让米白底自动融入页面背景，只保留红点图案。这是兜底规则，不能省略。
生成完所有图后把 URL 收集到一个清单里，标注每张图归属哪个区块。
**Etapa 4 · 调用 generateWebpage 一次性出页（视觉 DNA 必须完整传过去）**
调 generateWebpage，prompt 里**完整粘贴**下面这份 Style DNA，再附上 Step 1 的 brief 内容和 Step 3 的图片清单。as_artifact: true。
---
**【DNA de estilo · 必须严格遵守】**
**色板（CSS 变量级精度）**：
- `--rose`: #F4A8A0（顶部玫粉，Hero 与 Footer 背景）
- `--cream`: #E5DCC2（中段米杏，Sobre / Mais recente / Por que / Contato 背景）
- `--brick`: #B8472D（标题/导航文字/装饰描边）
- `--ink`: #2C1810（正文小字）
- `--cream-light`: #F2EBD8（气泡内部填充）
Hero.Hero顶部到画布顶上沿带一点紫灰晕染（rgba(150.140.180.0.25) 径向渐变到 rose），呼应原稿。
**字体配对（必须用 Google Fonts CDN 加载）**：
- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Vela"` 或 `"Pacífico"` 或 `"Olá Headline"`，三选一，要丰满有圈、复古糖果感。品牌名字号要爆炸大，desktop 至少 18vw，溢出感强。
- 标题/导航/正文小字：`"Oswald"` 或 `"Bebas Neue"`，全部 `transformação de texto: maiúscula`，字距 `espaçamento entre letras: 0,06em`。正文小字 12–13px，行高1.4。
- 不要再引入第三种字体。
**Herói 叠化的精确实现（不能省略，不能改）**：
- Seção Hero 高度设为 `100vh` 或 `95vh`，使用 `posição: relativa` + `overflow: oculto`。
- 椭圆人像图：`posição: absoluto`，水平居中（`esquerda: 50%; transform: translateX(-50%)`），垂直方向 `top: 5vh`，高度约 `70vh`，宽度按 3:4 比例计算（约 `52vh`），`z-index: 2`，`border-radius: 50% / 60%`，`ajuste ao objeto: capa`。
- 巨型品牌名：`posição: absoluto`，水平居中，垂直方向 `topo: 50vh`（**关键**：这个数值要让文字的顶部边线落在人像的纵向中部偏下区域，而不是人像下方）。`tamanho da fonte: 28vw`,`altura da linha: 0,85`,`cor: var(--cream-light)`,`índice z: 1`（**比人像低**），`espaço em branco: nowrap`。
- 检查标准:渲染后人像的 alfa通道（人像椭圆边缘）必须能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，调小`top` 值（让字往上挪）或增加人像高度。
- 椭圆台词气泡：`posição: absoluto; direita: 6%; topo: 25%; índice z: 3`，气泡和它指向的方位之间一条竖直虚线。
- 半色调装饰图（喇叭等）：`posição: absoluto; direita: 3%; topo: 10%`，宽 140px，**必须配 `mix-blend-mode: escurecer`**。
- 整个 Hero 区不要用 flex/grid 把元素排成行列——元素之间是绝对定位的叠加关系。
**布局法则（其他区块）**：
- 内容容器最大宽 1280px,居中。
- 区块之间用 `border-top: 1px dashed var(--brick)` 横线分隔。
- 椭圆图：`raio da borda: 50% / 60%`（横向稍扁的鸭蛋形），不要正圆。
- 椭圆手写气泡：`border-radius: 50% / 70%`，背景 `var(--cream-light)`，描边 `1px tracejado var(--tijolo)`，内边距充足，气泡里的字用显示字体 + tijolo 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`border-left: 1px dashed var(--brick)` 配 `posição: absoluto`，长度60–120px），末端点一个小红圆点。这是这个风格的标志符号，每个区块至少出现一处。
- 半色调装饰图固定出现在区块的角落(左下、右上交替），尺寸 120–180px，**全部加 `modo mix-blend: escurecer`**。
**Por que 区的硬性规则**：
- 必须用 Etapa 3 生成的两张 Por que 真实人物椭圆照片，左右并排放在区块顶部。
- **禁止**用 emoji、Material Icon、Font Awesome 等任何通用 ícone 替代照片或填充 "recurso 卡片"。这个风格不存在 "recurso 卡片" 概念。
- 4 列正文是横向多列文字流，不是 4 个图标卡片。
**正文写法**：
- 所有 navegação、rótulo da seção、título do cartão、título 全部 TUDO EM MAIÚSCULAS。
- 正文小字段落用多列（CSS `contagem de colunas: 3` 或 `contagem de colunas: 4`）实现窄栏报刊感，不要单列大段。
- 标题色一律 `var(--brick)`, 正文色 `var(--ink)`。
**页脚**：保留 "Termos e suporte · Política de privacidade · Projetado com [品牌名]" 三行小字，左下角对齐，米杏色。
**响应式**：移动端品牌字号降到 28vw（保持），多列正文降到单列，椭圆图缩到 70% Hero 叠化在移动端依然成立——人像高度可以缩到50vh,品牌字 superior 跟着调到 35vh 维持遮挡关系。
---
把 brief 里 7 段文案、图片 URL 清单（标注每张归属）一起塞进 generateWebpage 的 prompt，让它一次出页。
**Etapa 5 · 交付 + 微调入口**
生成完后,把 página da web 链接给用户，然后用一句话主动给出 3 个最高频的微调方向，让用户直接点：
1. 换主体肖像图（重新跑 Passo 3 的 A 图，换一种姿态/服装）
2. 调色板偏移（比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构，只换色值）
3. 加 / 删 / 重排区块（按 Passo 2 e 7 段骨架调整）
用户选了哪一项就只重跑对应步骤，不要全量重生。
Descrição
Esta ferramenta cria um site de página única com um estilo retrô diferenciado, perfeito para podcasters, marcas pessoais ou pequenas empresas que buscam uma presença online única. Ela captura a estética dos layouts de revistas vintage e do design editorial dos anos 70. Os usuários podem fornecer o nome da marca, um slogan cativante e conteúdo para diversas seções, como "Sobre", "Lançamentos" e "Contato". A ferramenta então gera, de forma inteligente, uma página completa e visualmente rica. Os principais recursos incluem a criação de uma seção "Hero" impactante com texto e imagens sobrepostos, blocos de conteúdo dinâmicos e navegação personalizada. Ela também oferece geração de imagens por IA para um visual vintage consistente, incluindo elementos decorativos em meio-tom e fotografias da época, caso o usuário não forneça as suas próprias. O processo envolve coletar as preferências e o conteúdo do seu site e, em seguida, montar um design de página completa que siga uma linguagem visual específica. O resultado final é uma página web ativa, com um URL exclusivo, pronta para compartilhar. Os usuários também recebem opções para ajustes rápidos, como trocar as imagens principais, ajustar a paleta de cores ou reordenar as seções, garantindo que o site final corresponda perfeitamente à sua visão.
Por que recomendamos esta habilidade
Esta habilidade cria um site vibrante com tema retrô e uma seção principal em camadas exclusiva, perfeita para podcasters e pequenas marcas. Sua estética vintage distinta e detalhes de design meticulosos a tornam verdadeiramente especial.
Habilidades relacionadas
Ver tudo
Apresentação de animação de partículas (HTML)
Esta skill gera um site elegante de página única com uma estética futurista marcante em preto e branco, ideal para apresentar um novo produto, o portfólio de um artista ou um cartão de visitas digital. Ela foi projetada para indivíduos ou empresas que precisam de uma presença online visualmente impactante sem a complexidade do desenvolvimento de sites tradicionais. A skill produz um arquivo HTML autossuficiente com 4 a 5 seções de rolagem suave, cada uma projetada para capturar a atenção com tipografia minimalista e elementos de alto contraste. O fundo ganha vida com uma animação monocromática personalizada — como partículas em movimento ou gradientes de ruído sutis — que cria uma atmosfera dinâmica e de alta tecnologia sem depender de mídias externas. Ao carregar, a página recebe os visitantes com uma animação de destaque envolvente: um texto em forma de sobrancelha é digitado, seguido por um efeito dramático de "embaralhamento" para o título principal e um fade-in suave para o subtítulo. O conteúdo das seções subsequentes aparece graciosamente à medida que o usuário rola a página, garantindo uma experiência fluida e imersiva. Todas as imagens fornecidas pelo usuário são convertidas automaticamente para tons de cinza para manter a consistência do tema visual. O resultado final é uma página web responsiva, acessível e de alto desempenho, entregue como um único arquivo HTML pronto para implantação.
ImagemPôster de Landing Page YouMind
Transforme seu conteúdo em uma narrativa visual impressionante com um Pôster Estilo Landing Page YouMind. Esta habilidade cria belos pôsteres infográficos que capturam a atenção com uma estética única de Retrofuturismo Natural. Perfeito para destacar dados importantes, marcos do projeto ou características do produto, suas informações serão apresentadas em um formato sofisticado e de fácil digestão. Aproveitando uma paleta de cores equilibrada entre frio e quente, com uma base cinza-azul clara e sutis acentos bege-pêssego, cada pôster incorpora uma sensação moderna de UI. Espere tipografia elegante, com o autoritário Source Han Serif para títulos e uma sans-serif limpa para o corpo do texto, garantindo legibilidade. O layout utiliza uma grade Bento dinâmica, organizando seu conteúdo em cartões visualmente envolventes, com bordas suaves e amplo espaço, evitando designs poluídos. Além de visuais impressionantes, a habilidade integra elementos sutis de design, como um grão de filme fino uniforme, renderização impressionista e ícones opcionais de vidro fosco para seus pontos de dados. Um único prisma triangular translúcido pode ser adicionado como um acento elegante, enquanto o logotipo oficial do YouMind é sempre colocado discretamente para manter a consistência da marca. Isso resulta em um infográfico profissional, arejado e moderno que comunica sua mensagem de forma eficaz.
Confirmação de presença no casamento
Esta funcionalidade gera um site de casamento ou evento elegante, com tema editorial, de página única, perfeito para casais que buscam um convite online moderno e sofisticado. Ela foi projetada para quem deseja uma presença digital diferenciada para o seu dia especial, indo além dos modelos tradicionais. A funcionalidade captura uma estética única inspirada no design editorial de alta qualidade, apresentando um fundo branco limpo, tipografia sans-serif grande e detalhes em vermelho quente. Ela pode integrar as imagens fornecidas pelo usuário ou gerar duas imagens cinematográficas, no estilo Wes Anderson — uma imagem principal e uma imagem de destaque — apresentando um casal com um boné de beisebol vermelho característico, em cenários urbanos ou de jardim com a luz dourada do pôr do sol. Os usuários simplesmente fornecem detalhes importantes, como nomes, data e local do evento. A funcionalidade então cria uma página web completa e responsiva, incluindo uma barra de navegação fixa, uma seção principal proeminente, um formulário de confirmação de presença (RSVP), uma seção dedicada "Nossa História", detalhes do evento e informações de contato. O resultado final é uma página web HTML pronta para uso, entregue como um artefato, que pode ser ainda mais personalizada, se necessário.
Site de podcast retrô rosa
For profile, small brands, and event landing page.
Instruções
**Etapa 1 · 收集 brief（一次问完，宁多勿少）**
用 askUserQuestion 一次性确认这些字段，不要分多轮慢慢挤：
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现，建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / slogan（会出现在椭圆手写气泡里，可中可英可西语，越个性越好;用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：Sobre / Últimos lançamentos / Contato / Inscrever-se，用户可加可减）
5. 各区块文案(用户没准备就自动按主题填占位文案,语气要俏皮、第一人称、带点自嘲)
6. 图片来源:用户上传 vs. habilidade 自动生成（默认自动生成）
7. 邮箱、社媒 handle 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后，把所有字段整理进一个内部 breve取数,不要再回头追问。
**Etapa 2 · 套用规范的 7 etapas**
这个风格的页面结构是固定的，不要发明新结构。把 brief 里的内容硬塞进下面 7 段：
1. **Navegação superior**：左侧品牌名（小字 todas em letras maiúsculas）+ 右侧 3–4个导航链接(todas em maiúsculas，下划虚线）。背景延续顶部玫粉色。
2. **Herói（核心叠化效果，最关键的一段，不能做成上下堆叠）**：椭圆裁切的人物/主体大图 +巨型手写体品牌名横跨整宽。**这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 到1/2 被人像的下半部分遮挡，呈现「字从人像背后钻出来」的报刊封面感。判断标准：在最终截图上，品牌名顶端的字母（如L、l 的圆头、k 的上划）应该被人像 alfa 通道盖住,看不到完整字形。如果能完整看到品牌名所有字母，就是失败的堆叠，必须重做。→右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **Sobre**：左侧大写小标题 "SOBRE MIM"（红色）+ 右侧大段副标题（红色 em letras maiúsculas，2 行换行）→下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰，比如嘴唇）→ 右侧 3 列等宽小字正文。背景：米杏。
4. **Últimos lançamentos / Destaque**：标题 "OS ÚLTIMOS DROPS"（或对应主题词）+ 两张高瘦矩形卡片，卡片标题用 em letras maiúsculas黑色压在图片下半部。卡片上方各有 "TEMPORADA X EPISÓDIO Y"形式的小字说明（横虚线分隔）。左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画。背景：米杏。
5. **Por que / Missão**：顶部左右并排两张椭圆图（用 Por que 区生成的两张人物近景照片，不要用 ícone 替代）→大写小标题 "POR QUE VOCÊ DEVE SINTONIZAR?" → 4 列等宽小字正文（每列一段，问句结尾）→ 右侧椭圆手写气泡 "Entre na minha lista de e-mails" 形式 +半色调红色复古插画（比如长颈鹿或猫）。背景：米杏。**禁止用通用 ícone（emoji / ícone SVG / Material Icons）替代真实照片**。
6. **Contato**：左侧 "CONTATO" + 右侧 "HIT ME UP!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →右侧再来一颗椭圆手写气泡 + 半色调红色复古电脑/电话插画。背景：米杏。
7. **Footer Hero**：再次让巨型手写体品牌名横跨全宽出现一遍（同 Hero叠化逻辑：底部插画/装饰元素遮挡品牌名顶部）→ 右上一颗椭圆手写气泡 → 底部小字 "Termos e suporte · Privacidade Política · Projetado com [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过，不要硬塞;但顺序不能乱。
**Etapa 3 · 准备图片资产（用户没传就自己生）**
这个风格强依赖图片，没图就崩了。检查 breve:
-用户**已上传**图片：直接用, 但提醒用户照片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏。不满足就在下一步靠装饰图救场。
- 用户**未上传**：调用 generateImage 生成下面这 6 张（每张独立调用，prompt必须按下面写法精确控制风格，否则出图不对味）：
**UM. 主体肖像图（Herói 用，椭圆裁切）**
```
Fotografia editorial vintage dos anos 70, retrato de mulher vestindo blazer vermelho-terracota, segurando um microfone cromado retrô, fundo de cortina de veludo azul-marinho ou vermelho escuro, iluminação quente de tungstênio, granulação suave do filme, colar de pérolas, batom vermelho, olhando para baixo ou para o lado, composição de capa de revista, paleta de cores quentes e suaves, fotografada em filme 35mm, vertical 3:4.
```
** B. Sobre 区椭圆图（桌面录制场景）**
```
Mesa de gravação de podcast vintage, microfone cromado retrô, óculos sobre papéis de roteiro, copo d'água, cortina de veludo verde ao fundo, superfície de madeira em tons quentes, estilo editorial dos anos 70, iluminação suave e quente, granulação de filme, paleta de cores em terracota e verde-floresta, formato 3:4.
```
**C / D. Últimos lançamentos 两张卡片图（与 breve 主题相关）**
根据用户的两个 "latest drop" 标题分别生成。例如标题是 "videogames retrô" → 一只手拿着粉色任天堂 3DS在窗帘前的复古照片。要求：复古胶片质感、暖色调、构图竖向 3:4。
**E. Por que 区椭圆图 ×2（不同视角的人物近景）**
```
Fotografia editorial vintage em close-up de uma mulher com blazer vermelho, segurando um telefone de disco laranja retrô no ouvido, fundo com cortina de veludo verde, iluminação quente dos anos 70, granulação do filme, 3:4.
```
+
```
Primeiro plano das mãos de uma mulher com mangas vermelhas digitando em uma máquina de escrever antiga, em uma mesa de madeira em tom quente, com textura granulada, estilo editorial dos anos 70, formato 3:4.
```
**F. 4–5 个半色调复古装饰元素（必须透明背景！）**
这一组是风格灵魂，每个独立生成，**必须用 gemini-3.1-flash-image-preview 模型**（GPT Image 处理透明 alpha 不可靠），prompt模板:
```
Ilustração em duotono de meio-tom de [objeto], renderizada apenas com pontos vermelho-tijolo, estilo de impressão de revista vintage dos anos 1970, padrão de pontos de meio-tom visível, o objeto está isolado em um fundo totalmente transparente com canal alfa, sem preenchimento de fundo, estilo recorte PNG, composição plana simples, apenas os pontos vermelhos visíveis, todo o resto transparente
```
[objeto] 依次替换为：megafone（喇叭）/ fones de ouvido（耳机）/ lábios vermelhos（嘴唇）/ cabeça de girafa（长颈鹿头）/ TV de tubo retrô ou desktop dos anos 1980 computador（老电视或老式电脑）。
**保险措施**：即使用了正确的 prompt，模型可能仍然给出米白底而非真透明。所以在 Passo 4 em CSS里**必须给所有半色调装饰图加 `mix-blend-mode: escurecer;`**，让米白底自动融入页面背景，只保留红点图案。这是兜底规则，不能省略。
生成完所有图后把 URL 收集到一个清单里，标注每张图归属哪个区块。
**Etapa 4 · 调用 generateWebpage 一次性出页（视觉 DNA 必须完整传过去）**
调 generateWebpage，prompt 里**完整粘贴**下面这份 Style DNA，再附上 Step 1 的 brief 内容和 Step 3 的图片清单。as_artifact: true。
---
**【DNA de estilo · 必须严格遵守】**
**色板（CSS 变量级精度）**：
- `--rose`: #F4A8A0（顶部玫粉，Hero 与 Footer 背景）
- `--cream`: #E5DCC2（中段米杏，Sobre / Mais recente / Por que / Contato 背景）
- `--brick`: #B8472D（标题/导航文字/装饰描边）
- `--ink`: #2C1810（正文小字）
- `--cream-light`: #F2EBD8（气泡内部填充）
Hero.Hero顶部到画布顶上沿带一点紫灰晕染（rgba(150.140.180.0.25) 径向渐变到 rose），呼应原稿。
**字体配对（必须用 Google Fonts CDN 加载）**：
- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Vela"` 或 `"Pacífico"` 或 `"Olá Headline"`，三选一，要丰满有圈、复古糖果感。品牌名字号要爆炸大，desktop 至少 18vw，溢出感强。
- 标题/导航/正文小字：`"Oswald"` 或 `"Bebas Neue"`，全部 `transformação de texto: maiúscula`，字距 `espaçamento entre letras: 0,06em`。正文小字 12–13px，行高1.4。
- 不要再引入第三种字体。
**Herói 叠化的精确实现（不能省略，不能改）**：
- Seção Hero 高度设为 `100vh` 或 `95vh`，使用 `posição: relativa` + `overflow: oculto`。
- 椭圆人像图：`posição: absoluto`，水平居中（`esquerda: 50%; transform: translateX(-50%)`），垂直方向 `top: 5vh`，高度约 `70vh`，宽度按 3:4 比例计算（约 `52vh`），`z-index: 2`，`border-radius: 50% / 60%`，`ajuste ao objeto: capa`。
- 巨型品牌名：`posição: absoluto`，水平居中，垂直方向 `topo: 50vh`（**关键**：这个数值要让文字的顶部边线落在人像的纵向中部偏下区域，而不是人像下方）。`tamanho da fonte: 28vw`,`altura da linha: 0,85`,`cor: var(--cream-light)`,`índice z: 1`（**比人像低**），`espaço em branco: nowrap`。
- 检查标准:渲染后人像的 alfa通道（人像椭圆边缘）必须能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，调小`top` 值（让字往上挪）或增加人像高度。
- 椭圆台词气泡：`posição: absoluto; direita: 6%; topo: 25%; índice z: 3`，气泡和它指向的方位之间一条竖直虚线。
- 半色调装饰图（喇叭等）：`posição: absoluto; direita: 3%; topo: 10%`，宽 140px，**必须配 `mix-blend-mode: escurecer`**。
- 整个 Hero 区不要用 flex/grid 把元素排成行列——元素之间是绝对定位的叠加关系。
**布局法则（其他区块）**：
- 内容容器最大宽 1280px,居中。
- 区块之间用 `border-top: 1px dashed var(--brick)` 横线分隔。
- 椭圆图：`raio da borda: 50% / 60%`（横向稍扁的鸭蛋形），不要正圆。
- 椭圆手写气泡：`border-radius: 50% / 70%`，背景 `var(--cream-light)`，描边 `1px tracejado var(--tijolo)`，内边距充足，气泡里的字用显示字体 + tijolo 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`border-left: 1px dashed var(--brick)` 配 `posição: absoluto`，长度60–120px），末端点一个小红圆点。这是这个风格的标志符号，每个区块至少出现一处。
- 半色调装饰图固定出现在区块的角落(左下、右上交替），尺寸 120–180px，**全部加 `modo mix-blend: escurecer`**。
**Por que 区的硬性规则**：
- 必须用 Etapa 3 生成的两张 Por que 真实人物椭圆照片，左右并排放在区块顶部。
- **禁止**用 emoji、Material Icon、Font Awesome 等任何通用 ícone 替代照片或填充 "recurso 卡片"。这个风格不存在 "recurso 卡片" 概念。
- 4 列正文是横向多列文字流，不是 4 个图标卡片。
**正文写法**：
- 所有 navegação、rótulo da seção、título do cartão、título 全部 TUDO EM MAIÚSCULAS。
- 正文小字段落用多列（CSS `contagem de colunas: 3` 或 `contagem de colunas: 4`）实现窄栏报刊感，不要单列大段。
- 标题色一律 `var(--brick)`, 正文色 `var(--ink)`。
**页脚**：保留 "Termos e suporte · Política de privacidade · Projetado com [品牌名]" 三行小字，左下角对齐，米杏色。
**响应式**：移动端品牌字号降到 28vw（保持），多列正文降到单列，椭圆图缩到 70% Hero 叠化在移动端依然成立——人像高度可以缩到50vh,品牌字 superior 跟着调到 35vh 维持遮挡关系。
---
把 brief 里 7 段文案、图片 URL 清单（标注每张归属）一起塞进 generateWebpage 的 prompt，让它一次出页。
**Etapa 5 · 交付 + 微调入口**
生成完后,把 página da web 链接给用户，然后用一句话主动给出 3 个最高频的微调方向，让用户直接点：
1. 换主体肖像图（重新跑 Passo 3 的 A 图，换一种姿态/服装）
2. 调色板偏移（比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构，只换色值）
3. 加 / 删 / 重排区块（按 Passo 2 e 7 段骨架调整）
用户选了哪一项就只重跑对应步骤，不要全量重生。
Descrição
Esta ferramenta cria um site de página única com um estilo retrô diferenciado, perfeito para podcasters, marcas pessoais ou pequenas empresas que buscam uma presença online única. Ela captura a estética dos layouts de revistas vintage e do design editorial dos anos 70. Os usuários podem fornecer o nome da marca, um slogan cativante e conteúdo para diversas seções, como "Sobre", "Lançamentos" e "Contato". A ferramenta então gera, de forma inteligente, uma página completa e visualmente rica. Os principais recursos incluem a criação de uma seção "Hero" impactante com texto e imagens sobrepostos, blocos de conteúdo dinâmicos e navegação personalizada. Ela também oferece geração de imagens por IA para um visual vintage consistente, incluindo elementos decorativos em meio-tom e fotografias da época, caso o usuário não forneça as suas próprias. O processo envolve coletar as preferências e o conteúdo do seu site e, em seguida, montar um design de página completa que siga uma linguagem visual específica. O resultado final é uma página web ativa, com um URL exclusivo, pronta para compartilhar. Os usuários também recebem opções para ajustes rápidos, como trocar as imagens principais, ajustar a paleta de cores ou reordenar as seções, garantindo que o site final corresponda perfeitamente à sua visão.
Por que recomendamos esta habilidade
Esta habilidade cria um site vibrante com tema retrô e uma seção principal em camadas exclusiva, perfeita para podcasters e pequenas marcas. Sua estética vintage distinta e detalhes de design meticulosos a tornam verdadeiramente especial.
Habilidades relacionadas
Ver tudoApresentação de animação de partículas (HTML)
Esta skill gera um site elegante de página única com uma estética futurista marcante em preto e branco, ideal para apresentar um novo produto, o portfólio de um artista ou um cartão de visitas digital. Ela foi projetada para indivíduos ou empresas que precisam de uma presença online visualmente impactante sem a complexidade do desenvolvimento de sites tradicionais. A skill produz um arquivo HTML autossuficiente com 4 a 5 seções de rolagem suave, cada uma projetada para capturar a atenção com tipografia minimalista e elementos de alto contraste. O fundo ganha vida com uma animação monocromática personalizada — como partículas em movimento ou gradientes de ruído sutis — que cria uma atmosfera dinâmica e de alta tecnologia sem depender de mídias externas. Ao carregar, a página recebe os visitantes com uma animação de destaque envolvente: um texto em forma de sobrancelha é digitado, seguido por um efeito dramático de "embaralhamento" para o título principal e um fade-in suave para o subtítulo. O conteúdo das seções subsequentes aparece graciosamente à medida que o usuário rola a página, garantindo uma experiência fluida e imersiva. Todas as imagens fornecidas pelo usuário são convertidas automaticamente para tons de cinza para manter a consistência do tema visual. O resultado final é uma página web responsiva, acessível e de alto desempenho, entregue como um único arquivo HTML pronto para implantação.
ImagemPôster de Landing Page YouMind
Transforme seu conteúdo em uma narrativa visual impressionante com um Pôster Estilo Landing Page YouMind. Esta habilidade cria belos pôsteres infográficos que capturam a atenção com uma estética única de Retrofuturismo Natural. Perfeito para destacar dados importantes, marcos do projeto ou características do produto, suas informações serão apresentadas em um formato sofisticado e de fácil digestão. Aproveitando uma paleta de cores equilibrada entre frio e quente, com uma base cinza-azul clara e sutis acentos bege-pêssego, cada pôster incorpora uma sensação moderna de UI. Espere tipografia elegante, com o autoritário Source Han Serif para títulos e uma sans-serif limpa para o corpo do texto, garantindo legibilidade. O layout utiliza uma grade Bento dinâmica, organizando seu conteúdo em cartões visualmente envolventes, com bordas suaves e amplo espaço, evitando designs poluídos. Além de visuais impressionantes, a habilidade integra elementos sutis de design, como um grão de filme fino uniforme, renderização impressionista e ícones opcionais de vidro fosco para seus pontos de dados. Um único prisma triangular translúcido pode ser adicionado como um acento elegante, enquanto o logotipo oficial do YouMind é sempre colocado discretamente para manter a consistência da marca. Isso resulta em um infográfico profissional, arejado e moderno que comunica sua mensagem de forma eficaz.
Confirmação de presença no casamento
Esta funcionalidade gera um site de casamento ou evento elegante, com tema editorial, de página única, perfeito para casais que buscam um convite online moderno e sofisticado. Ela foi projetada para quem deseja uma presença digital diferenciada para o seu dia especial, indo além dos modelos tradicionais. A funcionalidade captura uma estética única inspirada no design editorial de alta qualidade, apresentando um fundo branco limpo, tipografia sans-serif grande e detalhes em vermelho quente. Ela pode integrar as imagens fornecidas pelo usuário ou gerar duas imagens cinematográficas, no estilo Wes Anderson — uma imagem principal e uma imagem de destaque — apresentando um casal com um boné de beisebol vermelho característico, em cenários urbanos ou de jardim com a luz dourada do pôr do sol. Os usuários simplesmente fornecem detalhes importantes, como nomes, data e local do evento. A funcionalidade então cria uma página web completa e responsiva, incluindo uma barra de navegação fixa, uma seção principal proeminente, um formulário de confirmação de presença (RSVP), uma seção dedicada "Nossa História", detalhes do evento e informações de contato. O resultado final é uma página web HTML pronta para uso, entregue como um artefato, que pode ser ainda mais personalizada, se necessário.
Encontre sua próxima habilidade favorita
Explore mais habilidades de IA selecionadas para pesquisa, criação e trabalho do dia a dia.