Web设计

Web设计 是做什么的？

AI生成的UI总是存在可预测的缺陷：相同的字体、相同的紫色渐变、卡片嵌套卡片、居中的首屏带三个图标块、装饰替代观点。本技能用决策取代默认值，然后检查渲染结果。

下面的<skill-dir>指代本技能所在文件夹。请从项目根目录运行其脚本，这样输出才会落在项目目录中，而不是安装在技能目录里。

1. 加载或创建设计上下文

查找DESIGN.md（也可能是docs/DESIGN.md、BRAND.md）。如果存在，在操作UI之前先读取它；其中的标记和规则优先于你的个人审美。如果文件不存在且任务不仅限于小修复，则根据代码读取真实标记（来自CSS/Tailwind配置的标记、真实字体、真实组件），从模板创建一个。标记你推断出的任何内容。

当会话做出持久性决策（新标记、已拒绝的方向及原因）时，更新DESIGN.md。这样下一个会话才能避免退回到默认值。

2. 确定方向

首先命名模式。 它决定了表面元素能获得多大胆量：

• 说服（落地页、定价页、发布页）：设计即产品；坚持一个观点。
• 操作（应用UI、仪表盘、设置、表单）：精准与克制；熟悉的模式需证明其价值；品牌隐藏在细节中。
• 阅读（文档、文章、变更日志）：结构优先便于理解，然后让阅读变得愉悦。
• 体验（作品集、展示、游戏）：作品本身引领；界面退居其次。

是优化还是重新设计？ 优化保持当前的身份、文案和行为，并在其内部改进。重新设计保留产品的事实和功能，但完全替换外观。切勿通过修饰一个你打算丢弃的外观来折中。

然后在编写代码之前，分两个阶段进行规划。

第一阶段，规划：

• 任务：谁在这里，他们首先需要什么，下一步行动。
• 调色板：四到六个命名的十六进制值，并指定允许强调色的位置。
• 字体：字体及其角色、字号比例、数字风格。
• 布局：一句话描述加粗略的ASCII线框图；明确对齐方式。
• 一个大胆的元素：唯一令人难忘的元素。其他所有内容都保持安静。

第二阶段，通用性测试：针对任何类似需求，你是否都会制定相同的计划？对照当前AI默认外观（这些外观随时间变化）进行检查。如今常见的组合是：奶油色背景搭配衬线展示字体和赤陶色强调色、接近黑色加单一酸性强调色、以及大报式细线，就像去年的紫色渐变一样。如果计划中的某部分恰好匹配了一个需求未要求的默认样式，则替换它，并记录你更改了什么以及原因。需求本身的话语永远优先，包括当它要求使用这些外观之一时。

从主题的世界中汲取灵感：其材料、场所、工艺品和词汇。遛狗者的网站和分析师的仪表盘不应能互换调色板。

当用户提供参考时，请认真研究它们：参考研究从实时网站中提取计算后的样式，以便你借用关系（比例、节奏、密度），而非表面装饰。

3. 在产品的系统中构建

• 使用现有的标记、原语和组件。添加一个新标记之前，先检查是否已有可用标记。
• 仅使用真实内容：真实姓名、长姓名、真实数字、空数据。绝不用Lorem Ipsum，也不为填充布局而编造指标。
• 同时设计各种状态：加载、空、错误、成功、禁用、溢出。一个看起来破损的空状态是一个Bug。
• 隐藏无话可说的内容。零行、零余额和空图表变为诚实的空状态或消失；不存在零的墙。
• 标题就是标签。重复解释标题的副标题应被删除。
• 移动端有自己的布局：按优先级重新排序，在桌面使用网格的地方使用水平滑动轨道，使用dvh/svh而非100vh，输入框至少16px，触摸目标44px。

在构建过程中始终保持工艺底线，而不是作为最终检查。对于任何动画或过渡，请先阅读动效：一个编排的时刻、一个小的时序系统、支持中断、支持减少动画、并能像电影胶片一样观察。

4. 查看效果

node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --full          # 390 + 1440, 浅色 + 深色
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --widths 320,390,768,1440 --themes light
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --click '[aria-controls=menu]' --widths 390

打开每一张截图并真正阅读它们。然后按以下顺序检查：

1. 第一次阅读：眯眼看。最重要的元素是否最突出？你能否在三秒内分辨出这是什么以及该如何操作？
2. 破损：溢出、内容截断、层叠重合、孤立文字、不可见焦点、深色模式对比度问题。shoot.mjs会标记其中几项；检查其输出。
3. 层级和节奏：标题上方空间多于下方；组内间距一致，组间间距更大；每个视图中只有一个主要操作。
4. 通用性：运行deslop扫描或检查反模式。如果去掉Logo，陌生人在截图后能否猜出这是哪个产品？
5. 工艺：在2倍缩放时对齐到像素，图标和文字的光学平衡，列中的表格数字使用等宽数字。

修复最严重的问题，重新截图，重复。新工作通常需要两到三轮完整的循环。

5. 完成

报告你检查过的屏幕和状态（宽度、主题），你做出的决策，以及任何未检查的内容（无法访问的认证状态、未获取到的真实数据）。将DESIGN.md的更改与UI一起提交。

规则

• 用户的需求和DESIGN.md优先于本技能。如果品牌是紫色渐变，那就用紫色渐变。
• 对于局部更改，不引入新的UI库、图标集或字体。
• 不要编造社会证明、推荐语、Logo、用户数或“受信任”。
• 不要伪造实时性：没有脉冲式的“Live”点、滚动消息或活动，除非有该节奏的真实数据支持（例如“每10秒更新一次”且属实）。
• 绝不将 distinct 状态（已提交、已接受、已确认）合并为一个成功勾选图标。