# 策展 · X (Twitter) 🔥🔥🔥
> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)
> 作者：Viktor Oddy (@viktoroddy) · 平台：X (Twitter) · 日期：2026-07-05
> 原始來源：https://x.com/viktoroddy/status/2072581407076200791
## 中文摘要
Viktor Oddy 發布 Claude Fable 5 教學教你建立網站。
**核心開發流程**
Viktor Oddy 透過 16 分鐘的教學影片，示範了利用 Claude Fable 5 進行端到端網站開發的具體步驟：
1. 靈感與素材：於 Pinterest 搜尋設計靈感，並使用 Higgsfield 等工具生成背景素材，再匯入 Figma 進行模糊與配色調整。
2. 程式碼協作：在 Claude 開發介面中，透過自然語言 prompt 指導 AI 生成網頁結構、Tailwind CSS 樣式及動畫效果。
3. 環境預覽：開發過程中於 `localhost:3000` 與 `localhost:5181` 進行即時預覽，並整合如「NeuralKinetics」、「Folium」及「Lithos」等專案內容。
> 這段影片展示了如何利用 AI 工具開發具有高互動性與動畫效果的網站，並透過社群媒體行銷來提升曝光度。
**網站數據應用**
以「Lithos」網站為例，展示了 AI 處理複雜結構化資料的能力，包含地質年代數據（如 Cenozoic 66 MA 至 TODAY 等）與網站統計指標（如 4.6B Years Indexed、1,240 Field Sites Mapped 等），證明 AI 能有效處理具備專業資訊密度的網頁開發需求。
**資源與推廣**
- 平台資源：Viktor Oddy 推出 [motionsites.ai](http://motionsites.ai) 平台，提供「Templates」、「Sections」與「Backgrounds」等分類，使用者可一鍵複製完整的 AI prompt 與程式碼。
> 影片展示了名為「motionsites」的網站平台，使用者可瀏覽並複製 AI 生成的網頁設計提示詞與程式碼。
- 行銷策略：強調透過分享高價值 prompt 與網站錄影至 Twitter (X)，能有效提升社群互動與曝光度，讓使用者能以低門檻建立高品質的 AI 網站。
## 媒體內容
**這段影片展示了如何利用 AI 工具開發具有高互動性與動畫效果的網站，並透過社群媒體行銷來提升曝光度。**
**影片中的 Prompt 與操作**
Prompt（00:03）：
```
為一個名為「Lithos」的地質品牌構建一個全螢幕、深色主題的英雄區，使用 React 18 + TypeScript + Vite + Tailwind CSS 和 lucide-react 圖示庫。標誌性功能是「跟隨游標的聚光燈，透過基底圖像上的柔和圓形遮罩顯示第二張圖像」。精確匹配以下所有細節。
```
原文：Build a full-screen, dark-themed hero section for a geology brand called "Lithos" using "React 18" + "TypeScript" + "Vite" + "Tailwind CSS" and "lucide-react" for icons. The signature feature is a "cursor-following spotlight that reveals a second image" through a soft circular mask on top of a base image. Match every detail below exactly.
Prompt（00:10）：
```
將此影片添加為英雄區的背景。請不要在上面添加任何覆蓋層。並且將橙色改為紫色。
```
原文：Add this video as the background of a hero section. Please do not add any overlay over it. And also let's change the orange color to purple.
Prompt（00:12）：
```
請構建下一個部分。滾動時保持此影片固定，這樣使用者滾動時影片會保持釘選狀態。文字消失，我們有三張卡片，就像標語、標題和簡短描述，這些卡片沒有任何覆蓋層。只需文字，環繞影片，所以左側兩張卡片，右側兩張卡片，類似於我們目前英雄區的佈局。還有一個小標題，類似於我們目前標題中的內容。以此格式構建接下來的兩個部分。你可以發揮一點創意，所以你可以更改部分，但我只是想看看你對我的意思理解得有多好。
```
原文：Please build the next section. Let's keep this video fixed once scrolling, so the user scrolls but the video stays pinned. The text disappears and we have three cards, which would be like a tagline, headline and short description, without any kind of overlay for these cards. Just text, all around the video, so two cards on the left side and two cards on the right side, similar to how the layout we have right now for our hero section. And a small headline, similar to what we have right now in the headline. Build next two sections in this format. You can be creative a little bit, so you can change section to sections, but I just want to see how good you understand what I mean.
操作步驟：
1. （01:58）進入 AI 圖像生成工具介面並輸入提示詞
2. （02:25）進入影片生成工具介面並設定參數與提示詞
3. （03:27）開啟開發工具並輸入網頁構建指令
4. （05:34）將生成的影片拖曳至專案資料夾
5. （10:43）在 Figma 中進行背景素材的模糊與取色處理
6. （22:05）使用螢幕錄影軟體錄製網頁演示
7. （22:34）將錄製的影片上傳至 Twitter (X) 並發布
**逐字稿**
- `00:00` 在這支影片中，你將學會如何打造像這樣高品質的動畫互動網站，全程使用 AI。特別是我們將使用 Fable 5，這是一個剛重新發布的模型。今天我會向你們展示所有的功能，教你如何打造、製作動畫並建立像這樣完全符合行動裝置響應式設計的網站。如果我在這裡預覽一下，你可以看到它在所有裝置上的顯示效果都非常好。接著我會教你如何在 Twitter 上爆紅。如你所見，我的貼文總是能持續爆紅。這一篇有 260 萬次觀看，這一篇有 40 萬，這一篇有 320 萬。所以，有一些特定的方法可以確保你的帳號能夠爆紅。我經營 Twitter 快一年了，並將追蹤者成長到 6 萬人。我相信任何設計師或開發者也都能做到。所以請持續關注，讓我們進入影片內容。（In this video, you will learn how you can build websites just like this animated high quality）
- `00:04` 互動式網站，全部使用人工智慧，特別是我們將使用 Fable 5，這是一個重新發布的新模型。（interactive website all using AI and specifically we're going to be using Fable 5, which is a new）
- `00:10` 今天我將向大家展示它的所有功能，教你如何建立、製作動畫，並創作出像這樣完全支援行動裝置響應的網站。所以如果我在這裡預覽，（model that have been re-released back. And today I'll show you all capabilities how you can build,）
- `00:16` 你可以看到它在所有裝置上的顯示效果都非常好。接著我會展示如何讓你的內容在 Twitter 上爆紅。（animate and create websites exactly like this that are all mobile responsive. So if I preview）
- `00:22` 如你所見，我的貼文總是能爆紅。這一篇有 260 萬次觀看，這一篇有 40 萬，這一篇有 320 萬。所以有一些特定的方法可以確保（it here, you can see that it looks on all devices very well. And then I'll show you how to go viral）
- `00:27` 你的帳號能夠爆紅。我使用 Twitter 將近一年，並將追蹤者成長到 6 萬人。（on Twitter. As you can see, my posts go consistently viral. This one got 2.6 million views. This one）
- `00:33` 我相信任何設計師或開發者也都能做到。所以請持續關注。（got 400,000. This one got 3.2 million. So there are specific things that you can do to make sure）
- `00:38` 尋找一些你喜歡的靈感，像是看起來有 3D 效果的，也許是一些互動，（that your account will go viral. I have been on Twitter for almost a year and I grew it to 60,000）
- `00:44` 還有一些你喜歡的動畫。只要找到一張圖片，我們就可以開始著手進行。（followers. And I believe that any designer or developer can do that as well. So stay tuned）
- `00:49` 使用任何模型進行開發的第一步，就是前往 Pinterest 尋找你喜歡的靈感，像是看起來有 3D 感的設計、一些互動效果，或是你喜歡的動畫。只要找到一張圖片，我們就可以開始著手進行。（and let's get into the video. The first step with building with any model is going to Pinterest and）
- `00:54` 我網站上的互動。所以第一件事，我可以去 ChatGPT 產生圖片，或者我這裡使用的是（looking for some inspiration that you like, something that looks 3D, maybe some interactions）
- `00:59` Higgsfield。順帶一提，我與 Higgsfield 沒有任何合作或贊助關係。我將這裡改為 16 比 9，然後我會說類似「幫我建立一張像這樣的圖片，但把這個地球儀放在頁面底部附近，並留出大量空白空間」。然後我只要點擊（and maybe some animations that you like. Just find an image and then we'll start working with it.）
- `01:05` 我已經找到這張看起來很酷的圖片，我想為它製作動畫，並將其作為我網站上的互動元素。所以第一件要做的事，就是前往 ChatGPT 圖片生成，或者我這裡使用的是 Higgsfield。順帶一提，我與 Higgsfield 沒有任何合作或贊助關係。我會在這裡將比例改為 16:9，然後輸入類似這樣的指令：幫我建立一張像這樣的圖片，但要把這個地球儀放在頁面更下方的位置，並留出大量的空白區域。接著我只要點擊生成，看看它會產出什麼。（I already found this image that looks pretty cool and I want to animate this and then use it as）
- `01:12` 或是定位。不要放大或縮小。我會選擇大約 10 秒、1080p、16 比 9，讓我們（interaction on my website. So the first thing that I can do is I can go to chat GPT image or I'm using）
- `01:19` 開始實際建立網站，只要前往 Claude，點擊這裡的下載圖示。一旦完成，你的電腦就會安裝好 Claude。順帶一提，這個網站以及我在（Higgsfield in this. By the way, I'm not affiliated or sponsored by Higgsfield. I'm going to change 16）
- `01:25` 影片開頭展示的所有網站，你都可以在 motionsites 找到，我只要去那裡，就有所有（by 9 here and then I'm going to say something like create me an image like this but place this globe）
- `01:32` 這些網站，你可以直接複製 prompt，貼上到 Claude 就能得到相同的結果。我已經把它們上傳到那裡了。所以你不會浪費 token 在嘗試達到某些結果上。你會有（closer to the bottom of the page and leave a lot of space empty. And then I'm going to just click on）
- `01:38` 這就是我們收到的結果。現在讓我們把它變成影片。（generate and see what it comes back with. And this is what we received. Now let's turn it into a video.）
- `01:44` 至於 prompt，我通常會說明我想要它做什麼。例如：讓行星旋轉，但不要改變大小或位置。不要放大或縮小。我會選擇大約 10 秒、1080p、16:9 的規格，然後點擊生成，看看它會產出什麼。（So for the prompt, I usually say what I wanted to do. So make the planet spin and do not change size）
- `01:51` 工作階段。在放入我們的影片之前，我想要先準備好設計的開頭部分。所以我（or position. Do not zoom in or zoom out. I'm going to select around 10 seconds, 1080p, 16 by 9 and let's）
- `01:59` 這就是 Seedance 2 生成的影片。現在讓我們開始實際建立網站，前往 Claude，點擊這裡的下載圖示。一旦完成，你的電腦就會安裝好 Claude。順帶一提，這個網站以及我在影片開頭展示的所有網站，你都可以在 motionsites 上找到。我只要去那裡，上面有所有這些網站，你可以直接複製 prompt，貼到 Claude 就能得到相同的結果。我已經把這些都上傳到那裡了，所以你不需要浪費額度去嘗試達到某些效果。你預設就能得到很好的結果。（click on generate and see what it comes back with. And here's the video that Seedance 2 generated. Now let's）
- `02:05` 不需要花費太多 token 去嘗試找出設計。所以我會複製這個，但我會（start actually building the site and just go to Claude, click on download icon here. Once that done, you'll have）
- `02:11` 移除這裡的互動，我們要在那裡放置我們的影片。所以我只要貼上（Claude installed on your computer. And by the way, this website as well as all of the website that I）
- `02:15` 這個區塊，但移除互動顯示的滑鼠懸停互動。我想要捨棄那個，（show you in the beginning of the video, you can get on motionsites that I just go here and there are all）
- `02:21` 並保持背景純黑，因為我稍後還有其他東西要讓你做。（of these websites that you can just copy the prompt, paste it to Claude and get the same result. I just）
- `02:26` 只要建立這個區塊就好。讓我們確保選取了 Fable 5，然後讓我們發送它，（uploaded them there. So you'll not be wasting credits on trying to achieve some results. You'll have）
- `02:32` 所以這正是我要做的。我將建立一個新的 session。在放入我們的影片之前，我想先準備好設計的開頭部分，這樣我就不必花費太多額度去嘗試找出設計。所以我要複製這段，但我會移除這裡的互動效果，我們要把影片放在那裡。所以我就把這個 prompt 貼在這裡。（there was good results by default. So that's exactly what I'm going to do. I'm going to create a new）
- `02:37` 實際加入我們的影片。所以我所要做的就是從 Claude、從這裡的 Higgsfield 下載影片，（session. And before putting our video, I want to have some beginning of the design set ready. So I）
- `02:44` 然後把它拖曳到 Fable 建立的資料夾中。所以我相信是這個資料夾，或者我們可以直接拖曳（don't have to spend a lot of credits on trying to find out design. So I'm going to copy this, but I'm）
- `02:49` 到區塊。請不要在上面添加任何覆蓋層。還有，讓我們把橘色改為（going to remove the interaction here and we're going to place our video there. So I'm going to just paste）
- `02:54` 我會說：幫我建立這個網站的 hero section。就說幫我建立這個 hero section，但移除互動效果，也就是滑鼠懸停的互動。我想要捨棄那個，並保持背景為純黑色，因為我稍後還有其他東西要讓你做。只要建立這個 hero section 就好。確保選擇了 Fable 5，然後直接發送，看看它會產出什麼。（this prompt here. And I'm going to say, build me this website, this your section. Let's say build me）
- `03:04` 加入這個影片，並將顏色改為這種漂亮的紫色。現在讓我們要求它建立（just this here section, but remove the interaction reveal hover interactions. I want to drop that）
- `03:10` 這個影片在捲動時固定。所以當使用者捲動時，影片保持釘選，文字消失。而我們（and keep the background pure black because I'm going to have some other stuff for you later to do.）
- `03:16` 有三個卡片，分別是標語、標題和簡短描述，這些卡片不需要任何類型的（Just build this your section. Let's make sure that the fable five is selected and let's just send it）
- `03:24` 這就是我們的結果，Fable 做得非常出色。現在讓我們實際加入我們的影片。所以我只需要從這裡下載 Claude 產出的 Higgsfield 影片，然後把它拖曳到 Fable 建立的資料夾中。我想應該是這個資料夾，或者我們可以直接把它拖進這裡的聊天視窗。（and see what it comes back with. And here we have our results fable did exceptional job. Now let's）
- `03:30` 覆蓋層，只要影片周圍有文字即可。所以左側放兩個卡片，右側放兩個（actually add our video. So all I have to do is just download the video from Claude from Higgsfield here）
- `03:37` 卡片，類似我們現在首頁區塊的版面配置。然後是一個（and just drag it into a folder that fable created. So I believe this is this folder or we can just drag）
- `03:46` 我們就這樣做。我會說：將這段影片作為 hero section 的背景。請不要在上面添加任何覆蓋層。還有，把橘色改成紫色。然後直接發送，看看它會產出什麼。（it into the chat here. So let's do it like this. I'm going to say, add this video as the background）
- `03:52` 小的標題，類似我們現在標題中的內容，以這種格式建立接下來的兩個區塊，（over here section. Please do not add any overlay over it. So and also let's change the orange color to）
- `04:01` 在這裡我們可以看到 Fable 加入了這段影片，並將顏色改成了漂亮的紫色。現在讓我們要求它建立下一個部分。（purple. And let's just send it and see what it comes back with. And here we can see that the fable）
- `04:05` 你可以稍微發揮創意。所以你可以把區塊改成複數區塊。但我只是想看看（added this video and change the color to this beautiful purple. Now let's ask it to build the）
- `04:10` 我會說：請建立下一個部分。當使用者捲動時，讓這段影片保持固定。也就是說使用者捲動頁面，但影片保持釘選不動。文字消失。我們要有三個卡片，分別是標語、標題和簡短描述，這些卡片不要有任何覆蓋層，文字就圍繞在影片周圍。左側放兩個卡片，右側放兩個卡片，類似我們現在 hero section 的版面配置。然後加上一個小標題，類似我們現在標題的樣子。請依照這個格式建立接下來的兩個部分，你可以稍微發揮創意。所以你可以把 section 改成 sections。但我只是想看看你對我的意思理解得有多好。然後直接發送，看看它會產出什麼。（rest of the kind of the next section. So I'm going to say, please build the next section. Let's keep）
- `04:15` 你對我的意思理解得有多好。讓我們發送它，看看它會回傳什麼結果。（this video fixed when scrolling. So the user scrolls, but the video stays pinned. The text disappears. And we）
- `04:23` 網域並交給你的客戶，請在留言區告訴我，我會製作（have three cards, which would be like a tagline, headline and short description without any kind）
- `04:29` 下一支關於這個主題的影片。謝謝觀看，我們下一支影片見。（of overlay for these cards, just text all around the video. So two cards on the left side and two）
- `04:38` 右側的卡片，類似我們現在首頁區塊的排版。然後是一個（cards on the right side, similar to how the layout we have right now for our hero section. And then a）
- `04:44` 小標題，就像我們現在標題裡有的那樣，用這種格式（small headline, like similar to what we have right now in the headline, build next two sections in this）
- `04:52` 建立接下來的兩個區塊，你可以發揮一點創意。所以你可以把區塊改成多個區塊。但我只是想看看（format, you can be creative a little bit. So you can change section to sections. But I just want to see）
- `04:57` 你對我意思的理解程度如何。我們就送出看看它會回傳什麼內容。（how good you understand what I mean. And let's just send it and see what it comes back with.）
- `05:06` 這就是我們得到的結果，我們有了第一個部分。然後我們有了第二個部分，看起來很酷。（So this is what we got, we have the first section. And then we have the second section, which looks cool.）
- `05:11` 但第三個區塊其實跟第二個很像。沒錯，那我們請 AI 來修正它，（But the third section is actually very similar to the second. And yeah, so let's ask AI to fix it,）
- `05:18` 我打算說，好，把第三個區塊完全拿掉，把它刪除，因為它跟（I'm going to say, Okay, let's drop the third section completely remove that it's too similar）
- `05:23` 目前的第二個區塊太像了，並圍繞著四到五個額外的區塊來建構網站的其餘部分，（to the current second sections and build the rest of the website around four to five additional）
- `05:29` 使用我們已經建立好的風格，運用我們在頁面上、在首頁區塊（hero section）已經設定好的字體、背景顏色、（sections using the style that we already established using the fonts, the background color,）
- `05:34` 以及那種尺寸大小。（the kind of sizes that we already established on the page on the hero section.）
- `05:40` 但要隱藏影片。所以在第二個區塊之後，影片應該要消失。（But hide the video. So after the second section, the video should disappear.）
- `05:45` 剩下的網站部分就隨你發揮，照你覺得合適的方式去建構。（Just build the rest of the website as you can as you see fit.）
- `05:52` 我們就送出這個指令，看看它會產出什麼，比方說刪除（And let's just send that and see what it drop, let's say remove）
- `06:00` 看看它會回傳什麼結果。（see what it comes back with.）
- `06:03` 這就是網站的其餘部分。我們有第二個區塊，往下滑，可以看到第三個（And here's the rest of the website. So we have the second section, we scroll, we can see the third）
- `06:08` 區塊，還有第四個，我特別喜歡這個獨特的版面配置，我們有第四個區塊，（section, the fourth, which I especially like, for this unique layout, we have the fourth section,）
- `06:14` 我不喜歡那個筆觸（stroke），它還是用了 AI 生成的筆觸，看起來很有 AI 編碼的感覺。但除此之外，（not fan of the stroke, still uses some AI generated stroke, which looks very AI coded. But otherwise,）
- `06:20` 很多這些區塊真的很棒，特別是這一個，如你所見，一旦（a lot of these sections are really, really cool, especially this one, as you can see, like once）
- `06:24` 我們有了風格、有了版面配置、有了字體，AI 就能非常聰明地重複利用這些元素，（we have the styles, once we have the layout, the fonts, AI is able to very smartly reuse a lot of）
- `06:31` 你就不會得到那種標準的 AI 劣質版面，這真的很酷。我看到有一些地方可以改進。（these and you get not standard AI slop layouts, which is pretty cool. I see a few things to improve.）
- `06:37` 第一個是背景不一樣。所以我們截圖這個背景，（First one is the background is different. So let's just take a screenshot of this background,）
- `06:43` 去 Figma，我把它貼上，然後進行模糊處理。這樣我就可以（go to Figma, I'm just going to paste that, and I'm going to blur it. So I can kind of）
- `06:47` 取平均顏色。稍微模糊一下。現在我可以從這個東西取色，（take the average color. So let's blur it a little bit. And now I can just take a color from this thing,）
- `07:00` 選這個，我打算說，我們來做幾個編輯。首先，把所有區塊的背景（say this, I'm going to say, let's do a few edits. First, let's make the backgrounds of all sections）
- `07:08` 都改成這個。我把它貼上，這裡放數字一，這裡放數字二，（to be this one. And I'm going to paste that, let's put number one here, number two,）
- `07:16` 在定價區塊。我們不要在卡片上使用筆觸。把筆觸移除，並把（in the pricing sections. Let's not use the stroke for the cards. Let's remove the stroke and make the）
- `07:28` 描述旁邊的線條，像是區域指南、社群地圖、每週 strata 摘要，（lines next to the description. So like one regional guide, community maps, weekly straight strata digest,）
- `07:36` 改成灰色，不要紫色。我們就送出指令，看看它會回傳什麼。（make them gray, not purple. And let's just send that and see what it comes back with.）
- `07:44` 這就是我們得到的結果。如你所見，背景現在跟影片的顏色一樣了。（And here's the result that we've got. As you can see, the background is now the same color）
- `07:48` 然後我們有這個看起來好多了的區塊。我想我們也來改進一下（as the video. And then we have this section that looks much better. I think let's improve also the）
- `07:55` 頁尾（footer）。讓我們為此生成更多 asset，因為它目前看起來有點太暗了。（footer. Let's generate some more assets for this because it looks currently a little bit too dark.）
- `07:59` 所以再次前往 Pinterest，找到適合你利基市場的東西。既然我們正在建構（So just go to Pinterest again and find something that would fit to your niche. So since we're building）
- `08:04` 與地球相關的東西，我們找一張喜歡的圖片，然後一直往下滑，直到找到（something related with the planet, let's find an image that we like and scroll through until you find）
- `08:10` 你想加到頁尾的圖片。我找到了這張。現在把它上傳到（an image that you want to add to the footer. I found this one. Now let's just upload it into）
- `08:18` Kling。我這次會使用 Kling。我們選擇 Kling 3.0。（Kling. I'm going to be using Kling for this one. So let's select Kling 3.0.）
- `08:26` 對於 prompt，我們輸入像是，（For the prompt, let's say something like,）
- `08:29` 將此動畫化，讓地球在原位緩慢旋轉。動畫必須流暢且具有真實的深度（animate this, rotate the earth in its place slowly. The animation must be smooth with true depth of）
- `08:36` 運動感，不要放大或縮小。我們就送出指令，看看它會回傳什麼。（motion, no zoom in or zoom out. And let's just send that and see what it comes back with.）
- `08:43` 完成後，這就是結果。我們有這個漂亮流暢的動畫。我們把它下載下來，（Once finished, this would be the result. So we have this beautiful smooth animation. Let's just download）
- `08:48` 回到我們的 Claude 網站，直接把它拖進來。我會說，（it and go back to our Claude website and just drag it here. And I'm going to say,）
- `08:54` 請把它加到我們的行動呼籲（call to action）區塊，也就是最後一個區塊「從你站的地方開始」，（please add this to our call to action section, which is start where you stand the last section,）
- `09:00` 但它也應該要覆蓋到頁尾。不過在頁尾，把最後一行移除。也就是寫著 2026（but it should cover also the footer. But in the footer, remove the last line. So where it says 2026）
- `09:09` lithos, all strata reserved and built on bedrock 的那行，把它完全刪除。還有頁尾（lithos, all strata reserved and built on bedrock, delete this completely. And the line between footer）
- `09:18` 和行動呼籲之間的線條也移除。影片不應該有任何覆蓋層，它應該要橫跨這兩個（and call to action also remove. The video should not have any overlay and it should span these two）
- `09:23` 區塊，你懂我的意思吧。我們就送出指令，看看它會回傳什麼。（sections, if you know what I mean. So let's just send that and see what it comes back with.）
- `09:30` 順帶一提，你可以在 motionsites.ai/backgrounds 取得這段影片，複製連結，貼到你的（By the way, you can get this video at motionsites.ai slash backgrounds, just copy that, paste in your）
- `09:36` 網站，你就會得到一樣的結果。現在唯一的問題是連結不太好閱讀。所以（website, and you'll have the same result. The only thing now the links are not so very well readable. So）
- `09:47` 寫著探索公司和追蹤的地方，把它們改成白色，因為現在它們的可讀性不太好。（says explore company and follow, make them white, because now they're not very good for readability.）
- `09:54` 還有，我們為引言區塊（quote section）換另一個影片，它寫著（And also, let's have another video for the quote section, which says the）
- `09:58` 引言區塊寫著「第一個讓路徑圖感覺像是一條（quote section which says the first tool that makes a road card feel like a）
- `09:59` 連結的工具就在描述欄中」。（link is in the description.）
- `09:59` 你（you）
- `10:03` 程式庫等等，把這個連結設為這個區塊的背景，現在我（library etc let's put this link as the background of this section and now I'm）
- `10:10` 要前往 motionsites dot AI backgrounds，我要選擇一個（just gonna go to motionsites that AI backgrounds and I'm gonna choose a）
- `10:14` 我想加進去的背景作為我們的背景，我們選一個（background that I wanted to add as our background let's take something that）
- `10:20` 看起來很棒，舉例來說，我要複製這個，然後我會說這個（looks cool for example this one I'm gonna copy and I'm gonna say this one）
- `10:27` 然後我們直接發送它，看看會回傳什麼，這就是我們目前的成果（and let's just send it and see what it comes back with and this is what we have）
- `10:31` 到目前為止，我們有這個區塊，我覺得需要再多做一點調整，我們有（so far we have this section that I think requires a little bit more work we have）
- `10:35` 這個區塊，包含背景價格區塊和頁尾，有一件事（this set section with the background pricing section and the footer one thing）
- `10:40` 我想要更新的是讓這些影片隨著捲動播放，所以我會說（that I'd like to update is to have this video's play on scroll so I'm gonna say）
- `10:45` 在這裡，第一個影片區塊，讓我們根據捲動來播放，所以把它綁定到使用者的（in here section the first video let's play based on scroll so tie it to a user）
- `10:52` 頁面捲動動作，然後它基本上應該要跟著一起捲動，這就是（scrolling the page and then it should basically scroll with that and this is）
- `11:02` 我們目前的成果，所以一旦我們捲動，我們可以看到影片也在捲動，唯一的問題是（what we have so once we scroll we can see that the video is scrolling as well the）
- `11:06` 在第二個和第三個區塊之間，有一個非常（only thing is that between the second and the third section there is a very）
- `11:14` 強烈的轉場，讓我們把它做成類似從透明到（strong transition let's have it kind of like a gradient from transparent to the）
- `11:19` 我稱之為實色之間的漸層，這樣影片的轉場就不會那麼（I call it the solid color so the transition for the video is not so）
- `11:23` 強烈，如果你懂我的意思的話，我們直接發送並看看它會建立什麼（strong if you know what I mean let's just send that and see what it creates）
- `11:31` 這就是我們目前的成果，如你所見，我們現在有了這個區塊，這個（and this is what we have currently as you can see we have this section now this）
- `11:35` 區塊看起來有點太空了，所以同樣的，最好的方式也是（section looks a little bit too empty so again that's the best way in the）
- `11:39` 最簡單的方式就是加入一些影片，所以讓我們去 motionsites 那邊（simplest way to do that is just add some videos so let's go to motionsites that）
- `11:44` 對，我喜歡這一個，如果我預覽它，你會看到它會完美契合我們網站的主題（yeah and I like this one if I preview it you'll see that it would perfectly fit the）
- `11:49` 所以我們直接把它貼到這個區塊的底部，我會（theme of our website so let's just paste that on the bottom of this section I'm gonna）
- `11:54` 直接貼上連結，然後我會說把這個影片加為這個區塊的背景（just paste the link and I'm gonna say add this video as the background of this）
- `12:01` 然後我們直接貼上名稱，不要有任何覆蓋層，我覺得這個（section and let's just paste the name without any overlays and I think this）
- `12:13` 區塊目前太高了，讓我們去掉大約三個卡片、三個底部（section is currently too tall let's get rid of around three cards three bottom）
- `12:20` 圖塊，這樣會更好，這就是我們現在的成果，讓我們來建立（tiles and that would make it better and this is what we have now let's build the）
- `12:28` 剩下的頁面，我們有野外指南、地質、植物和現場導覽，所以讓我們（rest of the pages so we have field guides geology plants and live tour so let's）
- `12:34` 說，好的，謝謝你建立這個頁面，看起來很棒，現在讓我們使用類似的（say that okay thanks for building this page looks great now let's use the similar）
- `12:39` 原則來建立剩下的頁面，野外指南、地質、植物、現場導覽（principles and build the rest of the pages so field guides geology plans live tour）
- `12:46` 和註冊頁面，直接把它們建立出來，看看會回傳什麼，我想（and sign up page just build it out and see what it comes back with and I guess）
- `12:55` 它還在建立中，但沒錯，我只是想展示它建立的內容，這就是（it's still builds but yeah I just want to show you what it builds so this is the）
- `12:58` 註冊頁面，看起來很酷，如果我們使用背景的話，我們還有（sign up page which looks pretty cool if we use the background we also have the）
- `13:03` 最終的野外指南區塊和地質區塊，它們正在使用一些已經建立好的 asset（final field guide section and geology which are using some of the assets that）
- `13:10` 讓我們多預覽一些，我們有這一個，背景有這個影片（will already created let's preview some more we have this one having this video）
- `13:14` 現在讓我們實際錄製下來並發佈到社群媒體上（in the background now let's actually record this and post it on social media）
- `13:19` 因為這就是你成長的方式，你不只是創作，你還要把它發佈到（because this is actually how you grow you don't just create you post it on）
- `13:23` 社群媒體上，所以我會使用任何螢幕錄影軟體，然後我會（social media so I'm gonna use any screen recording software and I'm just gonna）
- `13:29` 像這樣選取，然後點擊錄製影片，讓我們瀏覽這些頁面，（select like this and click on record video let's go through the pages the）
- `13:36` Claude 還在背景建立東西，所以它可能會干擾我（clothes still build stuff in the background so it might interfere with me）
- `13:40` 錄影之類的，但我不覺得那會是什麼大問題，所以讓我們（recording and stuff but I don't think that's gonna be a big problem so let's）
- `13:45` 直接點擊一些東西，沒錯，現在我們可以儲存它，直接點擊發佈（just click on some stuff and yeah now we can just save this just click on post）
- `13:54` 上傳影片，在它上傳的同時，這基本上就是我開始經營 Twitter 的方式，所以（upload the video while it uploads it's basically how I started my Twitter so the）
- `14:00` 我發的那幾篇貼文，我標記了 Lovable，這不是故意的，我不知道（very few posts that I did I tagged lovable this was not intentional I didn't know）
- `14:05` 這種小撇步或技巧，然後他們就轉發了，所以如果我去（about this kind of tip or trick to use and they just reposted it so like if I go）
- `14:11` 查看活動和轉發，你可以看到 Lovable 確實這麼做了，在那之後，幾乎（view activity and repost you can see that lovable did and after that like almost）
- `14:15` 我每一篇貼文有時都會提到 Lovable，有時就是像這樣標記（every of my post was sometimes mentioning lovable sometimes right like tagging）
- `14:21` 他們，然後他們就會轉發，如果你能提供真正的價值，我不是專指（them and they will repost it if you provide real value I'm not talking about）
- `14:26` Lovable，不確定他們現在是否還會轉發使用者的內容，（lovable specifically not sure if they do kind of repost user stuff right now at）
- `14:32` 目前看來他們會，但有數不清的不同公司（this moment seems like they do but there is gazillion of different companies like）
- `14:37` 如果能為使用者提供真正的價值，他們就會轉發你的內容，如果你（that would repost your stuff if you provide real value for the users if you）
- `14:43` 展示用他們的平台能做到什麼，他們可以而且他們會（show what can be done with their platform and they can and they will kind of）
- `14:48` 轉發它，這就是你成長的方式，只要說一些很簡單的話，確保（repost it and that's how you grow just say something very simple make sure that）
- `14:54` 你影片的第一幀看起來不錯，因為這基本上就像是縮圖，就像（the first frame of your video looks good because this is basically a thumbnail like）
- `14:58` YouTube 一樣，目前這不是最好的起始點，所以只要找到（for the YouTube currently this is not the best kind of starting point so just find）
- `15:04` 看起來真的很酷的地方，也就是動畫開始的地方（where it looks like really cool so somewhere where the animation starts but）
- `15:08` 還有內容也是，如果你的影片縮圖不夠好，基本上你的影片在 Twitter 或 YouTube 上都不會有好的表現，所以我們就（also the content and is visible basically if the thumbnail of your video is not）
- `15:15` 等一下，然後我們可以說像是 Claude AI 之類的話，不是說 Claude AI 會（very good none of your videos will perform either Twitter or on YouTube so let's）
- `15:23` 轉發你的影片，但確實有很小的機率他們會轉發，機率非常小，但我（just wait and then we can say something like Claude AI not saying that Claude AI will）
- `15:30` 認為他們看到了並且非常喜歡。現在用 AI 建立網站很容易，（repost your video but there is small chance that they will very small but I）
- `15:36` 不要在這裡寫得像篇論文一樣，Twitter 不適合那樣，或許用個（think they seen and they like it very much it's easy now to create websites with AI）
- `15:44` 愛心表情符號之類的，這就是你成長的方式，這就是（don't write like an essay here Twitter is not the place for that maybe use an）
- `15:49` 你建立網站、尋找客戶的方式，然後在你的貼文說明欄中，（emoji of heart or something and stuff like that and that's how you grow that's）
- `15:54` 你放入你的潛在客戶開發誘餌（lead magnets），所以永遠不要把誘餌放在標題裡，就像（how you create websites find clients then in the description to your post you）
- `15:58` 你看到我這裡做的一樣，第一篇貼文基本上是提供價值，然後如果（post you put your lead magnets so never put like lead magnet in the headline as）
- `16:04` 有人喜歡，他們可能會點擊它，然後我就說嘿，如果你喜歡這個，（you can see I did here the first post is basically providing value and then if）
- `16:09` 你可以從這裡存取影片中的所有 prompt，沒錯，這就是你成長的方式，因為如果你只是把連結放在這裡，很多人會認為（someone likes it they might click on it and then I just say hey if you like this）
- `16:13` 這是垃圾訊息之類的。我對於很多這些 prompt 都是這樣做的，先提供價值，（you can access all of these prompts from the video in here and yeah that's how）
- `16:18` 然後把行動呼籲放在說明欄裡，這就是你（you grow because if you just even put here then a lot of people will think this）
- `16:22` 尋找客戶的方式，這就是你建立這些網站的方式。如果你有任何關於（is a spam or something that's how I do for a lot of these prompts provide value）
- `16:26` 如何實際託管這些網站、如何將其發佈到正式的（first then put the call to action inside of the description so that's how you）
- `16:31` 網域並交給客戶的問題，請在留言區告訴我，我會（find clients that's how you create these websites if you have any more）
- `16:35` 製作下一支影片來介紹。謝謝收看，我們下支影片見。（questions on how you can actually host this how you can put it onto a live）
- `16:39` 網域並交給你的客戶，在留言區讓我知道，我就會製作（domain and give it to your client let me know in the comments and I'll create）
- `16:43` 關於那部分的下一支影片，謝謝你的觀看，我們下支影片（the next video about that so thank you for watching and I'll see you in the next）
- `16:46` 見（one）
**影片展示了名為「motionsites」的網站平台，使用者可瀏覽並複製 AI 生成的網頁設計提示詞與程式碼。**
**影片中的 Prompt 與操作**
操作步驟：
1. （00:00）瀏覽網站首頁的設計模板列表
2. （00:01）點擊「3D Story」模板進入詳細頁面
3. （00:02）點擊「Copy full prompt」按鈕複製提示詞
4. （00:03）點擊「Copy」按鈕複製原始碼
5. （00:04）返回網站首頁
## 標籤
教學資源, Claude, Web, Figma, Anthropic, Claude, Figma