Pink Retro Podcaster-Website
For profile, small brands, and event landing page.
Anweisungen
**Schritt 1 · Zusammenfassung (一次问完，宁多勿少）**
用 askUserQuestion 一次性确认这些字段,不要分多轮慢慢挤:
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现, 建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / Slogan（会出现在椭圆手写气泡里，可中可英可西语，越个性越好；用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：Über / Neueste Drops / Kontakt / Abonnieren, 用户可加可减）
5. 各区块文案（用户没准备就自动按主题填占位文案,语气要俏皮、第一人称、带点自嘲）
6. 图片来源: 用户上传 vs. Fähigkeit 自动生成（默认自动生成）
7. 邮箱、社媒 handle 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后,把所有字段整理进一个内部 Brief 备用,下面所有步骤都从这个 Brief取数,不要再回头追问.
**Schritt 2 · 7. Schritt **
Kurzbeschreibung: 7 Monate:
1. **Top Nav**: Großbuchstaben (in Großbuchstaben) + Zeichen 3–4个导航链接（all-caps,下划虚线）。背景延续顶部玫粉色。
2. **Hero（核心叠化效果,最关键的一段,不能做成上下堆叠）**:椭圆裁切的人物/主体大图 +巨型手写体品牌名横跨整宽.**这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 und 1/2 被人像的下半部分遮挡,呈现「字从人像背后钻出来」的报刊封面感.判断标准:在最终截图上，品牌名顶端的字母（如L、l 的圆头、k 的上划）应该被人像 alpha →右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **Über**: 左侧大写小标题 „ÜBER MICH“ (红色) + 右侧大段副标题 (红色 Großbuchstaben, 2 Wörter) →下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰，比如嘴唇）→ 右侧 3 列等宽小字正文.背景:米杏.
4. **Latest Drops / Featured**: 标题 „THE LATEST DROPS“ (或对应主题词） + 两张高瘦矩形卡片, 卡片标题用 All-Caps黑色压在图片下半部.卡片上方各有 „SEASON X EPISODE Y“形式的小字说明（横虚线分隔）.左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画.背景:米杏.
5. Warum / Mission大写小标题 „WARUM SOLLTEN SIE EINSCHALTEN?“ → 4 列等宽小字正文（每列一段，问句结尾）→ 右侧椭圆手写气泡 „Meiner Mailingliste beitreten“ 形式 +半色调红色复古插画（比如长颈鹿或猫）。背景：米杏**禁止用通用 icon（emoji / SVG icon / Material Icons）替代真实照片**.
6. **Kontakt**: 左侧 „KONTAKT“ + 右侧 „HIT ME UP!“ 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →右侧再来一颗椭圆手写气泡 + 半色调红色复古电脑/电话插画.背景:米杏.
7. **Footer Hero**: 再次让巨型手写体品牌名横跨全宽出现一遍（同 Hero Weitere Informationen: „Nutzungsbedingungen und Support · Datenschutz“. Richtlinie · Entworfen mit [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过,不要硬塞；但顺序不能乱.
**Schritt 3 · 准备图片资产（用户没传就自己生）**
没图就崩了.检查 kurz:
-用户**已上传**图片:直接用,但提醒用户照片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏.不满足就在下一步靠装饰图救场.
- 用户**未上传**:调用 genericImage 生成下面这 6 张（每张独立调用，prompt必须按下面写法精确控制风格，否则出图不对味）:
**A. 主体肖像图（Hero 用，椭圆裁切）**
```
Vintage-Porträtfotografie aus den 1970er-Jahren: Frau in terrakottafarbenem Blazer mit einem Retro-Mikrofon aus Chrom, dunkelblauer oder roter Samtvorhang im Hintergrund, warmes Wolframlicht, feines Filmkorn, Perlenkette, roter Lippenstift, Blick nach unten oder zur Seite, Magazincover-Komposition, gedeckte, warme Farbpalette, aufgenommen auf 35-mm-Film, Hochformat 3:4
```
**B. Über 区椭圆图（桌面录制场景）**
```
Vintage-Podcast-Aufnahmetisch, Retro-Chrommikrofon, Brille auf Manuskriptblättern, Glas Wasser, grüner Samtvorhang im Hintergrund, warme Holzoberfläche, Editorial-Stil der 1970er Jahre, weiches, warmes Licht, Filmkorn, Farbpalette in Terrakotta und Waldgrün, 3:4
```
**C / D. Neueste Drops 两张卡片图（Kurzbeschreibung）**
根据用户的两个 „Latest Drop“ 标题分别生成.例如标题是 „Retro-Videospiele“ → 一只手拿着粉色任天堂 3DS在窗帘前的复古照片.要求:复古胶片质感、暖色调、构图竖向 3:4。
**E. Warum 区椭圆图 ×2（不同视角的人物近景）**
```
Nahaufnahme einer Frau im roten Blazer mit einem orangefarbenen Retro-Wählscheibentelefon am Ohr, grüner Samtvorhang im Hintergrund, warmes Licht der 70er Jahre, Filmkorn, 3:4
```
+
```
Nahaufnahme von Frauenhänden in roten Ärmeln, die auf einer Vintage-Schreibmaschine tippen; warmer Holzschreibtisch; Filmkorn; redaktioneller Stil der 70er Jahre; 3:4
```
**F. 4–5 个半色调复古装饰元素（必须透明背景！）**
这一组是风格灵魂,每个独立生成,**必须用 gemini-3.1-flash-image-preview 模型**（GPT Image 处理透明 alpha 不可靠），prompt Hinweis:
```
Halbton-Duoton-Illustration von [Objekt], dargestellt in ziegelroten Punkten, im Stil von Magazinen der 1970er Jahre, mit sichtbarem Halbtonpunktmuster. Das Objekt ist auf einem vollständig transparenten Hintergrund mit Alphakanal isoliert, ohne Hintergrundfüllung. PNG-Ausschnitt, einfache, flache Komposition, nur die roten Punkte sind sichtbar, alles andere ist transparent.
```
[Objekt] 依次替换为: Megaphon (喇叭) / Kopfhörer (耳机) / rote Lippen (嘴唇) / Giraffenkopf (长颈鹿头) / Retro-Röhrenfernseher oder 1980er-Jahre-Desktop Computer (老电视或老式电脑).
**保险措施**: Die Eingabeaufforderung wird in Schritt 4 mit CSS angezeigt里**必须给所有半色调装饰图加 `mix-blend-mode: verdunkeln;`**
生成完所有图后把 URL 收集到一个清单里,标注每张图归属哪个区块.
**Schritt 4 · Erstellen einer Webseite zum Erstellen einer Website (视觉 DNA 必须完整传过去)**
Wenn Sie „generateWebpage“, „prompt“ und „Style DNA“ verwenden möchten, müssen Sie Schritt 1 kurz und Schritt 3 als „Brief“ verwenden.as_artifact: true.
---
**【Stil-DNA · 必须严格遵守】**
**色板（CSS-Sprache）**:
- `--rose`: #F4A8A0（顶部玫粉，Hero 与 Footer 背景）
- `--cream`: #E5DCC2（中段米杏，Über / Neueste / Warum / Kontakt 背景）
- „--brick“: #B8472D（标题/导航文字/装饰描边）
- „--ink“: #2C1810（正文小字）
- `--cream-light`: #F2EBD8（气泡内部填充）
8–16 Pixel.Hero顶部到画布顶上沿带一点紫灰晕染（rgba(150,140,180,0.25) 径向渐变到 rose），呼应原稿
**字体配对（必须用 Google Fonts CDN-Veröffentlichung）**:
- 显示字体（品牌名、所有椭圆气泡里的手写台词）: „Sail“ oder „Pacifico“ oder „Hallo Überschrift“
- 标题/导航/正文小字: „Oswald“ und „Bebas Neue“ mit „text-transform: Uppercase“ und „letter-spacing: 0.06em“. Maximale Auflösung: 12–13 Pixel 1.4。
- 不要再引入第三种字体.
**Hero 叠化的精确实现（不能省略，不能改）**:
- Heldenabschnitt enthält `100vh` und `95vh` und enthält `position: relative` + `overflow: versteckt`.
- 椭圆人像图:`position: absolute`，水平居中（`left: 50%; transform: translatorX(-50%)`），垂直方向 `top: 5vh`，高度约 `70vh`，宽度按 3:4 60%`，`object-fit: cover`。
- 巨型品牌名:`position: absolute`,水平居中,垂直方向 `top: 50vh`（**关键**:这个数值要让文字的顶部边线落在人像的纵向中部偏下区域）。`font-size: 28vw`，`line-height: 0.85`，`color: var(--cream-light)`，`z-index: 1`（**比人像低**），`white-space: nowrap`。
- 检查标准:渲染后人像的 alpha通道 (人像椭圆边缘)必须能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，调小„top“ 值（让字往上挪）或增加人像高度。
- 椭圆台词气泡:`Position: absolut; rechts: 6 %; oben: 25 %; z-index: 3`,气泡和它指向的方位之间一条竖直虚线.
- 半色调装饰图 (喇叭等):`position: absolut; rechts: 3 %; top: 10 %`, 140px,** und `mix-blend-mode: darken`**.
- 整个 Hero 区不要用 flex/grid 把元素排成行列——元素之间是绝对定位的叠加关系。
**布局法则（其他区块）**:
- 内容容器最大宽 1280px…
- Geben Sie die Option „border-top: 1px dashed var(--brick)“ ein.
- 椭圆图:`border-radius: 50% / 60%`（横向稍扁的鸭蛋形），不要正圆。
- 椭圆手写气泡:`border-radius: 50% / 70%`, 背景 `var(--cream-light)`, 描边 `1px dashed var(--brick)`,内边距充足,气泡里的字用显示字体 + brick 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS:`border-left: 1px dasshed var(--brick)` und `position: absolute`，长度60–120px）,末端点一个小红圆点.这是这个风格的标志符号,每个区块至少出现一处。
- 半色调装饰图固定出现在区块的角落（左下、右上交替）, Größe 120–180px, **全部加 `mix-blend-mode: darken`**.
**Warum 区的硬性规则**:
- 必须用 Schritt 3 Warum?
- **禁止**用 emoji、Material Icon、Font Awesome 等任何通用 icon 替代照片或填充 „feature 卡片“。这个风格不存在 „feature 卡片“ 概念。
- 4 列正文是横向多列文字流, 不是 4 个图标卡片.
**正文写法**:
- Wählen Sie Navigation, Abschnittsbezeichnung, Kartentitel und Überschrift in Großbuchstaben aus.
- 正文小字段落用多列（CSS `column-count: 3` oder `column-count: 4`）
- 标题色一律 `var(--brick)`, 正文色 `var(--ink)`。
**Weitere Informationen**: Hier finden Sie „Allgemeine Geschäftsbedingungen und Support · Datenschutzrichtlinie · Entwickelt mit [品牌名]“.
**响应式**: 28vw, 70%宽度居中，装饰图缩到 80px 并保留位置。Hero 叠化在移动端依然成立——人像高度可以缩到50vh, 品牌字 top 跟着调到 35vh 维持遮挡关系。
---
Kurzbeschreibung Nr. 7: Die URL-Adresse (oder die URL zum Erstellen einer Webseite) wird in der Eingabeaufforderung „generateWebpage“ angezeigt.
**Schritt 5 · 交付 + 微调入口**
生成完后，把 webpage 链接给用户，然后用一句话主动给出 3 个最高频的微调方向，让用户直接点：
1. 换主体肖像图（重新跑 Schritt 3 的 A 图，换一种姿态/服装）
2. 调色板偏移（比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构，只换色值）
3. 加 / 删 / 重排区块 (Schritt 2 bis 7)
用户选了哪一项就只重跑对应步骤,不要全量重生.
Beschreibung
Diese Funktion erstellt eine unverwechselbare, retro-inspirierte Single-Page-Website – perfekt für Podcaster, Personal Brands oder kleine Unternehmen, die eine einzigartige Online-Präsenz suchen. Sie fängt die Ästhetik von Vintage-Magazin-Layouts und Editorial Design der 1970er-Jahre ein. Nutzer können ihren Markennamen, einen einprägsamen Slogan und Inhalte für verschiedene Bereiche wie „Über uns“, „Neuigkeiten“ und „Kontakt“ angeben. Die Funktion generiert dann intelligent eine vollständige, visuell ansprechende Webseite. Zu den wichtigsten Funktionen gehören die Erstellung eines markanten „Hero“-Bereichs mit überlappendem Text und Bildern, dynamische Inhaltsblöcke und eine individuelle Navigation. Falls keine eigenen Bilder bereitgestellt werden, bietet die Funktion auch KI-gestützte Bildgenerierung für einen konsistenten Vintage-Look, inklusive Halbton-Dekorationselementen und zeitgenössischen Fotos. Der Prozess umfasst die Erfassung Ihrer Website-Präferenzen und Inhalte sowie die Zusammenstellung eines vollständigen Seitendesigns, das einer bestimmten visuellen Sprache folgt. Das Endergebnis ist eine Live-Webseite mit einer individuellen URL, die sofort geteilt werden kann. Darüber hinaus erhalten die Nutzer Optionen für schnelle Anpassungen, wie das Austauschen von Hauptbildern, das Optimieren der Farbpalette oder das Neuanordnen von Abschnitten, um sicherzustellen, dass die fertige Website perfekt ihren Vorstellungen entspricht.
Warum wir diese Fähigkeit empfehlen
Diese Fähigkeit ermöglicht die Gestaltung einer lebendigen Website im Retro-Stil mit einem einzigartigen, mehrschichtigen Hero-Bereich – perfekt für Podcaster und kleine Marken. Die unverwechselbare Vintage-Ästhetik und die Liebe zum Detail heben sie deutlich von der Masse ab.
Ähnliche Fähigkeiten
Alle anzeigen
Partikelanimationspräsentation (HTML)
Diese Funktion generiert eine elegante, einseitige Website mit einer markanten, futuristischen Schwarz-Weiß-Ästhetik – ideal für die Präsentation eines neuen Produkts, eines Künstlerportfolios oder einer digitalen Visitenkarte. Sie richtet sich an Privatpersonen und Unternehmen, die eine visuell ansprechende Online-Präsenz benötigen, ohne den Aufwand einer herkömmlichen Website-Entwicklung. Die Funktion erstellt eine eigenständige HTML-Datei mit vier bis fünf flüssig scrollenden Abschnitten, die jeweils durch minimalistische Typografie und kontrastreiche Elemente die Aufmerksamkeit auf sich ziehen. Der Hintergrund wird durch eine individuell programmierte, monochrome Animation – beispielsweise fließende Partikel oder subtile Farbverläufe – lebendig und erzeugt so eine dynamische, moderne Atmosphäre, ganz ohne externe Medien. Beim Laden der Seite begrüßt die Besucher eine ansprechende Hero-Animation: Ein Text wird eingeblendet, gefolgt von einem dramatischen „Scramble“-Effekt für den Haupttitel und einem sanften Einblenden des Untertitels. Die Inhalte der nachfolgenden Abschnitte erscheinen dann elegant beim Scrollen und sorgen so für ein flüssiges und immersives Nutzererlebnis. Alle vom Nutzer bereitgestellten Bilder werden automatisch in Graustufen konvertiert, um ein einheitliches visuelles Erscheinungsbild zu gewährleisten. Das Endergebnis ist eine responsive, barrierefreie und leistungsstarke Webseite, die als einzelne, sofort einsatzbereite HTML-Datei ausgeliefert wird.
BildYouMind Landingpage-Poster
Verwandeln Sie Ihre Inhalte in eine beeindruckende visuelle Erzählung mit einem YouMind Landingpage-Poster. Dieser Skill erstellt wunderschöne Infografik-Poster mit einem einzigartigen Natural Retro-Futurismus-Look. Perfekt geeignet, um Schlüsseldaten, Projekthighlights oder Produkteigenschaften zu präsentieren – Ihre Informationen werden in einem eleganten und leicht verständlichen Format dargestellt. Dank einer ausgewogenen Farbpalette aus kühlen und warmen Tönen – einem hellen Graublau als Basis mit dezenten Beige-Pfirsich-Akzenten – verkörpert jedes Poster ein modernes UI-Gefühl. Erwarten Sie elegante Typografie: das autoritative Source Han Serif für Titel und eine klare serifenlose Schrift für den Fließtext, die Lesbarkeit gewährleistet. Das Layout verwendet ein dynamisches Bento-Grid, das Ihre Inhalte in visuell ansprechende Karten mit weichen Kanten und viel Freiraum anordnet – überladene Designs werden vermieden. Darüber hinaus integriert der Skill subtile Designelemente wie eine gleichmäßige feine Filmkörnung, impressionistische Darstellung und optionale Mattglas-Symbole für Ihre Datenpunkte. Ein einzelnes durchscheinendes Dreiecksprisma kann als eleganter Akzent hinzugefügt werden, während das offizielle YouMind-Logo stets dezent platziert wird, um die Markenkonsistenz zu wahren. Das Ergebnis ist ein professionelles, luftiges und modernes Infografik-Poster, das Ihre Botschaft effektiv kommuniziert.
Antwortmöglichkeit zur Hochzeit
Diese Funktion erstellt eine stilvolle, redaktionell anmutende, einseitige Hochzeits- oder Event-Website – perfekt für Paare, die eine moderne und elegante Online-Einladung wünschen. Sie ist für alle gedacht, die ihrem besonderen Tag eine unverwechselbare digitale Präsenz verleihen möchten und dabei traditionelle Vorlagen hinter sich lassen wollen. Die Funktion besticht durch eine einzigartige Ästhetik, inspiriert von hochwertigem Editorial Design, mit einem klaren weißen Hintergrund, einer markanten serifenlosen Schriftart und warmen roten Akzenten. Sie kann entweder Ihre eigenen Bilder integrieren oder zwei ausdrucksstarke Bilder im Stil von Wes Anderson generieren – ein Hero-Banner und ein Story-Bild –, die ein Paar mit einer charakteristischen roten Baseballkappe vor urbaner oder Gartenkulisse im warmen Licht der goldenen Stunde zeigen. Sie geben einfach die wichtigsten Details wie Namen, Datum und Ort der Veranstaltung an. Die Funktion erstellt dann eine vollständige, responsive Webseite mit einer fixierten Navigationsleiste, einem prominenten Hero-Bereich, einem RSVP-Formular, einem eigenen „Unsere Geschichte“-Bereich, Eventdetails und Kontaktinformationen. Das Ergebnis ist eine sofort einsatzbereite HTML-Webseite, die als Artefakt bereitgestellt wird und bei Bedarf weiter angepasst werden kann.
Pink Retro Podcaster-Website
For profile, small brands, and event landing page.
Anweisungen
**Schritt 1 · Zusammenfassung (一次问完，宁多勿少）**
用 askUserQuestion 一次性确认这些字段,不要分多轮慢慢挤:
1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）
2. 品牌名（会作为巨型手写体出现, 建议 ≤12 字符英文或 ≤6 字中文）
3. 招牌台词 / Slogan（会出现在椭圆手写气泡里，可中可英可西语，越个性越好；用户没想法就根据主题代写一句）
4. 导航 + 区块（默认：Über / Neueste Drops / Kontakt / Abonnieren, 用户可加可减）
5. 各区块文案（用户没准备就自动按主题填占位文案,语气要俏皮、第一人称、带点自嘲）
6. 图片来源: 用户上传 vs. Fähigkeit 自动生成（默认自动生成）
7. 邮箱、社媒 handle 等联系信息（缺就用占位 hola@example.com / @example）
用户回复后,把所有字段整理进一个内部 Brief 备用,下面所有步骤都从这个 Brief取数,不要再回头追问.
**Schritt 2 · 7. Schritt **
Kurzbeschreibung: 7 Monate:
1. **Top Nav**: Großbuchstaben (in Großbuchstaben) + Zeichen 3–4个导航链接（all-caps,下划虚线）。背景延续顶部玫粉色。
2. **Hero（核心叠化效果,最关键的一段,不能做成上下堆叠）**:椭圆裁切的人物/主体大图 +巨型手写体品牌名横跨整宽.**这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 und 1/2 被人像的下半部分遮挡,呈现「字从人像背后钻出来」的报刊封面感.判断标准:在最终截图上，品牌名顶端的字母（如L、l 的圆头、k 的上划）应该被人像 alpha →右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。
3. **Über**: 左侧大写小标题 „ÜBER MICH“ (红色) + 右侧大段副标题 (红色 Großbuchstaben, 2 Wörter) →下方左侧椭圆图 + 椭圆手写气泡（再叠一个半色调红色装饰，比如嘴唇）→ 右侧 3 列等宽小字正文.背景:米杏.
4. **Latest Drops / Featured**: 标题 „THE LATEST DROPS“ (或对应主题词） + 两张高瘦矩形卡片, 卡片标题用 All-Caps黑色压在图片下半部.卡片上方各有 „SEASON X EPISODE Y“形式的小字说明（横虚线分隔）.左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画.背景:米杏.
5. Warum / Mission大写小标题 „WARUM SOLLTEN SIE EINSCHALTEN?“ → 4 列等宽小字正文（每列一段，问句结尾）→ 右侧椭圆手写气泡 „Meiner Mailingliste beitreten“ 形式 +半色调红色复古插画（比如长颈鹿或猫）。背景：米杏**禁止用通用 icon（emoji / SVG icon / Material Icons）替代真实照片**.
6. **Kontakt**: 左侧 „KONTAKT“ + 右侧 „HIT ME UP!“ 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →右侧再来一颗椭圆手写气泡 + 半色调红色复古电脑/电话插画.背景:米杏.
7. **Footer Hero**: 再次让巨型手写体品牌名横跨全宽出现一遍（同 Hero Weitere Informationen: „Nutzungsbedingungen und Support · Datenschutz“. Richtlinie · Entworfen mit [品牌]"。背景：玫粉。
如果用户砍掉了某个区块就跳过,不要硬塞；但顺序不能乱.
**Schritt 3 · 准备图片资产（用户没传就自己生）**
没图就崩了.检查 kurz:
-用户**已上传**图片:直接用,但提醒用户照片需要满足「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏.不满足就在下一步靠装饰图救场.
- 用户**未上传**:调用 genericImage 生成下面这 6 张（每张独立调用，prompt必须按下面写法精确控制风格，否则出图不对味）:
**A. 主体肖像图（Hero 用，椭圆裁切）**
```
Vintage-Porträtfotografie aus den 1970er-Jahren: Frau in terrakottafarbenem Blazer mit einem Retro-Mikrofon aus Chrom, dunkelblauer oder roter Samtvorhang im Hintergrund, warmes Wolframlicht, feines Filmkorn, Perlenkette, roter Lippenstift, Blick nach unten oder zur Seite, Magazincover-Komposition, gedeckte, warme Farbpalette, aufgenommen auf 35-mm-Film, Hochformat 3:4
```
**B. Über 区椭圆图（桌面录制场景）**
```
Vintage-Podcast-Aufnahmetisch, Retro-Chrommikrofon, Brille auf Manuskriptblättern, Glas Wasser, grüner Samtvorhang im Hintergrund, warme Holzoberfläche, Editorial-Stil der 1970er Jahre, weiches, warmes Licht, Filmkorn, Farbpalette in Terrakotta und Waldgrün, 3:4
```
**C / D. Neueste Drops 两张卡片图（Kurzbeschreibung）**
根据用户的两个 „Latest Drop“ 标题分别生成.例如标题是 „Retro-Videospiele“ → 一只手拿着粉色任天堂 3DS在窗帘前的复古照片.要求:复古胶片质感、暖色调、构图竖向 3:4。
**E. Warum 区椭圆图 ×2（不同视角的人物近景）**
```
Nahaufnahme einer Frau im roten Blazer mit einem orangefarbenen Retro-Wählscheibentelefon am Ohr, grüner Samtvorhang im Hintergrund, warmes Licht der 70er Jahre, Filmkorn, 3:4
```
+
```
Nahaufnahme von Frauenhänden in roten Ärmeln, die auf einer Vintage-Schreibmaschine tippen; warmer Holzschreibtisch; Filmkorn; redaktioneller Stil der 70er Jahre; 3:4
```
**F. 4–5 个半色调复古装饰元素（必须透明背景！）**
这一组是风格灵魂,每个独立生成,**必须用 gemini-3.1-flash-image-preview 模型**（GPT Image 处理透明 alpha 不可靠），prompt Hinweis:
```
Halbton-Duoton-Illustration von [Objekt], dargestellt in ziegelroten Punkten, im Stil von Magazinen der 1970er Jahre, mit sichtbarem Halbtonpunktmuster. Das Objekt ist auf einem vollständig transparenten Hintergrund mit Alphakanal isoliert, ohne Hintergrundfüllung. PNG-Ausschnitt, einfache, flache Komposition, nur die roten Punkte sind sichtbar, alles andere ist transparent.
```
[Objekt] 依次替换为: Megaphon (喇叭) / Kopfhörer (耳机) / rote Lippen (嘴唇) / Giraffenkopf (长颈鹿头) / Retro-Röhrenfernseher oder 1980er-Jahre-Desktop Computer (老电视或老式电脑).
**保险措施**: Die Eingabeaufforderung wird in Schritt 4 mit CSS angezeigt里**必须给所有半色调装饰图加 `mix-blend-mode: verdunkeln;`**
生成完所有图后把 URL 收集到一个清单里,标注每张图归属哪个区块.
**Schritt 4 · Erstellen einer Webseite zum Erstellen einer Website (视觉 DNA 必须完整传过去)**
Wenn Sie „generateWebpage“, „prompt“ und „Style DNA“ verwenden möchten, müssen Sie Schritt 1 kurz und Schritt 3 als „Brief“ verwenden.as_artifact: true.
---
**【Stil-DNA · 必须严格遵守】**
**色板（CSS-Sprache）**:
- `--rose`: #F4A8A0（顶部玫粉，Hero 与 Footer 背景）
- `--cream`: #E5DCC2（中段米杏，Über / Neueste / Warum / Kontakt 背景）
- „--brick“: #B8472D（标题/导航文字/装饰描边）
- „--ink“: #2C1810（正文小字）
- `--cream-light`: #F2EBD8（气泡内部填充）
8–16 Pixel.Hero顶部到画布顶上沿带一点紫灰晕染（rgba(150,140,180,0.25) 径向渐变到 rose），呼应原稿
**字体配对（必须用 Google Fonts CDN-Veröffentlichung）**:
- 显示字体（品牌名、所有椭圆气泡里的手写台词）: „Sail“ oder „Pacifico“ oder „Hallo Überschrift“
- 标题/导航/正文小字: „Oswald“ und „Bebas Neue“ mit „text-transform: Uppercase“ und „letter-spacing: 0.06em“. Maximale Auflösung: 12–13 Pixel 1.4。
- 不要再引入第三种字体.
**Hero 叠化的精确实现（不能省略，不能改）**:
- Heldenabschnitt enthält `100vh` und `95vh` und enthält `position: relative` + `overflow: versteckt`.
- 椭圆人像图:`position: absolute`，水平居中（`left: 50%; transform: translatorX(-50%)`），垂直方向 `top: 5vh`，高度约 `70vh`，宽度按 3:4 60%`，`object-fit: cover`。
- 巨型品牌名:`position: absolute`,水平居中,垂直方向 `top: 50vh`（**关键**:这个数值要让文字的顶部边线落在人像的纵向中部偏下区域）。`font-size: 28vw`，`line-height: 0.85`，`color: var(--cream-light)`，`z-index: 1`（**比人像低**），`white-space: nowrap`。
- 检查标准:渲染后人像的 alpha通道 (人像椭圆边缘)必须能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，调小„top“ 值（让字往上挪）或增加人像高度。
- 椭圆台词气泡:`Position: absolut; rechts: 6 %; oben: 25 %; z-index: 3`,气泡和它指向的方位之间一条竖直虚线.
- 半色调装饰图 (喇叭等):`position: absolut; rechts: 3 %; top: 10 %`, 140px,** und `mix-blend-mode: darken`**.
- 整个 Hero 区不要用 flex/grid 把元素排成行列——元素之间是绝对定位的叠加关系。
**布局法则（其他区块）**:
- 内容容器最大宽 1280px…
- Geben Sie die Option „border-top: 1px dashed var(--brick)“ ein.
- 椭圆图:`border-radius: 50% / 60%`（横向稍扁的鸭蛋形），不要正圆。
- 椭圆手写气泡:`border-radius: 50% / 70%`, 背景 `var(--cream-light)`, 描边 `1px dashed var(--brick)`,内边距充足,气泡里的字用显示字体 + brick 色 + 斜体。
- 气泡和它指向的元素之间画一条**虚线连接线**（CSS:`border-left: 1px dasshed var(--brick)` und `position: absolute`，长度60–120px）,末端点一个小红圆点.这是这个风格的标志符号,每个区块至少出现一处。
- 半色调装饰图固定出现在区块的角落（左下、右上交替）, Größe 120–180px, **全部加 `mix-blend-mode: darken`**.
**Warum 区的硬性规则**:
- 必须用 Schritt 3 Warum?
- **禁止**用 emoji、Material Icon、Font Awesome 等任何通用 icon 替代照片或填充 „feature 卡片“。这个风格不存在 „feature 卡片“ 概念。
- 4 列正文是横向多列文字流, 不是 4 个图标卡片.
**正文写法**:
- Wählen Sie Navigation, Abschnittsbezeichnung, Kartentitel und Überschrift in Großbuchstaben aus.
- 正文小字段落用多列（CSS `column-count: 3` oder `column-count: 4`）
- 标题色一律 `var(--brick)`, 正文色 `var(--ink)`。
**Weitere Informationen**: Hier finden Sie „Allgemeine Geschäftsbedingungen und Support · Datenschutzrichtlinie · Entwickelt mit [品牌名]“.
**响应式**: 28vw, 70%宽度居中，装饰图缩到 80px 并保留位置。Hero 叠化在移动端依然成立——人像高度可以缩到50vh, 品牌字 top 跟着调到 35vh 维持遮挡关系。
---
Kurzbeschreibung Nr. 7: Die URL-Adresse (oder die URL zum Erstellen einer Webseite) wird in der Eingabeaufforderung „generateWebpage“ angezeigt.
**Schritt 5 · 交付 + 微调入口**
生成完后，把 webpage 链接给用户，然后用一句话主动给出 3 个最高频的微调方向，让用户直接点：
1. 换主体肖像图（重新跑 Schritt 3 的 A 图，换一种姿态/服装）
2. 调色板偏移（比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构，只换色值）
3. 加 / 删 / 重排区块 (Schritt 2 bis 7)
用户选了哪一项就只重跑对应步骤,不要全量重生.
Beschreibung
Diese Funktion erstellt eine unverwechselbare, retro-inspirierte Single-Page-Website – perfekt für Podcaster, Personal Brands oder kleine Unternehmen, die eine einzigartige Online-Präsenz suchen. Sie fängt die Ästhetik von Vintage-Magazin-Layouts und Editorial Design der 1970er-Jahre ein. Nutzer können ihren Markennamen, einen einprägsamen Slogan und Inhalte für verschiedene Bereiche wie „Über uns“, „Neuigkeiten“ und „Kontakt“ angeben. Die Funktion generiert dann intelligent eine vollständige, visuell ansprechende Webseite. Zu den wichtigsten Funktionen gehören die Erstellung eines markanten „Hero“-Bereichs mit überlappendem Text und Bildern, dynamische Inhaltsblöcke und eine individuelle Navigation. Falls keine eigenen Bilder bereitgestellt werden, bietet die Funktion auch KI-gestützte Bildgenerierung für einen konsistenten Vintage-Look, inklusive Halbton-Dekorationselementen und zeitgenössischen Fotos. Der Prozess umfasst die Erfassung Ihrer Website-Präferenzen und Inhalte sowie die Zusammenstellung eines vollständigen Seitendesigns, das einer bestimmten visuellen Sprache folgt. Das Endergebnis ist eine Live-Webseite mit einer individuellen URL, die sofort geteilt werden kann. Darüber hinaus erhalten die Nutzer Optionen für schnelle Anpassungen, wie das Austauschen von Hauptbildern, das Optimieren der Farbpalette oder das Neuanordnen von Abschnitten, um sicherzustellen, dass die fertige Website perfekt ihren Vorstellungen entspricht.
Warum wir diese Fähigkeit empfehlen
Diese Fähigkeit ermöglicht die Gestaltung einer lebendigen Website im Retro-Stil mit einem einzigartigen, mehrschichtigen Hero-Bereich – perfekt für Podcaster und kleine Marken. Die unverwechselbare Vintage-Ästhetik und die Liebe zum Detail heben sie deutlich von der Masse ab.
Ähnliche Fähigkeiten
Alle anzeigenPartikelanimationspräsentation (HTML)
Diese Funktion generiert eine elegante, einseitige Website mit einer markanten, futuristischen Schwarz-Weiß-Ästhetik – ideal für die Präsentation eines neuen Produkts, eines Künstlerportfolios oder einer digitalen Visitenkarte. Sie richtet sich an Privatpersonen und Unternehmen, die eine visuell ansprechende Online-Präsenz benötigen, ohne den Aufwand einer herkömmlichen Website-Entwicklung. Die Funktion erstellt eine eigenständige HTML-Datei mit vier bis fünf flüssig scrollenden Abschnitten, die jeweils durch minimalistische Typografie und kontrastreiche Elemente die Aufmerksamkeit auf sich ziehen. Der Hintergrund wird durch eine individuell programmierte, monochrome Animation – beispielsweise fließende Partikel oder subtile Farbverläufe – lebendig und erzeugt so eine dynamische, moderne Atmosphäre, ganz ohne externe Medien. Beim Laden der Seite begrüßt die Besucher eine ansprechende Hero-Animation: Ein Text wird eingeblendet, gefolgt von einem dramatischen „Scramble“-Effekt für den Haupttitel und einem sanften Einblenden des Untertitels. Die Inhalte der nachfolgenden Abschnitte erscheinen dann elegant beim Scrollen und sorgen so für ein flüssiges und immersives Nutzererlebnis. Alle vom Nutzer bereitgestellten Bilder werden automatisch in Graustufen konvertiert, um ein einheitliches visuelles Erscheinungsbild zu gewährleisten. Das Endergebnis ist eine responsive, barrierefreie und leistungsstarke Webseite, die als einzelne, sofort einsatzbereite HTML-Datei ausgeliefert wird.
BildYouMind Landingpage-Poster
Verwandeln Sie Ihre Inhalte in eine beeindruckende visuelle Erzählung mit einem YouMind Landingpage-Poster. Dieser Skill erstellt wunderschöne Infografik-Poster mit einem einzigartigen Natural Retro-Futurismus-Look. Perfekt geeignet, um Schlüsseldaten, Projekthighlights oder Produkteigenschaften zu präsentieren – Ihre Informationen werden in einem eleganten und leicht verständlichen Format dargestellt. Dank einer ausgewogenen Farbpalette aus kühlen und warmen Tönen – einem hellen Graublau als Basis mit dezenten Beige-Pfirsich-Akzenten – verkörpert jedes Poster ein modernes UI-Gefühl. Erwarten Sie elegante Typografie: das autoritative Source Han Serif für Titel und eine klare serifenlose Schrift für den Fließtext, die Lesbarkeit gewährleistet. Das Layout verwendet ein dynamisches Bento-Grid, das Ihre Inhalte in visuell ansprechende Karten mit weichen Kanten und viel Freiraum anordnet – überladene Designs werden vermieden. Darüber hinaus integriert der Skill subtile Designelemente wie eine gleichmäßige feine Filmkörnung, impressionistische Darstellung und optionale Mattglas-Symbole für Ihre Datenpunkte. Ein einzelnes durchscheinendes Dreiecksprisma kann als eleganter Akzent hinzugefügt werden, während das offizielle YouMind-Logo stets dezent platziert wird, um die Markenkonsistenz zu wahren. Das Ergebnis ist ein professionelles, luftiges und modernes Infografik-Poster, das Ihre Botschaft effektiv kommuniziert.
Antwortmöglichkeit zur Hochzeit
Diese Funktion erstellt eine stilvolle, redaktionell anmutende, einseitige Hochzeits- oder Event-Website – perfekt für Paare, die eine moderne und elegante Online-Einladung wünschen. Sie ist für alle gedacht, die ihrem besonderen Tag eine unverwechselbare digitale Präsenz verleihen möchten und dabei traditionelle Vorlagen hinter sich lassen wollen. Die Funktion besticht durch eine einzigartige Ästhetik, inspiriert von hochwertigem Editorial Design, mit einem klaren weißen Hintergrund, einer markanten serifenlosen Schriftart und warmen roten Akzenten. Sie kann entweder Ihre eigenen Bilder integrieren oder zwei ausdrucksstarke Bilder im Stil von Wes Anderson generieren – ein Hero-Banner und ein Story-Bild –, die ein Paar mit einer charakteristischen roten Baseballkappe vor urbaner oder Gartenkulisse im warmen Licht der goldenen Stunde zeigen. Sie geben einfach die wichtigsten Details wie Namen, Datum und Ort der Veranstaltung an. Die Funktion erstellt dann eine vollständige, responsive Webseite mit einer fixierten Navigationsleiste, einem prominenten Hero-Bereich, einem RSVP-Formular, einem eigenen „Unsere Geschichte“-Bereich, Eventdetails und Kontaktinformationen. Das Ergebnis ist eine sofort einsatzbereite HTML-Webseite, die als Artefakt bereitgestellt wird und bei Bedarf weiter angepasst werden kann.
Finde deine nächste Lieblingsfähigkeit
Entdecke weitere kuratierte KI-Fähigkeiten für Recherche, Kreativität und den Arbeitsalltag.