
Preview gallery
关于这个 Skill
为 AI 或 SaaS 工具构建一个深色产品营销网站,具有近乎黑色的石墨表面、单一薄荷色口音和斜体衬线突出显示粗体标题中的单词。您将获得五个连接的页面——产品、定价、资源、事件和变更日志——每个页面都带有工作切换、过滤器、搜索、倒计时和表单。非常适合推出应用程序的软件团队,他们想要一个看起来像产品本身的平静、优质的网站。
Picked most often by
About this Skill

Mint Noir SaaS Site
为软件或人工智能产品构建一个深色营销网站:近乎黑色的石墨表面、柔和的灰白色字体、细线边框和单一薄荷色口音,每个标题中的一个单词以大斜体衬线设置。该示例使用虚构产品 Corvel,这是一个针对在线卖家的 AI 业务团队;您可以替换其内容,同时保留使风格可识别的构图。
您收到什么
五个连接的页面共享一个粘性导航栏和一个页脚:
- 产品展示 — 公告药丸、两行渐变标题、下载和浏览器 CTA、头像信任行和用代码绘制的大型应用程序窗口,其中包含 KPI 磁贴、收入图表和关键发现说明。下面是一个集成条、三张功能卡、一个便当网格、一个带有校样编号的衬线感言和一个热情洋溢的结束语。
- Pricing — 每月/每年的切换,重新计算每个价格,三个计划,中间一个被发光,比较表和计费常见问题解答。
- 资源 — 帮助中心搜索,可在您键入时进行过滤、六个类别卡、热门文章、分级教程和支持卡。
- 活动 — 特色现场研讨会,包含运行倒计时和议程、可过滤的即将举行的会议、重播卡和时事通讯表格。
- 变更日志 — 发布时间线,其活动节点跟随您的滚动、丰富的发布卡和“加载旧版本”控件。
该软件包还包括模板、样式指南、页面库、图标规则、框架适配指南和本地验证器。
让它成为你自己的
从产品名称、单行类别和主要句子开始,然后选择一个应该变成薄荷衬线的单词。添加您的产品真正支持的集成、三个功能、具有真实数字的客户故事以及您的计划。如果帮助文章、事件或发行说明尚不存在,助手可以起草明显虚构的内容供您查看。
告诉助手你使用哪个框架,或者让它读取你的项目。如果没有首选项,它会使用 TypeScript 构建一个 Next.js App Router 项目,将每个页面变成一个真实的路由,将每个重复的块变成一个组件。
摄影仅限于人物:小圆头像和特工身份证上的一张肖像。使用您自己的团队照片或在带有柔和暖光的纯黑色背景上生成一致的设置。
检查结果
以桌面和手机宽度打开每个页面。打开计费开关,搜索帮助中心,过滤事件,注册会话,批准便当操作并加载旧版本。在单文件构建上运行包含的验证器,或在框架构建上运行项目自己的检查。示例中没有任何内容发送数据;仅在生产站点需要时连接真正的服务。
What you need before you start
- You bring
- 产品名称、单行类别和主线(用一个单词在衬线中设置) · 真正的集成、关键功能和一个带有证明编号的客户故事 · 包含月度和年度价格的计划以及包含列表 · 可选:帮助文章、即将举行的活动和发行说明
- Dependencies
- 用于预览和视觉审查的现代浏览器 · 用于包含静态验证器的 Node.js · 为生成的网站选择的框架工具 · 用于团队和客户肖像的主机图像工具或拥有的照片
- Outside costs
- 生成新肖像可能会向图像提供商收取单独的费用。所包含的示例无需任何生成即可查看。
- Last tested
- v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
What you get
- 一个完整的交互式示例网站,具有五个连接的页面 - 产品、定价、资源、事件和变更日志 - 专为虚构的 AI 产品而构建。
- 可重复使用的模板和风格指南,锁定石墨地面、单一薄荷口音、斜体衬线标题文字、柔和的发光和代码绘制的应用程序窗口。
- 页面库、图标规则、框架适配指南和用于构建和检查您自己的版本的本地验证器。
Good fit
- 软件和人工智能团队启动或重新启动产品网站。
- 希望定价、帮助、活动和发行说明具有一致外观的创始人。
- 希望在自己的框架中交付设计而不是作为静态模型的构建者。
Not for
- 浅色、色彩缤纷或俏皮的品牌——外观取决于深色背景和一种口音。
- 用于支付、登录、搜索索引或活动注册的工作后端。
- 内容丰富的博客或文档网站,包含数百篇文章。
User reviews
Loading reviews…








