首屏只留一个主张
把大标题控制在 ≤ 18 字，副文案 ≤ 90 字。首屏内出现的行动按钮不超过 2 个，主按钮色彩对比度 ≥ 4.5:1。达标线：3 秒内可用一句话复述页面卖点。
这是一个网页样式设计参考：人工智能平台开发 · 单页设计范式
grid 1140 / 1px 细线 / 单一强调色
01 / 实用指导清单
单页落地前，先过这六道关
每一条都对应可验收的阈值与做法。建议在创意策划阶段就把清单钉进评审表，避免上线后返工修改信息层级与交互路径。
滚动深度对齐锚点
章节锚点数量控制在 4–6 个，每个锚点对应一段独立结论。滚动到任一章节的耗时建议 ≤ 1.2 屏；锚点导航在 640px 以下折叠为横向可滚区域，点按区 ≥ 44px。
动效只做渐显错峰
入场位移 14px、时长 450ms、延迟按 60–80ms 递增。禁止弹跳与回弹曲线；同时提供 prefers-reduced-motion 降级，动效关闭后信息不能缺失。
图片统一裁切比例
主视觉用 16 / 9，特写图用 4 / 3，统一 object-fit: cover 并写死容器宽高比，避免加载期间布局跳动。单图建议 ≤ 300KB，首屏图加 loading="lazy" 之外的图全部懒加载。
信息密度按屏配额
单屏正文不超过 200 字，卡片间距压到 12–20px，区块垂直内边距控制在 48–64px。用 1px 细线分隔代替大块留白，既保呼吸感也不空铺。
验收三项硬指标
Lighthouse 性能 ≥ 90、可访问性 ≥ 95；320px 宽度无横向溢出；所有表单与按钮点按区 ≥ 44px。上线前用真机跑一遍 380px 断点，重点看长英文技术名词是否断行。
02 / 服务与价格档位
按平台成熟度选档，而不是按预算砍功能
档位差异体现在并发推理路数、模型编排复杂度与交付周期，价格按月计费，支持按季度复评升档。
03 / 数据可视化面板
把平台开发能力写成可读的数字
面板用于单页中段的信任构建：横向进度条表达能力占比，右侧统计块给出关键时延与成本，全部数值可按项目口径替换。
平台能力成熟度（按模块）
口径：近 30 天生产环境采样180ms推理网关 P75 时延
99.95%平台月度可用性
37%单位调用成本下降
6 周从设计定稿到灰度上线
04 / 图文混排特写
一次智造未来项目的交付现场
从创意策划到平台开发，单页设计与后台能力同步推进，避免“页面很漂亮、系统接不上”的常见断层。
先定栅格与信息层级，再谈科技感
项目第 1 周完成单页设计与栅格规范：1140px 容器、4/8pt 间距节奏、1px 细线分隔；第 2–4 周并行推进模型接入与推理编排；第 5 周接入监控面板并做交互体验走查；第 6 周灰度发布 10% 流量，观察时延与错误率再全量。
42 项交互走查清单
10% → 100%灰度放量节奏
0 次上线期横向溢出
设计灵感来自系统自身，而非装饰素材
视觉母题取“点阵星尘 + 径向光”：点阵对应推理节点的稀疏连接，径向光对应注意力分布；玻璃磨砂分层与内高光用于强调面板层级，让监控数据浮在背景之上。整套装饰只用内联 SVG 与 CSS 图形，页面不引入任何第三方字体或脚本，保证首屏可靠加载。
3 层玻璃面板层级
1 色强调色使用面积
≤ 300KB单图体积上限
05 / 答疑折叠
六个高频追问，逐条给结论
手风琴折叠收纳细节，默认收起以保持版面紧凑；展开后补充参数与避坑点。
01单页设计会不会牺牲信息完整度？
不会，但要做取舍。把完整能力清单放进折叠区或二级页面，单页只承载结论与证据：每段一个判断 + 一组数字。建议正文总量控制在 1400–1800 字，超出部分转为折叠或表格。
02平台开发周期能否压缩到 4 周？
在已有模型服务的前提下可以：第 1 周定设计规范与接口契约，第 2–3 周并行开发页面与网关，第 4 周联调与灰度。前提是接口契约冻结，否则每延后一天冻结，整体工期平均延后 1.4 天。
03强调色用多少才不显廉价？
按 60-30-10 分配：约 60% 中性底色、30% 主色结构、10% 强调色点缀。强调色只出现在按钮、激活态、关键数字与细高亮线上，单屏占比不超过 10%，且不用于大面积背景填充。
04如何量化交互体验的改进？
盯三个数：首屏关键渲染 ≤ 220ms、滚动到首条 CTA 的屏数 ≤ 1.5、锚点跳转后定位误差 ≤ 8px。上线后按周采样 P75，连续两周未达标即回滚改动。
05深色底配暖金，对比度够吗？
正文用高亮中性色，与深色底对比度 ≥ 7:1；次要文字降到 ≥ 4.5:1。暖金主色只用于标题强调与进度条，避免正文长段落直接使用，防止长时间阅读疲劳。
06图片与图标从哪来？
案例与场景图统一走站点自有图床，配描述性 alt 与懒加载；图标一律用内联 SVG 或 CSS 图形绘制，不引入第三方图标库与脚本，既减少请求也避免样式冲突。