UIUX 學習筆記

跟教學試 Claude Design + Midjourney:生成一個 cyberpunk 遊戲落地頁

2026年5月29日 · 4 分鐘閱讀
跟教學用 Claude Design 生成嘅 Citypunks 落地頁(真實 render)。左:一入頁即見嘅 hero;右:下面 features / news / CTA。

參考來源:呢篇係我跟住 YouTube 教學《Claude Design = Easy Websites for Beginners》做嘅實作記錄。整個 workflow(用 Claude Design 生成網頁 + Midjourney 生圖)同設計方向都係參考嗰條片,唔係我原創。呢度記低我跟住做嘅過程、結果同學到嘅嘢。

我想學嘅係呢套 AI 生成網頁嘅 workflow ── Claude Design 出設計同 code、Midjourney 出圖。為咗練手,我揀咗一個虛構嘅賽博龐克開放世界 RPG「Citypunks」嘅行銷落地頁做題目。

👉 撳呢度睇 live 版面 ── 原樣 AI prototype,右上角有 tweaks 面板可以即時試切五套配色同氛圍效果。

Step 1 — Claude Design:一個 wireframe prompt

教學嘅做法係:唔好畀視覺指示,淨係用樸素文字描述結構,等 Claude 自己鋪設計。我跟住咁做,畀咗呢個 prompt:

Prompt · Claude Citypunks landing page wireframe

Create me a wireframe for a cyberpunk type game.

Large Video hero with H1 and CTA bottom left. I want a button/box that has a cta for watching the trailer, and a main cta to play the game.

The game should be called Citypunks.

The second section should be 2 features about the game

Then a news section for updates from the game, 3 posts and a link to read more.

And a big full width CTA section to play the game and a footer.

出嚟嘅嘢遠遠超過個 brief

我以為會收到灰底框框嘅 wireframe,結果 Claude 交咗一個 high-fidelity 嘅完整設計返嚟(就係上面 bento 見到嗰個),連我冇要求嘅嘢都自己決定埋。我個 brief 得六句,但 Claude 自己補咗成套設計系統:

  • 一個簽名式視覺語言 ── 所有卡片、按鈕、chip 都用同一個 clip-path 切角(14px / 8px 兩種),成頁睇落好統一、好「科技感」。
  • 五套可即時切換嘅配色 ── 預設「Crimson ronin」(青 + 黃),仲有 hot pink、acid green、blood amber、ice blue。我冇要求過配色,佢自己起咗個 palette system。
  • 氛圍層 ── scanline 掃描線、film grain 雜訊、H1 chromatic aberration glitch,全部可 toggle。
  • 完整 responsive ── 由 1440px 一路 collapse 到 360px,五個 breakpoint,連 hero 背景圖點 shift、hamburger 點 morph 成 X 都諗好。
  • 細到字體 scale、spacing baseline、glow shadow、ticker 秒數 都寫晒做 design token。

Step 2 — Midjourney:生成 placeholder 圖

教學第二步係用 Midjourney 生成頁面用嘅圖。例如 hero 嘅背景係呢張武士圖,再由 Claude 嘅 layout 同漸變 overlay 合成做你頂部 bento 見到嗰個 hero:

Hero 背景 ── Midjourney 生成嘅紅調賽博龐克城市同武士角色

Feature 同 news 嘅圖同樣係 Midjourney 生成:

Feature section 圖 ── 黃昏俯瞰賽博龐克海港同偵察無人機

News section Claude 仲自己分咗三種 category(patch / devlog / event),各一個 accent color,連 placeholder 文案都寫到似層似樣。

News card 圖 ── 昏暗錄音室,對應 devlog 帖

學到嘅嘢

1. 結構性 brief 已經足夠攞到一套有靈魂嘅設計。 我冇講任何視覺方向,但因為「cyberpunk」呢個字,Claude 自己推導出 neon、glitch、clip-path、暗色等一整套連貫語言。畀 AI 一個清晰結構 + 一個明確 genre/mood 字眼,佢補空白嘅能力好強。

2. 輸出係「prototype / handoff」,唔係 production code。 Claude 連一份 handoff README 都寫埋 ── 列晒 design token、逐 section spec、breakpoint,然後明明白白話「呢啲係設計參考,唔好照抄,要喺真實 codebase 用佢嘅 framework 重建」。即係 AI 嘅角色係設計探索 + 規格交付,production 仲要落返真實 stack。

3. 圖係 placeholder,要記得換。 所有圖(hero、features、news)都係 Midjourney 生成嘅 placeholder,撐 demo 夠,但 launch 前一定要換真稿 ── 而 hero 原本 brief 係「Large Video」,靜態圖只係暫代。

總結

跟住一條教學,由六句說話 + 幾個 Midjourney prompt,去到一個有 design token、五套配色、responsive 同 handoff 文檔嘅落地頁 ── 呢個就係 AI 輔助設計而家嘅威力:你定方向同結構,AI 快速鋪一個連貫、可討論嘅起點。 餘下嘅打磨同 production 落地,先係設計師真正落手嘅地方。