
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 完整的品牌商店:首頁、商品、系列與食譜頁、品牌故事、附地圖的經銷據點、批發、FAQ、配送、聯絡、電子報、購物袋、結帳與法律頁面
- 方格紙風格:細格線的溫暖紙張、粗重窄體標題、依口味上色的描邊卡片、貼著貼紙的五張照片扇形 Hero,以及鈷藍色頁尾字標
- 可實際操作的商店細節:顯示免運進度的購物袋側欄、容量與訂閱價格、搜尋、篩選、食譜份量換算器,以及具驗證功能的結帳
適合
- 想要活潑貼紙與紙盒風格的燕麥飲、果汁、咖啡、茶飲、康普茶或零食品牌
- 需要把商店、食譜或飲用儀式、經銷據點與支援頁面設計成同一家族的小型消費品牌
- 想在串接真實金流前先擁有可信店面,或想把設計移植到自己專案中的創辦人
不適合
- 低調奢華或企業品牌:粗重窄體字、貼紙與口味色彩刻意走大膽俏皮路線
- 今天就需要真實付款、會員帳戶或訂單配送的商店:購物袋與結帳只會在頁面上確認,並說明沒有收費
- 單一畫面的預告頁:這個 Skill 會建置整個相互連結的網站,只做一個登陸區塊會浪費大部分功能
品牌設計與視覺規範網頁設計與數位體驗建置品牌網站風格鎖定成果可編輯燕麥扇形燕麥 Hero燕麥食譜燕麥故事
關於此 Skill

Grid-Paper 方格紙飲品品牌網站會在溫暖的方格紙上打造完整、可購物的品牌網站,搭配粗重的窄體標題、描邊卡片、貼紙點綴,每種口味各有一個俏皮的代表色。每個連結都通往經過設計的頁面,購物袋、搜尋與表單也都能實際回應。範例是 Oat Parade,一個虛構的燕麥飲品牌,共有 34 個相互連結的頁面。

你會得到
- 構圖多變的首頁:扇形照片 Hero、口味跑馬燈、可篩選的商品列、品牌故事分欄、數據 bento、從田間到冰箱的旅程、食譜 bento、使用者評價、FAQ、經銷據點查詢與電子報
- 每個商品、系列與食譜都有內頁,另有品牌故事、附地圖的經銷據點、批發、FAQ、配送、聯絡、購物袋、結帳、隱私權、服務條款與找不到頁面
- 購物互動:可調數量並顯示免運進度的購物袋側欄、容量與訂閱價格、搜尋、收藏、食譜份量換算器,以及具驗證功能的結帳
- 每個主題各規劃一張照片,統一藝術指導,與字型一起嵌入單一可離線使用的檔案

使用方式
- 提供品牌名稱、一句話承諾、商品與價格及容量、購買管道,以及品牌故事。
- Agent 會把口味、食譜與經銷據點對應到你的事業,生成照片並填滿每個頁面。
- 開啟檔案,在桌機與手機上逛逛商店、購物袋與食譜,再用一般說法提出修改。

照片來自 Agent 的圖像工具(可能產生該工具的使用費用)或你自己的圖庫。在你接上真實服務之前,購物袋與結帳都不會收費或送出任何資料。
開始前需要準備什麼
- 你需要提供
- 品牌名稱、一句話承諾與目標受眾 · 商品名稱、價格、容量,以及各自的特色 · 購買管道(線上、經銷據點、批發、訂閱)、品牌故事,以及配送與聯絡資訊
- 相依項目
- Agent 所在電腦需安裝 Node.js 18 以上版本,用來執行內建腳本產生單一離線檔案 · 產生檔案時需要網路連線,以便下載一次字型並內嵌 · Agent 中的圖像工具,用於商品、食譜與品牌故事照片(若你提供自己的照片則為選用)
- 外部費用
- Agent 會用自有圖像工具生成商品、食譜與品牌故事照片,可能產生該工具的使用費用。你也可以改用自己的照片。除此之外不會使用任何付費服務。
- 最近實測
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…








