
핑크 레트로 팟캐스터 사이트
For profile, small brands, and event landing page.
지시사항
**1단계 · 收集 간략한 설명(一次问完,宁多勿少)**
AskUserQuestion을 사용하려면 一次性确认这些字段,不要分多轮慢慢挤:
1. 网站主题/用途(播客 / 个人主页 / small牌 / 活动页 / 其他——用户描述即可)
2. 제품명(会작품명(会작품명)
3. 招牌台词 / 슬로건
4. 导航 + 区块(默认:정보 / 최신 상품 / 연락처 / 구독,用户可加可减)
5. 各区块文案(用户没准备就自动按主题填·位文案,语气要俏皮、第一人称、带点自嘲)
6. 图文来源:用户上传 vs. Skill 自动生成(默认自动生成)
7. 邮箱、社媒 핸들 等联系信息(缺就用·位 hola@example.com / @example)
用户回复后,把所有字段整理进一个内部 간략한 备用,下face所有步骤道从这个 간략한 取数,不要再回头追问。
**2단계 · 套用规范的 7 段式骨架**
这个风格的页面结构是固determinative,不要发明新结构。把 간략한 里的内容硬塞进下면 7 段:
1. **상단 탐색**: 左侧상품牌name(소문자 모두 대문자)+ 右侧 3–4 个导航链接(all-caps, 下划虚线)。背景延续顶부玫粉color.
2. **영웅(核心叠化效果,最关键的一段,不能做成上下堆叠)**:椭圆裁切的人物/主体大图 +巨型手写体product牌name横跨整宽。**这两者必须在垂直方向上真巨叠**——제품명칭顶跳 1/3 到 1/2 被人像的下半part遮挡,呈现「字从人image背后钻出来」的报刊封面感。判断标准:在最终截图上,product牌name顶端的字母(如 L、l的圆头、k 上划)应该被人文 알파 일반적으로, 看不到完整字字입니다. 右上角浮一颗椭圆手写台词气泡 + 一个半color调红color复古작은물(喇叭/麦克风/耳机三选一)。背景:玫粉。
3. **정보**: 左侧大写小标题 "ABOUT ME"(红color)+ 右侧大段副标题(红color all-caps,2 行换行)→ 下方左侧椭圆图 +椭圆手写气泡(再叠一个半color调红color装饰,比如嘴唇)→ 右侧 3 列等宽소문자 정문。背景:米杏。
4. **최신 드롭/추천**: 标题 "THE LATEST DROPS"(或对应主题词)+ 两张高瘦矩shape卡 Images ,卡文标题用 all-caps 黑color压在图文下半part。卡文上方各有 "SEASON X EPISODE Y'의 형태는 横虚线分隔)입니다.
5. **이유/미션**: 顶部左右并排两张椭圆图(用 Why 区生成的两张人物近景 사진,不要用 icon 替代)→ 大写小标题 "왜 시청해야 합니까?" → 4 列等宽小字正文(每列一段,问句结尾)→ 右侧椭圆手写气泡 "내 메일링 리스트에 가입하세요" shape式 +半color调红color复古插画(比如长颈鹿或猫)。背景:米杏。**禁止用 통용 아이콘(이모티콘 / SVG 아이콘 / 소재 아이콘)替代真实 사진**。
6. **연락처**: 左侧 "연락처" + 右侧 "HIT ME UP!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩shape或椭圆图 → 右侧再来一颗椭圆手写气泡 +半color调红color复古电脑/电话插画。背景:米杏。
7. **바닥글 영웅**:再次让巨型手写体product牌name横跨全宽出现一遍(同 Hero 叠化逻辑:底부插画/装饰元素遮挡품牌name顶부)→右上一颗椭圆手写气泡 → 底부작은글 "약관 및 지원 · 개인 정보 보호 정책 · [품牌]로 설계되었습니다."。背景:玫粉。
如果用户砍掉了某个区块就跳过,不要硬塞;但顺序不能乱。
**3단계 · 准备图文资产(用户没传就自己生)**
간략한 설명:
-用户**已上传**图 Images:直接用,但提醒用户photography需要满足「暖color调、复古胶picture感、人物穿砖红/酒红color、有麦克风/绿幕/红绒布等录System场景救场」之一才不会跳戏。不满足就下一步靠装饰图救场。
- 用户**未上传**:调用 generateImage 生成下face这 6 张(每张独立调用,prompt 必须按下face写法精确控 조절风格,否则流图不对味):
**에이. 主体肖image图(Hero 用,椭圆裁切)**
```
1970년대 빈티지 화보 같은 인물 사진. 테라코타 레드 블레이저를 입은 여성이 레트로풍 크롬 마이크를 들고 있다. 배경은 짙은 남색 또는 붉은색 벨벳 커튼이고, 따뜻한 텅스텐 조명이 비추고 있다. 필름 그레인이 부드럽게 드러나며, 진주 목걸이와 붉은 립스틱을 바른 여성이 아래 또는 옆을 바라보고 있다. 잡지 표지 같은 구도이며, 은은하고 따뜻한 색감이 특징이다. 35mm 필름으로 촬영되었고, 세로 3:4 비율이다.
```
**비.区椭圆图(桌face录 Manufacturer场景) 소개**
```
빈티지 팟캐스트 녹음 데스크, 레트로 크롬 마이크, 대본 위에 놓인 안경, 물 한 잔, 배경의 녹색 벨벳 커튼, 따뜻한 느낌의 나무 표면, 1970년대 편집 스타일, 부드럽고 따뜻한 조명, 필름 그레인, 테라코타와 숲 녹색 색상 팔레트, 3:4 비율
```
**C / D. 최신 드랍스 两张卡文图(与 간략한 主题상关)**
根据用户的两个 "최신 드롭" 标题分别生成。例如标题是 "레트로 비디오 게임" → 一只手拿着粉color任天堂 3DS 이전의 고전 사진입니다.
**이자형. 왜 区椭圆图 ×2(不同视角的人物近景)**
```
빨간색 블레이저를 입은 여성이 복고풍 오렌지색 다이얼식 전화기를 귀에 대고 있는 모습을 클로즈업한 빈티지 에디토리얼 사진. 배경은 녹색 벨벳 커튼이며, 따뜻한 70년대풍 조명과 필름 그레인이 특징이다. 화면비는 3:4이다.
```
+
```
붉은 소매 옷을 입은 여성의 손이 빈티지 타자기를 두드리는 모습의 클로즈업. 따뜻한 느낌의 나무 책상, 필름 그레인, 70년대 잡지 화보 같은 분위기, 3:4 비율.
```
**에프. 4–5 个半color调复古装饰元素(必须透明背景!)**
这一组是风格灵魂,每个独立生成,**必须用 gemini-3.1-flash-image-preview 模型**(GPT Image 处理透ming alpha 不可靠),프롬프트 模板:
```
[객체]를 벽돌색 점으로만 표현한 하프톤 듀오톤 일러스트레이션입니다. 1970년대 빈티지 잡지 인쇄 스타일로, 하프톤 점 패턴이 보이며, 피사체는 알파 채널이 있는 완전히 투명한 배경에 분리되어 있습니다. 배경 채우기는 전혀 없으며, PNG 컷아웃 스타일로, 단순한 평면 구성을 특징으로 합니다. 빨간색 점만 보이고 나머지는 모두 투명합니다.
```
[개체] 依次替换为: 확성기(喇叭)/ 헤드폰(耳机)/ 빨간 입술(嘴唇)/ 기린 머리(长颈鹿头)/ 복고풍 튜브 TV 또는 1980년대 데스크톱 컴퓨터(老电视或老式电脑).
**保险措施**: 即使用了正确의 프롬프트, 模型可能仍然给米白底而不真透明. 4단계의 CSS에서里**必须给所有半color调装饰图加 `혼합 혼합 모드: 어둡게;`** ,让米白底自动融入页face背景,只保留红点图案。这是兜底规则,不能省略。
生成完所有图后把 URL 收集到一个清单里,标注每张图归属哪个区块。
**4단계 · 调사용 generateWebpage 一次性流页(视觉 DNA 必须完整传过去)**
调 generateWebpage,prompt 里**完整粘贴**下面这份 Style DNA,再附上 Step 1 의 간략한 内容과 Step 3의 사진 清单。as_artifact: true。
---
**【스타일 DNA · 必须严格遵守】**
**색상(CSS 变weight级精degree)**:
- `--rose`: #F4A8A0(顶部玫粉,Hero 与 Footer 背景)
- `--cream`: #E5DCC2(中段米杏,정보 / 최신 / 이유 / 연락처 背景)
- `--brick`: #B8472D(标题/导航文字/装饰描边)
- `--ink`: #2C1810(정문소자)
- `--cream-light`: #F2EBD8(气泡内부填充)
영웅顶PART到画布顶上沿带一点紫灰晕染(rgba(150,140,180,0.25) 径向渐变到 rose) ,呼应原稿。
**자체体配对(必须사용 Google Fonts CDN 加载)**:
- 显示字体(상품명、所有椭圆气泡里的手写台词):`"Sail"` 或 `"Pacifico"` 或 `"안녕하세요 헤드라인"`, 三选一,要丰满有圈、复古糖果感。product牌name字号要爆炸大,desktop 至少 18vw,溢take感强。
- 标题/导航/정문소자:`"Oswald"` 或 `"Bebas Neue"`,전체부 `text-transform: uppercase`,字距 `letter-spacing: 0.06em`。정문소자 12–13px,行高 1.4。
- 不要再引入第三种字体.
**영웅 叠化的精确实现(不能省略,不能改)**:
- 영웅 섹션 高島设为 `100vh` 或 `95vh`,使사용 `위치: 상대` + `오버플로: 숨김`。
- 椭圆人image图:`위치: 절대`, 水平居中(`왼쪽: 50%; 변환: 번역X(-50%)`), 垂直方向 `top: 5vh`, 高degree约 `70vh`, 宽degree按 3:4 比例计算(约 `52vh`),`z-index: 2`,`border-radius: 50% / 60%`,`object-fit:cover`。
- 巨型상품특명: `위치: 절대`, 水平居中, 垂直方向 `top: 50vh`(**关键**:这个数值要让文字 顶部边线落在人敵纵向中文 偏下区域,而不是人image下方)。`글꼴 크기: 28vw`,`줄 높이: 0.85`,`색상: var(--cream-light)`,`z-index: 1`(**比人image低**),`white-space: nowrap`。
- 检查标准:渲染后人木의 알파通道(人体椭圆边缘)必须能切掉product牌name上半截字字.如果product牌name整行道看得到完整字母,调小 `top`值(让字往上挪)或增加人上挪。
- 椭圆台词气泡:`위치: 절대; 오른쪽: 6%; 최고: 25%; z-색인: 3`, 气泡과 它指向의 방향은 间一条竖直虚线입니다.
- 半color调装饰图(喇叭等):`위치: 절대; 오른쪽: 3%; 상단: 10%`, 宽 140px, **必须配`mix-blend-mode: darken`**。
- 整个 Hero는 플렉스/그리드를 사용하지 않고 플렉스/그리드를 사용합니다.——元素之间是绝对对定位的叠加关系.
**布局법则(其他区块)**:
- 内容容器最大宽 1280px,居中。
- 区块之间用 `border-top: 1px dashed var(--brick)` 横线分隔。
- 椭圆图:`경계 반경: 50% / 60%`(横向稍扁的鸭蛋shape),不要正圆。
- 椭圆手写气泡:`border-radius: 50% / 70%`,背景 `var(--cream-light)`, 描边 `1px dashed var(--brick)`, 内边距充足, 气泡里的字용显示字体 + brick color +斜体.
- 气泡 와 它指向 의 元素 间画一条**虚线连接线**(CSS:`border-left: 1px dashed var(--brick)` 配 `position:absolute`,长島60–120px), 末端点一个小红圆点.
- 半color调装饰图固 정 출 现 에서 区块 tive 角落 (左下、右上交替 ) 尺寸 120–180px , ** 전체 부분 加 `mix-blend-mode: darken`** 。
**왜 硬性规则**:
- 必须用 3단계 生成成两张 왜 真实人椭圆 사진, 左右并排放在区块顶part.
- **禁止**사용 이모티콘、재료 아이콘、Font Awesome 等任何통용 아이콘 替代Photo작품或填充 "feature 卡picture"。这个风格不存在 "feature 卡picture" 概念。
- 4 列正文是横向多列文字流, 4 个图标卡是是가 아닙니다.
**정문법**:
- 모든 탐색, 섹션 라벨, 카드 제목, 헤드라인 전체가 대문자입니다.
- 정문소자段落用多列(CSS `column-count: 3` 或 `column-count: 4`)实现窄栏报刊感,不要单列大段。
- 标题color一律 `var(--brick)`, 정문색 `var(--ink)`。
**页脚**:保留 "약관 및 지원 · 개인 정보 보호 정책 · [상품명]으로 설계됨" 三行小字,左下角对齐,米杏color。
**响应式**:移动端product牌字号降到 28vw(保持),多列正文降到单列,椭圆图缩到 70% 宽tivity居中,装饰图缩到 80px并保留位置。Hero 叠化는 移动端依然成立——인상 고도可以缩到 50vh, 품牌字 top 跟着调到 35vh 维持遮挡关系。
---
把 간략한 里 7 段文案、图文 URL 清单(标注每张归属)一起塞进 generateWebpage 的 프롬프트 ,让它一次流页。
**5단계 · 交付 + 微调入口**
生成完后,把 웹페이지 链接给用户,然后用一句话主动给向 3 个最高频的微调方向,让用户直接点:
1. 换主体肖image图(중신설 Step 3 的 A 图,换一种姿态/服装)
2. 调color板偏移(比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双color块结构,只换color值)
3. 加 / 删 / 重排区块(按 Step 2 的 7 段骨架调整)
用户选了哪一项就只重跑对应步骤,不要전체량중생.
설명
이 스킬은 팟캐스터, 개인 브랜드 또는 독특한 온라인 존재감을 원하는 소규모 기업에 적합한, 레트로 감성이 물씬 풍기는 단일 페이지 웹사이트를 제작합니다. 빈티지 잡지 레이아웃과 1970년대 편집 디자인의 미학을 담아냈습니다. 사용자는 브랜드 이름, 눈길을 사로잡는 슬로건, 그리고 "소개", "최신 소식", "연락처" 등의 다양한 섹션에 대한 콘텐츠를 제공할 수 있습니다. 그러면 스킬이 지능적으로 시각적으로 풍부한 웹페이지를 완성해 줍니다. 주요 기능으로는 텍스트와 이미지가 겹쳐진 인상적인 "히어로" 섹션, 동적 콘텐츠 블록, 맞춤형 내비게이션 등이 있습니다. 또한 사용자가 이미지를 제공하지 않을 경우, 하프톤 장식 요소와 시대에 맞는 사진을 포함하여 일관된 빈티지 느낌을 위한 AI 이미지 생성 기능도 제공합니다. 웹사이트 선호도와 콘텐츠를 수집한 후, 특정 시각적 언어에 부합하는 전체 페이지 디자인을 구성하는 과정을 거칩니다. 최종 결과물은 고유한 URL이 포함된 공유 가능한 웹페이지입니다. 사용자는 메인 이미지 교체, 색상 팔레트 조정, 섹션 순서 변경 등과 같은 빠른 조정 옵션을 통해 최종 웹사이트가 자신의 비전에 완벽하게 부합하도록 할 수 있습니다.
이 스킬을 추천하는 이유
이 스킬은 독특한 레이어드 히어로 섹션이 돋보이는 생동감 넘치는 레트로 테마 웹사이트를 제작해 줍니다. 팟캐스터와 소규모 브랜드에 안성맞춤이며, 독특한 빈티지 감성과 세심한 디자인 디테일로 시선을 사로잡습니다.
관련 스킬
전체 보기파티클 애니메이션 프레젠테이션(HTML)
이 스킬은 눈길을 사로잡는 흑백의 미래지향적인 디자인을 특징으로 하는 세련된 단일 페이지 웹사이트를 생성합니다. 신제품 소개, 아티스트 포트폴리오, 디지털 명함 등에 이상적입니다. 기존 웹사이트 개발의 복잡성 없이 시각적으로 강렬한 온라인 존재감을 구축하고자 하는 개인이나 기업을 위해 설계되었습니다. 이 스킬은 4~5개의 부드럽게 스크롤되는 섹션으로 구성된 독립적인 HTML 파일을 생성하며, 각 섹션은 미니멀한 타이포그래피와 고대비 요소로 시선을 사로잡도록 디자인되었습니다. 배경은 흐르는 입자나 은은한 노이즈 그라데이션과 같은 맞춤 코딩된 흑백 애니메이션으로 생동감을 더하여 외부 미디어 없이도 역동적이고 첨단적인 분위기를 연출합니다. 페이지 로딩 시, 매력적인 히어로 애니메이션이 방문객을 맞이합니다. 눈썹 모양의 텍스트가 나타나고, 메인 제목은 극적인 "스크램블" 효과와 함께 부드럽게 페이드인됩니다. 이후 섹션의 콘텐츠는 사용자가 스크롤함에 따라 자연스럽게 나타나 유연하고 몰입감 있는 경험을 제공합니다. 사용자가 제공하는 모든 이미지는 일관된 시각적 테마를 유지하기 위해 자동으로 회색조로 변환됩니다. 최종 결과물은 반응형 디자인, 접근성, 그리고 뛰어난 성능을 갖춘 웹페이지이며, 배포 준비가 완료된 단일 HTML 파일 형태로 제공됩니다.
YouMind 랜딩 페이지 스타일 포스터
콘텐츠를 YouMind 랜딩 페이지 스타일 포스터로 멋진 시각적 내러티브로 변환하세요. 이 스킬은 독특한 내추럴 레트로-미래주의 미학으로 주목을 끄는 아름다운 인포그래픽 포스터를 제작합니다. 주요 데이터, 프로젝트 하이라이트 또는 제품 기능을 소개하는 데 완벽하며, 정보가 세련되고 이해하기 쉬운 형식으로 제공됩니다. 균형 잡힌 쿨-워머 컬러 팔레트(연한 회청색 바탕에 은은한 베이지-피치 악센트)를 활용하여 각 포스터는 현대적인 UI 느낌을 구현합니다. 제목에는 권위 있는 Source Han Serif, 본문에는 깨끗한 산세리프체를 사용하여 가독성을 보장하는 우아한 타이포그래피를 제공합니다. 레이아웃은 다이내믹한 벤토 그리드를 활용하여 콘텐츠를 시각적으로 매력적이고 부드러운 모서리의 카드로 배열하고 넉넉한 여백으로 복잡함을 피합니다. 시각적 효과 외에도 이 스킬은 균일한 미세 필름 그레인, 인상파 렌더링, 데이터 포인트를 위한 선택적 프로스트 글라스 아이콘과 같은 미묘한 디자인 요소를 통합합니다. 우아한 포인트로 반투명 삼각 프리즘을 추가할 수 있으며, YouMind 공식 로고는 항상 브랜드 일관성을 유지하기 위해 눈에 띄지 않게 배치됩니다. 그 결과 메시지를 효과적으로 전달하는 전문적이고 경쾌하며 현대적인 인포그래픽이 탄생합니다.
결혼식 참석 여부 회신
이 스킬은 세련되고 고급스러운 에디토리얼 테마의 단일 페이지 웨딩 또는 이벤트 웹사이트를 제작해 줍니다. 모던하고 세련된 온라인 초대장을 원하는 커플에게 안성맞춤입니다. 전통적인 템플릿을 넘어 특별한 날을 위한 독창적인 디지털 이미지를 만들고 싶은 모든 분들을 위해 디자인되었습니다. 고급 에디토리얼 디자인에서 영감을 받은 독특한 미학을 담아 깔끔한 흰색 배경, 큼직한 산세리프 서체, 따뜻한 붉은색 포인트가 특징입니다. 사용자가 제공한 이미지를 통합하거나, 웨스 앤더슨 스타일의 영화 같은 이미지 두 장(메인 배너와 스토리 이미지)을 생성할 수 있습니다. 이미지에는 시그니처 레드 야구 모자를 쓴 커플이 도시 또는 정원을 배경으로 따뜻한 황금빛 조명 아래 촬영됩니다. 사용자는 이름, 이벤트 날짜, 장소 등의 주요 정보만 입력하면 됩니다. 그러면 스킬이 고정 내비게이션 바, 눈에 띄는 메인 섹션, RSVP 양식, "우리의 이야기" 섹션, 이벤트 세부 정보, 연락처 정보 등을 포함한 완벽한 반응형 웹페이지를 제작해 줍니다. 최종 결과물은 바로 사용할 수 있는 HTML 웹페이지 파일로 제공되며, 필요에 따라 추가로 수정할 수 있습니다.

핑크 레트로 팟캐스터 사이트
For profile, small brands, and event landing page.
지시사항
**1단계 · 收集 간략한 설명(一次问完,宁多勿少)**
AskUserQuestion을 사용하려면 一次性确认这些字段,不要分多轮慢慢挤:
1. 网站主题/用途(播客 / 个人主页 / small牌 / 活动页 / 其他——用户描述即可)
2. 제품명(会작품명(会작품명)
3. 招牌台词 / 슬로건
4. 导航 + 区块(默认:정보 / 최신 상품 / 연락처 / 구독,用户可加可减)
5. 各区块文案(用户没准备就自动按主题填·位文案,语气要俏皮、第一人称、带点自嘲)
6. 图文来源:用户上传 vs. Skill 自动生成(默认自动生成)
7. 邮箱、社媒 핸들 等联系信息(缺就用·位 hola@example.com / @example)
用户回复后,把所有字段整理进一个内部 간략한 备用,下face所有步骤道从这个 간략한 取数,不要再回头追问。
**2단계 · 套用规范的 7 段式骨架**
这个风格的页面结构是固determinative,不要发明新结构。把 간략한 里的内容硬塞进下면 7 段:
1. **상단 탐색**: 左侧상품牌name(소문자 모두 대문자)+ 右侧 3–4 个导航链接(all-caps, 下划虚线)。背景延续顶부玫粉color.
2. **영웅(核心叠化效果,最关键的一段,不能做成上下堆叠)**:椭圆裁切的人物/主体大图 +巨型手写体product牌name横跨整宽。**这两者必须在垂直方向上真巨叠**——제품명칭顶跳 1/3 到 1/2 被人像的下半part遮挡,呈现「字从人image背后钻出来」的报刊封面感。判断标准:在最终截图上,product牌name顶端的字母(如 L、l的圆头、k 上划)应该被人文 알파 일반적으로, 看不到完整字字입니다. 右上角浮一颗椭圆手写台词气泡 + 一个半color调红color复古작은물(喇叭/麦克风/耳机三选一)。背景:玫粉。
3. **정보**: 左侧大写小标题 "ABOUT ME"(红color)+ 右侧大段副标题(红color all-caps,2 行换行)→ 下方左侧椭圆图 +椭圆手写气泡(再叠一个半color调红color装饰,比如嘴唇)→ 右侧 3 列等宽소문자 정문。背景:米杏。
4. **최신 드롭/추천**: 标题 "THE LATEST DROPS"(或对应主题词)+ 两张高瘦矩shape卡 Images ,卡文标题用 all-caps 黑color压在图文下半part。卡文上方各有 "SEASON X EPISODE Y'의 형태는 横虚线分隔)입니다.
5. **이유/미션**: 顶部左右并排两张椭圆图(用 Why 区生成的两张人物近景 사진,不要用 icon 替代)→ 大写小标题 "왜 시청해야 합니까?" → 4 列等宽小字正文(每列一段,问句结尾)→ 右侧椭圆手写气泡 "내 메일링 리스트에 가입하세요" shape式 +半color调红color复古插画(比如长颈鹿或猫)。背景:米杏。**禁止用 통용 아이콘(이모티콘 / SVG 아이콘 / 소재 아이콘)替代真实 사진**。
6. **연락처**: 左侧 "연락처" + 右侧 "HIT ME UP!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩shape或椭圆图 → 右侧再来一颗椭圆手写气泡 +半color调红color复古电脑/电话插画。背景:米杏。
7. **바닥글 영웅**:再次让巨型手写体product牌name横跨全宽出现一遍(同 Hero 叠化逻辑:底부插画/装饰元素遮挡품牌name顶부)→右上一颗椭圆手写气泡 → 底부작은글 "약관 및 지원 · 개인 정보 보호 정책 · [품牌]로 설계되었습니다."。背景:玫粉。
如果用户砍掉了某个区块就跳过,不要硬塞;但顺序不能乱。
**3단계 · 准备图文资产(用户没传就自己生)**
간략한 설명:
-用户**已上传**图 Images:直接用,但提醒用户photography需要满足「暖color调、复古胶picture感、人物穿砖红/酒红color、有麦克风/绿幕/红绒布等录System场景救场」之一才不会跳戏。不满足就下一步靠装饰图救场。
- 用户**未上传**:调用 generateImage 生成下face这 6 张(每张独立调用,prompt 必须按下face写法精确控 조절风格,否则流图不对味):
**에이. 主体肖image图(Hero 用,椭圆裁切)**
```
1970년대 빈티지 화보 같은 인물 사진. 테라코타 레드 블레이저를 입은 여성이 레트로풍 크롬 마이크를 들고 있다. 배경은 짙은 남색 또는 붉은색 벨벳 커튼이고, 따뜻한 텅스텐 조명이 비추고 있다. 필름 그레인이 부드럽게 드러나며, 진주 목걸이와 붉은 립스틱을 바른 여성이 아래 또는 옆을 바라보고 있다. 잡지 표지 같은 구도이며, 은은하고 따뜻한 색감이 특징이다. 35mm 필름으로 촬영되었고, 세로 3:4 비율이다.
```
**비.区椭圆图(桌face录 Manufacturer场景) 소개**
```
빈티지 팟캐스트 녹음 데스크, 레트로 크롬 마이크, 대본 위에 놓인 안경, 물 한 잔, 배경의 녹색 벨벳 커튼, 따뜻한 느낌의 나무 표면, 1970년대 편집 스타일, 부드럽고 따뜻한 조명, 필름 그레인, 테라코타와 숲 녹색 색상 팔레트, 3:4 비율
```
**C / D. 최신 드랍스 两张卡文图(与 간략한 主题상关)**
根据用户的两个 "최신 드롭" 标题分别生成。例如标题是 "레트로 비디오 게임" → 一只手拿着粉color任天堂 3DS 이전의 고전 사진입니다.
**이자형. 왜 区椭圆图 ×2(不同视角的人物近景)**
```
빨간색 블레이저를 입은 여성이 복고풍 오렌지색 다이얼식 전화기를 귀에 대고 있는 모습을 클로즈업한 빈티지 에디토리얼 사진. 배경은 녹색 벨벳 커튼이며, 따뜻한 70년대풍 조명과 필름 그레인이 특징이다. 화면비는 3:4이다.
```
+
```
붉은 소매 옷을 입은 여성의 손이 빈티지 타자기를 두드리는 모습의 클로즈업. 따뜻한 느낌의 나무 책상, 필름 그레인, 70년대 잡지 화보 같은 분위기, 3:4 비율.
```
**에프. 4–5 个半color调复古装饰元素(必须透明背景!)**
这一组是风格灵魂,每个独立生成,**必须用 gemini-3.1-flash-image-preview 模型**(GPT Image 处理透ming alpha 不可靠),프롬프트 模板:
```
[객체]를 벽돌색 점으로만 표현한 하프톤 듀오톤 일러스트레이션입니다. 1970년대 빈티지 잡지 인쇄 스타일로, 하프톤 점 패턴이 보이며, 피사체는 알파 채널이 있는 완전히 투명한 배경에 분리되어 있습니다. 배경 채우기는 전혀 없으며, PNG 컷아웃 스타일로, 단순한 평면 구성을 특징으로 합니다. 빨간색 점만 보이고 나머지는 모두 투명합니다.
```
[개체] 依次替换为: 확성기(喇叭)/ 헤드폰(耳机)/ 빨간 입술(嘴唇)/ 기린 머리(长颈鹿头)/ 복고풍 튜브 TV 또는 1980년대 데스크톱 컴퓨터(老电视或老式电脑).
**保险措施**: 即使用了正确의 프롬프트, 模型可能仍然给米白底而不真透明. 4단계의 CSS에서里**必须给所有半color调装饰图加 `혼합 혼합 모드: 어둡게;`** ,让米白底自动融入页face背景,只保留红点图案。这是兜底规则,不能省略。
生成完所有图后把 URL 收集到一个清单里,标注每张图归属哪个区块。
**4단계 · 调사용 generateWebpage 一次性流页(视觉 DNA 必须完整传过去)**
调 generateWebpage,prompt 里**完整粘贴**下面这份 Style DNA,再附上 Step 1 의 간략한 内容과 Step 3의 사진 清单。as_artifact: true。
---
**【스타일 DNA · 必须严格遵守】**
**색상(CSS 变weight级精degree)**:
- `--rose`: #F4A8A0(顶部玫粉,Hero 与 Footer 背景)
- `--cream`: #E5DCC2(中段米杏,정보 / 최신 / 이유 / 연락처 背景)
- `--brick`: #B8472D(标题/导航文字/装饰描边)
- `--ink`: #2C1810(정문소자)
- `--cream-light`: #F2EBD8(气泡内부填充)
영웅顶PART到画布顶上沿带一点紫灰晕染(rgba(150,140,180,0.25) 径向渐变到 rose) ,呼应原稿。
**자체体配对(必须사용 Google Fonts CDN 加载)**:
- 显示字体(상품명、所有椭圆气泡里的手写台词):`"Sail"` 或 `"Pacifico"` 或 `"안녕하세요 헤드라인"`, 三选一,要丰满有圈、复古糖果感。product牌name字号要爆炸大,desktop 至少 18vw,溢take感强。
- 标题/导航/정문소자:`"Oswald"` 或 `"Bebas Neue"`,전체부 `text-transform: uppercase`,字距 `letter-spacing: 0.06em`。정문소자 12–13px,行高 1.4。
- 不要再引入第三种字体.
**영웅 叠化的精确实现(不能省略,不能改)**:
- 영웅 섹션 高島设为 `100vh` 或 `95vh`,使사용 `위치: 상대` + `오버플로: 숨김`。
- 椭圆人image图:`위치: 절대`, 水平居中(`왼쪽: 50%; 변환: 번역X(-50%)`), 垂直方向 `top: 5vh`, 高degree约 `70vh`, 宽degree按 3:4 比例计算(约 `52vh`),`z-index: 2`,`border-radius: 50% / 60%`,`object-fit:cover`。
- 巨型상품특명: `위치: 절대`, 水平居中, 垂直方向 `top: 50vh`(**关键**:这个数值要让文字 顶部边线落在人敵纵向中文 偏下区域,而不是人image下方)。`글꼴 크기: 28vw`,`줄 높이: 0.85`,`색상: var(--cream-light)`,`z-index: 1`(**比人image低**),`white-space: nowrap`。
- 检查标准:渲染后人木의 알파通道(人体椭圆边缘)必须能切掉product牌name上半截字字.如果product牌name整行道看得到完整字母,调小 `top`值(让字往上挪)或增加人上挪。
- 椭圆台词气泡:`위치: 절대; 오른쪽: 6%; 최고: 25%; z-색인: 3`, 气泡과 它指向의 방향은 间一条竖直虚线입니다.
- 半color调装饰图(喇叭等):`위치: 절대; 오른쪽: 3%; 상단: 10%`, 宽 140px, **必须配`mix-blend-mode: darken`**。
- 整个 Hero는 플렉스/그리드를 사용하지 않고 플렉스/그리드를 사용합니다.——元素之间是绝对对定位的叠加关系.
**布局법则(其他区块)**:
- 内容容器最大宽 1280px,居中。
- 区块之间用 `border-top: 1px dashed var(--brick)` 横线分隔。
- 椭圆图:`경계 반경: 50% / 60%`(横向稍扁的鸭蛋shape),不要正圆。
- 椭圆手写气泡:`border-radius: 50% / 70%`,背景 `var(--cream-light)`, 描边 `1px dashed var(--brick)`, 内边距充足, 气泡里的字용显示字体 + brick color +斜体.
- 气泡 와 它指向 의 元素 间画一条**虚线连接线**(CSS:`border-left: 1px dashed var(--brick)` 配 `position:absolute`,长島60–120px), 末端点一个小红圆点.
- 半color调装饰图固 정 출 现 에서 区块 tive 角落 (左下、右上交替 ) 尺寸 120–180px , ** 전체 부분 加 `mix-blend-mode: darken`** 。
**왜 硬性规则**:
- 必须用 3단계 生成成两张 왜 真实人椭圆 사진, 左右并排放在区块顶part.
- **禁止**사용 이모티콘、재료 아이콘、Font Awesome 等任何통용 아이콘 替代Photo작품或填充 "feature 卡picture"。这个风格不存在 "feature 卡picture" 概念。
- 4 列正文是横向多列文字流, 4 个图标卡是是가 아닙니다.
**정문법**:
- 모든 탐색, 섹션 라벨, 카드 제목, 헤드라인 전체가 대문자입니다.
- 정문소자段落用多列(CSS `column-count: 3` 或 `column-count: 4`)实现窄栏报刊感,不要单列大段。
- 标题color一律 `var(--brick)`, 정문색 `var(--ink)`。
**页脚**:保留 "약관 및 지원 · 개인 정보 보호 정책 · [상품명]으로 설계됨" 三行小字,左下角对齐,米杏color。
**响应式**:移动端product牌字号降到 28vw(保持),多列正文降到单列,椭圆图缩到 70% 宽tivity居中,装饰图缩到 80px并保留位置。Hero 叠化는 移动端依然成立——인상 고도可以缩到 50vh, 품牌字 top 跟着调到 35vh 维持遮挡关系。
---
把 간략한 里 7 段文案、图文 URL 清单(标注每张归属)一起塞进 generateWebpage 的 프롬프트 ,让它一次流页。
**5단계 · 交付 + 微调入口**
生成完后,把 웹페이지 链接给用户,然后用一句话主动给向 3 个最高频的微调方向,让用户直接点:
1. 换主体肖image图(중신설 Step 3 的 A 图,换一种姿态/服装)
2. 调color板偏移(比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双color块结构,只换color值)
3. 加 / 删 / 重排区块(按 Step 2 的 7 段骨架调整)
用户选了哪一项就只重跑对应步骤,不要전체량중생.
설명
이 스킬은 팟캐스터, 개인 브랜드 또는 독특한 온라인 존재감을 원하는 소규모 기업에 적합한, 레트로 감성이 물씬 풍기는 단일 페이지 웹사이트를 제작합니다. 빈티지 잡지 레이아웃과 1970년대 편집 디자인의 미학을 담아냈습니다. 사용자는 브랜드 이름, 눈길을 사로잡는 슬로건, 그리고 "소개", "최신 소식", "연락처" 등의 다양한 섹션에 대한 콘텐츠를 제공할 수 있습니다. 그러면 스킬이 지능적으로 시각적으로 풍부한 웹페이지를 완성해 줍니다. 주요 기능으로는 텍스트와 이미지가 겹쳐진 인상적인 "히어로" 섹션, 동적 콘텐츠 블록, 맞춤형 내비게이션 등이 있습니다. 또한 사용자가 이미지를 제공하지 않을 경우, 하프톤 장식 요소와 시대에 맞는 사진을 포함하여 일관된 빈티지 느낌을 위한 AI 이미지 생성 기능도 제공합니다. 웹사이트 선호도와 콘텐츠를 수집한 후, 특정 시각적 언어에 부합하는 전체 페이지 디자인을 구성하는 과정을 거칩니다. 최종 결과물은 고유한 URL이 포함된 공유 가능한 웹페이지입니다. 사용자는 메인 이미지 교체, 색상 팔레트 조정, 섹션 순서 변경 등과 같은 빠른 조정 옵션을 통해 최종 웹사이트가 자신의 비전에 완벽하게 부합하도록 할 수 있습니다.
이 스킬을 추천하는 이유
이 스킬은 독특한 레이어드 히어로 섹션이 돋보이는 생동감 넘치는 레트로 테마 웹사이트를 제작해 줍니다. 팟캐스터와 소규모 브랜드에 안성맞춤이며, 독특한 빈티지 감성과 세심한 디자인 디테일로 시선을 사로잡습니다.
관련 스킬
전체 보기파티클 애니메이션 프레젠테이션(HTML)
이 스킬은 눈길을 사로잡는 흑백의 미래지향적인 디자인을 특징으로 하는 세련된 단일 페이지 웹사이트를 생성합니다. 신제품 소개, 아티스트 포트폴리오, 디지털 명함 등에 이상적입니다. 기존 웹사이트 개발의 복잡성 없이 시각적으로 강렬한 온라인 존재감을 구축하고자 하는 개인이나 기업을 위해 설계되었습니다. 이 스킬은 4~5개의 부드럽게 스크롤되는 섹션으로 구성된 독립적인 HTML 파일을 생성하며, 각 섹션은 미니멀한 타이포그래피와 고대비 요소로 시선을 사로잡도록 디자인되었습니다. 배경은 흐르는 입자나 은은한 노이즈 그라데이션과 같은 맞춤 코딩된 흑백 애니메이션으로 생동감을 더하여 외부 미디어 없이도 역동적이고 첨단적인 분위기를 연출합니다. 페이지 로딩 시, 매력적인 히어로 애니메이션이 방문객을 맞이합니다. 눈썹 모양의 텍스트가 나타나고, 메인 제목은 극적인 "스크램블" 효과와 함께 부드럽게 페이드인됩니다. 이후 섹션의 콘텐츠는 사용자가 스크롤함에 따라 자연스럽게 나타나 유연하고 몰입감 있는 경험을 제공합니다. 사용자가 제공하는 모든 이미지는 일관된 시각적 테마를 유지하기 위해 자동으로 회색조로 변환됩니다. 최종 결과물은 반응형 디자인, 접근성, 그리고 뛰어난 성능을 갖춘 웹페이지이며, 배포 준비가 완료된 단일 HTML 파일 형태로 제공됩니다.
YouMind 랜딩 페이지 스타일 포스터
콘텐츠를 YouMind 랜딩 페이지 스타일 포스터로 멋진 시각적 내러티브로 변환하세요. 이 스킬은 독특한 내추럴 레트로-미래주의 미학으로 주목을 끄는 아름다운 인포그래픽 포스터를 제작합니다. 주요 데이터, 프로젝트 하이라이트 또는 제품 기능을 소개하는 데 완벽하며, 정보가 세련되고 이해하기 쉬운 형식으로 제공됩니다. 균형 잡힌 쿨-워머 컬러 팔레트(연한 회청색 바탕에 은은한 베이지-피치 악센트)를 활용하여 각 포스터는 현대적인 UI 느낌을 구현합니다. 제목에는 권위 있는 Source Han Serif, 본문에는 깨끗한 산세리프체를 사용하여 가독성을 보장하는 우아한 타이포그래피를 제공합니다. 레이아웃은 다이내믹한 벤토 그리드를 활용하여 콘텐츠를 시각적으로 매력적이고 부드러운 모서리의 카드로 배열하고 넉넉한 여백으로 복잡함을 피합니다. 시각적 효과 외에도 이 스킬은 균일한 미세 필름 그레인, 인상파 렌더링, 데이터 포인트를 위한 선택적 프로스트 글라스 아이콘과 같은 미묘한 디자인 요소를 통합합니다. 우아한 포인트로 반투명 삼각 프리즘을 추가할 수 있으며, YouMind 공식 로고는 항상 브랜드 일관성을 유지하기 위해 눈에 띄지 않게 배치됩니다. 그 결과 메시지를 효과적으로 전달하는 전문적이고 경쾌하며 현대적인 인포그래픽이 탄생합니다.
결혼식 참석 여부 회신
이 스킬은 세련되고 고급스러운 에디토리얼 테마의 단일 페이지 웨딩 또는 이벤트 웹사이트를 제작해 줍니다. 모던하고 세련된 온라인 초대장을 원하는 커플에게 안성맞춤입니다. 전통적인 템플릿을 넘어 특별한 날을 위한 독창적인 디지털 이미지를 만들고 싶은 모든 분들을 위해 디자인되었습니다. 고급 에디토리얼 디자인에서 영감을 받은 독특한 미학을 담아 깔끔한 흰색 배경, 큼직한 산세리프 서체, 따뜻한 붉은색 포인트가 특징입니다. 사용자가 제공한 이미지를 통합하거나, 웨스 앤더슨 스타일의 영화 같은 이미지 두 장(메인 배너와 스토리 이미지)을 생성할 수 있습니다. 이미지에는 시그니처 레드 야구 모자를 쓴 커플이 도시 또는 정원을 배경으로 따뜻한 황금빛 조명 아래 촬영됩니다. 사용자는 이름, 이벤트 날짜, 장소 등의 주요 정보만 입력하면 됩니다. 그러면 스킬이 고정 내비게이션 바, 눈에 띄는 메인 섹션, RSVP 양식, "우리의 이야기" 섹션, 이벤트 세부 정보, 연락처 정보 등을 포함한 완벽한 반응형 웹페이지를 제작해 줍니다. 최종 결과물은 바로 사용할 수 있는 HTML 웹페이지 파일로 제공되며, 필요에 따라 추가로 수정할 수 있습니다.
다음으로 즐겨 쓸 스킬을 찾아보세요
연구, 창작, 일상 업무에 유용한 엄선된 AI 스킬을 더 탐색해 보세요.