Site de podcasteur rétro rose
For profile, small brands, and event landing page.
Instructions
**Étape 1 · Bref de présentation (一次问完，宁多勿少)**
La question posée à l'utilisateur par AskUserQuestion est la suivante :
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现，建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / slogan (会出现在椭圆手写气泡里),可中可英可西语，越个性越好；用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：À propos / Dernières nouveautés / Contact / Abonnez-vous，用户可加可减）
5.
6. 图片来源 : 用户上传 contre la compétence 自动生成 (默认自动生成)
7. 邮箱、社媒 handle 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后，下面所有步骤都从这个 bref取数，不要再回头追问。
**Étape 2 · 套用规范的 7 段式骨架**
这个风格的页面结构是固定的，不要发明新结构。把 brief 里的内容硬塞进下面 7 jours :
1. **Top Nav**：左侧品牌名（小字 tout en majuscules）+ 右侧 3–4个导航链接（tout en majuscules，下划虚线）。背景延续顶部玫粉色。
2. **Héros（核心叠化效果，最关键的一段，不能做成上下堆叠）**：椭圆裁切的人物/主体大图 +巨型写体品牌名横跨整宽。**这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 et 1/2 被人像的下半部分遮挡，呈现「字从人像背后钻出来」的报刊封面感。判断标准：在最终截图上，品牌名顶端的字母（如L、l 的圆头、k 的上划）应该被人像 alpha 通道盖住，看不到完整字形。如果能完整看到品牌名所有字母，就是失败的堆叠，必须重做。→右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **À propos**：左侧大写小标题 "À PROPOS DE MOI"（红色）+ 右侧大段副标题（红色 tout en majuscules，2 行换行）→下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰，比如嘴唇）→ 右侧 3 列等宽小字正文。背景：米杏。
4. **Dernières gouttes / En vedette**：标题 "LES DERNIÈRES GOUTTES" (或对应主题词) + 两张高瘦矩形卡片，卡片标题用 toutes en majuscules "SAISON X EPISODE Y"形式的小字说明（横虚线分隔）。左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画。背景：米杏。
5. **Pourquoi / Mission**：顶部左右并排两张椭圆图（用 Pourquoi 区生成的两张人物近景照片，不要用 icon 替代）→大写小标题 "POURQUOI DEVRIEZ-VOUS VOUS INSCRIRE ?" → 4 avis sur "Rejoindre ma liste de diffusion" + Icône Emoji / Icône SVG / Matériel Icônes）替代真实照photo**。
6. **Contact**：左侧 "CONTACT" + 右侧 "HIT ME UP!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →背景：米杏。
7. **Héros du pied de page**：再次让巨型手写体品牌名横跨全宽出现一遍（同 Héros Conditions d'utilisation · Politique de confidentialité · Conçu avec [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过，不要硬塞；但顺序不能乱。
**Étape 3 · 准备图片资产（用户没传就自己生）**
这个风格强依赖图片，没图就崩了。检查 brève：
- 用户**已上传**图片：直接用，但提醒用户照片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏。不满足就在下一步靠装饰图救场。
- 用户**未上传**：调用 generateImage 生成下面这 6 ans (每张独立调用，invite必须按下面写法精确控制风格，否则出图不对味） :
**UN. 主体肖像图（Héros 用，椭圆裁切）**
```
Photographie de portrait éditorial vintage des années 1970, femme portant un blazer rouge terracotta, tenant un microphone chromé rétro, fond de rideau de velours bleu marine ou rouge foncé, éclairage chaud tungstène, grain de film doux, collier de perles, rouge à lèvres rouge, regardant vers le bas ou sur le côté, composition de couverture de magazine, palette de couleurs chaudes et douces, prise sur film 35 mm, format vertical 3:4
```
**B. À propos de 区椭圆图（桌面录制场景）**
```
Bureau d'enregistrement de podcast vintage, microphone chromé rétro, lunettes sur des feuilles de script, verre d'eau, rideau de velours vert en arrière-plan, surface en bois aux tons chauds, style éditorial des années 1970, éclairage doux et chaud, grain de pellicule, palette de couleurs terracotta et vert forêt, format 3:4
```
**C / D. Dernières sorties 两张卡片图（与 brief 主题相关）**
Il s'agit de "dernière version" et il s'agit de "jeux vidéo rétro" → 3DS.在窗帘前的复古照片。要求：复古胶片质感、暖色调、构图竖向 3:4。
**E. Pourquoi 区椭圆图 ×2（不同视角的人物近景）**
```
Gros plan d'une photographie éditoriale vintage d'une femme en blazer rouge, tenant un téléphone à cadran orange rétro à l'oreille, sur fond de rideau de velours vert, éclairage chaud des années 70, grain de film, format 3:4
```
+
```
Gros plan sur les mains d'une femme aux manches rouges tapant sur une machine à écrire vintage, bureau en bois chaleureux, grain de pellicule, ambiance éditoriale des années 70, 3:4
```
**F. 4–5 jours
**Afficher la version gemini-3.1-flash-image-preview**（GPT Image et alpha 不可靠），invite À propos :
```
Illustration en demi-teintes bichromiques d'un [objet], réalisée uniquement en points rouge brique, dans le style des magazines vintage des années 1970. Le motif de points de demi-teintes est visible, le sujet est isolé sur un fond entièrement transparent avec canal alpha, sans remplissage. Format PNG détouré, composition simple et plate, seuls les points rouges sont visibles, le reste est transparent.
```
[objet] 依次替换为：mégaphone（喇叭）/ écouteurs（耳机）/ lèvres rouges（嘴唇）/ tête de girafe（长颈鹿头）/ téléviseur à tube rétro ou ordinateur de bureau des années 1980 ordinateur (老电视或老式电脑)。
**保险措施**：即使用了正确的,模型可能仍然给出米白底而非真透明。所以在 Étape 4 en CSS Le mode mix-blend : darken;`**，让米白底自动融入页面背景，只保留红点图案。这是兜底规则，不能省略。
L'URL de l'URL est la suivante:
**Étape 4 · Générer une page Web 一次性出页（视觉 DNA 必须完整传过去）**
Il s'agit de generateWebpage，prompt 里**完整粘贴**下面这份 Style DNA，再附上 Step 1 的 brief 内容和 Step 3 的图片清单。as_artifact: true。
---
**【ADN de style · 必须严格遵守】**
**色板（CSS 变量级精度）**：
- `--rose` : #F4A8A0（顶部玫粉，Hero 与 Footer 背景）
- `--cream` : #E5DCC2（中段米杏，À propos / Dernières / Pourquoi / Contact 背景）
- `--brick` : #B8472D（标题/导航文字/装饰描边）
- `--ink` : #2C1810（正文小字）
- `--cream-light` : #F2EBD8（气泡内部填充）
顶部玫粉到米杏之间用 8–16px 的渐变过渡带，不要硬切。Héros La couleur rose est rgba(150,140,180,0.25) et rose），呼应原稿.
**字体配对(必须用Google Fonts CDN)**：
- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Sail"` et `"Pacifico"` et `"Bonjour Headline"`，三选一，要丰满有圈、复古糖果感。品牌名字号要爆炸大，bureau 至少 18vw，溢出感强。
- Modèles/导航/正文小字：`"Oswald"` à `"Bebas Neue"`, ainsi que `text-transform: majuscule`, et `lettre-espacement: 0,06em`。正文小字 12–13px,行高1.4.
- 不要再引入第三种字体。
**Héros 叠化的精确实现（不能省略，不能改）**：
- Section Héros `100vh` et `95vh`, avec `position : relative` + `débordement : caché`。
- 椭圆人像图：`position : absolue`，水平居中（`gauche : 50 % ; transform: TranslateX(-50%)`），垂直方向 `top: 5vh`，高度约 `70vh`，宽度按 3:4 比例计算（约 `52vh`），`z-index: 2`，`border-radius: 50% / 60 %`，`ajustement de l'objet : couverture`。
- 巨型品牌名：`position : absolue`，水平居中，垂直方向 `top : 50vh`（**关键**：这个数值要让文字的顶部边线落在人像的纵向中部偏下区域，而不是人像下方)。`font-size : 28vw`，`hauteur de ligne : 0,85`，`couleur : var(--cream-light)`，`z-index : 1`（**比人像低**），`espace blanc : nowrap`。
- 检查标准：渲染后人像的 alpha通道（人像椭圆边缘）必须能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，调小`top` 值（让字往上挪）或增加人像高度。
- 椭圆台词气泡：`position : absolue ; à droite : 6 % ; haut : 25 % ; z-index : 3`，
- 半色调装饰图（喇叭等）：`position : absolue ; à droite : 3 % ; top : 10 %`，宽 140px，**必须配 `mix-blend-mode: darken`**。
- Le héros Hero utilise flex/grid pour créer un système flexible/grille.
**布局法则（其他区块）**：
- Taille de la photo 1280px，居中。
- Il s'agit de `border-top: 1px dashed var(--brick)` qui est utilisé.
- 椭圆图：`border-radius: 50% / 60%`（横向稍扁的鸭蛋形），不要正圆。
- Nom du produit :`border-radius: 50% / 70%`, en utilisant `var(--cream-light)`, en utilisant `1px en pointillés var(--brick)`，内边距充足，气泡里的字用显示字体 + brique 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`border-left: 1px dashed var(--brick)` et `position: absolue`，长度60–120px），末端点一个小红圆点。这是这个风格的标志符号，每个区块至少出现一处。
- La taille de l'image est de 120 à 180 pixels, ** avec `mix-blend-mode: darken`**.
**Pourquoi 区的硬性规则**：
- 必须用 Step 3 生成的两张 Pourquoi 真实人物椭圆照片，左右并排放在区块顶部。
- **禁止**用 emoji、Material Icon、Font Awesome 等任何通用 icône 替代照片或填充 "feature 卡片"。这个风格不存在 "feature 卡片" 概念。
- 4 heures de lecture et 4 heures de lecture.
**正文写法**：
- 所有 nav、étiquette de section、titre de la carte、titre en MAJUSCULES。
- Nombre de colonnes CSS : 3 et nombre de colonnes : 4.
- Il y a `var(--brick)`, et `var(--ink)`。
**页脚**：保留 "Conditions et assistance · Politique de confidentialité · Conçu avec [品牌名]" 三行小字，左下角对齐，米杏色。
**响应式**：移动端品牌字号降到 28vw（保持），多列正文降到单列，椭圆图缩到 70 %宽度居中，装饰图缩到 80px 并保留位置。Hero 叠化在移动端依然成立——人像高度可以缩到50vh，品牌字 haut 跟着调到 35vh 维持遮挡关系。
---
Il s'agit d'un bref article 7 sur l'URL de la page Web générée par l'invite, qui vous permet de générer une page Web.
**Étape 5 · 交付 + 微调入口**
生成完后，把 page Web 链接给用户，然后用一句话主动给出 3 个最高频的微调方向，让用户直接点：
1. 换主体肖像图（重新跑 Étape 3 的 A 图，换一种姿态/服装）
2.
3. 加 / 删 / 重排区块（按 Étape 2 et 7ème étape）
用户选了哪一项就只重跑对应步骤，不要全量重生。
Description
Cette fonctionnalité crée un site web monopage unique, d'inspiration rétro, idéal pour les podcasteurs, les marques personnelles ou les petites entreprises souhaitant une présence en ligne originale. Elle capture l'esthétique des mises en page de magazines vintage et du design éditorial des années 1970. Les utilisateurs peuvent fournir le nom de leur marque, un slogan percutant et le contenu de différentes sections telles que « À propos », « Nouveautés » et « Contact ». La fonctionnalité génère ensuite intelligemment une page web complète et visuellement riche. Parmi ses principales fonctionnalités, on retrouve la création d'une section « Hero » saisissante avec du texte et des images superposés, des blocs de contenu dynamiques et une navigation personnalisée. Elle propose également la génération d'images par IA pour un style vintage cohérent, incluant des éléments décoratifs en demi-teintes et des photographies d'époque, si l'utilisateur ne fournit pas les siennes. Le processus consiste à recueillir vos préférences et le contenu de votre site web, puis à assembler une maquette complète respectant un langage visuel spécifique. Le résultat final est une page web fonctionnelle, dotée d'une URL unique, prête à être partagée. Les utilisateurs bénéficient également d'options permettant des ajustements rapides, comme le remplacement des images principales, la modification de la palette de couleurs ou le réarrangement des sections, garantissant ainsi que le site final corresponde parfaitement à leur vision.
Pourquoi nous recommandons cette compétence
Cette compétence permet de créer un site web dynamique au style rétro, doté d'une section principale unique à plusieurs niveaux, idéal pour les podcasteurs et les petites marques. Son esthétique vintage distinctive et ses détails de conception méticuleux lui confèrent un aspect vraiment exceptionnel.
Compétences associées
Tout voir
Présentation d'animation de particules (HTML)
Cette fonctionnalité génère un site web élégant, monopage, à l'esthétique futuriste et noir et blanc saisissante, idéal pour présenter un nouveau produit, le portfolio d'un artiste ou une carte de visite numérique. Elle est conçue pour les particuliers et les entreprises qui souhaitent une présence en ligne percutante visuellement, sans la complexité du développement web traditionnel. La fonctionnalité produit un fichier HTML autonome composé de 4 à 5 sections à défilement fluide, chacune conçue pour capter l'attention grâce à une typographie minimaliste et des éléments à fort contraste. L'arrière-plan s'anime grâce à une animation monochrome personnalisée – comme des particules en mouvement ou de subtils dégradés de bruit – qui crée une atmosphère dynamique et high-tech sans recourir à des médias externes. Au chargement, la page accueille les visiteurs avec une animation d'introduction attrayante : un texte apparaît, suivi d'un effet de « brouillage » spectaculaire pour le titre principal et d'un fondu enchaîné pour le sous-titre. Le contenu des sections suivantes apparaît ensuite avec fluidité au fur et à mesure du défilement, garantissant une expérience immersive et agréable. Toutes les images fournies par l'utilisateur sont automatiquement converties en niveaux de gris afin de préserver l'homogénéité visuelle. Le résultat final est une page web réactive, accessible et performante, livrée sous la forme d'un seul fichier HTML prêt à être déployé.
ImagePoster YouMind style landing
Transformez votre contenu en une narrative visuelle époustouflante avec un poster YouMind style landing. Cette compétence crée de magnifiques affiches infographiques qui captent l'attention avec une esthétique unique de rétro-futurisme naturel. Parfaite pour mettre en valeur des données clés, des points forts de projets ou des caractéristiques de produits, vos informations seront présentées dans un format sophistiqué et facile à digérer. En utilisant une palette de couleurs équilibrée entre tons froids et chauds, avec une base bleu-gris clair et des accents subtils de beige-pêche, chaque affiche incarne une sensation d'interface utilisateur moderne. Attendez-vous à une typographie élégante, avec le Source Han Serif autoritaire pour les titres et un texte clair sans-serif pour le corps, garantissant la lisibilité. La disposition utilise une grille Bento dynamique, organisant votre contenu en cartes visuellement attrayantes aux bords adoucis avec un espace généreux, évitant les designs encombrés. Au-delà des visuels frappants, la compétence intègre des éléments de design subtils comme un grain fin de film uniforme, un rendu impressionniste et des icônes en verre dépoli optionnelles pour vos points de données. Un prisme triangulaire translucide peut être ajouté pour un accent élégant, tandis que le logo officiel YouMind est toujours placé discrètement pour maintenir la cohérence de la marque. Il en résulte une infographie professionnelle, aérée et moderne qui communique efficacement votre message.
Réponse au mariage
Cette fonctionnalité génère un site web élégant d'une seule page, au style éditorial, idéal pour les couples en quête d'une invitation en ligne moderne et raffinée. Elle est conçue pour tous ceux qui souhaitent une présence numérique unique pour leur jour J, en s'éloignant des modèles traditionnels. Son esthétique unique, inspirée du design éditorial haut de gamme, se caractérise par un fond blanc épuré, une typographie sans empattement surdimensionnée et des touches de rouge chaleureux. Elle peut intégrer vos images ou générer deux images cinématographiques, dans le style de Wes Anderson : une bannière principale et une image d'illustration, mettant en scène un couple coiffé d'une casquette rouge, sur fond de décor urbain ou de jardin baigné par une lumière dorée et chaleureuse. Il vous suffit de fournir les informations essentielles telles que les noms, la date et le lieu de l'événement. La fonctionnalité crée ensuite une page web complète et responsive, comprenant une barre de navigation fixe, une section principale mise en valeur, un formulaire de confirmation de présence, une section dédiée « Notre histoire », les détails de l'événement et les coordonnées. Le résultat final est une page web HTML prête à l'emploi, livrée sous forme de fichier, et personnalisable ultérieurement si besoin.
Site de podcasteur rétro rose
For profile, small brands, and event landing page.
Instructions
**Étape 1 · Bref de présentation (一次问完，宁多勿少)**
La question posée à l'utilisateur par AskUserQuestion est la suivante :
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现，建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / slogan (会出现在椭圆手写气泡里),可中可英可西语，越个性越好；用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：À propos / Dernières nouveautés / Contact / Abonnez-vous，用户可加可减）
5.
6. 图片来源 : 用户上传 contre la compétence 自动生成 (默认自动生成)
7. 邮箱、社媒 handle 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后，下面所有步骤都从这个 bref取数，不要再回头追问。
**Étape 2 · 套用规范的 7 段式骨架**
这个风格的页面结构是固定的，不要发明新结构。把 brief 里的内容硬塞进下面 7 jours :
1. **Top Nav**：左侧品牌名（小字 tout en majuscules）+ 右侧 3–4个导航链接（tout en majuscules，下划虚线）。背景延续顶部玫粉色。
2. **Héros（核心叠化效果，最关键的一段，不能做成上下堆叠）**：椭圆裁切的人物/主体大图 +巨型写体品牌名横跨整宽。**这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 et 1/2 被人像的下半部分遮挡，呈现「字从人像背后钻出来」的报刊封面感。判断标准：在最终截图上，品牌名顶端的字母（如L、l 的圆头、k 的上划）应该被人像 alpha 通道盖住，看不到完整字形。如果能完整看到品牌名所有字母，就是失败的堆叠，必须重做。→右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **À propos**：左侧大写小标题 "À PROPOS DE MOI"（红色）+ 右侧大段副标题（红色 tout en majuscules，2 行换行）→下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰，比如嘴唇）→ 右侧 3 列等宽小字正文。背景：米杏。
4. **Dernières gouttes / En vedette**：标题 "LES DERNIÈRES GOUTTES" (或对应主题词) + 两张高瘦矩形卡片，卡片标题用 toutes en majuscules "SAISON X EPISODE Y"形式的小字说明（横虚线分隔）。左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画。背景：米杏。
5. **Pourquoi / Mission**：顶部左右并排两张椭圆图（用 Pourquoi 区生成的两张人物近景照片，不要用 icon 替代）→大写小标题 "POURQUOI DEVRIEZ-VOUS VOUS INSCRIRE ?" → 4 avis sur "Rejoindre ma liste de diffusion" + Icône Emoji / Icône SVG / Matériel Icônes）替代真实照photo**。
6. **Contact**：左侧 "CONTACT" + 右侧 "HIT ME UP!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →背景：米杏。
7. **Héros du pied de page**：再次让巨型手写体品牌名横跨全宽出现一遍（同 Héros Conditions d'utilisation · Politique de confidentialité · Conçu avec [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过，不要硬塞；但顺序不能乱。
**Étape 3 · 准备图片资产（用户没传就自己生）**
这个风格强依赖图片，没图就崩了。检查 brève：
- 用户**已上传**图片：直接用，但提醒用户照片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏。不满足就在下一步靠装饰图救场。
- 用户**未上传**：调用 generateImage 生成下面这 6 ans (每张独立调用，invite必须按下面写法精确控制风格，否则出图不对味） :
**UN. 主体肖像图（Héros 用，椭圆裁切）**
```
Photographie de portrait éditorial vintage des années 1970, femme portant un blazer rouge terracotta, tenant un microphone chromé rétro, fond de rideau de velours bleu marine ou rouge foncé, éclairage chaud tungstène, grain de film doux, collier de perles, rouge à lèvres rouge, regardant vers le bas ou sur le côté, composition de couverture de magazine, palette de couleurs chaudes et douces, prise sur film 35 mm, format vertical 3:4
```
**B. À propos de 区椭圆图（桌面录制场景）**
```
Bureau d'enregistrement de podcast vintage, microphone chromé rétro, lunettes sur des feuilles de script, verre d'eau, rideau de velours vert en arrière-plan, surface en bois aux tons chauds, style éditorial des années 1970, éclairage doux et chaud, grain de pellicule, palette de couleurs terracotta et vert forêt, format 3:4
```
**C / D. Dernières sorties 两张卡片图（与 brief 主题相关）**
Il s'agit de "dernière version" et il s'agit de "jeux vidéo rétro" → 3DS.在窗帘前的复古照片。要求：复古胶片质感、暖色调、构图竖向 3:4。
**E. Pourquoi 区椭圆图 ×2（不同视角的人物近景）**
```
Gros plan d'une photographie éditoriale vintage d'une femme en blazer rouge, tenant un téléphone à cadran orange rétro à l'oreille, sur fond de rideau de velours vert, éclairage chaud des années 70, grain de film, format 3:4
```
+
```
Gros plan sur les mains d'une femme aux manches rouges tapant sur une machine à écrire vintage, bureau en bois chaleureux, grain de pellicule, ambiance éditoriale des années 70, 3:4
```
**F. 4–5 jours
**Afficher la version gemini-3.1-flash-image-preview**（GPT Image et alpha 不可靠），invite À propos :
```
Illustration en demi-teintes bichromiques d'un [objet], réalisée uniquement en points rouge brique, dans le style des magazines vintage des années 1970. Le motif de points de demi-teintes est visible, le sujet est isolé sur un fond entièrement transparent avec canal alpha, sans remplissage. Format PNG détouré, composition simple et plate, seuls les points rouges sont visibles, le reste est transparent.
```
[objet] 依次替换为：mégaphone（喇叭）/ écouteurs（耳机）/ lèvres rouges（嘴唇）/ tête de girafe（长颈鹿头）/ téléviseur à tube rétro ou ordinateur de bureau des années 1980 ordinateur (老电视或老式电脑)。
**保险措施**：即使用了正确的,模型可能仍然给出米白底而非真透明。所以在 Étape 4 en CSS Le mode mix-blend : darken;`**，让米白底自动融入页面背景，只保留红点图案。这是兜底规则，不能省略。
L'URL de l'URL est la suivante:
**Étape 4 · Générer une page Web 一次性出页（视觉 DNA 必须完整传过去）**
Il s'agit de generateWebpage，prompt 里**完整粘贴**下面这份 Style DNA，再附上 Step 1 的 brief 内容和 Step 3 的图片清单。as_artifact: true。
---
**【ADN de style · 必须严格遵守】**
**色板（CSS 变量级精度）**：
- `--rose` : #F4A8A0（顶部玫粉，Hero 与 Footer 背景）
- `--cream` : #E5DCC2（中段米杏，À propos / Dernières / Pourquoi / Contact 背景）
- `--brick` : #B8472D（标题/导航文字/装饰描边）
- `--ink` : #2C1810（正文小字）
- `--cream-light` : #F2EBD8（气泡内部填充）
顶部玫粉到米杏之间用 8–16px 的渐变过渡带，不要硬切。Héros La couleur rose est rgba(150,140,180,0.25) et rose），呼应原稿.
**字体配对(必须用Google Fonts CDN)**：
- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Sail"` et `"Pacifico"` et `"Bonjour Headline"`，三选一，要丰满有圈、复古糖果感。品牌名字号要爆炸大，bureau 至少 18vw，溢出感强。
- Modèles/导航/正文小字：`"Oswald"` à `"Bebas Neue"`, ainsi que `text-transform: majuscule`, et `lettre-espacement: 0,06em`。正文小字 12–13px,行高1.4.
- 不要再引入第三种字体。
**Héros 叠化的精确实现（不能省略，不能改）**：
- Section Héros `100vh` et `95vh`, avec `position : relative` + `débordement : caché`。
- 椭圆人像图：`position : absolue`，水平居中（`gauche : 50 % ; transform: TranslateX(-50%)`），垂直方向 `top: 5vh`，高度约 `70vh`，宽度按 3:4 比例计算（约 `52vh`），`z-index: 2`，`border-radius: 50% / 60 %`，`ajustement de l'objet : couverture`。
- 巨型品牌名：`position : absolue`，水平居中，垂直方向 `top : 50vh`（**关键**：这个数值要让文字的顶部边线落在人像的纵向中部偏下区域，而不是人像下方)。`font-size : 28vw`，`hauteur de ligne : 0,85`，`couleur : var(--cream-light)`，`z-index : 1`（**比人像低**），`espace blanc : nowrap`。
- 检查标准：渲染后人像的 alpha通道（人像椭圆边缘）必须能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，调小`top` 值（让字往上挪）或增加人像高度。
- 椭圆台词气泡：`position : absolue ; à droite : 6 % ; haut : 25 % ; z-index : 3`，
- 半色调装饰图（喇叭等）：`position : absolue ; à droite : 3 % ; top : 10 %`，宽 140px，**必须配 `mix-blend-mode: darken`**。
- Le héros Hero utilise flex/grid pour créer un système flexible/grille.
**布局法则（其他区块）**：
- Taille de la photo 1280px，居中。
- Il s'agit de `border-top: 1px dashed var(--brick)` qui est utilisé.
- 椭圆图：`border-radius: 50% / 60%`（横向稍扁的鸭蛋形），不要正圆。
- Nom du produit :`border-radius: 50% / 70%`, en utilisant `var(--cream-light)`, en utilisant `1px en pointillés var(--brick)`，内边距充足，气泡里的字用显示字体 + brique 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`border-left: 1px dashed var(--brick)` et `position: absolue`，长度60–120px），末端点一个小红圆点。这是这个风格的标志符号，每个区块至少出现一处。
- La taille de l'image est de 120 à 180 pixels, ** avec `mix-blend-mode: darken`**.
**Pourquoi 区的硬性规则**：
- 必须用 Step 3 生成的两张 Pourquoi 真实人物椭圆照片，左右并排放在区块顶部。
- **禁止**用 emoji、Material Icon、Font Awesome 等任何通用 icône 替代照片或填充 "feature 卡片"。这个风格不存在 "feature 卡片" 概念。
- 4 heures de lecture et 4 heures de lecture.
**正文写法**：
- 所有 nav、étiquette de section、titre de la carte、titre en MAJUSCULES。
- Nombre de colonnes CSS : 3 et nombre de colonnes : 4.
- Il y a `var(--brick)`, et `var(--ink)`。
**页脚**：保留 "Conditions et assistance · Politique de confidentialité · Conçu avec [品牌名]" 三行小字，左下角对齐，米杏色。
**响应式**：移动端品牌字号降到 28vw（保持），多列正文降到单列，椭圆图缩到 70 %宽度居中，装饰图缩到 80px 并保留位置。Hero 叠化在移动端依然成立——人像高度可以缩到50vh，品牌字 haut 跟着调到 35vh 维持遮挡关系。
---
Il s'agit d'un bref article 7 sur l'URL de la page Web générée par l'invite, qui vous permet de générer une page Web.
**Étape 5 · 交付 + 微调入口**
生成完后，把 page Web 链接给用户，然后用一句话主动给出 3 个最高频的微调方向，让用户直接点：
1. 换主体肖像图（重新跑 Étape 3 的 A 图，换一种姿态/服装）
2.
3. 加 / 删 / 重排区块（按 Étape 2 et 7ème étape）
用户选了哪一项就只重跑对应步骤，不要全量重生。
Description
Cette fonctionnalité crée un site web monopage unique, d'inspiration rétro, idéal pour les podcasteurs, les marques personnelles ou les petites entreprises souhaitant une présence en ligne originale. Elle capture l'esthétique des mises en page de magazines vintage et du design éditorial des années 1970. Les utilisateurs peuvent fournir le nom de leur marque, un slogan percutant et le contenu de différentes sections telles que « À propos », « Nouveautés » et « Contact ». La fonctionnalité génère ensuite intelligemment une page web complète et visuellement riche. Parmi ses principales fonctionnalités, on retrouve la création d'une section « Hero » saisissante avec du texte et des images superposés, des blocs de contenu dynamiques et une navigation personnalisée. Elle propose également la génération d'images par IA pour un style vintage cohérent, incluant des éléments décoratifs en demi-teintes et des photographies d'époque, si l'utilisateur ne fournit pas les siennes. Le processus consiste à recueillir vos préférences et le contenu de votre site web, puis à assembler une maquette complète respectant un langage visuel spécifique. Le résultat final est une page web fonctionnelle, dotée d'une URL unique, prête à être partagée. Les utilisateurs bénéficient également d'options permettant des ajustements rapides, comme le remplacement des images principales, la modification de la palette de couleurs ou le réarrangement des sections, garantissant ainsi que le site final corresponde parfaitement à leur vision.
Pourquoi nous recommandons cette compétence
Cette compétence permet de créer un site web dynamique au style rétro, doté d'une section principale unique à plusieurs niveaux, idéal pour les podcasteurs et les petites marques. Son esthétique vintage distinctive et ses détails de conception méticuleux lui confèrent un aspect vraiment exceptionnel.
Compétences associées
Tout voirPrésentation d'animation de particules (HTML)
Cette fonctionnalité génère un site web élégant, monopage, à l'esthétique futuriste et noir et blanc saisissante, idéal pour présenter un nouveau produit, le portfolio d'un artiste ou une carte de visite numérique. Elle est conçue pour les particuliers et les entreprises qui souhaitent une présence en ligne percutante visuellement, sans la complexité du développement web traditionnel. La fonctionnalité produit un fichier HTML autonome composé de 4 à 5 sections à défilement fluide, chacune conçue pour capter l'attention grâce à une typographie minimaliste et des éléments à fort contraste. L'arrière-plan s'anime grâce à une animation monochrome personnalisée – comme des particules en mouvement ou de subtils dégradés de bruit – qui crée une atmosphère dynamique et high-tech sans recourir à des médias externes. Au chargement, la page accueille les visiteurs avec une animation d'introduction attrayante : un texte apparaît, suivi d'un effet de « brouillage » spectaculaire pour le titre principal et d'un fondu enchaîné pour le sous-titre. Le contenu des sections suivantes apparaît ensuite avec fluidité au fur et à mesure du défilement, garantissant une expérience immersive et agréable. Toutes les images fournies par l'utilisateur sont automatiquement converties en niveaux de gris afin de préserver l'homogénéité visuelle. Le résultat final est une page web réactive, accessible et performante, livrée sous la forme d'un seul fichier HTML prêt à être déployé.
ImagePoster YouMind style landing
Transformez votre contenu en une narrative visuelle époustouflante avec un poster YouMind style landing. Cette compétence crée de magnifiques affiches infographiques qui captent l'attention avec une esthétique unique de rétro-futurisme naturel. Parfaite pour mettre en valeur des données clés, des points forts de projets ou des caractéristiques de produits, vos informations seront présentées dans un format sophistiqué et facile à digérer. En utilisant une palette de couleurs équilibrée entre tons froids et chauds, avec une base bleu-gris clair et des accents subtils de beige-pêche, chaque affiche incarne une sensation d'interface utilisateur moderne. Attendez-vous à une typographie élégante, avec le Source Han Serif autoritaire pour les titres et un texte clair sans-serif pour le corps, garantissant la lisibilité. La disposition utilise une grille Bento dynamique, organisant votre contenu en cartes visuellement attrayantes aux bords adoucis avec un espace généreux, évitant les designs encombrés. Au-delà des visuels frappants, la compétence intègre des éléments de design subtils comme un grain fin de film uniforme, un rendu impressionniste et des icônes en verre dépoli optionnelles pour vos points de données. Un prisme triangulaire translucide peut être ajouté pour un accent élégant, tandis que le logo officiel YouMind est toujours placé discrètement pour maintenir la cohérence de la marque. Il en résulte une infographie professionnelle, aérée et moderne qui communique efficacement votre message.
Réponse au mariage
Cette fonctionnalité génère un site web élégant d'une seule page, au style éditorial, idéal pour les couples en quête d'une invitation en ligne moderne et raffinée. Elle est conçue pour tous ceux qui souhaitent une présence numérique unique pour leur jour J, en s'éloignant des modèles traditionnels. Son esthétique unique, inspirée du design éditorial haut de gamme, se caractérise par un fond blanc épuré, une typographie sans empattement surdimensionnée et des touches de rouge chaleureux. Elle peut intégrer vos images ou générer deux images cinématographiques, dans le style de Wes Anderson : une bannière principale et une image d'illustration, mettant en scène un couple coiffé d'une casquette rouge, sur fond de décor urbain ou de jardin baigné par une lumière dorée et chaleureuse. Il vous suffit de fournir les informations essentielles telles que les noms, la date et le lieu de l'événement. La fonctionnalité crée ensuite une page web complète et responsive, comprenant une barre de navigation fixe, une section principale mise en valeur, un formulaire de confirmation de présence, une section dédiée « Notre histoire », les détails de l'événement et les coordonnées. Le résultat final est une page web HTML prête à l'emploi, livrée sous forme de fichier, et personnalisable ultérieurement si besoin.
Trouve ta prochaine compétence préférée
Explore d'autres compétences IA sélectionnées pour la recherche, la création et le travail quotidien.