粉紅色復古播客網站
For profile, small brands, and event landing page.
指令
**步驟1·收集簡介（一次問完，寧多勿少）**
使用askUserQuestion一次確認這些字段，不要分多輪慢慢擠：
1. 網站主題/用途（Podcast/個人主頁/小品牌/活動頁/其他－使用者描述即可）
2.品牌名稱（會以巨型手寫體出現，建議≤12個字元英文或≤6個字中文）
3.招牌台詞/口號（會出現在橢圓形手寫氣泡裡，可中可英式西語，越個性越好；用戶沒想法就根據主題代寫一句）
4. 導航+區塊（預設：關於/最新掉落/聯繫/訂閱，用戶可加可減）
5.各區塊文案（用戶還沒準備好就自動依主題填佔位文案，語調要俏皮、第一人稱、帶點自嘲）
6. 圖片來源：使用者上傳 vs 技能自動產生（預設為自動產生）
7.信箱、社媒辦理等聯絡資訊（缺就用佔位hola@example.com / @example）
用戶回覆後，把所有欄位整理進一個內部brief備用，下面所有步驟都從這個brief中取數，不要再回頭追問。
**步驟 2·套用規範的 7 段式重構**
這個風格的頁面結構是固定的，不要發明新結構。把簡短裡的內容硬塞進下面7段：
1. **頂部導航**：左側品牌名稱（小字全大寫）+右側3-4個導航連結（全大寫，下劃虛線）背景。對應頂部玫粉紅色。
2. **英雄（核心堆疊效果，最關鍵的一段，不能外圍下方）**：橢圓裁切的人物/主體大圖 + 巨型手寫體品牌名地震整寬。 **這兩者必須在垂直上方向真正重疊**——品牌名的頂部1/3到1/2被人像的下半部分顯現，呈現“字從人像鑽背後外面”的報紙封面感。判斷標準：在最終品牌截圖上，名上方的字母（如L、l）的圓頭、k的上劃）應該被人像alpha通道蓋住，看不到完整字形。如果能完整品牌名所有字母，就是失敗的一個，必須重做。 →右上角浮萍平板手寫台詞氣泡+一個半色調紅色復古小物（喇叭/耳機/耳機三選一）。背景看到：玫瑰粉。
3. **關於**：左側大寫小標題「ABOUT ME」（紅色）+右側大段副標題（紅色全大寫，2行換行）→ 右側中部橢圓圖 + 橢圓手寫氣泡（再疊一個半色調紅色裝飾，例如蓮花）→ 右側3列背景寬小字正文。 ：米杏。
4. **最新水滴/精選**：標題「THE LATEST DROPS」（或對應主題詞）+ 兩張高瘦比例對應，對應標題用全大寫黑色壓在圖片下半部。上方各有「SEASON X EPISODE Y」形式的小字說明（橫虛線分隔）。右邊接下來是珍珠手寫氣泡+半色調紅色耳機插畫。背景：米杏。
5. **為什麼/使命**：頂部左右並排四周全景圖（用Why區生成的四周人物近景照片，不要用圖標替代）→ 大寫小標題“WHY SHOULD YOU TUNE IN?” → 4列等寬小字正文（每列一段，問句結尾）→右側半長背景：米杏。 **禁止以通用圖示（emoji / SVG icon / Material Icons）取代真實照片**。
6. **聯絡方式**：左側「CONTACT」+右側「HIT ME UP!」 標題 → 下方左側 3–4 行小字 + 信箱 + 社媒 → 中間一張輪廓或曲面圖 → 右邊依序為圓形手寫氣泡 + 半色調紅色復古電腦/插畫。背景：米杏。
7. **頁腳英雄**：再次製作巨型手寫體品牌名貫穿全寬出現一遍（同英雄疊化邏輯：底部插畫/裝飾元素彰顯品牌名頂部）→右上檯面手寫氣泡→底部小字「條款與支持·隱私政策·設計與[品牌]」。背景：玫瑰粉。
如果使用者砍掉了某個方塊就跳過，不要硬塞；但順序不能亂。
**步驟3·準備圖片資產（用戶沒傳就自己生）**
這個風格強烈依賴圖片，沒圖就崩了。查看簡介：
- 用戶**已上傳**圖片：直接使用，但提醒用戶照片需要滿足“暖色調、復古膠片感、穿著人物磚紅/酒紅色、有麥克風/綠幕/紅絨布等錄製場景元素”之一才不會跳戲。不滿足就在隔壁裝飾圖救場。
- 使用者**未上傳**：調用generateImage產生下面這6張（每張獨立調用，提示必須按下面寫法準確控制風格，否則出圖不當味）：
**一個。 主體側面圖（英雄用，俯視裁切）**
```
一張20世紀70年代的復古編輯肖像照片，照片中一位女士身穿赤陶紅色西裝外套，手持復古鉻合金麥克風，背景是深海軍藍或紅色天鵝絨窗簾，採用溫暖的鎢絲燈光，膠片顆粒柔和，佩戴珍珠項鍊，塗著紅色唇膏，目光向下或側視，構圖類似雜誌封面，色調柔和，佩戴珍珠項鍊，塗著紅色唇膏，目光向下或側視，構圖類似雜誌封面，色調柔和溫暖，使用35毫米膠片拍攝，垂直圖案，垂直圖案。
```
**B。關於區平面圖（桌面錄影場景）**
```
復古播客錄音台、復古鍍鉻麥克風、放在稿紙上的眼鏡、一杯水、背景中的綠色天鵝絨窗簾、溫暖的木質表面、70年代的編輯風格、柔和溫暖的燈光、膠片顆粒感、赤陶色和森林綠的配色方案、3:4 比例
```
**C / D. 最新Drops 兩張配合圖（與簡短主題相關）**
根據使用者的兩個「最新掉落」標題分別產生。例如標題是「復古電子遊戲」→一隻手持有粉紅色任天堂3DS在窗簾前的復古照片。條件：復古膚色、暖色調、構圖垂直3:4。
**E。為什麼區域俯視圖×2（不同視角人物的近景）**
```
一張復古風格的特寫照片，照片中一位身穿紅色西裝外套的女士手持一部復古橙色轉盤電話，背景是綠色天鵝絨窗簾，採用70年代溫暖的燈光風格，帶有膠片顆粒感，比例為3:4。
```
+
```
特寫：一位身穿紅色袖子的女性雙手正在老式打字機上打字，背景是溫暖的木質桌子，畫面帶有膠片顆粒感，營造出70年代的復古氛圍，比例為3:4。
```
**F。 4–5個半色調復古裝飾元素（必須透明背景！）**
這一組是風格靈魂，每個獨立生成，**必須使用gemini-3.1-flash-image-preview模型**（GPT Image處理透明alpha不可靠），提示模板：
```
以磚紅色點陣繪製的[物件]的半色調雙色調插圖，採用 20 世紀 70 年代復古雜誌印刷風格，可見半色調點陣圖案。主體位於完全透明的背景上，帶有 Alpha 通道，沒有任何背景填充。 PNG 摳圖風格，簡潔的扁平化構圖，僅可見紅色點陣，其餘部分皆為透明。
```
[物件]依序替換為：擴音器（喇叭）/耳機（耳機）/紅唇（兄弟）/長頸鹿頭（長頸鹿頭）/復古顯像管電視或1980年代的桌上型電腦（舊電視或老式電腦）。
**保險措施**：即使用正確的提示，模型可能仍然會出現米白底不真實透明。所以在步驟4的CSS裡**必須為所有半色調裝飾圖加`mix-blend-mode: darken;`**，讓米白底自動覆蓋頁面，背景只保留紅點圖案。這是兜底規則，不能省略。
生成完成所有圖後把URL收集到一個清單裡，標註每張圖所屬哪個區塊。
**Step 4·呼叫generateWebpage一次出頁（視覺DNA必須完整傳過去）**
調generateWebpage，提示裡**完整貼上**這份Style DNA，再附上Step 1的簡短內容和下面Step 3的圖片清單。 as_artifact: true。
---
**【風格DNA·必須嚴格遵守】**
**色板（CSS精度）**：
- `--rose`: #F4A8A0（頂部玫瑰粉，英雄與頁腳背景）
- `--cream`: #E5DCC2（中段米杏，關於/最新/為什麼/聯繫背景）
- `--brick`: #B8472D（標題/導航文字/裝飾描邊）
- `--ink`: #2C1810（正文小字）
- `--cream-light`: #F2EBD8（氣泡內部填充）
頂部玫瑰粉到米杏之間用 8–16px 的過渡過渡帶，不要硬切。英雄頂部到右側頂沿帶一點紫灰暈染（rgba(150,140,180,0.25) 過渡過渡到玫瑰），呼應原稿。
**字型安裝（必須使用Google Fonts CDN載入）**：
- 顯示字體（品牌名稱、所有爆炸氣泡裡的手寫台詞）：`"Sail"`或`"Pacifico"`或`"Hello Headline"`，三選一，要報紙有圈、復古糖果感。品牌名字要爆炸大，桌面至少18vw，溢出感強。
- 標題/導航/正文小字：`"Oswald"` 或 `"Bebas Neue"`，全部`文字轉換：大寫`，字距`字母間距：0.06em`。正文小字12–13px，行高1.4。
- 不要再引入第三種字體。
**英雄化疊的精確實現（不能簡潔，不能修改）**：
- 英雄部分高度設為 `100vh` 或 `95vh`，使用 `position:relative` + `overflow:hidden`。
- 肥胖人像圖：`位置: 絕對`，水平居中（`左: 50%;變換:translateX(-50%)`），垂直方向`top: 5vh`，高度約`70vh`，寬度按3:4比例計算（約`52vh`），`z-index: 2`，`b-10% / 50% ``-00% ````-f看到-`b-10% ``-10% ``````-f看到- 10% ``1-0% ``1-00% ``1-00% / 0%。
- 巨型品牌名稱：`位置：絕對`，水平居中，垂直方向`頂部：50vh`（**關鍵**：這個數值要讓文字的頂部邊線代表人像的縱向中部偏下區域，是人像下方）。 `font-size: 28vw`，`line-height: 0.85`，`color: var(--cream-light)`，`z-index: 1`（**比人像低**），`white-space: nowrap`。
-檢查標準：渲染後人像的alpha通道（人像四周邊緣）必須能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，調小`top`值（讓字往上移動）或增加人像高度。
- 圓台詞氣泡：`位置：絕對；右：6%；頂部：25%； z-index: 3`，氣泡和它指向一條垂直虛線之間的方位。
- 半色調裝飾圖（喇叭等）：`position:absolute;右：3%； top: 10%`，寬140px，**必須配`mix-blend-mode: darken`**。
-整個英雄區不要用flex/grid把元素排成行列－元素之間是絕對定位的中心關係。
**佈局規則（其他區塊）**：
- 內容容器最大寬1280px，居中。
- 區塊之間以 `border-top: 1px dashed var(--brick)` 橫線分隔。
- 橢圓圖：`border-radius: 50% / 60%`（外側扁的鴨蛋形），不要正圓。
- 圓形手寫氣泡：`border-radius: 50% / 70%`，背景`var(--cream-light)`，描邊`1px dashed var(--brick)`，內邊距充足，氣泡裡的字用顯示字體+磚色+斜體。
- 氣泡和它指向的元素之間畫一條**虛線連接線**（CSS：`border-left: 1px dashed var(--brick)`配`position:absolute`，長度60–120px），終點一個小紅圓點。這是這個風格的標誌符號，每個區塊至少出現一個處。
- 半色調裝飾圖固定出現在方塊的紫色（左下、右上交替），尺寸120–180px，**全部加`mix-blend-mode: darken`**。
**為什麼區的硬性規則**：
- 必須用步驟3生成的兩張照片為什麼是真實的人物照片，左右並浪費在區塊頂部。
- **禁止**使用表情符號、材質圖示、Font Awesome 等任何通用圖示替代照片或填充「功能對應」。這種風格不存在「功能對應」概念。
- 4列正文是橫向多列文字流，不是4個圖示對應。
**正文寫法**：
- 所有導航、部分標籤、卡片標題、標題全部大寫。
- 正文小字段落用多列（CSS `column-count: 3` 或 `column-count: 4`）實現窄欄報刊感，不要單列大段。
- 標題色一律`var(--brick)`，正文色`var(--ink)`。
**頁腳**：保留「條款與支持·隱私權政策·設計[品牌名]」三行小字，左下角對齊，米杏色。
**響應式**：行動端品牌字號降到28vw（保持），多列正文降到單列，輪廓圖縮到70%寬度居中，裝飾圖縮到80px並保留位置。英雄疊化在行動端依然成立－人像高度可以縮到50vh，品牌字頂部跟隨調到35vh維持遮擋。
---
把簡短裡7段文案、圖片URL清單（標示每張歸屬）一起塞進產生網頁的提示，讓一次出頁。
**第 5 步·交付 + 易用性入口**
生成完成後，把網頁連結給用戶，然後用一句話主動給出3個最高的噪音方向，讓用戶直接點：
1.換主體肖像圖（重新跑步驟3的A圖，換一個姿勢/服裝）
2.調色盤偏移（例如把玫瑰粉換成蜜桃、米杏換成淡薄荷－保持雙色塊結構，只換顏色值）
3. 加/刪/重排區塊（依步驟2的7段重構調整）
用戶選了哪一項就只重跑對應步驟，不要全量重生。
描述
這項技能可以打造獨具特色、充滿復古氣息的單頁網站，非常適合播客主播、個人品牌或希望建立獨特線上形象的小型企業。它完美捕捉了復古雜誌的版面和 20 世紀 70 年代的編輯設計風格。用戶可以提供品牌名稱、朗朗上口的標語以及「關於我們」、「最新發布」和「聯絡我們」等各個版塊的內容。該技能隨後會智慧生成一個完整且視覺效果豐富的網頁。其主要功能包括創建引人注目的「主圖」版塊（包含重疊的文字和圖像）、動態內容塊和自訂導航。如果用戶沒有提供自己的圖片，它還可以利用 AI 生成圖像，以營造一致的復古風格，包括半色調裝飾元素和符合時代背景的照片。整個流程包括收集您的網站偏好和內容，然後根據特定的視覺語言建立完整的頁面設計。最終輸出的是一個帶有唯一 URL 的可訪問網頁，隨時可以分享。用戶還可以進行快速調整，例如更換主圖、調整調色板或重新排列版塊，以確保最終網站完全符合他們的設想。
為什麼我們推薦這個技能
這項技能打造出一個充滿活力、復古風格的網站，其獨特的分層式首頁橫幅設計，非常適合播客主播和小品牌。它鮮明的復古美學和精細的設計細節使其脫穎而出。
相關技能
查看全部
粒子動畫示範（HTML）
這項技能可以產生一個簡潔的單頁網站，採用引人注目的黑白未來主義美學設計，非常適合展示新產品、藝術家作品集或電子名片。它專為需要打造視覺衝擊力強的線上形象，但又不想經歷傳統網站開發複雜性的個人或企業而設計。此技能產生一個獨立的 HTML 文件，包含 4-5 個流暢滾動的版塊，每個版塊都採用極簡的字體和高對比度元素來吸引眼球。背景採用自訂編碼的單色動畫——例如流動的粒子或微妙的雜訊漸變——營造出動感十足的高科技氛圍，而無需依賴外部媒體。頁面載入後，首先映入眼簾的是一個引人入勝的動畫：眉毛文字逐漸顯現，隨後主標題以戲劇性的“打亂”效果呈現，副標題則以流暢的淡入方式出現。後續版塊的內容會隨著用戶的滾動優雅地展開，確保流暢且沉浸式的體驗。使用者提供的所有圖片都會自動轉換為灰階影像，以保持視覺主題的一致性。最終輸出是一個響應迅速、易於存取且效能卓越的網頁，以單一可直接部署的 HTML 檔案形式交付。
圖片YouMind Landing Page 風格海報
使用 YouMind Landing Page 風格海報，將您的內容轉變為令人驚豔的視覺敘事。此技能製作出美麗的資訊圖表海報，以獨特的自然復古未來主義美學吸引注意力。非常適合展示關鍵數據、專案亮點或產品功能，您的資訊將以精緻且易於理解的形式呈現。 此技能採用平衡的冷暖色調，以淺灰藍色為基底，搭配細緻的米黃桃色點綴，每張海報都體現出現代 UI 的風格。文字排版優雅，標題使用權威性的思源宋體，內文則以乾淨的無襯線字體呈現，確保可讀性。版面採用動態的 Bento 格線，將您的內容排列成視覺吸引人、邊緣圓潤的卡片，並留有充足的空間，避免設計擁擠。 除了引人注目的視覺效果外，此技能還整合了細膩的設計元素，如均勻的細微電影顆粒、印象派渲染，以及可選的數據點磨砂玻璃圖示。可加入一個半透明的三角稜鏡作為優雅的點綴，而 YouMind 官方標誌則始終低調地放置，以維持品牌一致性。這造就出專業、輕盈且現代的資訊圖表，能有效傳達您的訊息。
婚禮回覆確認
這項技能可以產生一個時尚的、雜誌風格的單頁婚禮或活動網站，非常適合追求現代精緻線上邀請函的新人。它專為希望在特別的日子裡擁有獨特數位形象、超越傳統模板的新人而設計。該技能捕捉了高端雜誌設計的獨特美學，採用簡潔的白色背景、超大無襯線字體和溫暖的紅色點綴。它可以整合您提供的圖片，也可以產生兩張電影般的韋斯安德森風格圖片——一張橫幅和一張故事圖片——圖片中一對戴著標誌性紅色棒球帽的新人，背景是城市或花園，沐浴在溫暖的金色夕陽餘暉中。用戶只需提供姓名、活動日期和地點等關鍵資訊。此技能隨後會產生完整的響應式網頁，包括固定導覽列、醒目的橫幅區域、回覆表單、「我們的故事」專區、活動詳情和聯絡方式。最終輸出是一個可直接使用的HTML網頁，以文件形式交付，如有需要，還可以進行進一步的自訂。
粉紅色復古播客網站
For profile, small brands, and event landing page.
指令
**步驟1·收集簡介（一次問完，寧多勿少）**
使用askUserQuestion一次確認這些字段，不要分多輪慢慢擠：
1. 網站主題/用途（Podcast/個人主頁/小品牌/活動頁/其他－使用者描述即可）
2.品牌名稱（會以巨型手寫體出現，建議≤12個字元英文或≤6個字中文）
3.招牌台詞/口號（會出現在橢圓形手寫氣泡裡，可中可英式西語，越個性越好；用戶沒想法就根據主題代寫一句）
4. 導航+區塊（預設：關於/最新掉落/聯繫/訂閱，用戶可加可減）
5.各區塊文案（用戶還沒準備好就自動依主題填佔位文案，語調要俏皮、第一人稱、帶點自嘲）
6. 圖片來源：使用者上傳 vs 技能自動產生（預設為自動產生）
7.信箱、社媒辦理等聯絡資訊（缺就用佔位hola@example.com / @example）
用戶回覆後，把所有欄位整理進一個內部brief備用，下面所有步驟都從這個brief中取數，不要再回頭追問。
**步驟 2·套用規範的 7 段式重構**
這個風格的頁面結構是固定的，不要發明新結構。把簡短裡的內容硬塞進下面7段：
1. **頂部導航**：左側品牌名稱（小字全大寫）+右側3-4個導航連結（全大寫，下劃虛線）背景。對應頂部玫粉紅色。
2. **英雄（核心堆疊效果，最關鍵的一段，不能外圍下方）**：橢圓裁切的人物/主體大圖 + 巨型手寫體品牌名地震整寬。 **這兩者必須在垂直上方向真正重疊**——品牌名的頂部1/3到1/2被人像的下半部分顯現，呈現“字從人像鑽背後外面”的報紙封面感。判斷標準：在最終品牌截圖上，名上方的字母（如L、l）的圓頭、k的上劃）應該被人像alpha通道蓋住，看不到完整字形。如果能完整品牌名所有字母，就是失敗的一個，必須重做。 →右上角浮萍平板手寫台詞氣泡+一個半色調紅色復古小物（喇叭/耳機/耳機三選一）。背景看到：玫瑰粉。
3. **關於**：左側大寫小標題「ABOUT ME」（紅色）+右側大段副標題（紅色全大寫，2行換行）→ 右側中部橢圓圖 + 橢圓手寫氣泡（再疊一個半色調紅色裝飾，例如蓮花）→ 右側3列背景寬小字正文。 ：米杏。
4. **最新水滴/精選**：標題「THE LATEST DROPS」（或對應主題詞）+ 兩張高瘦比例對應，對應標題用全大寫黑色壓在圖片下半部。上方各有「SEASON X EPISODE Y」形式的小字說明（橫虛線分隔）。右邊接下來是珍珠手寫氣泡+半色調紅色耳機插畫。背景：米杏。
5. **為什麼/使命**：頂部左右並排四周全景圖（用Why區生成的四周人物近景照片，不要用圖標替代）→ 大寫小標題“WHY SHOULD YOU TUNE IN?” → 4列等寬小字正文（每列一段，問句結尾）→右側半長背景：米杏。 **禁止以通用圖示（emoji / SVG icon / Material Icons）取代真實照片**。
6. **聯絡方式**：左側「CONTACT」+右側「HIT ME UP!」 標題 → 下方左側 3–4 行小字 + 信箱 + 社媒 → 中間一張輪廓或曲面圖 → 右邊依序為圓形手寫氣泡 + 半色調紅色復古電腦/插畫。背景：米杏。
7. **頁腳英雄**：再次製作巨型手寫體品牌名貫穿全寬出現一遍（同英雄疊化邏輯：底部插畫/裝飾元素彰顯品牌名頂部）→右上檯面手寫氣泡→底部小字「條款與支持·隱私政策·設計與[品牌]」。背景：玫瑰粉。
如果使用者砍掉了某個方塊就跳過，不要硬塞；但順序不能亂。
**步驟3·準備圖片資產（用戶沒傳就自己生）**
這個風格強烈依賴圖片，沒圖就崩了。查看簡介：
- 用戶**已上傳**圖片：直接使用，但提醒用戶照片需要滿足“暖色調、復古膠片感、穿著人物磚紅/酒紅色、有麥克風/綠幕/紅絨布等錄製場景元素”之一才不會跳戲。不滿足就在隔壁裝飾圖救場。
- 使用者**未上傳**：調用generateImage產生下面這6張（每張獨立調用，提示必須按下面寫法準確控制風格，否則出圖不當味）：
**一個。 主體側面圖（英雄用，俯視裁切）**
```
一張20世紀70年代的復古編輯肖像照片，照片中一位女士身穿赤陶紅色西裝外套，手持復古鉻合金麥克風，背景是深海軍藍或紅色天鵝絨窗簾，採用溫暖的鎢絲燈光，膠片顆粒柔和，佩戴珍珠項鍊，塗著紅色唇膏，目光向下或側視，構圖類似雜誌封面，色調柔和，佩戴珍珠項鍊，塗著紅色唇膏，目光向下或側視，構圖類似雜誌封面，色調柔和溫暖，使用35毫米膠片拍攝，垂直圖案，垂直圖案。
```
**B。關於區平面圖（桌面錄影場景）**
```
復古播客錄音台、復古鍍鉻麥克風、放在稿紙上的眼鏡、一杯水、背景中的綠色天鵝絨窗簾、溫暖的木質表面、70年代的編輯風格、柔和溫暖的燈光、膠片顆粒感、赤陶色和森林綠的配色方案、3:4 比例
```
**C / D. 最新Drops 兩張配合圖（與簡短主題相關）**
根據使用者的兩個「最新掉落」標題分別產生。例如標題是「復古電子遊戲」→一隻手持有粉紅色任天堂3DS在窗簾前的復古照片。條件：復古膚色、暖色調、構圖垂直3:4。
**E。為什麼區域俯視圖×2（不同視角人物的近景）**
```
一張復古風格的特寫照片，照片中一位身穿紅色西裝外套的女士手持一部復古橙色轉盤電話，背景是綠色天鵝絨窗簾，採用70年代溫暖的燈光風格，帶有膠片顆粒感，比例為3:4。
```
+
```
特寫：一位身穿紅色袖子的女性雙手正在老式打字機上打字，背景是溫暖的木質桌子，畫面帶有膠片顆粒感，營造出70年代的復古氛圍，比例為3:4。
```
**F。 4–5個半色調復古裝飾元素（必須透明背景！）**
這一組是風格靈魂，每個獨立生成，**必須使用gemini-3.1-flash-image-preview模型**（GPT Image處理透明alpha不可靠），提示模板：
```
以磚紅色點陣繪製的[物件]的半色調雙色調插圖，採用 20 世紀 70 年代復古雜誌印刷風格，可見半色調點陣圖案。主體位於完全透明的背景上，帶有 Alpha 通道，沒有任何背景填充。 PNG 摳圖風格，簡潔的扁平化構圖，僅可見紅色點陣，其餘部分皆為透明。
```
[物件]依序替換為：擴音器（喇叭）/耳機（耳機）/紅唇（兄弟）/長頸鹿頭（長頸鹿頭）/復古顯像管電視或1980年代的桌上型電腦（舊電視或老式電腦）。
**保險措施**：即使用正確的提示，模型可能仍然會出現米白底不真實透明。所以在步驟4的CSS裡**必須為所有半色調裝飾圖加`mix-blend-mode: darken;`**，讓米白底自動覆蓋頁面，背景只保留紅點圖案。這是兜底規則，不能省略。
生成完成所有圖後把URL收集到一個清單裡，標註每張圖所屬哪個區塊。
**Step 4·呼叫generateWebpage一次出頁（視覺DNA必須完整傳過去）**
調generateWebpage，提示裡**完整貼上**這份Style DNA，再附上Step 1的簡短內容和下面Step 3的圖片清單。 as_artifact: true。
---
**【風格DNA·必須嚴格遵守】**
**色板（CSS精度）**：
- `--rose`: #F4A8A0（頂部玫瑰粉，英雄與頁腳背景）
- `--cream`: #E5DCC2（中段米杏，關於/最新/為什麼/聯繫背景）
- `--brick`: #B8472D（標題/導航文字/裝飾描邊）
- `--ink`: #2C1810（正文小字）
- `--cream-light`: #F2EBD8（氣泡內部填充）
頂部玫瑰粉到米杏之間用 8–16px 的過渡過渡帶，不要硬切。英雄頂部到右側頂沿帶一點紫灰暈染（rgba(150,140,180,0.25) 過渡過渡到玫瑰），呼應原稿。
**字型安裝（必須使用Google Fonts CDN載入）**：
- 顯示字體（品牌名稱、所有爆炸氣泡裡的手寫台詞）：`"Sail"`或`"Pacifico"`或`"Hello Headline"`，三選一，要報紙有圈、復古糖果感。品牌名字要爆炸大，桌面至少18vw，溢出感強。
- 標題/導航/正文小字：`"Oswald"` 或 `"Bebas Neue"`，全部`文字轉換：大寫`，字距`字母間距：0.06em`。正文小字12–13px，行高1.4。
- 不要再引入第三種字體。
**英雄化疊的精確實現（不能簡潔，不能修改）**：
- 英雄部分高度設為 `100vh` 或 `95vh`，使用 `position:relative` + `overflow:hidden`。
- 肥胖人像圖：`位置: 絕對`，水平居中（`左: 50%;變換:translateX(-50%)`），垂直方向`top: 5vh`，高度約`70vh`，寬度按3:4比例計算（約`52vh`），`z-index: 2`，`b-10% / 50% ``-00% ````-f看到-`b-10% ``-10% ``````-f看到- 10% ``1-0% ``1-00% ``1-00% / 0%。
- 巨型品牌名稱：`位置：絕對`，水平居中，垂直方向`頂部：50vh`（**關鍵**：這個數值要讓文字的頂部邊線代表人像的縱向中部偏下區域，是人像下方）。 `font-size: 28vw`，`line-height: 0.85`，`color: var(--cream-light)`，`z-index: 1`（**比人像低**），`white-space: nowrap`。
-檢查標準：渲染後人像的alpha通道（人像四周邊緣）必須能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，調小`top`值（讓字往上移動）或增加人像高度。
- 圓台詞氣泡：`位置：絕對；右：6%；頂部：25%； z-index: 3`，氣泡和它指向一條垂直虛線之間的方位。
- 半色調裝飾圖（喇叭等）：`position:absolute;右：3%； top: 10%`，寬140px，**必須配`mix-blend-mode: darken`**。
-整個英雄區不要用flex/grid把元素排成行列－元素之間是絕對定位的中心關係。
**佈局規則（其他區塊）**：
- 內容容器最大寬1280px，居中。
- 區塊之間以 `border-top: 1px dashed var(--brick)` 橫線分隔。
- 橢圓圖：`border-radius: 50% / 60%`（外側扁的鴨蛋形），不要正圓。
- 圓形手寫氣泡：`border-radius: 50% / 70%`，背景`var(--cream-light)`，描邊`1px dashed var(--brick)`，內邊距充足，氣泡裡的字用顯示字體+磚色+斜體。
- 氣泡和它指向的元素之間畫一條**虛線連接線**（CSS：`border-left: 1px dashed var(--brick)`配`position:absolute`，長度60–120px），終點一個小紅圓點。這是這個風格的標誌符號，每個區塊至少出現一個處。
- 半色調裝飾圖固定出現在方塊的紫色（左下、右上交替），尺寸120–180px，**全部加`mix-blend-mode: darken`**。
**為什麼區的硬性規則**：
- 必須用步驟3生成的兩張照片為什麼是真實的人物照片，左右並浪費在區塊頂部。
- **禁止**使用表情符號、材質圖示、Font Awesome 等任何通用圖示替代照片或填充「功能對應」。這種風格不存在「功能對應」概念。
- 4列正文是橫向多列文字流，不是4個圖示對應。
**正文寫法**：
- 所有導航、部分標籤、卡片標題、標題全部大寫。
- 正文小字段落用多列（CSS `column-count: 3` 或 `column-count: 4`）實現窄欄報刊感，不要單列大段。
- 標題色一律`var(--brick)`，正文色`var(--ink)`。
**頁腳**：保留「條款與支持·隱私權政策·設計[品牌名]」三行小字，左下角對齊，米杏色。
**響應式**：行動端品牌字號降到28vw（保持），多列正文降到單列，輪廓圖縮到70%寬度居中，裝飾圖縮到80px並保留位置。英雄疊化在行動端依然成立－人像高度可以縮到50vh，品牌字頂部跟隨調到35vh維持遮擋。
---
把簡短裡7段文案、圖片URL清單（標示每張歸屬）一起塞進產生網頁的提示，讓一次出頁。
**第 5 步·交付 + 易用性入口**
生成完成後，把網頁連結給用戶，然後用一句話主動給出3個最高的噪音方向，讓用戶直接點：
1.換主體肖像圖（重新跑步驟3的A圖，換一個姿勢/服裝）
2.調色盤偏移（例如把玫瑰粉換成蜜桃、米杏換成淡薄荷－保持雙色塊結構，只換顏色值）
3. 加/刪/重排區塊（依步驟2的7段重構調整）
用戶選了哪一項就只重跑對應步驟，不要全量重生。
描述
這項技能可以打造獨具特色、充滿復古氣息的單頁網站，非常適合播客主播、個人品牌或希望建立獨特線上形象的小型企業。它完美捕捉了復古雜誌的版面和 20 世紀 70 年代的編輯設計風格。用戶可以提供品牌名稱、朗朗上口的標語以及「關於我們」、「最新發布」和「聯絡我們」等各個版塊的內容。該技能隨後會智慧生成一個完整且視覺效果豐富的網頁。其主要功能包括創建引人注目的「主圖」版塊（包含重疊的文字和圖像）、動態內容塊和自訂導航。如果用戶沒有提供自己的圖片，它還可以利用 AI 生成圖像，以營造一致的復古風格，包括半色調裝飾元素和符合時代背景的照片。整個流程包括收集您的網站偏好和內容，然後根據特定的視覺語言建立完整的頁面設計。最終輸出的是一個帶有唯一 URL 的可訪問網頁，隨時可以分享。用戶還可以進行快速調整，例如更換主圖、調整調色板或重新排列版塊，以確保最終網站完全符合他們的設想。
為什麼我們推薦這個技能
這項技能打造出一個充滿活力、復古風格的網站，其獨特的分層式首頁橫幅設計，非常適合播客主播和小品牌。它鮮明的復古美學和精細的設計細節使其脫穎而出。
相關技能
查看全部粒子動畫示範（HTML）
這項技能可以產生一個簡潔的單頁網站，採用引人注目的黑白未來主義美學設計，非常適合展示新產品、藝術家作品集或電子名片。它專為需要打造視覺衝擊力強的線上形象，但又不想經歷傳統網站開發複雜性的個人或企業而設計。此技能產生一個獨立的 HTML 文件，包含 4-5 個流暢滾動的版塊，每個版塊都採用極簡的字體和高對比度元素來吸引眼球。背景採用自訂編碼的單色動畫——例如流動的粒子或微妙的雜訊漸變——營造出動感十足的高科技氛圍，而無需依賴外部媒體。頁面載入後，首先映入眼簾的是一個引人入勝的動畫：眉毛文字逐漸顯現，隨後主標題以戲劇性的“打亂”效果呈現，副標題則以流暢的淡入方式出現。後續版塊的內容會隨著用戶的滾動優雅地展開，確保流暢且沉浸式的體驗。使用者提供的所有圖片都會自動轉換為灰階影像，以保持視覺主題的一致性。最終輸出是一個響應迅速、易於存取且效能卓越的網頁，以單一可直接部署的 HTML 檔案形式交付。
圖片YouMind Landing Page 風格海報
使用 YouMind Landing Page 風格海報，將您的內容轉變為令人驚豔的視覺敘事。此技能製作出美麗的資訊圖表海報，以獨特的自然復古未來主義美學吸引注意力。非常適合展示關鍵數據、專案亮點或產品功能，您的資訊將以精緻且易於理解的形式呈現。 此技能採用平衡的冷暖色調，以淺灰藍色為基底，搭配細緻的米黃桃色點綴，每張海報都體現出現代 UI 的風格。文字排版優雅，標題使用權威性的思源宋體，內文則以乾淨的無襯線字體呈現，確保可讀性。版面採用動態的 Bento 格線，將您的內容排列成視覺吸引人、邊緣圓潤的卡片，並留有充足的空間，避免設計擁擠。 除了引人注目的視覺效果外，此技能還整合了細膩的設計元素，如均勻的細微電影顆粒、印象派渲染，以及可選的數據點磨砂玻璃圖示。可加入一個半透明的三角稜鏡作為優雅的點綴，而 YouMind 官方標誌則始終低調地放置，以維持品牌一致性。這造就出專業、輕盈且現代的資訊圖表，能有效傳達您的訊息。
婚禮回覆確認
這項技能可以產生一個時尚的、雜誌風格的單頁婚禮或活動網站，非常適合追求現代精緻線上邀請函的新人。它專為希望在特別的日子裡擁有獨特數位形象、超越傳統模板的新人而設計。該技能捕捉了高端雜誌設計的獨特美學，採用簡潔的白色背景、超大無襯線字體和溫暖的紅色點綴。它可以整合您提供的圖片，也可以產生兩張電影般的韋斯安德森風格圖片——一張橫幅和一張故事圖片——圖片中一對戴著標誌性紅色棒球帽的新人，背景是城市或花園，沐浴在溫暖的金色夕陽餘暉中。用戶只需提供姓名、活動日期和地點等關鍵資訊。此技能隨後會產生完整的響應式網頁，包括固定導覽列、醒目的橫幅區域、回覆表單、「我們的故事」專區、活動詳情和聯絡方式。最終輸出是一個可直接使用的HTML網頁，以文件形式交付，如有需要，還可以進行進一步的自訂。
發現下一個適合你的技能
繼續探索更多精選 AI 技能，用於研究、創作和日常工作。