
效果预览
相似 Skill
查看全部 Skills你将获得
- 首页、Services、含三个套餐页的 Pricing、含六个案例的 Work、About、Process、带需求表单的 Contact、Terms 和一个精心设计的 404
- 招牌视觉:Schibsted Grotesk 搭配 Newsreader Italic、蓝色调抠像人像、可用的明暗切换,以及一条掉落胶囊的色带
- 案例页用手机和浏览器框绘制产品界面,另有套餐对比、FAQ、作品筛选与搜索,全部在一个可离线运行的文件里
适合
- 销售固定价格套餐、希望第一眼就有强烈杂志感的独立设计师
- 能把自己的服务对应到服务项、套餐和案例上的自由开发者、品牌设计师和顾问
- 想要一个完成度高的多页网站,今天就能从本地打开或作为单文件发布的人
不适合
- 真实支付或预约:需求表单和套餐按钮只在页面内确认,真正投递需要你自己的后端
- 人数较多的代理公司;版式围绕一个人、一张人像和一种口吻搭建
- 低饱和或多色配色;这个风格只有白、墨黑和一种钴蓝
品牌建立与视觉规范网站与数字体验制作网页/单页站/仪表盘Build Portfolio Site风格锁定成果可编辑Editorial SerifCobalt MonochromeDuotone PortraitLight Dark TogglePill Tags
关于此 Skill

把你的服务、套餐和项目变成一个能带来订单的设计师网站。Hero 把你放进标题里:两个斜体衬线词压在一个巨大的钴蓝单词上方,被你的蓝色调人像劈开,页眉的胶囊按钮能真正切换明暗。从 Services 到 Terms,整站以一个文件交付,任何浏览器离线即可打开。

你将获得
- 首页包含整幅钴蓝色带(白色服务胶囊掉落并堆叠)、定价网格、精选作品、流程条和客户评价
- 带起步价的 Services,每个套餐一页并附横向对比的 Pricing,以及带筛选、搜索和六个案例的 Work
- 案例页在每个项目图之上,用手机和浏览器框展示绘制的产品界面
- About、Process、带校验需求表单和介绍通话时段的 Contact、Terms,以及精心设计的 404
- Schibsted Grotesk 与 Newsreader Italic 字体连同所有图片均已内嵌,页面不发起任何网络请求

如何使用
- 向 Skill 提供你的名字、专业方向、Hero 用词、服务、2 到 4 个套餐、几个项目和联系方式。
- Skill 填满每个页面,缺失的内容用自信的第一人称口吻起草,并列出来让你确认。
- 在明暗两种模式下打开文件,点遍每个页面,用大白话提修改。

你的人像和新的项目图片可以自己提供,也可以用 Agent 的图像工具生成,后者可能产生该工具自身的使用费用。
开始前需要准备什么
- 你需要提供
- 你的名字、一个单词的字标、专业方向、两个斜体 Hero 词和一个钴蓝大词 · 6 到 12 项带价格的服务,以及 2 到 4 个套餐(价格、周期和包含内容) · 项目信息(客户、角色、问题、做法和结果),以及联系方式和可接单时间
- 依赖项
- Agent 所在电脑需要 Node.js 18 或更高版本,用来运行随附脚本,生成单个离线网页文件 · 生成文件时需要联网,字体只下载一次并嵌入文件 · Agent 中的图像工具,用于生成人像、项目图和工作室照片;如果你自己提供则可以不用
- 外部成本
- 你没有提供的图片由 Agent 自带的图像工具生成,可能产生该工具的使用费用。中性的工作室照片随 Skill 附带,案例界面用代码绘制,成品页面不发起任何网络请求。查看示例不产生任何费用。
- 最近实测
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
用户评价
评价加载中…









