一句 Prompt 做出日式墨流し互動網頁：用 Claude Fable生成 WebGL 流體水墨畫布
不會寫 shader 也能做出流體墨水網頁。本文示範如何用一段 Prompt 讓 Claude 生成日式墨流し風格的 WebGL 互動水墨畫布，附完整 Prompt 與微調方法。
不會寫 shader，也能做出具有流體感的互動水墨網頁嗎？
這次我用一段 Prompt，請 Claude 從零生成一個日式「墨流し / Suminagashi」風格的互動網頁。成果是一個單一 index.html 靜態頁面，打開後就能在全螢幕和紙畫布上滴墨、拖曳、攪動水流，看墨色自然暈開、混合、形成流線與漩渦。
整個過程不需要後端、不需要建置工具，也不用自己手寫 WebGL shader。你只需要把想要的畫面與互動感受描述清楚，AI 就能幫你完成一個可以直接運行的前端作品。
這次做出來的效果
這個互動網頁的核心體驗很簡單：使用者可以在畫面上點擊或拖曳，像是在水面上滴墨、推動墨流。
實際效果包含：
- 點擊畫面時，墨滴會慢慢暈開，不是單純的圓形擴散
- 拖曳滑鼠或手指時，墨色會被水流拉出流線與漩渦
- 不同墨色交會時，會產生自然的混色與加深效果
- 背景是淡米色和紙質感，帶有纖維、顆粒與微弱暗角
- 閒置時會自動滴墨與加入細微水流，畫面不會完全靜止
- 底部有低調控制列，可切換墨色、自動演出與洗い流す
它不是單純的 CSS 動畫，也不是用圖片疊出來的視覺效果，而是透過 WebGL shader 與 GPU 流體模擬，讓每一次互動都產生不同的墨流紋理。
使用工具
| 項目 | 內容 |
|---|---|
| AI 模型 | Claude |
| 輸出格式 | 單一 index.html |
| 核心技術 | WebGL、GLSL shader、GPU 流體模擬 |
| 額外資源 | Google Fonts |
| 後端需求 | 無 |
完整 Prompt
這次我使用的 Prompt 如下：
製作一個日式墨流し風格的互動式水墨網頁。畫面是一張全螢幕的淡米色和紙，沒有標題、提示文字、logo 或多餘說明，只保留純粹的互動畫布與底部控制列。 使用者可以用滑鼠或手指在畫面上點擊與拖曳。點擊時像在水面滴下一滴墨，墨色會慢慢暈開；拖曳時會推動墨流，形成自然的流線、漩渦、擴散與混色效果。墨水表現要有流體感，不要只是普通的 CSS 動畫或圓形擴散。 整體視覺要安靜、極簡、有日式紙張質感。背景不要純白，要有淡米色和紙纖維、細微顆粒，以及很淡的邊緣暗角。墨色混合時要像染進紙裡，而不是直接覆蓋在畫面上。 底部中央放一個低調的半透明膠囊控制列，提供黑墨、深藍、朱紅、松葉綠四種墨色，也包含顏色輪替、自動演出開關與「洗い流す」功能。自動演出預設開啟，閒置時會偶爾自動滴墨並加入輕微水流；洗い流す 則讓墨跡慢慢淡化，像被水洗開。 請做成純前端靜態頁面，優先整合在單一 index.html，可使用 Three.js、WebGL shader 和 Google Fonts，不需要後端。桌機與手機都要能正常操作，控制列不能超出畫面。
為什麼這段 Prompt 有效？
這個 Prompt 最關鍵的地方，不是用了很多技術詞，而是把「想要的感覺」講得很清楚。
1. 先排除錯誤方向
Prompt 裡有一句很重要：
墨水表現要有流體感，不要只是普通的 CSS 動畫或圓形擴散。
如果沒有這句，AI 很容易做出一個圓形慢慢放大的動畫，看起來像水墨，但其實沒有流體互動。先講清楚不要什麼，可以大幅降低 AI 產出偷懶版本的機率。
2. 用體驗描述取代技術堆疊
Prompt 沒有要求 AI 實作 Navier–Stokes，也沒有指定要怎麼寫 shader，而是描述「墨色會慢慢暈開」、「拖曳會推動墨流」、「像染進紙裡」。
這種寫法很適合 Vibe Coding：人負責定義畫面品質與互動感，AI 負責選擇實作方式。
3. 給出明確的設計約束
畫面要有什麼、不能有什麼、控制列放哪裡、有哪些顏色、預設狀態是什麼，Prompt 都先講清楚。
這能讓 AI 生成的作品更接近可以發布的完成品，而不是一個還需要大量整理的 Demo。
4. 指定交付格式
「單一 index.html」、「純前端」、「不需要後端」、「桌機與手機都要能操作」這幾句很重要。
它們會讓 AI 優先產出一個打開就能用的靜態網頁，而不是需要 npm install、打包、部署環境設定的半成品。
Claude 實際生成了什麼？
收到 Prompt 後，Claude 生成的不只是簡單動畫，而是一個跑在 GPU 上的流體模擬畫布。
簡單來說，每一幀畫面都會更新速度場與墨色貼圖，讓墨水隨著水流移動、擴散、旋轉與混合。
其中幾個關鍵技術包含：
1. 平流：讓墨水跟著水流移動
平流可以理解成「把墨色沿著水流方向帶走」。當使用者拖曳畫面時，程式會把滑鼠或手指的移動方向轉換成外力，注入到速度場裡。
所以使用者推動的其實不是墨本身，而是水流。墨水只是被水流帶著走，這也是畫面看起來比較自然的原因。
2. 漩渦：讓水墨保留旋轉感
如果只是讓墨水擴散，畫面很快就會糊成一片。Claude 在程式裡加入了類似渦度補強的效果，讓拖曳後的小型旋轉不會太快消失。
這也是為什麼畫面中可以看到細緻的流線、捲動與漩渦感。
3. 混色：讓墨像染進紙裡
一般網頁動畫可能會直接把顏色疊在背景上，但這樣很容易看起來像透明圖層。
這次的 Prompt 明確要求「像染進紙裡」，所以生成結果使用了更接近吸收感的混色方式。墨色不只是蓋在紙上，而是讓紙面顏色逐漸變深，視覺上更接近染料滲入紙纖維的感覺。
4. 和紙：不用圖片也能生成紙張質感
背景不是單純的米白色，而是透過 shader 生成帶有纖維、顆粒與雲狀明暗變化的紙面。
這個細節很重要，因為墨流し的美感不只來自墨，還來自「紙」與「水」的安靜質地。如果背景只是純白，整體會少掉很多日式手作感。
可以怎麼微調？
如果第一次生成的效果已經接近想要的方向，後續可以直接用自然語言請 Claude 修改，不一定要自己進程式碼調參數。
例如：
墨暈開的速度再慢一點，更接近真實水面滴墨的感覺。
漩渦感太強了，整體水流再溫柔一點，讓畫面更安靜。
幫我加入第五種墨色：藤紫，放在松葉綠旁邊。
把整體改成夜色和紙風格，背景偏深，墨色改成金、銀、白三種。
如果想手動調整，通常可以從這幾個方向下手：
| 調整項目 | 影響 |
|---|---|
| 漩渦強度 | 越高，水流打旋越明顯 |
| 拖曳推力 | 越高，滑鼠一劃墨水會被拉得越遠 |
| 墨水淡化速度 | 越高，墨跡停留時間越短 |
| 洗い流す 時間 | 影響清洗畫面的速度與柔和程度 |
| 模擬解析度 | 越高越細緻，但效能負擔也越高 |
常見問題
完全不會寫程式也能做嗎？
可以。這類作品最重要的是把需求描述清楚。你可以先讓 Claude 生成第一版，再用自然語言慢慢調整，例如「更慢一點」、「更像紙」、「顏色太亮」、「手機版控制列太擠」等等。
為什麼不用 CSS 動畫就好？
CSS 動畫適合做固定的位移、縮放與透明度變化，但很難做出「每次拖曳都不一樣」的流體互動。
墨流し的重點是偶然性與不可重複性。流體模擬可以讓每一次點擊、拖曳、混色都產生不同紋理，這才比較接近真實的水面墨流。
手機可以跑嗎？
可以，但效能會依裝置而不同。若手機上覺得卡，可以降低模擬解析度或限制畫布解析度，讓互動保持順暢。
可以放到網站上嗎？
可以。因為它是單一靜態 index.html，可以部署到 GitHub Pages、Netlify、Vercel，或直接嵌入自己的網站頁面中。
這算是 Vibe Coding 嗎？
算。這個案例很典型：人負責品味、方向與驗收標準，AI 負責把感覺轉成技術實作。
以前要做這種作品，可能需要懂前端、WebGL、shader、流體模擬。現在你不一定要先學完整套技術，才能開始做出第一版原型。
結語
這次最有趣的地方是：我沒有自己寫一行 shader，卻做出了一個包含 WebGL、流體模擬、混色與程序化紙張質感的互動網頁。
這代表 AI Coding 的門檻正在改變。
以前，做互動網頁的關鍵是你會不會寫程式。現在，越來越多時候，關鍵變成你能不能把腦中的畫面說清楚：墨要怎麼流、紙要多安靜、互動要多輕、整體要像作品還是像 Demo。
當 AI 已經能完成大部分實作，審美、描述能力與驗收標準，就會變成新的創作門檻。
如果你也想試試看，可以直接把上面的 Prompt 貼給 Claude。幾分鐘後，你就會得到一張可以互動、可以流動，也幾乎不會重複的數位和紙。
