Content Forger — Landing Page 十版設計提案10 static variants · 2026-07-07 · 純 HTML/CSS/JS,零依賴

同一份內容骨架(Hero、Flow Canvas 節點編輯畫布、六功能、三步驟、定價、CTA),十套完全不同的設計系統。每版皆含:hero 動態視覺(Canvas 2D / inline WebGL shader / SVG 自繪)呈現鑄造・融合・流動意象,以及一座完整的節點工作流畫布(節點卡、port、bezier 連線、流動脈衝、執行中狀態)。v01 為專案 DESIGN_SYSTEM.md canonical;其餘取材 farstar design-md 品牌庫與自由發揮。

V01 · CANONICAL

官方靛藍 Canonical Indigo

官方設計系統的極致打磨版:白底靛藍紫漸層,粒子熔入光環鑄成內容卡,節點畫布配脈衝連線。

DESIGN_SYSTEM.mdInter / JetBrains Mono
V02

熔鑄工廠 Molten Foundry

深炭黑鑄造廠:WebGL 熔岩噴流澆入發光鑄錠,節點如琥珀 LED 機台,金橙熱流貫穿全頁。

自由發揮 · 最直接的鑄造意象Barlow Condensed / Inter
V03

液態虹彩 Liquid Iridescent

深黑畫布上一池虹彩液態鉻緩慢流動,髮絲線節點與光脈衝導線如玻璃管中的液態光,字體主導的極簡奢感。

design-md/runwayml + elevenlabsInter Tight / Inter
V04

工程藍圖 Blueprint Schematic

深藍晒圖紙上的工程製圖:自動繪線的示意圖、尺寸標註、針腳節點與「核准生產」印章,工作流即施工圖。

design-md/miro · 製圖法自由發揮Archivo / IBM Plex Mono
V05

終端鍛造 Terminal Forge

磷光綠終端機鍛造廠:字元雨被熔束抽入管線、重鑄成內容構件,節點畫布化身 TUI 執行面板。

design-md/warp + cursorJetBrains Mono / Inter
V06

瑞士流場 Swiss Flow

瑞士國際主義精密排版:純白底、真黑髮絲線流場繞標題層流、單一電藍脈衝貫穿工程感節點畫布。

design-md/vercel + stripeArchivo / Inter
V07

黏土樂園 Clay Playground

奶油底配糖果黏土質感:柔軟雙層陰影卡片、Canvas 變形球融合蓋印動畫、澎潤節點與粗圓珠鏈導線,俏皮不失專業。

design-md/clayBaloo 2 / Nunito
V08

粗獷沖壓機 Brutalist Press

酸黃×桃紅×鈷藍新粗獷主義:粗黑框硬陰影、貼紙跑馬燈,卡通沖壓機在輸送帶上蓋印內容卡片。

design-md/posthogArchivo Black / Space Grotesk
V09

極光玻璃 Aurora Glass

深空玻璃質感:WebGL 極光簾幕在暗夜流瀉,紫青洋紅光束穿過毛玻璃節點畫布,線材如光脈流動。

design-md/linear.appInter Tight / Inter
V10

墨坊活版 Atelier Ink

溫暖紙張上的活版印刷工坊:墨水在水中暈開後凝成印刷版面,朱砂印章落款,襯線字體與髮絲線盡顯手工感。

design-md/claudeFraunces / Newsreader

第二輪 · Round 2依回饋收斂:v05/v10 為基底修正 + 指定「雙股流線交匯」hero 動畫 · 5 versions · 2026-07-08

回饋:最喜歡 v05/v10 的第一印象與整體風格,但 v10 太像 Claude、v05 動畫太邊緣且 hero 右側過空;v02/v05/v08 的 hero 各自表現品牌值得參考。五版全數實作指定動畫:兩股「視覺上明顯不同」的流線,一股自上而下、一股自下而上,以弧度在中間交匯;交匯處上方是形狀與內容緩變的 2D 視窗或 3D 立方體,以 Carousel 輪播圖片/影片/人物/場景等最終成品——多源創意鑄造融合成品的意象。

V11 · v05 進化

終端匯流 Terminal Confluence

磷光綠字元雨下沉、暖白髮絲線上升,於 hero 右半焦點區交匯,熔入彈簧形變的 forge://output 終端視窗五段輪播。

v05 修正:動畫進焦點區、填滿右側JetBrains Mono / Inter
V12 · v10 進化

靛墨織坊 Ink Loom

冷瓷白紙上,靛藍墨絲與黃銅金線如經緯交織,在深壓印紙窗中織出成品——保留工坊魂,退去 Claude 色。

v10 去 Claude 化:靛墨+黃銅新識別Instrument Serif / Libre Caslon
V13 · v05×v02 融合

訊號坩堝 Signal Crucible

冷青 0/1 訊號流自上澆注、熾橙餘燼自下升騰,坩堝白熱交匯,鍛出慢轉 3D 立方體中的五面成品輪播。

冷資料 × 熱熔金屬雙聲道Space Grotesk / Inter
V14

光譜對流 Spectrum Current

瓷白底上兩道光譜之河:青紫細絲流與暖珊瑚粒子流交匯熔成亮核,湧入呼吸變形的漸層視窗鑄出成品。

自由發揮 · 色彩只留給雙流Inter Tight / Inter
V15 · v06×v10 相遇

編輯子午線 Editorial Meridian

暖白編輯紙面,精準黑髮絲線(工程聲)與手工墨筆觸(工坊聲)於子午線交會,熔鑄成不斷改版的印刷成品框。

深湖水綠單一强調Space Grotesk / Instrument Serif