blyue-web-design

Blyue 网页设计方法论

基于 @blyue《网页设计方法论：给 Agent 的执行规范》（2026-10-05）。目标是清晰的层级、一致的系统，以及贴合内容的视觉性格。

先判断任务与前提

• 开始前检查用户思路中的错误前提、逻辑跳跃和关键缺失，明确指出会改变结果的问题。先查项目及已有资料；只有猜错代价高、且无法从上下文解决的信息才询问。
• 优先级：用户明确要求与指定参考 > 已有品牌规范和设计系统 > 本 Skill 默认值 > Agent 默认习惯。发现要求与可用性、无障碍或真实产品能力冲突时说明并提出可行调整，不静默照搬。
• 区分新设计、明确授权的重设计、局部优化、参考复刻、内容替换。只有前两种需要完整建立视觉方向；其他任务继承现有结构和 Tokens，仅执行相关步骤。
• 不默认覆盖已有设计系统，也不因为反模板偏好拒绝合理的居中、卡片、渐变或中性字体。每项选择服务于具体内容和品牌。

执行流程

在新设计中，先完成前四项决策，再写样式。简短记录即可，不把设计过程变成必须等待用户批准的长文档。

1. 目的：明确谁在看、带着什么问题、最重要的下一步动作、设备与使用情境。用一句话定义页面任务。
2. 内容：盘点真实文案、图片、数据及来源，按重要性排序。把低优先级内容作为合并、后移或渐进展示的候选；不得按比例删除用户内容。缺失事实用明确标注的示例或待补位置，不编造评价、客户标志、指标、承诺和产品能力。
3. 调性：写三个形容词，以及一个要避开的方向。把调性翻译为字体、色板、形状、密度和动效决定；已有品牌方向可直接沿用。
4. 结构：用文字列区块顺序和每块的任务，确定当前视图的视觉主角、阅读路径和主要行动。落地页可从“主张 → 可信证据 → 价值 → 展示 → 疑虑 → 行动”起步，按真实内容调整。
5. 系统：复用或建立字号、间距、语义颜色、圆角、阴影、布局和动效 Tokens。先定关系，再定数值。
6. 实现：优先验证小屏重排；先排印与间距，再颜色，最后装饰和动效。数据密集型桌面工具按实际任务设计桌面结构，并给出可用的小屏策略。灰阶下也应有层级。
7. 审查：按本次变更的风险和范围验证，修复影响目标的问题；完成后停止，不循环做无收益的视觉微调。

设计判断

• 每个视图建立明确的视觉主次。通常用尺寸、字重、对比、位置、留白中的一到两种区分层级，避免每项都强调。
• 功能相同的组件保持一致；不同重要性的内容有可见差异。先削弱周围噪音，再加强焦点。
• 元素应帮助理解、操作或表达品牌。装饰无法解释用途时移除；必要信息不能因删除测试而被误删。
• 营销页可选择一处值得投入的“签名时刻”，例如标题、产品展示或交互。工具页不必强行添加；已有品牌特色可以承担这个角色。
• 用眯眼、灰阶、五秒理解和换牌思考检查设计。它们是启发式方法，不是用户研究结论，也不是客观分数。
• F/Z 扫视、60/30/10 配色、1.25 倍对比和固定条目上限均是起点，不作为普遍定律。按任务和内容判断。

默认尺度与实现底线

下列数值是无现成系统时的起点；偏离时有具体理由即可。原文的固定值、比例和风格禁令不能凌驾于任务约束。

排版与布局

• 字号阶梯：12、14、16、18、20、24、30、36、48、60、72px；一页通常选择不超过六种。流式标题可用 clamp() 连接 Tokens 的端点，不必限制中间计算值。
• 正文通常 16–18px；紧凑桌面工具可用 13–14px，小屏正文和输入框优先至少 16px。标题按角色拉开层级，不要求所有小标题都比正文大两档。
• 英文正文行高 1.5–1.7，中文 1.7–1.8；正文左对齐，居中限短内容。阅读行宽参考中文 25–40 字、英文 45–75 字符，随字体与字号调整容器。
• 优先一到两个字族，数据或代码按需增加等宽字体。中文优先系统字体或标题子集；字体选型取决于调性、语言覆盖和实际可加载资源。
• 大标题紧字距主要适用于拉丁文字；中文通常保持正常字距。数字列右对齐并用 tabular-nums，混合字号按基线对齐。
• 间距刻度：4、8、12、16、24、32、48、64、96、128px。组内间距小于组间间距。布局间距使用刻度，1px 边框、光学修正、百分比等不强行塞入间距刻度。
• 内容最大宽度参考 1200–1280px，阅读区参考 640–720px；手机侧边距 16–20px。桌面区块间距 96–128px，小屏 48–64px；工具界面可更紧凑。
• 网格参考桌面 12 列、平板 8 列、手机 4 列，断点参考 640、768、1024、1280px；按内容失效的位置调整，简单布局无需引入完整网格。
• 小屏重排而非整体缩小；避免整页意外横向滚动。宽表格可放入有明确提示、键盘可操作的局部滚动区域。
• 图片比例按内容选，同一组保持一致；不得裁掉产品关键信息来迁就预设比例。