---
title: "30分鐘 Vibe Coding 出你的名單收集頁"
seo_title: "30分鐘 Vibe Coding 出你的名單收集頁"
seo_description: "半小時內，打造與 Notion連結的網頁並上線"
slug: vibe-coding-website
url: https://academy.the-solo-system.com/courses/vibe-coding-website
type: paid
---

# 30分鐘 Vibe Coding 出你的名單收集頁

> 半小時內，打造與 Notion 連結的網頁並上線

## Description

點擊購買登入後即可免費觀看 只要 30 分鐘，用Vibe Coding 打造結合 Notion 的名單收集頁 為什麼要做這個網站？前幾天，我想要用現成的系統來收集對課程有興趣的名單結果發現 Teachify 這個課程銷售系統只能購買課程 而 Portaly 的名單收集功能沒辦法放入介紹多門課程時版面利用率不佳 幸好，現在是 AI 時代有什麼想做的都可以自己來 這個網站可以幹嘛網站可以展示你的所有課程並且根據上線狀態，為課程設定不同按鈕 - 未完成課程：「我有興趣」按鈕——彈出表單，收集名單- 已完成課程：「前往購買」按鈕——直接前往結帳頁 除了表單功能外，還可以查看課程的詳情文案讓你快速說明課程中的內容未來還能分別為每個課程設計符合風格的獨立銷售頁 都有Notion表單了，你還要再做一個網站呢Notion 雖然能透過表單收集名單但當你的需要分別收集不同名單的時候你就要在 Notion 表單中放很多圖片、介紹然後要使用者自己勾選大大提升了填寫的阻力而且也很難自定風格，看起來沒有很專業 透過自己建立名單收集頁你可以建立符合需求的風格同時新增想要的互動比如說彈出填寫表單、介紹頁等等大大提升了自由度也讓使用者操作更直覺這三十分鐘，會學到什麼？ 你會完整看到從打開編輯器到開發出一個網站上線的流程學會後，你也不一定要開發名單收集頁也能夠開發自己的網站等等 因為想帶大家用最快時間順一遍流程所以很多細節都不會說太深 如果你想學習更完整的 Vibe Coding 流程與細節歡迎預購我的 Vibe Coding 從想法到上線 課程十一月上線，到9/30前有超早鳥優惠價 6 折

## Learning Objectives

- 安裝合適的AI程式碼工具
- 基本的下指令架構
- 做出好看網頁的最簡單方式
- Notion API的設定
- 版本控制與使用GitHub
- 部署上線讓網站可以被其他人看到

## Course Info

- Lectures: 1
- Video: 0.4h

## Instructors

### The Solo System

Al x工具 x 系統 一人創造無限可能

## Curriculum

### 半小時內Vibe Coding出結合Notion的名單收集頁 (22m)

- 教學影片 (22m)

## Pricing

### 登入即可免費觀看 - Free

## FAQ

**「Vibe Coding」是什麼意思？跟自己寫 Code 差在哪？**

「Vibe Coding」是一種與 AI 協作的開發模式。傳統寫 Code 像是在蓋房子時，你必須親自搬運每一塊磚頭、攪拌水泥；而 Vibe Coding 則是你扮演「建築師」的角色，你告訴 AI 你想要一棟什麼風格的房子、有幾個房間，AI 就會為你規劃藍圖並快速建造。你學的不是寫 Code 的語法，而是與 AI 溝通、修正、打造產品的「心法」。

**我完全不會寫程式，可以跟得上嗎？**

這 30 分鐘的教學正是為程式麻瓜所設計的。如果你完全沒接觸過 Vibe Coding，透過這個過程你會發現，「Vibe Coding」的核心不是自己動手寫程式碼，而是學會如何用精準的「人話」引導 AI 完成你想要的功能。整個過程就像你在指導一位超強的工程師，你只需要下達指令，不需要了解背後的複雜技術。

**這 30 分鐘的教學，跟付費的「Vibe Coding 從想法到上線」課程有什麼不同？**

這 30 分鐘的教學是一個「快速流程體驗」，目標是讓你用最短的時間，從 0 到 1 建立一個能實際運作的名單收集頁，感受 Vibe Coding 的魅力與成就感。而十一月上線的完整課程，則是從 1 到 ∞ 的「系統化實戰手冊」。它會深入探討所有你在快速體驗中不會碰觸到的「為什麼」和「怎麼辦」，包含：除錯技巧：當 AI 做錯或網站壞掉時，如何引導它修正？版本控制：如何讓你放心修改，不怕改錯就回不去了？元件化與進階功能：如何打造可重複使用的元件，串接金流、資料庫？UI/UX 優化：如何讓你的成品擺脫 AI 感，擁有更好的使用者體驗？獨家資源庫：附贈讓開發更順暢的 Prompt 庫、UI 模板、常用指令等。

**為什麼不直接用 Notion 表單就好了？還要另外做一個網站？**

當你的產品或課程一多，單純的 Notion 表單會讓頁面變得非常雜亂，使用者體驗也不佳。你需要手動更新、難以客製化，看起來也不夠專業。自己打造的網站能讓你：提升專業感：擁有符合品牌風格的專屬頁面。優化使用者體驗：根據課程狀態（預購/上線）提供不同按鈕，操作更直覺。保有最大彈性：未來可以輕易擴充成完整的銷售頁或官網，不受平台限制。

**學完之後，我真的能做出一個可以用的網站嗎？**

這 30 分鐘的影片會帶你走過從下載編輯器到網站正式上線的完整流程。教學結束時，你會擁有一個可以公開分享、實際收集名單的網頁。這不僅是一個練習，而是一個能馬上投入使用的實用工具。