新手入門AntigravityAI 開發零基礎一頁式網站

電腦版第二步:不做玩具,做一個你真的會拿出去用的東西

· 6 分鐘閱讀
新手上路 · 電腦路線 · 第 2 / 5 篇 查看整個系列 →
目錄
  1. 什麼叫「真的會拿出去用」
  2. Step 1:先把素材想清楚(20 分鐘,最重要的一步)
  3. Step 2:交任務(10 分鐘)
  4. Step 3:驗收,用真的標準(15 分鐘)
  5. Step 4:上線,拿到網址(10 分鐘)
  6. 今天的作業
  7. 下一級台階

上一篇你裝好了 Antigravity,做了一個倒數日網頁。那是玩具:練手感用的,做完就關掉了。

這一篇做的東西不一樣。做完之後,你會把網址傳給一個真實的人。

什麼叫「真的會拿出去用」

三個條件,缺一個都還是玩具:

  1. **上面是你的真資料。**真的名字、真的服務、真的價格、真的聯絡方式。
  2. **它在網路上。**有一個網址,別人用手機點開就能看,不是只存在你的電腦裡。
  3. **這禮拜就用得到。**你本來就需要跟某個人解釋「我是誰、我做什麼、怎麼找我」,現在改成丟一個連結。

最符合這三個條件的東西,是一頁式服務介紹頁。不管你是接家教、做設計、賣手作、當顧問、經營小店,你都需要這一頁。而它剛好是 AI 一次做得又快又好的類型。

Step 1:先把素材想清楚(20 分鐘,最重要的一步)

上一篇講過:AI 動手很快,慢的永遠是你沒想清楚。

打開記事本(或紙筆),寫下這五項。寫真的,不要寫「待補」:

1. 我是誰:名字(或品牌名)+一句話介紹
2. 我提供什麼:1 到 3 個服務項目,每個一到兩句話
3. 價格:可以是明確數字,也可以是「NT$X 起」或「聊過再報價」
4. 為什麼找我:一到三個理由(經歷、成果、作品,有數字最好)
5. 怎麼聯絡我:一種就夠。LINE ID、IG、email,挑你真的會回的那個

卡住的話,這一步本身就可以問 AI。開一個對話問它:「我是做○○的,幫我想想我的服務介紹頁該放哪些內容,一項一項問我。」它會用問答把你的答案挖出來。

Step 2:交任務(10 分鐘)

打開 Antigravity 的管理面板,把下面這段連同你剛寫的素材一起貼進去:

幫我做一個一頁式服務介紹網頁,資料如下:(貼上你的五項素材)。 要求:手機打開要好看、字要大、重點是最下面有一個明顯的聯絡按鈕,點了直接開我的聯絡方式。設計乾淨專業就好,不要花俏。做完在瀏覽器打開給我看。

跟上一篇一樣:它會先列計畫,你花 30 秒看它有沒有理解對,再放行。

Step 3:驗收,用真的標準(15 分鐘)

這次驗收不是「看起來能動就好」,是拿出去見人的標準。逐條檢查:

  • 名字、價格、聯絡方式,每一個字都是對的(AI 有時會自己編一段填進去,逐字看)
  • 用手機模式看一次:請直接跟它說「用手機尺寸打開給我看」
  • 聯絡按鈕按下去,真的會到你的 LINE/IG/email(在電腦上點 LINE 連結常常沒反應,這是電腦的問題不是你的:上線後用手機測才算數)
  • 給它一個「奧客測試」:想像最挑剔的客人會問什麼,頁面上有沒有答案
  • 大聲唸一遍文案。唸起來不像你會說的話,就叫它改:「這段改成我平常說話的語氣:(舉一句你真的會說的話)」

改個三五輪很正常。上一篇說過,這個「看 → 講 → 改」循環就是你的日常。

Step 4:上線,拿到網址(10 分鐘)

現在它還只在你的電腦裡。放上網路,用免費的 Vercel:

  1. 先問 Antigravity:「我這個網頁的檔案在哪個資料夾?幫我開檔案總管顯示它。」
  2. 瀏覽器開 vercel.com,用 Google 帳號登入。註冊過程是英文的:問名字照填,要選方案的話選 Hobby(免費那個),全程不用綁卡。
  3. 登入後,在網址列直接打 vercel.com/drop 進上傳頁,把整個資料夾拖進去。它會用英文問專案名稱(Project name),隨便打幾個英文字母,按 Deploy,等它跑完。
  4. 它會給你一個 https://xxx.vercel.app 的網址。用 LINE 把網址傳給自己,拿手機點開,確認跟電腦上看到的一樣,然後在手機上按一次聯絡按鈕:LINE 和 IG 的連結在手機上才是真實情境,電腦上測不準。

卡在任何一步,把畫面截圖貼回 Antigravity 問它。上線這段它也懂。

想要更完整的版本(自訂網域、讓 Google 和 AI 搜尋找得到你),之後照這篇升級:用 AI 免費架出你的第一個個人網頁

今天的作業

  1. 做完上面四步,拿到網址
  2. 把網址傳給一個真實的人:家人、朋友、或那個一直問你在做什麼的人
  3. 對方回你的第一句話,通常就是下一輪修改的方向

第 2 步才是這篇的重點。東西沒有見過人,就永遠只是練習。

下一級台階

到這裡,你已經用 AI 做出並上線了一個真的東西,整個過程沒有寫過一行程式。

下一步是把工具再升一級:進終端機,用 Claude Code。它跟 Antigravity 是同一類「代理人」工具,但動作範圍更大、更適合開始做功能複雜的東西。接這篇:Claude Code 實戰教學(2026)

新手上路 · 電腦路線 · 第 2 / 5 篇

你剛學會的,60 秒試一次

手機點 3 題,AI 當場長出一頁「一看就是你」的個人網頁。免費、不用註冊、不用寫程式。

每週 AI 自動化實戰筆記

不廢話,只有能直接用的東西。Prompt 模板、自動化 SOP、技術拆解。

加入一人公司實驗室

免費資源包、每日建造日誌、可以對話的 AI Agent。一群用 AI 武裝自己的獨立開發者社群。

需要技術協助?

免費諮詢,24 小時內回覆。