页面层级间距与颜色质感精修｜简诗 AI

这个技能解决什么问题

把一个页面写“能跑”和写“好看”之间往往隔着一层说不清的差距。常见症状是：padding: 13px 随手写，间距忽大忽小；为了区分层级把标题全加粗，结果没人分得清主次；红色按钮不够醒目就直接调亮红色，对比度反而过不了；给每个组件都加阴影，最后整个页面像漂浮在半空。

这类问题的共同根源不是审美天赋，而是缺少被约束的尺度体系。没有刻度尺，每次调整都是一次新的随机数。

技能如何工作

这套技能把“精修”拆成可执行的审计流程，核心原则只有一条：先在灰度里做层级，最后才上颜色。强制只用间距、对比度和排版建立结构关系，颜色只是最后一层的辅助，避免颜色替层级干活。

• 快速诊断打分：8 项 yes/no 检查（Quick Diagnostic），覆盖层级、间距、排版、颜色、阴影等维度。得分 round(satisfied / 8 × 10)，并明确指出缺哪几行、修完才能到 10/10。
• 七条设计原则：视觉层级、间距与尺寸、排版、颜色、深度与阴影、图片与图标、版式与构图。每条都给出核心概念、原因、应用表格和可直接套用的 CSS 模式（如间距刻度 4/8/16/24/32/48/64px，p-1 到 p-16；文字色三级 text-gray-900/600/400）。
• 按尺度而非手感调整：间距必须落在刻度上，正文宽度约束到 45–75 字符，行高按场景收紧或放松，颜色按 50–900 色阶走，阴影分 shadow-sm/lg/xl 对应不同抬升层级。
• 关键杠杆：层级靠尺寸、字重、颜色三者组合，而非全部拉满；次要信息（表单标签、表头、元数据）主动弱化；组件级扩展（悬停/聚焦态、空状态、圆角体系、响应式断点）指向 references/advanced-patterns.md。

适用边界

• 只处理用户当前提供或明确授权的材料，默认先交付分析、方案、草稿或检查清单，不主动读取范围外的文件或账号。
• 信息不足时先标注缺口并确认，不猜测内容填补事实或权限。
• 需要联网检索或调用接口时，先说明访问目标、发送数据和用途，取得明确同意；不绕过登录、付费墙或访问控制。
• 不得用层级技巧隐藏重要信息，比如价格、条款或取消入口。
• 内置参考文档覆盖暗色主题、无障碍对比度与键盘导航、微交互动画、数据可视化等场景，需按需加载。