
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 單一自含網站檔案,任何瀏覽器都能開啟並離線使用,字型與圖片皆已內建;若你有自己的框架專案,則會移植進去。
- 可實際操作的電商流程:附包裝規格的商品頁、訂閱組箱器、購物袋側欄、可檢查配送範圍的結帳預覽,以及經銷據點地圖。
- 招牌 Hero、緞帶、波浪與照片拼貼,呈現在含 17 張圖片的 28 頁範例中,另有品牌故事、產地農友、專欄、配送、FAQ 與政策頁面。
適合
- 在網路上販售、想要明亮活潑店面的果汁、咖啡、茶飲與零食品牌。
- 在固定區域配送或經營訂閱箱的在地品牌。
- 可以把商店改成菜單、把「找到我們」整合成單一到店資訊區塊的咖啡廳與烘焙坊。
不適合
- 真實付款或訂單履約;結帳會驗證資料,但絕不會向任何人收費。
- 需要深色、極簡或企業風格,而非漸層與緞帶的品牌。
- 販售虛構的 Halcy 商品,或把它的瓶身圖像當成你自己的。
品牌設計與視覺規範網頁設計與數位體驗建置品牌網站風格鎖定成果可編輯果汁拼貼果汁 Hero果汁緞帶果汁波浪
關於此 Skill

Gradient Juice 品牌網站為飲品、食品或生活風格品牌打造歡樂的品牌與購物網站:滿版漸層形象照中有人拿著你的瓶子暢飲,奶油色文字緞帶沿著曲線路徑飄動,區塊之間以波浪邊緣銜接,再搭配明亮的照片磚。範例是 Halcy,一家位於加州 Ventura 的虛構冷壓果汁品牌,共有 28 個相互連結的頁面,包含可操作的商店、組箱器與結帳預覽。

你會得到
- 單一自含網站檔案,任何瀏覽器都能開啟並離線使用,字型與圖片皆已內建。如果你已有框架專案,設計會改為移植到該專案中。
- 完整商店:六個附包裝規格與即時價格的商品頁、商品系列、每週組箱器、購物袋側欄、可檢查配送範圍的結帳預覽,以及如實呈現的成功頁。
- 品牌頁面:品牌故事、可切換月份的產地農友、四篇文章的專欄、附地圖的經銷據點查詢、配送與退貨、可搜尋的 FAQ、聯絡、電子報、政策條款,以及經過設計的找不到頁面。
- 所有圖片統一的藝術指導:同款瓶身與光線的商品靜物照,加上明亮的生活情境照。
- 文字緩緩飄動的緞帶、俐落的 Hero 進場與沉穩的顯現動畫,啟用減少動態設定時全部暫停。

使用方式
- 提供品牌、商品與價格及包裝規格、配送地區與時間、品牌故事與聯絡資訊。缺少的文案會先草擬成合理的預留內容,並列出讓你確認。
- 讓 Agent 生成一張瓶身印有你品牌名稱的新 Hero 照片,以及每個商品一張同樣光線的靜物照,或直接提供你自己的照片。套件中兩張中性的飲品情境照可以保留。
- 在桌機與手機上開啟每個頁面,把商品加入購物袋、組一箱、試用結帳預覽,再提出修改。

字體採用 Bricolage Grotesque、Figtree 與 DM Serif Display,皆嵌入檔案中。新圖片由你的 Agent 自有圖像工具生成,可能產生使用費用;結帳流程絕不會實際收款。
開始前需要準備什麼
- 你需要提供
- 品牌名稱、商品與價格及包裝規格,以及簡短的品牌故事 · 市場資訊:幣別、配送區域或運送方式,以及聯絡資訊 · 你自己的商品與團隊照片,或同意生成新圖片
- 相依項目
- Agent 所在電腦需安裝 Node.js 18 以上版本,用來執行內建腳本產生單一離線檔案 · 產生檔案時需要網路連線,以便下載一次字型並內嵌 · Agent 中的圖像工具,或你自己的照片,用於 Hero 與商品圖片
- 外部費用
- Hero 照片與商品靜物照由你的 Agent 自有圖像工具生成,可能產生使用費用。若沒有圖像工具,請提供自己的照片;兩張中性的飲品情境照可以保留。檢視範例不需任何費用,結帳也絕不會收費。
- 最近實測
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…








