
效果预览
相似 Skill
查看全部 Skills你将获得
- 为你的工作室生成一个自包含作品集文件,字体和图片已内嵌,任何浏览器打开、离线可用;已有框架项目时则移植进该项目。
- 带识别系统看板的案例页、带价格摘要的服务页、日志,以及可用的筛选、搜索、排序、网格与列表切换和预约组件。
- 标志性视觉见于 28 个页面、14 张专门生成图片的示例:漂浮卡片、红色人像卡、淡色大字、克制动效,并完整支持减少动态。
适合
- 想要一个可以直接上线的作品集的独立品牌、网页和产品设计师。
- 能把红色卡片换成创始人或团队照片、用“我们”口吻介绍的小型工作室。
- 按固定价格接项目、需要清晰服务页、流程时间线和预约流程的设计师。
不适合
- 真实的日历预约、邮件发送或收款;表单只显示如实的演示确认。
- 需要高密度满屏图库、而不是安静案例页的摄影师或代理公司。
- 把虚构的 Elin Saro、她的客户或评价当作真实作品展示。
品牌建立与视觉规范网站与数字体验Build Portfolio Site风格锁定成果可编辑BentoGhostPortraitProcess
关于此 Skill

Bento Designer Portfolio 用来为独立设计师、工作室或小品牌搭建作品集网站:浅灰舞台、第二行淡化的两行标题、围绕红色人像卡漂浮的六张便当卡片,以及安静的案例页。示例是虚构的鹿特丹设计师 Elin Saro,共 28 个互相连通的页面,所有筛选、表单和预约步骤都能操作。

你将获得
- 一个自包含的网站文件,字体和图片都已内嵌,任何浏览器直接打开,离线也能用。如果你已有框架项目,则把设计移植进该项目。
- 完整的作品集:作品索引、六个带识别系统看板的案例、关于、服务总览与四个带价格摘要的服务页、流程、评价、四篇文章的日志、预约、FAQ、通讯订阅、隐私、Colophon 和精心设计的 404 页。
- 可用的控件:带数量的分类标签、实时搜索、排序、网格与列表切换、可选日期时间和主题的预约组件,以及带校验和成功提示的表单。
- 14 张图片统一一套艺术指导:柔和的北向光、浅暖灰台面、画面里只有一个红色物件;每个客户的识别系统都以实物呈现,而不是屏幕截图。
- 克制的动效:卡片加载时落定一次,区块滚动时显现,开启减少动态后全部即时呈现。

如何使用
- 提供你的名字或工作室、设计方向、项目及客户与成果、服务、价格和联系方式。缺少的内容会先写成合理的占位文案,并列出请你确认。
- 发来一张用于红色卡片的半身人像和作品照片,或让 Agent 按同样的柔光风格生成项目静物图。生成的人像只是替身,之后请换成真人照片。
- 在桌面和手机上逐页打开,试一遍筛选、预约和表单,再提出修改。

字体为 Instrument Sans 与 Geist Mono,已内嵌进文件。新图片由你的 Agent 自带的图像工具生成,可能产生该工具的使用费。
开始前需要准备什么
- 你需要提供
- 你的名字或工作室、设计方向和一段简介 · 项目的客户、年份、类别和成果,以及服务、价格和联系方式 · 一张半身人像和作品照片,或同意先生成替身图片
- 依赖项
- Agent 所在电脑需要 Node.js 18 或更高版本,用来运行随附脚本,生成单个离线网页文件 · 生成文件时需要联网,字体只下载一次并嵌入文件 · Agent 自带的图像工具或你自己的照片,用于人像和项目图片 · 用于预览和逐页检查的现代浏览器
- 外部成本
- 新的项目图和人像由你的 Agent 自带的图像工具生成,可能产生使用费。没有图像工具时可用自己的照片;六张中性图片可以作为占位保留。浏览示例不产生费用。
- 最近实测
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
用户评价
评价加载中…









