商务风页面靠结构、留白、字体和克制色彩传递专业感：用语义化html5标签组织内容，系统字体+1.6～1.75行高保障可读性，主色≤2种且圆角统一为4px，删减冗余元素强化可信度。
商务风页面不是靠堆砌“大气”“高端”字眼，而是用结构、留白、字体和克制的色彩传递专业感。直接上手做，比空谈风格更有效。
用语义化标签组织内容骨架
商务页面最常犯的错是把所有内容塞进 <div> 里。这会让结构松散、SEO弱、后期维护难。真正起作用的是 HTML5 的语义标签：
<ul>
<li>
<code><header></header> 放 logo + 导航 + 联系方式（别放搜索框，商务客户不靠关键词找你）
<main></main> 只包核心价值陈述：一句定位语 + 三个服务模块（用 <section></section> 包裹）<footer></footer> 写公司全称、注册地址、备案号——缺一不可，这是信任基建避免嵌套过深，比如 <section></section> 里不要再套 <div class="wrapper">，用 CSS Grid 或 Flex 控制间距更干净。
<h3>字体与行距决定专业度上限</h3>
<p>很多所谓“商务模板”败在字体：用默认宋体或微软雅黑加粗，反而显得像内部汇报PPT。关键点就两个：</p>
<ul>
<li>正文字体选 <code>system-ui 或 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto 这类系统字体栈，加载快、阅读稳
1.6～1.75，段落间留空用 margin-bottom: 1.5rem，不是靠 <br> 或空 <p></p>
<h1></h1>（通常是公司名或主Slogan），<h2></h2> 用于模块标题，<h3></h3> 仅用于子项说明别用自定义字体文件（如 .woff2），除非你已确认 CDN 加载稳定且有 fallback。商务客户没耐心等字体闪动重排。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
颜色与留白比图片更重要
商务风不等于满屏高清图+渐变色块。真实有效的做法是：
- 主色控制在两种以内：比如深灰（
#2d3748）+ 品牌蓝（#3182ce），禁用荧光色、渐变背景、半透明遮罩 - 所有卡片、表单、按钮统一圆角
border-radius: 4px，不要用8px或12px——太软，削弱专业感 - 留白不是“空白”，而是节奏：模块上下间距用
4rem，内边距用2rem，图片宽度不超过容器的80%
如果放产品图，务必裁成统一比例（推荐 4:3 或 16:9），去掉阴影、描边、滤镜。客户要看的是你做什么，不是你的 Photoshop 技巧。
最难的其实是删减：删掉“关于我们”页里的创始人故事照片墙，删掉首页轮播图，删掉每个模块底部的“了解更多”箭头。商务页面的力量，来自它敢不讨好所有人。
