
效果预览
相似 Skill
查看全部 Skills你将获得
- 一套完整的可交互示例网站,以虚构 AI 产品为例,包含产品、定价、资源、活动和更新日志五个相互连通的页面。
- 可复用的模板与风格指南,锁定石墨底色、单一薄荷绿强调色、标题斜体衬线词、柔和光晕和代码绘制的应用窗口。
- 页面库、图标规则、框架适配指南和本地校验脚本,方便你搭建并检查自己的版本。
适合
- 正在发布或改版产品官网的软件和 AI 团队。
- 希望定价、帮助中心、活动和更新日志保持统一视觉的创始人。
- 希望设计直接落地到自己框架中、而不是停留在静态稿的开发者。
不适合
- 浅色、多彩或俏皮风格的品牌——这套视觉依赖深色底和单一强调色。
- 需要真实支付、登录、搜索索引或活动报名后端的项目。
- 拥有数百篇文章的内容型博客或文档站。
产品发布与应用增长网站与数字体验制作落地页Build Product Site风格锁定成果可编辑转化导向Bento GridSoft GlowDark ModeItalic Serif AccentMint Accent
关于此 Skill

薄荷暗夜软件产品官网
为软件或 AI 产品打造一套深色营销网站:近黑石墨底面、柔和的米白文字、细线边框和唯一的薄荷绿强调色,每个标题中有一个词使用大号斜体衬线体。示例使用虚构产品 Corvel——一支面向网店卖家的 AI 业务团队;你替换其中的内容,同时保留让这套风格一眼可辨的版式构成。
你会得到什么
五个相互连通的页面共用一个吸顶导航栏和一个页脚:
- 产品页——公告胶囊、两行渐变标题、下载与浏览器 CTA、头像信任栏,以及一个用代码绘制的大型应用窗口,内含 KPI 卡片、收入图表和关键发现提示。下方依次是集成条、三张功能卡片、Bento 网格、带成果数据的衬线体客户评价,以及带光晕的收尾 CTA。
- 定价页——月付/年付切换会重新计算所有价格,三个套餐中间一档以光晕突出,另有对比表和账单 FAQ。
- 资源页——边输入边过滤的帮助中心搜索、六张分类卡片、热门文章、分级教程和支持卡片。
- 活动页——带实时倒计时和议程的精选直播工作坊、可筛选的近期场次、回放卡片和订阅表单。
- 更新日志页——活动节点随滚动移动的版本时间线、内容丰富的版本卡片,以及“加载更早版本”控件。
包内还附带模板、风格指南、页面库、图标规则、框架适配指南和本地校验脚本。
改成你自己的
先提供产品名称、一句话品类定位和 Hero 标题句,再选出要变成薄荷绿衬线体的那个词。加入产品真实支持的集成、三项功能、一个数据可信的客户案例,以及你的套餐。如果还没有帮助文章、活动或更新说明,助手可以先起草明确标注为虚构的内容供你审阅。
告诉助手你使用的框架,或让它读取你的项目。没有偏好时,它会生成 Next.js App Router + TypeScript 项目,把每个页面变成真实路由、每个重复区块变成组件。
照片只用于人物:小尺寸圆形头像,以及 Agent 身份卡上的一张肖像。可以使用你自己的团队照片,也可以在纯深色背景、柔和暖光下生成一组风格统一的头像。
检查结果
在桌面和手机宽度下逐页打开。切换账单周期、搜索帮助中心、筛选活动、报名一个场次、批准 Bento 中的操作,并加载更早的版本。单文件构建运行附带的校验脚本,框架构建则运行项目自己的检查。示例不会发送任何数据;只在正式网站确实需要的地方接入真实服务。
开始前需要准备什么
- 你需要提供
- 产品名称、一句话品类定位,以及 Hero 标题和其中要设为衬线体的一个词 · 真实支持的集成、核心功能,以及一个带成果数据的客户案例 · 各套餐的月付和年付价格及包含内容 · 可选:帮助文章、近期活动和版本更新说明
- 依赖项
- 用于预览和视觉检查的现代浏览器 · 用于运行附带静态校验脚本的 Node.js · 生成网站所用框架的相关工具链 · 宿主自带的生图工具或自有照片,用于团队和客户头像
- 外部成本
- 生成新的人物头像可能会产生图片服务商的额外费用。查看附带示例无需任何生成。
- 最近实测
- v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
用户评价
评价加载中…









