design-html
做美观、信息清楚、能真实渲染、不像模板填空的 HTML 应用与网页。
载体是可在浏览器直接预览的 HTML / 前端页面(单文件或框架页均可)。要做 PPT、PDF、长报告的请改用对应 skill。
先分流:这是哪一类
动手前先判这页属于哪条路径——两类的执行底线不同,混在一起就是场景错配。判据是页面目标和受众,不是技术栈:
- A 数据应用(BI / 看板 / 后台 / 监控 / 工作台):用户反复用它看数、判断、操作——看经营、看异常、查列表、处理任务、录入审批。内容有 KPI、指标、筛选器、表格、图表、状态、权限。
- B 网页(官网 / 落地页 / 活动 / 案例 / 作品):用户多半浏览一次,要在几秒内记住主题和价值——介绍品牌、讲产品、发活动、展示作品、引导咨询或购买。内容有 hero、产品场景、人物、案例、价格、FAQ、CTA。
拿不准时按"首屏该回答什么"判:A 要回答"现在发生了什么、我该看哪、能做什么";B 要回答"这是什么、和谁有关、为什么值得看下去"。两边信号都强(如带数据演示的产品页)时,以主任务归属为准,不要做成"后台壳 + 营销 hero + KPI 墙"的缝合体。
判完进对应路径,全程不跨界(见下「分流红线」)。
按需加载
| 你要做的事 | 去看 |
|---|---|
| 参照成品看质量水准(A 后台 / B 网页各一个),风格不照搬 | example/bi-dashboard.html · example/landing.html |
| 做 A 数据应用:App Shell 尺寸、首屏判断、KPI/图表/表格、数值口径、六态文案、移动重排 | references/data-app.md |
| 做 B 网页:首屏视觉信号、hero 条件、配图、结构纪律 | references/web-page.md |
| 查 token 硬上限、字体角色、颜色分层、组件规则、渲染验收清单 | references/visual-tokens.md |
| 把握整体质量、反 AI 味、配图与渐变底线 | 本文件 |
范例是"质量到什么程度"的标尺,不是模板:配色、风格、布局按本页面的品牌和受众自己定,别套范例的样子,更别照抄内容。
沿用现有系统(底线)
项目已有设计系统、组件库或明确 token 的,优先沿用现有系统:复用它的颜色、间距、圆角、组件、字体角色,不另起一套。本文件的尺寸/圆角/阴影上限是没有明确系统时的默认约束;与现有系统冲突时以现有系统为准,但反 AI 味和渲染验收照样要过。
分流红线(混搭即返工)
- A 不做营销 hero:不让大标题、口号、装饰图压过数据;不用"首屏 hero、第二屏才出数据"的结构。
- A 的首屏第一视觉位是数据判断(主图表 / 异常队列 / 核心表格 / 健康度 / KPI+主图),不是标题装饰,不是欢迎语和"如何使用本页"卡。
- B 不套后台壳:不用 sidebar + topbar + KPI 卡来解释品牌;不把无意义指标卡当信任证据;不把 BI dashboard 塞进 hero 当装饰。
- B 不做成操作台:落地页不是表格 + 筛选器。
图形优先于文字
能用图形表达的就不要堆文字。 每屏先问:这块信息能不能可视化?
- 数据、对比、趋势、构成、占比 → 图表。
- 流程、步骤、因果、关系、层级 → 流程图、结构图、时间线、矩阵。
- 状态、进度、健康度 → 仪表、进度环、状态徽章。
- 单一关键结论 → 大数字 / 主视觉 + 一句话。
- 真实对象(产品、场景、人)→ 配图(见下「配图分两类」)。
文字的角色是标题写结论 + 图形旁的精炼标注,不是信息主体。 反面:整屏纯文字段落、把可对比的数据写成句子、把流程写成一二三四行字、纯文本 + 渐变块当成品交付。 但别为配图而配图:图必须承载这块的核心信息,凑一张无关装饰图同样是 AI 味。
信息密度与垂直节奏(最容易翻车)
- 内容填满视口但不堆死:每屏密度均衡,不要上半挤、下半留一大块空白,也不要把稀疏内容拉得满屏空荡。
- 撑高度靠真正的视觉元素(图、卡、表、占位图)变大去填,不是把文字行距和分隔线拉开充数。
- 节奏统一:同类区块的标题间距、卡片间距、段落间距全程一致,不每段不同。
- A 路径信息密集,要靠对齐、分组、留白做出层次,不靠堆色块;B 路径区块之间要有呼吸,但呼吸不等于空洞。
- 固定的页眉页脚、sticky 栏要给正文留出空间,正文不被压住或裁切。
配图分两类(用错就 AI 味)
位图 / 照片类(产品图、场景、人物、案例截图、实拍、UI 截图)→ 用占位图,不要自己编造。
- 这类靠生图模型或用户素材;不能拿通用插画、emoji、在线随机图凑数。
- 做法:在正确位置放占位框,锁定比例和尺寸,框内标注「该放什么:具体内容 + 比例」,附一句生图 prompt 供用户替换。
- 占位框风格统一(中性底 + 居中说明 + 1px 边界),当成最终图来留白对齐,替换后即成型。
- 标注具体内容(如"北区门店实景""产品后台真实截图"),不是"科技感氛围图";不塞无关照片或紫蓝渐变占位。
矢量 / 程序化(背景色块、克制渐变底、几何装饰、分隔形状、SVG 图标、SVG/canvas 图表)→ 自己用代码生成。
- 这些 AI coding 能直接产出且可控,优先自己写。
- 图标用统一一套 SVG,同尺寸同描边,不混 emoji。
- 背景服务调性、克制有据,不做满屏光晕、粒子、紫蓝渐变(见下)。
B 网页首屏、产品/案例区配图需求高;A 数据应用以图表表格为主,不硬塞配图。
渐变、暗色与质感:只守底线
渐变和暗色是克制工具,不是禁区,也不是默认高级感。
克制的渐变(可以用):
- 有方向、低透明:径向/线性光透明度压在 ~20% 以内,营造光感和焦点,不是发光球。
- 同色系、低饱和:两端取相近色相(如深蓝 → 青),不跨彩虹。
- 服务焦点:用在 hero 主视觉、关键数字、图表面积、强调区,强化层级。
- 一处一用:一屏最多一两处渐变质感,不让每个元素都发光。
滑向 AI 味的渐变(不要):
- 紫蓝/粉紫满屏渐变背景,任何主题都长一样。
- 多个高饱和光晕、霓虹光环、bokeh、无意义粒子叠在一起。
- 玻璃拟态 + 渐变 + 大圆角 + 重阴影全堆上。
- 渐变盖过文字可读性,或纯为"显高级"而没有焦点。
暗色:不用纯黑 #000 铺底,留 2-3 级 surface;强调色克制,避开霓虹紫蓝;不靠光晕弥补层级。
浅色:不靠浅灰文字牺牲对比。
品牌明确要紫色时可以用,但不落入通用紫蓝渐变模板。
反 AI 味(命中即返工)
通用:
- 紫蓝渐变当默认主视觉;玻璃拟态当默认容器;大圆角 + 重阴影 + 卡片墙当默认模板。
- 三图标 + 三等大卡片当万能结构。
- emoji 当严肃图标系统;图标混用线性/填充/3D;彩色状态圆点当无意义装饰。
Generated by、版本号、构建号 footer 占视觉重心。- Lorem ipsum、无业务上下文的占位文案;"AI-powered platform that revolutionizes…"式空话。
- 滚动提示("Scroll"/"滚动探索")、地域天气条、无意义英文 eyebrow。
A 数据应用: 假图表(div/span/渐变块/CSS 高度条伪造)、首屏欢迎语抢数据位、同权重 6-9 KPI 墙当主体、数字无单位无口径、"立即体验/一键生成"营销 CTA 出现在内部工作台、移动端把桌面 dashboard 等比缩小。 B 网页: 后台壳套官网、首屏只有抽象渐变和空洞口号、纯文本极简但无任何真实视觉信号、三等大功能卡当默认结构、重复意图 CTA(联系我们/立即咨询/开始合作都指向同一动作)、hero 里塞 logo 墙和定价表。
渲染验收(交付前必做)
不能只看代码就声称完成。环境允许时实际渲染,至少查桌面和移动两个视口;有图表必查 resize。详细清单见 references/visual-tokens.md,核心三关:
- 桌面(约 1440×900):首屏视觉重心符合路径(A 是数据判断 / B 是视觉信号);导航/topbar/sidebar 不换行不遮挡;图表表格卡片不重叠;数字列右对齐、单位对齐。
- 移动(约 375×812):无横向溢出;A 已按任务重排核心判断先出现,表格有明确策略;B 的 hero 标题和 CTA 不被挤没;sticky 栏不遮正文。
- 图表:resize 后重新布局不留空白 canvas;坐标轴 label 不重叠;tooltip 不被裁切;空/错时显示业务状态,不冒充成功态。
发现问题先修再复查。第一轮一个问题都没找到,就换更严格视角再查一遍。
