视觉节奏决定第一印象，需统一边距系统（以4px/8px为单位）和克制配色逻辑（主色+中性灰+1种强调色），并通过对比度、字号、权重快速检验可读性。
样式不好看，往往不是代码写错了，而是视觉节奏没理顺——边距太挤、颜色太跳、对比太弱，这些细节比“用什么框架”更影响第一印象。别急着重写，从最基础的两个维度入手：统一边距系统、建立克制配色逻辑。
先统一边距，让页面“呼吸”起来
多数初级项目边距混乱：有的元素上下留空20px，有的突然变成8px，有的甚至靠margin: 0硬清掉默认值却忘了补空间。结果是内容堆在一起，眼睛找不到落点。
- 用一套基础间距单位（比如4px或8px）作为所有边距的倍数，例如：margin-top: 16px、padding: 24px、gap: 8px
- 给常用容器加统一内边距（如section、.card），避免每个子元素单独调边距
- 用:not(:last-child)批量控制列表项/卡片间的下边距，不用每个都写margin-bottom
配色别贪多，3色以内定主次
新手常犯的错：挑了5个自认为“高级”的颜色，结果按钮、标题、提示文字全在抢戏。真正耐看的界面，靠的是清晰的角色分配。
- 选一个主色（如品牌蓝#2563eb）用于可点击元素和重点标题
- 用中性灰系做背景和文字（比如#1e293b作正文，#64748b作次要说明，#f1f5f9作浅灰背景）
- 最多加一种强调色（如绿色#10b981表示成功，红色#ef4444表示错误），只用在状态反馈类元素上
快速检查：三秒能看清什么？
关掉编辑器，把页面在浏览器里打开，退后一步或眯起眼——如果看不出哪是标题、哪是操作区、哪是内容块，问题大概率出在对比度或留白上。
立即学习“前端免费学习笔记（深入）”；
- 标题字号至少是正文的1.5倍，且加粗+足够行高（line-height: 1.3）
- 按钮和链接要有明确视觉权重：主按钮填色+圆角，次按钮用边框+同色系文字，禁用状态变灰透明
- 删掉所有!important和内联style，保证样式可预测、可复用
