
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 一個屬於你工作室的獨立作品集檔案,任何瀏覽器都能開啟、離線也能使用,字型和圖片都已內嵌;如果你有自己的框架專案,也能移植進去。
- 附識別設計板的案例、含價格摘要的服務頁、日誌,以及可實際運作的篩選、搜尋、排序、格狀與清單檢視和預約元件。
- 以 28 頁範例與 14 張專屬圖片呈現招牌風格:漂浮卡片、紅色肖像卡、淡化字體、沉穩動態,並完整支援減少動態設定。
適合
- 想要一個能直接發布的作品集的獨立品牌、網頁與產品設計師。
- 可以把紅色卡片換成創辦人或團隊照片、以「我們」口吻撰寫的小型工作室。
- 提供固定費用服務、需要清楚服務頁、流程時間軸和預約流程的設計師。
不適合
- 真正的行事曆預約、電子郵件寄送或付款;表單只會顯示誠實標示的示範確認訊息。
- 需要密集滿版圖片藝廊、而非安靜案例頁的攝影師或代理商。
- 把虛構的 Elin Saro、她的客戶或評語當成真實作品展示。
品牌設計與視覺規範網頁設計與數位體驗建置作品集網站風格鎖定成果可編輯Bento幽靈肖像流程
關於此 Skill

Bento 設計師作品集為獨立設計師、工作室或小品牌打造作品集網站:淺灰舞台、第二行淡化的雙行標題、環繞紅色肖像卡的六張漂浮 Bento 卡片,以及安靜的案例頁。範例是虛構的鹿特丹設計師 Elin Saro,共 28 個相互連結的頁面,每個篩選、表單和預約步驟都能實際運作。

你會得到什麼
- 一個獨立的網站檔案,任何瀏覽器都能開啟、離線也能使用,字型和圖片都已內嵌。如果你已經有框架專案,則會把設計移植進去。
- 完整作品集:作品索引、六個附識別設計板的案例、關於、含四個詳細頁與價格摘要的服務、流程、評價、含四篇文章的日誌、預約、FAQ、電子報、隱私權、版權頁,以及精心設計的 404 頁面。
- 可實際操作的控制項:附數量的分類標籤、即時搜尋、排序、格狀與清單檢視、可選日期/時間/主題的預約元件,以及具驗證與成功狀態的表單。
- 14 張圖片採用同一套美術指導:柔和的北向光、淺暖灰的表面加上一件紅色物品,每位客戶的識別設計都以實體物件而非螢幕畫面呈現。
- 沉穩的動態效果:卡片只會落定一次、區塊隨捲動出現,開啟減少動態設定時一切都會即時呈現。

如何使用
- 提供你的名字或工作室名稱、設計領域、專案(含客戶與成果)、服務、價格和聯絡方式。缺少的內容會先擬成合理的佔位文字,並列出來讓你確認。
- 傳一張半身肖像用在紅色卡片,以及作品照片;或讓 Agent 以相同的柔和光線生成專案靜物照。生成的肖像只是暫代,等你換成真實照片。
- 在桌機與手機上打開每一頁,試試篩選、預約和表單,再提出修改需求。

字型使用 Instrument Sans 與 Geist Mono,並內嵌在檔案中。新圖片由你的 Agent 自身的生圖工具產生,可能會產生使用費用。
開始前需要準備什麼
- 你需要提供
- 你的名字或工作室名稱、設計領域和一段簡短介紹 · 專案的客戶、年份、類別與成果,以及服務、價格和聯絡方式 · 一張半身肖像和作品照片,或同意生成暫代圖片
- 相依項目
- Agent 所在電腦需安裝 Node.js 18 以上版本,用來執行內建腳本產生單一離線檔案 · 產生檔案時需要網路連線,以便下載一次字型並內嵌 · Agent 內建的生圖工具,或你自己的照片,用於肖像和專案圖片 · 用來預覽與檢查每個頁面的新版瀏覽器
- 外部費用
- 新的專案與肖像圖片由你的 Agent 自身的生圖工具產生,可能需付費。若沒有生圖工具,請提供自己的照片;六張中性圖片可以保留作為佔位。檢視範例完全免費。
- 最近實測
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…









