
ピンクのレトロなポッドキャスターサイト
For profile, small brands, and event landing page.
指示
**ステップ 1 · 收集概要(一次问完,宁多勿少)**
askUserQuestion 一次性确认这これらの字句,不要分多轮ゆっくりゆっくり挤:
1. 网站主题/使用(播客 / 个人主页 / 小品牌 / 活动页 / その他——用户描述即可)
2. 品牌名(会作として巨型手写体出现,建议 ≤12 字和訳または ≤6 字中文)
3. 招牌台词 / スローガン(会出现在椭圆手写气泡里,可中可英可西语,越个性越好;用户没想法就依主题代写一句)
4. 导航 + 区块(默认:概要 / 最新ドロップ / 連絡先 / 購読,用户可加可减)
5. 各区块文案(用户不標準备就自動按主题充填占有文案、语气要俏皮、第一人称、带点自警)
6.图片来源:用户上传対スキル自動生成(默认自動生成)
7. 邮箱、社媒ハンドル等联系信息(缺就用占位 hola@example.com / @example)
ユーザーが戻った後、すべてのフィールドを内部で簡単に整理し、次にすべてのステップをこの短い抜粋から取り出し、再度戻る必要はありません。
**ステップ 2 · 套用范の 7 段式骨格**
このハードウェアのセクション構造は固定されており、新たな構造は必要ありません。
1. **トップ ナビゲーション**:左側面品牌名(小文字すべて大文字)+右側面 3–4 个导航链接(すべて大文字、下仮線)。背景延续顶部玫粉色。
2. **英雄(核心変化効果、最重要部分、上下積み不可)**:椭裁切の人物/本体大図+巨型手写体品牌名横跨整宽。**この両者は垂直方向に真正重なり**——品牌名の頭部分1/3まで判断基準:最後の画像上で、品牌名の端の文字(例えば、L、lの丸、kの上)がこの人物像のアルファであると判断する。 → 右上隅にある手書きの台を確認することができます。 1 つの半色調の色の古小物 (喇叭/マイクリャン/イヤホンの 3 つ)。 背景: 玫瑰粉。
3. **概要**:左側大写小标题 "ABOUT ME"(红色)+ 右側大段副标题(红色全大文字、2行换行)→ 下方左側椭圆图 +椭圆手写気泡(もう一つの半色调色装饰、例嘴唇)→右側3行等宽小字正文。
4. **最新のドロップ / 特集**:标题「THE LATEST DROPS」(またはリンク主へのコメント)+ 2 つの高角形の卡片、卡片の下半分にはすべて大文字の色が付いています。卡片の上にはそれぞれ「シーズン X エピソード Y」があります。形式の小字説明(横仮想線分断)。 左側面来臨一椭圆手写気泡 + 半色调红色耳机插画。 背景:米杏。
5. **Why / Mission**:顶部左右并排两张椭圆圆(なぜ区生成的两张人物近景写真、不要用アイコン代替)→ 大写小标题 「なぜ同調すべきですか?」 → 4列等宽小字正文(每列一段、问结尾)→ 右側椭圆手書き气泡「メーリングリストに参加」形式 + 半色调红色复古插画(例:长颈鹿または猫)。 背景:米杏。**使用禁止汎用アイコン(絵文字 / SVG アイコン / 素材)アイコン)代替真写真**。
6. **連絡先**:左側「CONTACT」+右側「HIT ME UP!」 标题 → 下方左側面 3–4 行小文字 + 邮箱 + 社媒 → 中间一张形または椭圆圆 → 右側面来一颗夭圆手写气泡 + 半色调红色复古電脑/電话插画。:米杏。
7. **フッターヒーロー**:再次让巨型手写体品牌名横跨全宽出现一遍(同ヒーロー叠化逻辑:底部插画/装饰元素遮挡品牌名顶部)→ 右上一颗椭圆手写气泡 → 底部小字 「利用規約とサポート · プライバシーポリシー · Designed with [品牌]"。 背景:玫粉。
ユーザが特定のセッションブロックを選択した場合、障害は発生しませんが、シーケンスが乱れることはありません。
**ステップ 3 · 準備备图片资产(用户没传就自己生)**
この重大な値は図に依存しており、図は減少しています。
-使用者**すでに転送**写真: 直接使用ですが、覚醒用写真には十分な「暖色、古胶写真感、人物穿砖红/酒」が必要です色、バクテリア/幕/红布などを備えた「シーン要素」のうちの 1 つをスキップすることはできません。
- 用户**未上传**:调用generateImage生成下面这6张(每张独立调用,プロンプト必须按下面写法精确制御风格,否则出图不对味):
**A. 本体肖像图(英雄用、椭圆裁切)**
「`」
1970年代のヴィンテージ風ポートレート写真。テラコッタレッドのブレザーを着た女性がレトロなクロームマイクを持ち、濃いネイビーまたは赤のベルベットのカーテンを背景に、温かみのあるタングステン照明、柔らかなフィルムグレイン、パールネックレス、赤い口紅、下または横を向いている、雑誌の表紙のような構図、落ち着いた温かみのある色彩、35mmフィルムで撮影、縦3:4。
「`」
**B.区椭圆图(桌面录制场景)について**
「`」
ビンテージのポッドキャスト録音デスク、レトロなクロームマイク、台本の上に置かれた眼鏡、水の入ったグラス、背景に緑のベルベットのカーテン、温かみのある木製の表面、1970年代の編集スタイル、柔らかく温かい照明、フィルムグレイン、テラコッタとフォレストグリーンのカラーパレット、3:4
「`」
**C / D. 最新ドロップ 两张卡片图(簡単な主题相关)**
ユーザーの 2 つの「最新ドロップ」マークに応じて個別に生成されます。たとえば、マークは「レトロ ビデオ ゲーム」です。→ 箱の前にある淡い色の Nintendo 3DS だけを手に入れた古い写真。
**E.なぜ区椭圆图 ×2(別視角的人物近景)**
「`」
赤いブレザーを着た女性がレトロなオレンジ色のダイヤル式電話を耳に当てている、クローズアップのビンテージ風エディトリアル写真。緑のベルベットのカーテンを背景に、70年代風の温かみのある照明、フィルムグレイン、3:4
「`」
+
「`」
赤い袖の女性の手がビンテージのタイプライターでタイピングしているクローズアップ。温かみのある木製の机、フィルムグレイン、70年代風の編集雰囲気、3:4
「`」
**F. 4–5 个半色调复古装饰元素(背景必須!)**
これは风格灵魂、独立生成、**必要な gemini-3.1-flash-image-preview モデル**(GPT Image 处理透明 alpha 不可靠)、プロンプト モジュール:
「`」
[オブジェクト]のハーフトーン・デュオトーンイラスト。レンガ色のドットのみで表現され、1970年代のヴィンテージ雑誌の印刷スタイル。ハーフトーンのドットパターンがはっきりと見える。被写体はアルファチャンネル付きの完全に透明な背景に分離され、背景の塗りつぶしは一切なし。PNGカットアウトスタイル。シンプルなフラット構成。赤いドットのみが表示され、その他はすべて透明。
「`」
[オブジェクト] 順次置換: メガホン(喇叭)/ ヘッドフォン(耳机)/ 赤い唇(嘴唇)/ キリン頭(长颈鹿头)/ レトロな真空管テレビまたは 1980 年代のデスクトップ コンピュータ(老電視または老式電器)。
**保護策**: 適切なプロンプトを使用すると、モデルは、ステップ 4 の CSS エリア ** で、すべての半色調整図を「mix-blend-mode」に追加する必要があります。暗くする;`**、白い底が自動的にトップ面の背景に溶け込み、ポイントのパターンのみが残ります。
すべての図の作成が完了すると、URL が 1 つのクリア エリアに収集され、各図の属するゾーンに登録されます。
**ステップ 4 · 使用してgenerateWebpage 一次性出页(視聴 DNA 必须完整传过去)**
Web ページを生成し、このスタイル DNA の下に ** 完全な結合 ** を表示し、さらにステップ 1 の簡単な内容とステップ 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"`、全部 `text-transform: uppercase`、字幅 `letter-spacing: 0.06em`。正文小字 12–13px、行高 1.4。
- 第三の文字体を再度挿入する必要はありません。
**英雄叠化の精确实现(省略不可、改不可)**:
- ヒーローセクションの高さは `100vh` または `95vh` に設定され、`position:relative` + `overflow:hidden` を使用します。
- 椭圆人像图:`位置: 絶対`,水平居中(`左: 50%;変換:translateX(-50%)`)、垂直方向 `top: 5vh`、高さ `70vh`、高さ 3:4 比例計算(約 `52vh`)、`z-index: 2`、`border-radius: 50% / 60%`、`object-fit: cover`。
- 巨型品牌名:`位置: 絶対`、水平居中、垂直方向`上: 50vh`(**关键**:この数値は人像の方向中部偏下領域にあります、人像の下方ではありません)。`font-size: 28vw`、`line-height: 0.85`、`color: var(--cream-light)`、`z-index: 1`(**比人像低**)、`white-space: nowrap`。
- 検査基準: 染後の人物像のアルファ チャネル (人物像の横線) は、品牌名の上半分の字形を選択できる必要があります。品牌名全体が完全な文字母に達した場合は、「トップ」値 (文字往き) を小さくするか、人物像の高さを追加します。
- 椭圆台词气泡:`位置: 絶対。右: 6%。トップ: 25%; z-index: 3 '、気泡とその方向の位置の間に 1 本の直線の線があります。
- 半色调装饰图(喇叭等):`位置: 絶対。右: 3%。 top: 10%`、宽 140px、** `mix-blend-mode: darken`を適用する必要があります**。
- ヒーロー エリア全体で、フレックス/グリッドを使用せずにエレメントを列に配置します。エレメント間の配置は、一定の追加方式です。
**布局法则(他区块)**:
- コンテンツコンテナ最大 1280px、居中。
- 区切りの間は `border-top: 1px 破線 var(--brick)` 横線区切りを使用します。
- 断面図:`border-radius: 50% / 60%`(横方向に細長い細長いタンパク質)、不要な正円。
- 椭圆手書き気泡:`border-radius: 50% / 70%`、背景 `var(--cream-light)`、描線 `1px 破線 var(--brick)`、内周距離充足、気泡里の文字用表示字体 + レンガ色 + 斜体。
- 气泡と它指向的要素之间画一条**仮想線连接線**(CSS:`border-left: 1px 破線 var(--brick)` 配 `position:Absolute`,長さこれは、各セクションに少なくとも 1 つ存在する、このボックスのマーク シンボルです。
- 半色調整の図は、セクションブロックの角落(左下、上交替)に固定され、サイズは 120 ~ 180 ピクセル、** すべて `mix-blend-mode: darken'** を追加します。
**なぜ区の硬直性を評価するのか**:
- ステップ 3 で生成された 2 つのメッセージを使用する必要があります。 なぜ本当に人物の写真を削除し、エリアの上部に排出します。
- **禁止**絵文字、マテリアルアイコン、Font Awesome などの一般的なアイコンの代わりに写真を使用したり、「機能アイコン」を埋めたりすることはできません。この問題には「機能アイコン」という概念は存在しません。
- 4 列の正文は横方向の複数列の文字の流れであり、4 つの絵の断片ではありません。
**正文写法**:
- すべてのナビゲーション、セクション ラベル、カード タイトル、見出しはすべて大文字です。
- 正文小文字落用多列(CSS `column-count: 3` または `column-count: 4`)は、狭い栏报刊感、不要な単数列大段を実現します。
- 标题色一律 `var(--brick)`、正文 `var(--ink)`。
**页脚**:「利用規約とサポート · プライバシー ポリシー · [商品牌名] で設計」を保持します。 三行小字、左下角对齐、米杏色。
**対応形式**: 移動端末品の牌文字番号は 28vw (保持)、複数の列は単一列に、フレーム画像は 70% の輝度 i に縮小され、画像は 80px に縮小され、位置が保持されます。 50vh、商品牌の上部は 35vh の遮蔽系に調整されます。
---
短い里 7 段落の文例、画像 URL クリア (各項目への注釈) を使用して、Web ページを生成するプロンプトをもう一度表示します。
**ステップ5・渡し+微调入力**
生成が完了したら、Web ページをユーザー句に接続し、その後、主動作を使用して 3 つの最高周波数の微調整方向を出力し、ユーザーの直接点を視聴します。
1.换本体肖像図(再新跑ステップ3のA図、换一姿态/服装)
2. 调色板偏移(比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构、只换色值)
3. 加 / 删 / 重排区块(按ステップ 2 の 7 段骨架调整)
ユーザは 1 つのステップを選択するだけで、すべてのステップを繰り返す必要はありません。
説明
このスキルは、ポッドキャスター、パーソナルブランド、または独自のオンラインプレゼンスを求める中小企業に最適な、レトロな雰囲気のシングルページWebサイトを作成します。ヴィンテージ雑誌のレイアウトや1970年代の編集デザインの美学を捉えています。ユーザーは、ブランド名、キャッチーなスローガン、および「About」、「Latest Drops」、「Contact」などのさまざまなセクションのコンテンツを提供できます。スキルは、視覚的に豊かな完全なWebページをインテリジェントに生成します。主な機能には、テキストと画像が重なり合う印象的な「ヒーロー」セクション、動的なコンテンツブロック、カスタムナビゲーションの作成が含まれます。また、ユーザーが独自の画像を提供しない場合、ハーフトーンの装飾要素や時代に合った写真など、一貫したビンテージルックを実現するAI画像生成機能も提供します。プロセスでは、Webサイトの設定とコンテンツを収集し、特定のビジュアル言語に準拠したフルページデザインを組み立てます。最終的な出力は、共有可能な固有のURLを備えたライブWebページです。ユーザーは、メイン画像の差し替え、カラーパレットの微調整、セクションの並べ替えなど、迅速な調整を行うためのオプションも利用でき、最終的なサイトが自分のイメージと完全に一致するようにすることができます。
このスキルをおすすめする理由
このスキルは、ポッドキャスターや小規模ブランドに最適な、ユニークな階層構造のヒーローセクションを備えた、活気に満ちたレトロ調のウェブサイトを作成します。独特のヴィンテージ感と緻密なデザインディテールが、このウェブサイトを際立たせています。
関連スキル
すべて表示パーティクルアニメーションプレゼンテーション(HTML)
このスキルは、洗練されたシングルページWebサイトを生成します。印象的な白黒の未来的な美学を備え、新製品、アーティストのポートフォリオ、デジタル名刺の紹介に最適です。従来のWebサイト開発の複雑さを伴わずに、視覚的にインパクトのあるオンラインプレゼンスを必要とする個人または企業向けに設計されています。このスキルは、ミニマルなタイポグラフィと高コントラストの要素で注目を集めるように設計された、4~5つのスムーズにスクロールするセクションを備えた自己完結型のHTMLファイルを生成します。背景には、流れる粒子や微妙なノイズグラデーションなどのカスタムコーディングされたモノクロアニメーションが躍動し、外部メディアに頼ることなく、ダイナミックでハイテクな雰囲気を作り出します。ページが読み込まれると、訪問者は魅力的なヒーローアニメーションで迎えられます。眉毛のテキストが入力され、続いてメインタイトルに劇的な「スクランブル」効果がかかり、サブタイトルがスムーズにフェードインします。その後、ユーザーがスクロールすると、後続のセクションのコンテンツが優雅に表示され、流動的で没入感のある体験が保証されます。ユーザーが提供したすべての画像は、一貫したビジュアルテーマを維持するために自動的にグレースケールに変換されます。最終的な出力は、レスポンシブでアクセシビリティが高く、パフォーマンスに優れたウェブページであり、すぐに展開できる単一のHTMLファイルとして提供されます。
YouMind ランディングページ風ポスター
あなたのコンテンツを、YouMind ランディングページスタイルポスターで魅力的なビジュアルストーリーに変身させましょう。このスキルは、ユニークな Natural Retro-Futurism の美学を備えた美しいインフォグラフィックポスターを作成します。重要なデータ、プロジェクトのハイライト、製品の特徴を紹介するのに最適で、情報は洗練され、わかりやすく表示されます。 明るいグレーブルーを基調に、微妙なベージュピーチのアクセントを加えたバランスの取れたクールウォームカラーパレットを活用し、各ポスターはモダンなUIの雰囲気を醸し出します。エレガントなタイポグラフィでは、タイトルに Source Han Serif、本文にクリーンなサンセリフを使用し、読みやすさを確保。ダイナミックな Bento グリッドレイアウトでコンテンツを視覚的に魅力的なソフトエッジのカードに配置し、ゆったりとしたスペースでごちゃつきを回避します。 印象的なビジュアルに加えて、均一な微細フィルムグレイン、印象派風のレンダリング、データポイント用のオプションのすりガラスアイコンなどの微妙なデザイン要素を統合。1つの半透明三角柱をエレガントなアクセントとして追加でき、YouMind 公式ロゴは常に控えめに配置され、ブランドの一貫性を保ちます。これにより、プロフェッショナルで軽やか、かつモダンなインフォグラフィックが完成し、メッセージを効果的に伝えます。
結婚式の出欠確認
このスキルは、スタイリッシュでエディトリアル風のシングルページ結婚式またはイベントウェブサイトを生成します。モダンで洗練されたオンライン招待状をお探しのカップルに最適です。従来のテンプレートにとらわれず、特別な日に個性的なデジタルプレゼンスを求めるすべての方のために設計されています。このスキルは、ハイエンドのエディトリアルデザインからインスピレーションを得た独自の美学を捉え、クリーンな白い背景、特大のサンセリフ体フォント、温かみのある赤のアクセントが特徴です。提供された画像を統合することも、ウェス・アンダーソン風の映画のような2つの画像(ヒーローバナーとストーリー画像)を生成することもできます。これらの画像には、赤い野球帽をかぶったカップルが、温かみのある夕暮れ時の光が差し込む都会または庭園の背景をバックに写っています。ユーザーは、名前、イベントの日付、場所などの主要な詳細情報を提供するだけです。スキルは、固定ナビゲーションバー、目立つヒーローセクション、出欠確認フォーム、専用の「私たちのストーリー」セクション、イベントの詳細、連絡先情報を含む、完全なレスポンシブウェブページを作成します。最終出力は、すぐに使用できるHTMLウェブページであり、必要に応じてさらにカスタマイズできます。

ピンクのレトロなポッドキャスターサイト
For profile, small brands, and event landing page.
指示
**ステップ 1 · 收集概要(一次问完,宁多勿少)**
askUserQuestion 一次性确认这これらの字句,不要分多轮ゆっくりゆっくり挤:
1. 网站主题/使用(播客 / 个人主页 / 小品牌 / 活动页 / その他——用户描述即可)
2. 品牌名(会作として巨型手写体出现,建议 ≤12 字和訳または ≤6 字中文)
3. 招牌台词 / スローガン(会出现在椭圆手写气泡里,可中可英可西语,越个性越好;用户没想法就依主题代写一句)
4. 导航 + 区块(默认:概要 / 最新ドロップ / 連絡先 / 購読,用户可加可减)
5. 各区块文案(用户不標準备就自動按主题充填占有文案、语气要俏皮、第一人称、带点自警)
6.图片来源:用户上传対スキル自動生成(默认自動生成)
7. 邮箱、社媒ハンドル等联系信息(缺就用占位 hola@example.com / @example)
ユーザーが戻った後、すべてのフィールドを内部で簡単に整理し、次にすべてのステップをこの短い抜粋から取り出し、再度戻る必要はありません。
**ステップ 2 · 套用范の 7 段式骨格**
このハードウェアのセクション構造は固定されており、新たな構造は必要ありません。
1. **トップ ナビゲーション**:左側面品牌名(小文字すべて大文字)+右側面 3–4 个导航链接(すべて大文字、下仮線)。背景延续顶部玫粉色。
2. **英雄(核心変化効果、最重要部分、上下積み不可)**:椭裁切の人物/本体大図+巨型手写体品牌名横跨整宽。**この両者は垂直方向に真正重なり**——品牌名の頭部分1/3まで判断基準:最後の画像上で、品牌名の端の文字(例えば、L、lの丸、kの上)がこの人物像のアルファであると判断する。 → 右上隅にある手書きの台を確認することができます。 1 つの半色調の色の古小物 (喇叭/マイクリャン/イヤホンの 3 つ)。 背景: 玫瑰粉。
3. **概要**:左側大写小标题 "ABOUT ME"(红色)+ 右側大段副标题(红色全大文字、2行换行)→ 下方左側椭圆图 +椭圆手写気泡(もう一つの半色调色装饰、例嘴唇)→右側3行等宽小字正文。
4. **最新のドロップ / 特集**:标题「THE LATEST DROPS」(またはリンク主へのコメント)+ 2 つの高角形の卡片、卡片の下半分にはすべて大文字の色が付いています。卡片の上にはそれぞれ「シーズン X エピソード Y」があります。形式の小字説明(横仮想線分断)。 左側面来臨一椭圆手写気泡 + 半色调红色耳机插画。 背景:米杏。
5. **Why / Mission**:顶部左右并排两张椭圆圆(なぜ区生成的两张人物近景写真、不要用アイコン代替)→ 大写小标题 「なぜ同調すべきですか?」 → 4列等宽小字正文(每列一段、问结尾)→ 右側椭圆手書き气泡「メーリングリストに参加」形式 + 半色调红色复古插画(例:长颈鹿または猫)。 背景:米杏。**使用禁止汎用アイコン(絵文字 / SVG アイコン / 素材)アイコン)代替真写真**。
6. **連絡先**:左側「CONTACT」+右側「HIT ME UP!」 标题 → 下方左側面 3–4 行小文字 + 邮箱 + 社媒 → 中间一张形または椭圆圆 → 右側面来一颗夭圆手写气泡 + 半色调红色复古電脑/電话插画。:米杏。
7. **フッターヒーロー**:再次让巨型手写体品牌名横跨全宽出现一遍(同ヒーロー叠化逻辑:底部插画/装饰元素遮挡品牌名顶部)→ 右上一颗椭圆手写气泡 → 底部小字 「利用規約とサポート · プライバシーポリシー · Designed with [品牌]"。 背景:玫粉。
ユーザが特定のセッションブロックを選択した場合、障害は発生しませんが、シーケンスが乱れることはありません。
**ステップ 3 · 準備备图片资产(用户没传就自己生)**
この重大な値は図に依存しており、図は減少しています。
-使用者**すでに転送**写真: 直接使用ですが、覚醒用写真には十分な「暖色、古胶写真感、人物穿砖红/酒」が必要です色、バクテリア/幕/红布などを備えた「シーン要素」のうちの 1 つをスキップすることはできません。
- 用户**未上传**:调用generateImage生成下面这6张(每张独立调用,プロンプト必须按下面写法精确制御风格,否则出图不对味):
**A. 本体肖像图(英雄用、椭圆裁切)**
「`」
1970年代のヴィンテージ風ポートレート写真。テラコッタレッドのブレザーを着た女性がレトロなクロームマイクを持ち、濃いネイビーまたは赤のベルベットのカーテンを背景に、温かみのあるタングステン照明、柔らかなフィルムグレイン、パールネックレス、赤い口紅、下または横を向いている、雑誌の表紙のような構図、落ち着いた温かみのある色彩、35mmフィルムで撮影、縦3:4。
「`」
**B.区椭圆图(桌面录制场景)について**
「`」
ビンテージのポッドキャスト録音デスク、レトロなクロームマイク、台本の上に置かれた眼鏡、水の入ったグラス、背景に緑のベルベットのカーテン、温かみのある木製の表面、1970年代の編集スタイル、柔らかく温かい照明、フィルムグレイン、テラコッタとフォレストグリーンのカラーパレット、3:4
「`」
**C / D. 最新ドロップ 两张卡片图(簡単な主题相关)**
ユーザーの 2 つの「最新ドロップ」マークに応じて個別に生成されます。たとえば、マークは「レトロ ビデオ ゲーム」です。→ 箱の前にある淡い色の Nintendo 3DS だけを手に入れた古い写真。
**E.なぜ区椭圆图 ×2(別視角的人物近景)**
「`」
赤いブレザーを着た女性がレトロなオレンジ色のダイヤル式電話を耳に当てている、クローズアップのビンテージ風エディトリアル写真。緑のベルベットのカーテンを背景に、70年代風の温かみのある照明、フィルムグレイン、3:4
「`」
+
「`」
赤い袖の女性の手がビンテージのタイプライターでタイピングしているクローズアップ。温かみのある木製の机、フィルムグレイン、70年代風の編集雰囲気、3:4
「`」
**F. 4–5 个半色调复古装饰元素(背景必須!)**
これは风格灵魂、独立生成、**必要な gemini-3.1-flash-image-preview モデル**(GPT Image 处理透明 alpha 不可靠)、プロンプト モジュール:
「`」
[オブジェクト]のハーフトーン・デュオトーンイラスト。レンガ色のドットのみで表現され、1970年代のヴィンテージ雑誌の印刷スタイル。ハーフトーンのドットパターンがはっきりと見える。被写体はアルファチャンネル付きの完全に透明な背景に分離され、背景の塗りつぶしは一切なし。PNGカットアウトスタイル。シンプルなフラット構成。赤いドットのみが表示され、その他はすべて透明。
「`」
[オブジェクト] 順次置換: メガホン(喇叭)/ ヘッドフォン(耳机)/ 赤い唇(嘴唇)/ キリン頭(长颈鹿头)/ レトロな真空管テレビまたは 1980 年代のデスクトップ コンピュータ(老電視または老式電器)。
**保護策**: 適切なプロンプトを使用すると、モデルは、ステップ 4 の CSS エリア ** で、すべての半色調整図を「mix-blend-mode」に追加する必要があります。暗くする;`**、白い底が自動的にトップ面の背景に溶け込み、ポイントのパターンのみが残ります。
すべての図の作成が完了すると、URL が 1 つのクリア エリアに収集され、各図の属するゾーンに登録されます。
**ステップ 4 · 使用してgenerateWebpage 一次性出页(視聴 DNA 必须完整传过去)**
Web ページを生成し、このスタイル DNA の下に ** 完全な結合 ** を表示し、さらにステップ 1 の簡単な内容とステップ 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"`、全部 `text-transform: uppercase`、字幅 `letter-spacing: 0.06em`。正文小字 12–13px、行高 1.4。
- 第三の文字体を再度挿入する必要はありません。
**英雄叠化の精确实现(省略不可、改不可)**:
- ヒーローセクションの高さは `100vh` または `95vh` に設定され、`position:relative` + `overflow:hidden` を使用します。
- 椭圆人像图:`位置: 絶対`,水平居中(`左: 50%;変換:translateX(-50%)`)、垂直方向 `top: 5vh`、高さ `70vh`、高さ 3:4 比例計算(約 `52vh`)、`z-index: 2`、`border-radius: 50% / 60%`、`object-fit: cover`。
- 巨型品牌名:`位置: 絶対`、水平居中、垂直方向`上: 50vh`(**关键**:この数値は人像の方向中部偏下領域にあります、人像の下方ではありません)。`font-size: 28vw`、`line-height: 0.85`、`color: var(--cream-light)`、`z-index: 1`(**比人像低**)、`white-space: nowrap`。
- 検査基準: 染後の人物像のアルファ チャネル (人物像の横線) は、品牌名の上半分の字形を選択できる必要があります。品牌名全体が完全な文字母に達した場合は、「トップ」値 (文字往き) を小さくするか、人物像の高さを追加します。
- 椭圆台词气泡:`位置: 絶対。右: 6%。トップ: 25%; z-index: 3 '、気泡とその方向の位置の間に 1 本の直線の線があります。
- 半色调装饰图(喇叭等):`位置: 絶対。右: 3%。 top: 10%`、宽 140px、** `mix-blend-mode: darken`を適用する必要があります**。
- ヒーロー エリア全体で、フレックス/グリッドを使用せずにエレメントを列に配置します。エレメント間の配置は、一定の追加方式です。
**布局法则(他区块)**:
- コンテンツコンテナ最大 1280px、居中。
- 区切りの間は `border-top: 1px 破線 var(--brick)` 横線区切りを使用します。
- 断面図:`border-radius: 50% / 60%`(横方向に細長い細長いタンパク質)、不要な正円。
- 椭圆手書き気泡:`border-radius: 50% / 70%`、背景 `var(--cream-light)`、描線 `1px 破線 var(--brick)`、内周距離充足、気泡里の文字用表示字体 + レンガ色 + 斜体。
- 气泡と它指向的要素之间画一条**仮想線连接線**(CSS:`border-left: 1px 破線 var(--brick)` 配 `position:Absolute`,長さこれは、各セクションに少なくとも 1 つ存在する、このボックスのマーク シンボルです。
- 半色調整の図は、セクションブロックの角落(左下、上交替)に固定され、サイズは 120 ~ 180 ピクセル、** すべて `mix-blend-mode: darken'** を追加します。
**なぜ区の硬直性を評価するのか**:
- ステップ 3 で生成された 2 つのメッセージを使用する必要があります。 なぜ本当に人物の写真を削除し、エリアの上部に排出します。
- **禁止**絵文字、マテリアルアイコン、Font Awesome などの一般的なアイコンの代わりに写真を使用したり、「機能アイコン」を埋めたりすることはできません。この問題には「機能アイコン」という概念は存在しません。
- 4 列の正文は横方向の複数列の文字の流れであり、4 つの絵の断片ではありません。
**正文写法**:
- すべてのナビゲーション、セクション ラベル、カード タイトル、見出しはすべて大文字です。
- 正文小文字落用多列(CSS `column-count: 3` または `column-count: 4`)は、狭い栏报刊感、不要な単数列大段を実現します。
- 标题色一律 `var(--brick)`、正文 `var(--ink)`。
**页脚**:「利用規約とサポート · プライバシー ポリシー · [商品牌名] で設計」を保持します。 三行小字、左下角对齐、米杏色。
**対応形式**: 移動端末品の牌文字番号は 28vw (保持)、複数の列は単一列に、フレーム画像は 70% の輝度 i に縮小され、画像は 80px に縮小され、位置が保持されます。 50vh、商品牌の上部は 35vh の遮蔽系に調整されます。
---
短い里 7 段落の文例、画像 URL クリア (各項目への注釈) を使用して、Web ページを生成するプロンプトをもう一度表示します。
**ステップ5・渡し+微调入力**
生成が完了したら、Web ページをユーザー句に接続し、その後、主動作を使用して 3 つの最高周波数の微調整方向を出力し、ユーザーの直接点を視聴します。
1.换本体肖像図(再新跑ステップ3のA図、换一姿态/服装)
2. 调色板偏移(比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构、只换色值)
3. 加 / 删 / 重排区块(按ステップ 2 の 7 段骨架调整)
ユーザは 1 つのステップを選択するだけで、すべてのステップを繰り返す必要はありません。
説明
このスキルは、ポッドキャスター、パーソナルブランド、または独自のオンラインプレゼンスを求める中小企業に最適な、レトロな雰囲気のシングルページWebサイトを作成します。ヴィンテージ雑誌のレイアウトや1970年代の編集デザインの美学を捉えています。ユーザーは、ブランド名、キャッチーなスローガン、および「About」、「Latest Drops」、「Contact」などのさまざまなセクションのコンテンツを提供できます。スキルは、視覚的に豊かな完全なWebページをインテリジェントに生成します。主な機能には、テキストと画像が重なり合う印象的な「ヒーロー」セクション、動的なコンテンツブロック、カスタムナビゲーションの作成が含まれます。また、ユーザーが独自の画像を提供しない場合、ハーフトーンの装飾要素や時代に合った写真など、一貫したビンテージルックを実現するAI画像生成機能も提供します。プロセスでは、Webサイトの設定とコンテンツを収集し、特定のビジュアル言語に準拠したフルページデザインを組み立てます。最終的な出力は、共有可能な固有のURLを備えたライブWebページです。ユーザーは、メイン画像の差し替え、カラーパレットの微調整、セクションの並べ替えなど、迅速な調整を行うためのオプションも利用でき、最終的なサイトが自分のイメージと完全に一致するようにすることができます。
このスキルをおすすめする理由
このスキルは、ポッドキャスターや小規模ブランドに最適な、ユニークな階層構造のヒーローセクションを備えた、活気に満ちたレトロ調のウェブサイトを作成します。独特のヴィンテージ感と緻密なデザインディテールが、このウェブサイトを際立たせています。
関連スキル
すべて表示パーティクルアニメーションプレゼンテーション(HTML)
このスキルは、洗練されたシングルページWebサイトを生成します。印象的な白黒の未来的な美学を備え、新製品、アーティストのポートフォリオ、デジタル名刺の紹介に最適です。従来のWebサイト開発の複雑さを伴わずに、視覚的にインパクトのあるオンラインプレゼンスを必要とする個人または企業向けに設計されています。このスキルは、ミニマルなタイポグラフィと高コントラストの要素で注目を集めるように設計された、4~5つのスムーズにスクロールするセクションを備えた自己完結型のHTMLファイルを生成します。背景には、流れる粒子や微妙なノイズグラデーションなどのカスタムコーディングされたモノクロアニメーションが躍動し、外部メディアに頼ることなく、ダイナミックでハイテクな雰囲気を作り出します。ページが読み込まれると、訪問者は魅力的なヒーローアニメーションで迎えられます。眉毛のテキストが入力され、続いてメインタイトルに劇的な「スクランブル」効果がかかり、サブタイトルがスムーズにフェードインします。その後、ユーザーがスクロールすると、後続のセクションのコンテンツが優雅に表示され、流動的で没入感のある体験が保証されます。ユーザーが提供したすべての画像は、一貫したビジュアルテーマを維持するために自動的にグレースケールに変換されます。最終的な出力は、レスポンシブでアクセシビリティが高く、パフォーマンスに優れたウェブページであり、すぐに展開できる単一のHTMLファイルとして提供されます。
YouMind ランディングページ風ポスター
あなたのコンテンツを、YouMind ランディングページスタイルポスターで魅力的なビジュアルストーリーに変身させましょう。このスキルは、ユニークな Natural Retro-Futurism の美学を備えた美しいインフォグラフィックポスターを作成します。重要なデータ、プロジェクトのハイライト、製品の特徴を紹介するのに最適で、情報は洗練され、わかりやすく表示されます。 明るいグレーブルーを基調に、微妙なベージュピーチのアクセントを加えたバランスの取れたクールウォームカラーパレットを活用し、各ポスターはモダンなUIの雰囲気を醸し出します。エレガントなタイポグラフィでは、タイトルに Source Han Serif、本文にクリーンなサンセリフを使用し、読みやすさを確保。ダイナミックな Bento グリッドレイアウトでコンテンツを視覚的に魅力的なソフトエッジのカードに配置し、ゆったりとしたスペースでごちゃつきを回避します。 印象的なビジュアルに加えて、均一な微細フィルムグレイン、印象派風のレンダリング、データポイント用のオプションのすりガラスアイコンなどの微妙なデザイン要素を統合。1つの半透明三角柱をエレガントなアクセントとして追加でき、YouMind 公式ロゴは常に控えめに配置され、ブランドの一貫性を保ちます。これにより、プロフェッショナルで軽やか、かつモダンなインフォグラフィックが完成し、メッセージを効果的に伝えます。
結婚式の出欠確認
このスキルは、スタイリッシュでエディトリアル風のシングルページ結婚式またはイベントウェブサイトを生成します。モダンで洗練されたオンライン招待状をお探しのカップルに最適です。従来のテンプレートにとらわれず、特別な日に個性的なデジタルプレゼンスを求めるすべての方のために設計されています。このスキルは、ハイエンドのエディトリアルデザインからインスピレーションを得た独自の美学を捉え、クリーンな白い背景、特大のサンセリフ体フォント、温かみのある赤のアクセントが特徴です。提供された画像を統合することも、ウェス・アンダーソン風の映画のような2つの画像(ヒーローバナーとストーリー画像)を生成することもできます。これらの画像には、赤い野球帽をかぶったカップルが、温かみのある夕暮れ時の光が差し込む都会または庭園の背景をバックに写っています。ユーザーは、名前、イベントの日付、場所などの主要な詳細情報を提供するだけです。スキルは、固定ナビゲーションバー、目立つヒーローセクション、出欠確認フォーム、専用の「私たちのストーリー」セクション、イベントの詳細、連絡先情報を含む、完全なレスポンシブウェブページを作成します。最終出力は、すぐに使用できるHTMLウェブページであり、必要に応じてさらにカスタマイズできます。
次のお気に入りスキルを見つけよう
リサーチ、制作、日々の作業に役立つ厳選AIスキルをさらに探しましょう。