适用场景
- 基础设施产品页面在不让技术买家感到信息过载的情况下,解释复杂的运行时基础设施。
- AI 平台发布页通过具体的运营语言和结构呈现代理能力。
- 面向开发者的营销页面将产品声明与代码、工具及实现细节连接起来。
- 以信任为先导的转化页面推动访客从证据走向审慎的销售沟通。
亮点
- 运营型首屏将平静的标题与运行时、支出、任务和审计信号结合起来。
- 基于基础模块的叙事围绕 identity、spend、audit、sandbox、routing 和 ergonomics 组织基础设施价值。
- 易读的技术细节使用代码、标签、单位和简短声明,为抽象能力提供依据。
- 聚焦式收尾面板在深色高对比背景上,以一个直接邀请结束页面。
图库
1 / 3
平静风格的代理运行时落地页
这个官方随附示例将 Halcyon 呈现为一个面向长期运行 AI 代理的运行时。其撰写的标题 “Calmer infrastructure for the agents already running your business,” 将基础设施定位为稳定层,而不是另一个模型界面。随后,页面通过可见的运行时、支出、任务和审计示例来支持这一定位。
使用示例数据讲述基础设施故事
这个页面适合需要在单一营销流程中解释多项技术关注点的基础设施团队。其语言从更广泛的平静代理运营承诺,转向具体的基础模块,再转向通过 SDK 和 CLI 实现接入。这一顺序为技术读者提供继续了解的理由,同时不会把开场变成文档页面。
可见数字属于示例落地页内容。它们展示了设计如何将运营概念具体化,但并不能证明 Halcyon 的服务性能、正常运行时间、定价或已连接的后端行为。
运行时可靠性叙事
首屏使用 “RUNTIME · LIVE”、“healthy · 7d 14h uptime” 和审计时间戳来表示一个正在工作的代理上下文。这些标签共同将服务状态与可追溯性连接起来;代价在于,即使页面只是一个设计示例,这个紧凑面板也可能让人产生实时验证的印象。
成本与控制叙事
“SPEND / 24H” 显示 “$47.18 USD”,而平台部分稍后呈现 “$0.018 AVG / TASK”。将这些数字放在不同上下文中,使页面能够同时讨论当前活动和单位经济效益,但读者不得将它们视为同一组测量数据。
开发者采用路径
最后一个基础模块写着 “Three SDKs. Two CLIs.”,并列出 Python、TypeScript、Go、halcyon 和 hl。这样就把兼容性转化为简洁的采用信号;代价是有意压缩信息,因为设计没有解释 API、设置过程或受支持的工作流。
从运行时模拟界面到销售邀请
居中的浮动胶囊导航引入 Halcyon、Platform、Metrics、Docs、Changelog 和 Get started。首屏在大型标题与圆角运行时模拟界面之间采用 1.05fr/0.95fr 的分栏。略宽的文本列承载核心前提;嵌套卡片外壳为示例指标提供独立的视觉容器。这让人更容易想象所提议的产品,但该卡片并不是运营证明。
标题换行成超大字号的多行文本,从 “Calmer infrastructure” 过渡到 “for the agents already running your business.” 后一个短语采用灰色处理,在产品类别与目标受众之间形成视觉转变。这种强调让承诺更容易记住,但其字号在较窄屏幕上需要谨慎处理响应式布局。
以运行时模拟界面开场
从产品声明开始,然后将运行时面板放在旁边。面板中的 “research-agent / tier-3” 标签、状态行、支出卡、任务卡和审计记录展示了基础设施旨在组织的内容。
扩展为六个基础模块
平台网格呈现六张编号卡片:identity、spend、audit、sandbox、routing 和 ergonomics。Identity 占据一个带代码样本的高大单元,spend 和 audit 位于其旁边;最后三个使用更短的单元。源介绍写着 “Five primitives”,但实际呈现了六个。保留六卡片布局这一观察到的结构,并将这一不一致视为示例文案,而不是已验证的产品分类体系。
以单一操作收尾
收尾面板切换为深色背景,并将 “Less duct tape between the model and the bill.” 置于中央。一段简短的评估和定价声明引出 “Talk to an engineer”,为页面提供一个最终操作,而不是多个相互竞争的终点选项。
范围与能力边界
Halcyon 是一个仅用于设计展示的落地页概念。其按钮没有业务处理程序;只有 Platform 链接可以跳转到匹配的页面区段。Metrics、Docs 和 Changelog 的目标不存在,页脚链接也是占位符。示例中的正常运行时间、支出、任务数量、延迟、融资和安全标签都不是服务证据。滚动公司名称条中的名称不能证明客户关系或背书,SOC 2/ISO 27001 文本也不能验证认证。控制台访问、计费、路由、存储和销售联系功能需要单独实现。
柔和感来自银色画布、Plus Jakarta Sans、鼠尾草绿强调色和嵌套圆角外壳,而不是来自一个可工作的基础设施系统。CSS 添加了漂移的背景网格、脉冲状态点,以及持续平移、悬停时暂停的公司名称条。IntersectionObserver 会在区段进入视口时显示它们。减少动效规则会禁用网格漂移和区段显示,但不会禁用脉冲或跑马灯;在适配设计时,应考虑这些仍然存在的动画。
来源与署名
OpenDesign 是 Community 分发方。源文档将柔和的视觉和动效指导归于 Taste Skill by Leonxlnx:https://github.com/Leonxlnx/taste-skill。应保留这一上游角色,但不要暗示这份作例由该上游作者本人制作,也不要暗示底层设计方向由 OpenDesign 独立创作。清单为随附插件声明 MIT 许可;这并不确立每个所展示资产的独立权利。
如何在 OpenDesign 中创建 AI 基础设施网站设计
设定证据层级
构建一个 Halcyon 风格的首屏:左侧放置大型标题,右侧放置运行时面板。加入具体可见字段 “research-agent / tier-3”、“SPEND / 24H”、“TASKS / 24H” 和 “AUDIT · LAST ENTRY”,同时将任何替换用数字标注为示例数据或已验证数据。
建议提示词创建一个连续的 AI 基础设施落地页概念,面向一个名为 Halcyon 的虚构运行时。使用银色 #F2F2F0、深色墨水色、鼠尾草绿强调色、Plus Jakarta Sans 和等宽字体元数据。加入浮动胶囊导航,并采用 1.05fr/0.95fr 的首屏布局:左侧放置一个宽度为 14ch 的大型标题,右侧放置一个嵌套的圆角运行时模拟界面。清晰标注 research-agent/tier-3、正常运行时间、每 24 小时支出、每 24 小时任务数和一条审计记录的示例值。为 identity、spend、audit、sandbox、routing 和 ergonomics 构建六张功能卡片:一张高大的身份代码样本卡、独立的成本卡和深色审计卡,然后是三张较短的卡片。使用同心圆角外壳,并在胶囊按钮内加入末端箭头圆形图标。加入克制的 CSS 网格漂移、状态脉冲和悬停时暂停的公司名称跑马灯;在这个提议的适配版本中,为所有动画提供减少动效处理。最后加入一个深色圆角销售邀请面板。在 980px 以下堆叠首屏和功能卡片。只有 Platform 需要真实的本地锚点;将其他导航和业务按钮标记为占位符。不要声称存在真实客户、融资、认证、计费、代理执行、控制台访问或后端。保留 Taste Skill by Leonxlnx 作为设计指导上游,并保留 OpenDesign 作为 Community 分发方。这是建议性的复刻,不是原始提示词。
优化基础模块网格
围绕 identity、spend、audit、sandbox、routing 和 ergonomics 组织平台叙事。保留源设计中长期存在的身份代码样本、独立的平均任务成本数字和深色审计卡之间的关系。为最后三个基础模块使用更短的卡片,使视觉重量与叙事重要性相一致。
检查转化收尾
以深色收尾面板、居中的单条信息和一个类似 “Talk to an engineer.” 的操作结束。检查大型标题是否自然换行,首屏面板在其旁边是否仍然清晰可读,并确保示例声明在每个视口中都能与已验证的产品行为区分开来。
导出并获取分享链接
导出完成的设计稿,然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接,确认目标版本及其资源均可正常访问后,再将链接发送给他人。




