Vibe Coding 教室 生成您第一個成品!
// VIBE CODING STARTER

不會寫程式
只要講清楚就可以

Vibe coding 的關鍵不是打字，而是「把您的想法構建出來」。您只需填寫兩格，並選一選，項目，就可以幫妳生成完整的作品，一鍵貼上 AI 就能製作成品。

Vibe Coding 網站公式

一份好的 Markdown，就能夠 AI 構建一個好的作品

01
主題內容
這是什麼網站、會賣什麼、說什麼
＋
02
網站類型
一頁式、作品集、商店、活動頁
＋
03
風格配色
可愛、簡約、精品＋五色配色
＋
04
頁面區塊
Hero、賣點、評價、FAQ、CTA
填寫及選擇　→　產生 Markdown　→　貼給 AI　→　生成作品
STEP 01 // 上課重點

一頁式網站的 9 個區塊，逐一打開了解

這就是 Markdown 裡每個區塊在做什麼。教學生先懂「為什麼」，再讓 AI 動手做。

STEP 02 // 最少輸入

填寫及選擇

只有兩格要打字，其他全部用下拉式功能表及按鈕。右邊的 Markdown 會即時更新。

網站設定

＊ 紅星位置是唯一需要打字的兩格

產生的網站 Markdown


      

        
        
複製後，選擇下方 AI，並貼上 Markdown 開始生成您的作品

        

      

    

  







  

    
STEP 03 // 進階挑戰

    
Web App 產生器

    
網頁是「給人看」，Web App 是「給人用」。選好類型與功能，生成一份適合 vibe coding 的 App Markdown。

  


  

    

      
App 設定

      
＊ 紅星位置是唯一需要打字的兩格


      

        
        
      


      

        
        
      


      

        
        
      


      

        
        

      


      

        
        
      


      

        
        
      

    


    

      

        
產生的 App Markdown

      

      

      

        
        
複製後，選擇下方 AI，並貼上 Markdown 開始生成您的 App

        

      

    

  







  

    
STEP 04 // AI 智能生成

    
把您的想法，變成專屬 Markdown ✨

    
輸入幾個關鍵字或回答問題，AI 會根據您的想法生成完整的需求 Markdown，並給您優化建議。選擇網站或 App 兩條不同路徑，一鍵開始！

  


  
  

    
    
  


  
  

    
🔑 AI 引擎與密鑰設定

    

      選擇 AI 引擎：
      

        
        
      

    

    

      
      
    

    

      您可以在此輸入 API Key，或在網址加上 ?secret=您的Key 自動載入。Key 僅存於瀏覽器記憶體。
    

  


  
  

    
💡 告訴我您想做的網站

    
填愈多，生成愈準確。帶 ＊ 的欄位最好填寫。

    

  


  
  

  
  

    

      
💡 AI 優化建議

      
    
    
    
    
    
      
    
        generated.md
        AI 生成結果
      
    
      
    
    
    
    
    
      
      
    
    
    
    複製後，選擇下方 AI 工具，貼上 Markdown 開始生成您的作品
    
    
    
  
    

    




    已複製，貼上即可開始