Sito podcaster Pink Retro
For profile, small brands, and event landing page.
Istruzioni
**Passaggio 1 · Breve descrizione（一次问完,宁多勿少）**
用 askUserQuestion 一次性确认这些字段,不要分多轮慢慢挤:
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现,建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / slogan（会出现在椭圆手写气泡里,可中可英可西语, 越个性越好；用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：Informazioni/Ultimi arrivi/Contatti/Iscriviti,用户可加可减）
5. Cerca
6. 图片来源：用户上传 vs. abilità 自动生成（默认自动生成）
7. 邮箱、社媒 handle 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后,把所有字段整理进一个内部 breve 备用,下面所有步骤都从这个 breve取数,不要再回头追问.
**Passaggio 2 · Passo 7: 段式骨架**
不要发明新结构。 把 brief 里的内容硬塞进下面 7 段：
1. **Nav superiore**:左侧品牌名（小字 tutto maiuscolo）+ 右侧 3–4 Tutte le maiuscole.
2. **Hero（核心叠化效果,最关键的一段,不能做成上下堆叠）**：椭圆裁切的人物/主体大图 + **这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 到 1/2 被人像的下半部分遮挡,呈现「字从人像背后钻出来」的报Vedi di più L、l 的圆头、k 的上划）应该被人像 alfa 通道盖住,看不到完整字形。如果能完整看到品牌名所有字母,就是失败的堆叠,必须重做。→右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **Informazioni**：左侧大写小标题 "SU DI ME"（红色）+ 右侧大段副标题（红色 tutto maiuscolo,2 行换行）→下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰,比如嘴唇）→ 右侧 3列等宽小字正文。背景：米杏。
4. **Ultimi Drop / In primo piano**：标题 "THE LATEST DROPS"（或对应主题词）+ 两张高瘦矩形卡片,卡片标题用 tutto in maiuscolo黑色压在图片下半部。卡片上方各有 "STAGIONE X EPISODIO Y"形式的小字说明（横虚线分隔）。左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画。背景：米杏。
5. **Perché / Missione**：顶部左右并排两张椭圆图（用 Perché 区生成的两张人物近景照片,不要用 icona 替代）→大写小标题 "PERCHÉ SINTONIZZARTI?" → 4 列等宽小字正文（每列一段，问句结尾）→ 右侧椭圆手写气泡 "Iscriviti alla mia mailing list" 形式 +半色调红色复古插画（比如长颈鹿或猫）。背景：米杏。**禁止用通用 icona(emoji / icona SVG / Materiale Icons）替代真实foto**.
6. **Contatto**：左侧 "CONTATTO" + 右侧 "COLPISCIMI!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →右侧再来一颗椭圆手写气泡 + 半色调红色复古电脑/电话插画。背景：米杏。
7. **Footer Hero**：再次让巨型手写体品牌名横跨全宽出现一遍（同 Hero叠化逻辑：底部插画/装饰元素遮挡品牌名顶部）→ 右上一颗椭圆手写气泡 → 底部小字 "Termini e supporto · Informativa sulla privacy · Progettato con [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过,不要硬塞；但顺序不能乱.
**Passaggio 3 · 准备图片资产（用户没传就自己生）**
这个风格强依赖图片 ，没图就崩了。检查 breve：
-用户**已上传**图foto:直接用,但提醒用户foto片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏。不满足就在下一步靠装饰图救场。
- 用户**未上传**：调用 generateImage 生成下面这 6 张（每张独立调用, prompt必须按下面写法精确控制风格,否则出图不对味）：
**UN. 主体肖像图（Hero 用,椭圆裁切）**
```
Fotografia editoriale vintage anni '70, donna con blazer rosso terracotta, che tiene in mano un microfono cromato in stile retrò, sfondo con tenda di velluto blu scuro o rosso, illuminazione calda al tungsteno, grana della pellicola morbida, collana di perle, rossetto rosso, sguardo rivolto verso il basso o di lato, composizione da copertina di rivista, palette di colori caldi e tenui, scattata su pellicola 35 mm, formato verticale 3:4
```
**B. Informazioni su 区椭圆图（桌面录制场景）**
```
Scrivania vintage per la registrazione di podcast, microfono cromato retrò, occhiali su fogli di sceneggiatura, bicchiere d'acqua, tenda di velluto verde sullo sfondo, superficie in legno caldo, stile editoriale anni '70, illuminazione morbida e calda, grana della pellicola, palette di colori terracotta e verde foresta, 3:4
```
**C/D. Latest Drops 两张卡片图（与 brief 主题相关）**
根据用户的两个 "latest drop" 标题分别生成。例如标题是 "videogiochi retrò" → 一只手拿着粉色任天堂 3DS在窗帘前的复古fotofoto.要求：复古胶片质感、暖色调、构图竖向 3:4.
**E. Perché 区椭圆图 ×2（不同视角的人物近景）**
```
Fotografia editoriale vintage in primo piano di una donna con blazer rosso, che tiene all'orecchio un telefono a disco arancione in stile retrò, sfondo con tenda di velluto verde, illuminazione calda anni '70, grana della pellicola, formato 3:4.
```
+
```
Primo piano delle mani di una donna con maniche rosse che digita su una macchina da scrivere vintage, scrivania in legno caldo, grana della pellicola, atmosfera editoriale anni '70, 3:4
```
**F. 4–5 个半色调复古装饰元素（必须透明背景!）**
这一组是风格灵魂,每个独立生成,**必须用 gemini-3.1-flash-image-preview 模型**（Immagine GPT 处理透明 alpha 不可靠）, prompt模板：
```
Illustrazione a mezzatinta e bicolore di [oggetto], realizzata solo con punti rosso mattone, stile di stampa di riviste vintage anni '70, motivo a mezzatinta a punti visibile, il soggetto è isolato su uno sfondo completamente trasparente con canale alfa, nessun riempimento di sfondo, stile PNG ritagliato, composizione semplice e piatta, solo punti rossi visibili, tutto il resto trasparente
```
[oggetto] 依次替换为: megafono（喇叭）/ cuffie（耳机）/ labbra rosse（嘴唇）/ testa di giraffa（长颈鹿头）/ TV a tubo retrò o desktop anni '80 computer (老电视或老式电脑）).
**保险措施**：即使用了正确的 prompt,模型可能仍然给出米白底而非真透明。所以在 Step 4 的 CSS里**必须给所有半色调装饰图加 `mix-blend-mode: scurire;`**,让米白底自动融入页面背景,只保留红点图案。这是兜底规则,不能省略。
URL 收集到一个清单里,标注每张图归属哪个区块.
**Passaggio 4 · Genera pagina Web 一次性出页（视觉 DNA 必须完整传过去）**
Nel generareWebpage,prompt 里**完整粘贴**下面这份 Style DNA,再附上 Step 1 in breve e in Step 3 的图片清单.as_artifact: true。
---
**【Style DNA · 必须严格遵守】**
**色板（CSS 变量级精度）**：
- `--rose`: #F4A8A0（顶部玫粉 ，Hero 与 Footer 背景）
- `--cream`: #E5DCC2（中段米杏, Informazioni/Ultime/Perché/Contatti 背景）
- `--brick`: #B8472D（标题/导航文字/装饰描边）
- `--ink`: #2C1810（正文小字）
- `--cream-light`: #F2EBD8（气泡内部填充）
Immagine di formato 8–16px in formato 8-16px.Hero顶部到画布顶上沿带一点紫灰晕染（rgba(150,140,180,0.25) 径向渐变到 rose）,呼应原稿.
**字体配对（必须用 Google Fonts CDN 加载）**：
- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Sail"` 或 `"Pacifico"` 或 `"Hello Titolo"`,三选一,要丰满有圈、复古糖果感。品牌名字号要爆炸大,desktop 至少 18vw,溢出感强.
- 标题/导航/正文小字：`"Oswald"` 或 `"Bebas Neue"`,全部 `trasformazione testo: maiuscolo`, 字距 `spaziatura lettere: 0.06em`。正文小字 12–13px, 行高 1.4.
- 不要再引入第三种字体.
**Hero 叠化的精确实现（不能省略,不能改）**：
- Sezione Hero 高度设为 `100vh` 或 `95vh`, 使用 `position: relative` + `overflow: hidden`.
- 椭圆人像图：`posizione: assoluta` ，水平居中（`sinistra: 50%; trasforma: TranslateX(-50%)`）,垂直方向 `top: 5vh`,高度约 `70vh`,宽度按 3:4 比例计算（约 `52vh`）,`z-index: 2`,`border-radius: 50% / 60%`,`adattamento all'oggetto: copertina`.
- 巨型品牌名：`posizione: assoluta` ，水平居中 ，垂直方向 `top: 50vh`（**关键**：这个数值要让文字的顶部边线落在人像的纵向中部偏下区域,而不是人像下方）。`font-size: 28vw`,`altezza linea: 0,85`,`colore: var(--crema-chiaro)`,`indice z: 1`（**比人像低**）,`spazio bianco: nowrap`.
- 检查标准:渲染后人像的 alfa通道（人像椭圆边缘）必须能切掉品牌名上半截Vedi di più `top` 值（让字往上挪）或增加人像高度.
- 椭圆台词气泡：`posizione: assoluta; a destra: 6%; superiore: 25%; z-index: 3`,气泡和它指向的方位之间一条竖直虚线.
- 半色调装饰图（喇叭等）：`posizione: assoluta; a destra: 3%; in alto: 10%`,宽 140px,**必须配 `modalità mix-blend: scurisci`**.
- 整个 Hero 区不要用 flex/grid 把元素排成行列——元素之间是绝对定位的叠加关系.
**布局法则（其他区块）**：
- 内容容器最大宽 1280px, 居中.
- 区块之间用 `border-top: 1px dashed var(--brick)` 横线分隔.
- 椭圆图：`border-radius: 50% / 60%`（横向稍扁的鸭蛋形）,不要正圆.
- 椭圆手写气泡：`border-radius: 50% / 70%`,背景 `var(--cream-light)`,描边 `1px tratteggiato var(--brick)` ，内边距充足 ，气泡里的字用显示字体 + brick 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`border-left: 1px tratteggiato var(--brick)` 配 `posizione: assoluta`, 长度60–120px）, 末端点一个小红圆点。这是这个风格的标志符号,每个区块至少出现一处.
- 半色调装饰图固定出现在区块的角落（左下、右上交替）, 120–180px,**全部加 `mix-blend-mode: darken`**.
**Perché 区的硬性规则**：
- 必须用 Passo 3 生成的两张 Perché 真实人物椭圆fotofoto,左右并排放在区块顶部.
- **禁止**用 emoji、Icona materiale、Font Awesome 等任何通用 icona 替代照片或填充 "feature 卡片"。这个风格不存在 "feature 卡片" 概念.
- 4 列正文是横向多列文字流, 不是 4 个图标卡foto.
**正文写法**：
- 所有 nav、etichetta della sezione、titolo della carta、intestazione 全部 ALL CAPS.
- 正文小字段落用多列（CSS `column-count: 3` 或 `column-count: 4`）实现窄栏报刊感,不要单列大段。
- 标题色一律 `var(--brick)`, 正文色 `var(--ink)`.
**页脚**：保留 "Termini e supporto · Informativa sulla privacy · Progettato con [品牌名]" 三行小字,左下角对齐,米杏色.
**响应式**：移动端品牌字号降到 28vw（保持）,多列正文降到单列,椭圆图缩到 70% Hero 叠化在移动端依然成立——人像高度可以缩到50vh,品牌字top 跟着调到 35vh 维持遮挡关系.
---
把 brief 里 7 段文案、图片 URL 清单（标注每张归属）一起塞进 generateWebpage 的 prompt,让它一次出页.
**Passaggio 5 · 交付 + 微调入口**
生成完后, 把 pagina web 链接给用户, 然后用一句话主动给出 3 个最高频的微调方向, 让用户直接点：
1. 换主体肖像图（重新跑 Step 3 的 A 图,换一种姿态/服装）
2. 调色板偏移（比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构, 只换色值）
3. 加 / 删 / 重排区块（按 Passo 2 的 7 段骨架调整）
用户选了哪一项就只重跑对应步骤,不要全量重生.
Descrizione
Questa skill permette di creare un sito web a pagina singola, distintivo e ispirato al retrò, perfetto per podcaster, brand personali o piccole imprese che desiderano una presenza online unica. Cattura l'estetica dei layout delle riviste vintage e del design editoriale degli anni '70. Gli utenti possono fornire il nome del proprio brand, uno slogan accattivante e i contenuti per diverse sezioni come "Chi siamo", "Ultime novità" e "Contatti". La skill genera quindi in modo intelligente una pagina web completa e visivamente ricca. Tra le funzionalità principali figurano la creazione di una sezione "Hero" di grande impatto con testo e immagini sovrapposti, blocchi di contenuto dinamici e navigazione personalizzata. Offre anche la generazione di immagini tramite intelligenza artificiale per un look vintage coerente, inclusi elementi decorativi a mezzatinta e fotografie appropriate al periodo, qualora l'utente non ne fornisca di proprie. Il processo prevede la raccolta delle preferenze e dei contenuti del sito web, quindi l'assemblaggio di un design a pagina intera che rispetti uno specifico linguaggio visivo. Il risultato finale è una pagina web attiva, completa di un URL univoco, pronta per essere condivisa. Gli utenti hanno inoltre a disposizione opzioni per apportare modifiche rapide, come sostituire le immagini principali, ritoccare la palette di colori o riordinare le sezioni, garantendo che il sito finale corrisponda perfettamente alla loro visione.
Perché consigliamo questa abilità
Questa competenza permette di creare un sito web vivace e dal tema retrò, con una sezione hero a livelli unica, perfetto per podcaster e piccoli marchi. La sua estetica vintage distintiva e i dettagli di design meticolosi lo rendono davvero eccezionale.
Abilità correlate
Vedi tutto
Presentazione con animazione di particelle (HTML)
Questa skill genera un sito web elegante, a pagina singola, con un'estetica futuristica in bianco e nero di grande impatto, ideale per presentare un nuovo prodotto, il portfolio di un artista o un biglietto da visita digitale. È pensata per privati o aziende che necessitano di una presenza online di grande impatto visivo senza la complessità dello sviluppo di siti web tradizionali. La skill produce un file HTML autonomo con 4-5 sezioni a scorrimento fluido, ciascuna progettata per catturare l'attenzione con una tipografia minimalista ed elementi ad alto contrasto. Lo sfondo prende vita con un'animazione monocromatica personalizzata, come particelle in movimento o sottili sfumature di rumore, che crea un'atmosfera dinamica e high-tech senza ricorrere a contenuti multimediali esterni. Al caricamento, la pagina accoglie i visitatori con un'accattivante animazione di benvenuto: un testo che appare con un effetto "sopracciglio" stilizzato, seguito da un drammatico effetto "scramble" per il titolo principale e da una dissolvenza in entrata per il sottotitolo. Il contenuto delle sezioni successive appare poi in modo fluido man mano che l'utente scorre la pagina, garantendo un'esperienza immersiva e coinvolgente. Tutte le immagini fornite dall'utente vengono automaticamente convertite in scala di grigi per mantenere la coerenza del tema visivo. Il risultato finale è una pagina web reattiva, accessibile e performante, fornita come un singolo file HTML pronto per la pubblicazione.
ImmaginePoster landing page YouMind
Trasforma i tuoi contenuti in una narrazione visiva sorprendente con un poster in stile landing page YouMind. Questa skill crea bellissimi poster infografici che catturano l'attenzione con un'estetica unica di Retrofuturismo Naturale. Perfetto per mostrare dati chiave, punti salienti di progetti o caratteristiche di prodotti, le tue informazioni saranno presentate in un formato sofisticato e facilmente digeribile. Sfruttando una palette di colori bilanciata tra freddi e caldi, con una base grigio-azzurro chiaro e accenti delicati beige-pesca, ogni poster incarna un'atmosfera UI moderna. Aspettati una tipografia elegante, con l'autorevole Source Han Serif per i titoli e un pulito sans-serif per il corpo del testo, garantendo leggibilità. Il layout utilizza una griglia Bento dinamica, organizzando i tuoi contenuti in card visivamente accattivanti dai bordi morbidi, con ampio spazio di respiro, evitando design affollati. Oltre alle immagini sorprendenti, la skill integra elementi di design sottili come una grana cinematografica uniforme, un rendering impressionistico e icone opzionali in vetro smerigliato per i tuoi dati. Un singolo prisma triangolare traslucido può essere aggiunto come accento elegante, mentre il logo ufficiale YouMind è sempre posizionato discretamente per mantenere la coerenza del marchio. Il risultato è un'infografica professionale, ariosa e moderna che comunica efficacemente il tuo messaggio.
Conferma di partecipazione al matrimonio
Questa skill genera un sito web per matrimoni o eventi, elegante e di stampo editoriale, perfetto per le coppie che desiderano un invito online moderno e sofisticato. È pensata per chiunque voglia una presenza digitale distintiva per il proprio giorno speciale, andando oltre i modelli tradizionali. La skill cattura un'estetica unica ispirata al design editoriale di alta gamma, con uno sfondo bianco pulito, caratteri sans-serif di grandi dimensioni e caldi accenti rossi. Può integrare le immagini fornite dall'utente o generare due immagini cinematografiche in stile Wes Anderson – un banner principale e un'immagine narrativa – con una coppia con il caratteristico cappellino da baseball rosso, sullo sfondo di un paesaggio urbano o di un giardino con una calda luce dorata. Gli utenti devono semplicemente fornire i dettagli principali come i nomi, la data e il luogo dell'evento. La skill crea quindi una pagina web completa e responsive, comprensiva di barra di navigazione fissa, una sezione principale di rilievo, un modulo di conferma presenza, una sezione dedicata "La nostra storia", i dettagli dell'evento e le informazioni di contatto. Il risultato finale è una pagina web HTML pronta all'uso, consegnata come file, che può essere ulteriormente personalizzata se necessario.
Sito podcaster Pink Retro
For profile, small brands, and event landing page.
Istruzioni
**Passaggio 1 · Breve descrizione（一次问完,宁多勿少）**
用 askUserQuestion 一次性确认这些字段,不要分多轮慢慢挤:
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现,建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / slogan（会出现在椭圆手写气泡里,可中可英可西语, 越个性越好；用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：Informazioni/Ultimi arrivi/Contatti/Iscriviti,用户可加可减）
5. Cerca
6. 图片来源：用户上传 vs. abilità 自动生成（默认自动生成）
7. 邮箱、社媒 handle 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后,把所有字段整理进一个内部 breve 备用,下面所有步骤都从这个 breve取数,不要再回头追问.
**Passaggio 2 · Passo 7: 段式骨架**
不要发明新结构。 把 brief 里的内容硬塞进下面 7 段：
1. **Nav superiore**:左侧品牌名（小字 tutto maiuscolo）+ 右侧 3–4 Tutte le maiuscole.
2. **Hero（核心叠化效果,最关键的一段,不能做成上下堆叠）**：椭圆裁切的人物/主体大图 + **这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 到 1/2 被人像的下半部分遮挡,呈现「字从人像背后钻出来」的报Vedi di più L、l 的圆头、k 的上划）应该被人像 alfa 通道盖住,看不到完整字形。如果能完整看到品牌名所有字母,就是失败的堆叠,必须重做。→右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **Informazioni**：左侧大写小标题 "SU DI ME"（红色）+ 右侧大段副标题（红色 tutto maiuscolo,2 行换行）→下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰,比如嘴唇）→ 右侧 3列等宽小字正文。背景：米杏。
4. **Ultimi Drop / In primo piano**：标题 "THE LATEST DROPS"（或对应主题词）+ 两张高瘦矩形卡片,卡片标题用 tutto in maiuscolo黑色压在图片下半部。卡片上方各有 "STAGIONE X EPISODIO Y"形式的小字说明（横虚线分隔）。左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画。背景：米杏。
5. **Perché / Missione**：顶部左右并排两张椭圆图（用 Perché 区生成的两张人物近景照片,不要用 icona 替代）→大写小标题 "PERCHÉ SINTONIZZARTI?" → 4 列等宽小字正文（每列一段，问句结尾）→ 右侧椭圆手写气泡 "Iscriviti alla mia mailing list" 形式 +半色调红色复古插画（比如长颈鹿或猫）。背景：米杏。**禁止用通用 icona(emoji / icona SVG / Materiale Icons）替代真实foto**.
6. **Contatto**：左侧 "CONTATTO" + 右侧 "COLPISCIMI!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →右侧再来一颗椭圆手写气泡 + 半色调红色复古电脑/电话插画。背景：米杏。
7. **Footer Hero**：再次让巨型手写体品牌名横跨全宽出现一遍（同 Hero叠化逻辑：底部插画/装饰元素遮挡品牌名顶部）→ 右上一颗椭圆手写气泡 → 底部小字 "Termini e supporto · Informativa sulla privacy · Progettato con [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过,不要硬塞；但顺序不能乱.
**Passaggio 3 · 准备图片资产（用户没传就自己生）**
这个风格强依赖图片 ，没图就崩了。检查 breve：
-用户**已上传**图foto:直接用,但提醒用户foto片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏。不满足就在下一步靠装饰图救场。
- 用户**未上传**：调用 generateImage 生成下面这 6 张（每张独立调用, prompt必须按下面写法精确控制风格,否则出图不对味）：
**UN. 主体肖像图（Hero 用,椭圆裁切）**
```
Fotografia editoriale vintage anni '70, donna con blazer rosso terracotta, che tiene in mano un microfono cromato in stile retrò, sfondo con tenda di velluto blu scuro o rosso, illuminazione calda al tungsteno, grana della pellicola morbida, collana di perle, rossetto rosso, sguardo rivolto verso il basso o di lato, composizione da copertina di rivista, palette di colori caldi e tenui, scattata su pellicola 35 mm, formato verticale 3:4
```
**B. Informazioni su 区椭圆图（桌面录制场景）**
```
Scrivania vintage per la registrazione di podcast, microfono cromato retrò, occhiali su fogli di sceneggiatura, bicchiere d'acqua, tenda di velluto verde sullo sfondo, superficie in legno caldo, stile editoriale anni '70, illuminazione morbida e calda, grana della pellicola, palette di colori terracotta e verde foresta, 3:4
```
**C/D. Latest Drops 两张卡片图（与 brief 主题相关）**
根据用户的两个 "latest drop" 标题分别生成。例如标题是 "videogiochi retrò" → 一只手拿着粉色任天堂 3DS在窗帘前的复古fotofoto.要求：复古胶片质感、暖色调、构图竖向 3:4.
**E. Perché 区椭圆图 ×2（不同视角的人物近景）**
```
Fotografia editoriale vintage in primo piano di una donna con blazer rosso, che tiene all'orecchio un telefono a disco arancione in stile retrò, sfondo con tenda di velluto verde, illuminazione calda anni '70, grana della pellicola, formato 3:4.
```
+
```
Primo piano delle mani di una donna con maniche rosse che digita su una macchina da scrivere vintage, scrivania in legno caldo, grana della pellicola, atmosfera editoriale anni '70, 3:4
```
**F. 4–5 个半色调复古装饰元素（必须透明背景!）**
这一组是风格灵魂,每个独立生成,**必须用 gemini-3.1-flash-image-preview 模型**（Immagine GPT 处理透明 alpha 不可靠）, prompt模板：
```
Illustrazione a mezzatinta e bicolore di [oggetto], realizzata solo con punti rosso mattone, stile di stampa di riviste vintage anni '70, motivo a mezzatinta a punti visibile, il soggetto è isolato su uno sfondo completamente trasparente con canale alfa, nessun riempimento di sfondo, stile PNG ritagliato, composizione semplice e piatta, solo punti rossi visibili, tutto il resto trasparente
```
[oggetto] 依次替换为: megafono（喇叭）/ cuffie（耳机）/ labbra rosse（嘴唇）/ testa di giraffa（长颈鹿头）/ TV a tubo retrò o desktop anni '80 computer (老电视或老式电脑）).
**保险措施**：即使用了正确的 prompt,模型可能仍然给出米白底而非真透明。所以在 Step 4 的 CSS里**必须给所有半色调装饰图加 `mix-blend-mode: scurire;`**,让米白底自动融入页面背景,只保留红点图案。这是兜底规则,不能省略。
URL 收集到一个清单里,标注每张图归属哪个区块.
**Passaggio 4 · Genera pagina Web 一次性出页（视觉 DNA 必须完整传过去）**
Nel generareWebpage,prompt 里**完整粘贴**下面这份 Style DNA,再附上 Step 1 in breve e in Step 3 的图片清单.as_artifact: true。
---
**【Style DNA · 必须严格遵守】**
**色板（CSS 变量级精度）**：
- `--rose`: #F4A8A0（顶部玫粉 ，Hero 与 Footer 背景）
- `--cream`: #E5DCC2（中段米杏, Informazioni/Ultime/Perché/Contatti 背景）
- `--brick`: #B8472D（标题/导航文字/装饰描边）
- `--ink`: #2C1810（正文小字）
- `--cream-light`: #F2EBD8（气泡内部填充）
Immagine di formato 8–16px in formato 8-16px.Hero顶部到画布顶上沿带一点紫灰晕染（rgba(150,140,180,0.25) 径向渐变到 rose）,呼应原稿.
**字体配对（必须用 Google Fonts CDN 加载）**：
- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Sail"` 或 `"Pacifico"` 或 `"Hello Titolo"`,三选一,要丰满有圈、复古糖果感。品牌名字号要爆炸大,desktop 至少 18vw,溢出感强.
- 标题/导航/正文小字：`"Oswald"` 或 `"Bebas Neue"`,全部 `trasformazione testo: maiuscolo`, 字距 `spaziatura lettere: 0.06em`。正文小字 12–13px, 行高 1.4.
- 不要再引入第三种字体.
**Hero 叠化的精确实现（不能省略,不能改）**：
- Sezione Hero 高度设为 `100vh` 或 `95vh`, 使用 `position: relative` + `overflow: hidden`.
- 椭圆人像图：`posizione: assoluta` ，水平居中（`sinistra: 50%; trasforma: TranslateX(-50%)`）,垂直方向 `top: 5vh`,高度约 `70vh`,宽度按 3:4 比例计算（约 `52vh`）,`z-index: 2`,`border-radius: 50% / 60%`,`adattamento all'oggetto: copertina`.
- 巨型品牌名：`posizione: assoluta` ，水平居中 ，垂直方向 `top: 50vh`（**关键**：这个数值要让文字的顶部边线落在人像的纵向中部偏下区域,而不是人像下方）。`font-size: 28vw`,`altezza linea: 0,85`,`colore: var(--crema-chiaro)`,`indice z: 1`（**比人像低**）,`spazio bianco: nowrap`.
- 检查标准:渲染后人像的 alfa通道（人像椭圆边缘）必须能切掉品牌名上半截Vedi di più `top` 值（让字往上挪）或增加人像高度.
- 椭圆台词气泡：`posizione: assoluta; a destra: 6%; superiore: 25%; z-index: 3`,气泡和它指向的方位之间一条竖直虚线.
- 半色调装饰图（喇叭等）：`posizione: assoluta; a destra: 3%; in alto: 10%`,宽 140px,**必须配 `modalità mix-blend: scurisci`**.
- 整个 Hero 区不要用 flex/grid 把元素排成行列——元素之间是绝对定位的叠加关系.
**布局法则（其他区块）**：
- 内容容器最大宽 1280px, 居中.
- 区块之间用 `border-top: 1px dashed var(--brick)` 横线分隔.
- 椭圆图：`border-radius: 50% / 60%`（横向稍扁的鸭蛋形）,不要正圆.
- 椭圆手写气泡：`border-radius: 50% / 70%`,背景 `var(--cream-light)`,描边 `1px tratteggiato var(--brick)` ，内边距充足 ，气泡里的字用显示字体 + brick 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`border-left: 1px tratteggiato var(--brick)` 配 `posizione: assoluta`, 长度60–120px）, 末端点一个小红圆点。这是这个风格的标志符号,每个区块至少出现一处.
- 半色调装饰图固定出现在区块的角落（左下、右上交替）, 120–180px,**全部加 `mix-blend-mode: darken`**.
**Perché 区的硬性规则**：
- 必须用 Passo 3 生成的两张 Perché 真实人物椭圆fotofoto,左右并排放在区块顶部.
- **禁止**用 emoji、Icona materiale、Font Awesome 等任何通用 icona 替代照片或填充 "feature 卡片"。这个风格不存在 "feature 卡片" 概念.
- 4 列正文是横向多列文字流, 不是 4 个图标卡foto.
**正文写法**：
- 所有 nav、etichetta della sezione、titolo della carta、intestazione 全部 ALL CAPS.
- 正文小字段落用多列（CSS `column-count: 3` 或 `column-count: 4`）实现窄栏报刊感,不要单列大段。
- 标题色一律 `var(--brick)`, 正文色 `var(--ink)`.
**页脚**：保留 "Termini e supporto · Informativa sulla privacy · Progettato con [品牌名]" 三行小字,左下角对齐,米杏色.
**响应式**：移动端品牌字号降到 28vw（保持）,多列正文降到单列,椭圆图缩到 70% Hero 叠化在移动端依然成立——人像高度可以缩到50vh,品牌字top 跟着调到 35vh 维持遮挡关系.
---
把 brief 里 7 段文案、图片 URL 清单（标注每张归属）一起塞进 generateWebpage 的 prompt,让它一次出页.
**Passaggio 5 · 交付 + 微调入口**
生成完后, 把 pagina web 链接给用户, 然后用一句话主动给出 3 个最高频的微调方向, 让用户直接点：
1. 换主体肖像图（重新跑 Step 3 的 A 图,换一种姿态/服装）
2. 调色板偏移（比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构, 只换色值）
3. 加 / 删 / 重排区块（按 Passo 2 的 7 段骨架调整）
用户选了哪一项就只重跑对应步骤,不要全量重生.
Descrizione
Questa skill permette di creare un sito web a pagina singola, distintivo e ispirato al retrò, perfetto per podcaster, brand personali o piccole imprese che desiderano una presenza online unica. Cattura l'estetica dei layout delle riviste vintage e del design editoriale degli anni '70. Gli utenti possono fornire il nome del proprio brand, uno slogan accattivante e i contenuti per diverse sezioni come "Chi siamo", "Ultime novità" e "Contatti". La skill genera quindi in modo intelligente una pagina web completa e visivamente ricca. Tra le funzionalità principali figurano la creazione di una sezione "Hero" di grande impatto con testo e immagini sovrapposti, blocchi di contenuto dinamici e navigazione personalizzata. Offre anche la generazione di immagini tramite intelligenza artificiale per un look vintage coerente, inclusi elementi decorativi a mezzatinta e fotografie appropriate al periodo, qualora l'utente non ne fornisca di proprie. Il processo prevede la raccolta delle preferenze e dei contenuti del sito web, quindi l'assemblaggio di un design a pagina intera che rispetti uno specifico linguaggio visivo. Il risultato finale è una pagina web attiva, completa di un URL univoco, pronta per essere condivisa. Gli utenti hanno inoltre a disposizione opzioni per apportare modifiche rapide, come sostituire le immagini principali, ritoccare la palette di colori o riordinare le sezioni, garantendo che il sito finale corrisponda perfettamente alla loro visione.
Perché consigliamo questa abilità
Questa competenza permette di creare un sito web vivace e dal tema retrò, con una sezione hero a livelli unica, perfetto per podcaster e piccoli marchi. La sua estetica vintage distintiva e i dettagli di design meticolosi lo rendono davvero eccezionale.
Abilità correlate
Vedi tuttoPresentazione con animazione di particelle (HTML)
Questa skill genera un sito web elegante, a pagina singola, con un'estetica futuristica in bianco e nero di grande impatto, ideale per presentare un nuovo prodotto, il portfolio di un artista o un biglietto da visita digitale. È pensata per privati o aziende che necessitano di una presenza online di grande impatto visivo senza la complessità dello sviluppo di siti web tradizionali. La skill produce un file HTML autonomo con 4-5 sezioni a scorrimento fluido, ciascuna progettata per catturare l'attenzione con una tipografia minimalista ed elementi ad alto contrasto. Lo sfondo prende vita con un'animazione monocromatica personalizzata, come particelle in movimento o sottili sfumature di rumore, che crea un'atmosfera dinamica e high-tech senza ricorrere a contenuti multimediali esterni. Al caricamento, la pagina accoglie i visitatori con un'accattivante animazione di benvenuto: un testo che appare con un effetto "sopracciglio" stilizzato, seguito da un drammatico effetto "scramble" per il titolo principale e da una dissolvenza in entrata per il sottotitolo. Il contenuto delle sezioni successive appare poi in modo fluido man mano che l'utente scorre la pagina, garantendo un'esperienza immersiva e coinvolgente. Tutte le immagini fornite dall'utente vengono automaticamente convertite in scala di grigi per mantenere la coerenza del tema visivo. Il risultato finale è una pagina web reattiva, accessibile e performante, fornita come un singolo file HTML pronto per la pubblicazione.
ImmaginePoster landing page YouMind
Trasforma i tuoi contenuti in una narrazione visiva sorprendente con un poster in stile landing page YouMind. Questa skill crea bellissimi poster infografici che catturano l'attenzione con un'estetica unica di Retrofuturismo Naturale. Perfetto per mostrare dati chiave, punti salienti di progetti o caratteristiche di prodotti, le tue informazioni saranno presentate in un formato sofisticato e facilmente digeribile. Sfruttando una palette di colori bilanciata tra freddi e caldi, con una base grigio-azzurro chiaro e accenti delicati beige-pesca, ogni poster incarna un'atmosfera UI moderna. Aspettati una tipografia elegante, con l'autorevole Source Han Serif per i titoli e un pulito sans-serif per il corpo del testo, garantendo leggibilità. Il layout utilizza una griglia Bento dinamica, organizzando i tuoi contenuti in card visivamente accattivanti dai bordi morbidi, con ampio spazio di respiro, evitando design affollati. Oltre alle immagini sorprendenti, la skill integra elementi di design sottili come una grana cinematografica uniforme, un rendering impressionistico e icone opzionali in vetro smerigliato per i tuoi dati. Un singolo prisma triangolare traslucido può essere aggiunto come accento elegante, mentre il logo ufficiale YouMind è sempre posizionato discretamente per mantenere la coerenza del marchio. Il risultato è un'infografica professionale, ariosa e moderna che comunica efficacemente il tuo messaggio.
Conferma di partecipazione al matrimonio
Questa skill genera un sito web per matrimoni o eventi, elegante e di stampo editoriale, perfetto per le coppie che desiderano un invito online moderno e sofisticato. È pensata per chiunque voglia una presenza digitale distintiva per il proprio giorno speciale, andando oltre i modelli tradizionali. La skill cattura un'estetica unica ispirata al design editoriale di alta gamma, con uno sfondo bianco pulito, caratteri sans-serif di grandi dimensioni e caldi accenti rossi. Può integrare le immagini fornite dall'utente o generare due immagini cinematografiche in stile Wes Anderson – un banner principale e un'immagine narrativa – con una coppia con il caratteristico cappellino da baseball rosso, sullo sfondo di un paesaggio urbano o di un giardino con una calda luce dorata. Gli utenti devono semplicemente fornire i dettagli principali come i nomi, la data e il luogo dell'evento. La skill crea quindi una pagina web completa e responsive, comprensiva di barra di navigazione fissa, una sezione principale di rilievo, un modulo di conferma presenza, una sezione dedicata "La nostra storia", i dettagli dell'evento e le informazioni di contatto. Il risultato finale è una pagina web HTML pronta all'uso, consegnata come file, che può essere ulteriormente personalizzata se necessario.
Trova la tua prossima abilità preferita
Esplora altre abilità AI curate per ricerca, creazione e lavoro quotidiano.