用 AI Skill 建立單頁網站
所有內容都在一個捲動頁面上：Hero、功能、FAQ，以及就地開啟的預購抽屜。你的 Agent 會填入產品資訊，交回一個離線也能開啟的 HTML 檔案。
以及其他 30 多個 Agent
單頁網站範例
Aurawave Audio Landing 是真正的單頁產品網站。開啟線上示範，就能捲動瀏覽、打開抽屜、切換主題。
Aurawave 音響登陸頁
為喇叭、耳機或任何實體產品打造高質感的發表網站，以大幅產品攝影撐起整個頁面。視覺明亮、近乎單色，搭配緊湊的大標題、大量留白，以及產品亮起時的一抹青綠色光暈。預設會得到一個能在任何瀏覽器離線開啟的獨立頁面，內含可操作的預購抽屜，以及文章、政策與聯絡面板。如有需要，也可提供含規格與定價頁的多頁版本。
你需要準備
- 產品名稱、三到四個字的標題構想，以及一句文案
- 你能負責的價格、外觀配色、保固與主要規格
- 選填：你的 Logo、真實產品照片，以及結帳或候補名單連結
你會得到
- 一個可離線使用的獨立頁面：產品 Hero、文字內嵌圖片的價值主張、交錯排列的功能區塊、信任卡片、空間情境輪播、FAQ、文章，以及帶品牌字標的深色頁尾。
- 可操作的預購抽屜（外觀配色、單顆或立體聲組合、電子郵件驗證、確認畫面），以及可在原頁開啟的文章、政策與聯絡面板，支援淺色與深色主題。
- 如有需要，可提供含產品、規格、定價、關於、聯絡與部落格頁面的多頁版本，並附上圍繞你的產品重新生成每張照片的規劃。
執行環境
Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image generation tool in your agent for new product photos · npm, only if you ask for the multi-page Next.js version · Regenerating the product photos uses your agent's image tool, which may incur that tool's usage charges. Opening and editing the page costs nothing extra.
選擇產品或服務頁
單頁網站把整個故事放在一次捲動裡，額外內容用抽屜和彈出面板開啟，而不是跳到新頁面。適合一個產品、一場活動或一個方案。如果需要獨立的價格頁、文件或部落格，請改從到達頁或多頁網站開始。
- 頁面結構
- Hero、價值主張、功能列、信任、輪播、FAQ、頁尾
- 頁內附加內容
- 預購抽屜、文章、政策和聯絡面板
- 導覽
- 單一頁面內的錨點連結，不載入新頁
- 你需要提供
- 產品名稱、標題、價格、規格，照片可選
- 交付形式
- 一個自包含 HTML 檔案，含淺色與深色主題
- 表單
- 在頁面上驗證；接上你自己的結帳服務才能接單
生成、編輯並發布你的 HTML 頁面
一個檔案用來編輯，一個檔案上傳到任何靜態主機。
1安裝 Skill
把安裝提示詞貼到你的 Agent。
2描述你的產品
提供你能負責的名稱、標題構想、價格、表面處理和規格。
3發布檔案
先離線開啟檢查，再把 HTML 上傳到任何靜態主機。
為什麼不直接請 AI 做單頁網站？
直接問 AI 也能得到結果。Skill 補上的，是讓結果穩定、可重複的那部分。
單頁網站常見問題
這個 Skill 不做什麼
- 它不處理付款；請接上你自己的結帳服務。
- 它不適合沒有實體產品的軟體。
- 可依需求產生多頁版本，但那就不是單頁網站了。
什麼是單頁網站？
所有內容都在單一捲動頁面上的網站，導覽會跳到頁內區塊，而不是載入新頁面。
這是單頁網站範本嗎？
用起來確實像範本：Skill 內含一套驗證過的版面，填入你的產品後，產出一個可以編輯、可託管在任何地方的 HTML 檔案。
可以免費託管嗎？
可以。它是單一靜態 HTML 檔案，任何靜態主機或物件儲存都能提供服務。
其他網站 Skills 在哪裡？
附額外頁面的完整行銷網站在到達頁範本頁；個人網站在作品集頁。
更多內容創作者任務
每項任務都有專屬的 Skills、真實範例和常見問題。
