WithZeng/设计技能

网站设计

来自 Scientify 网站重新设计（2026-10）的经验教训：设计只有在展示草稿并获得批准后才算最终确定，每个部分都强制使用统一的页面系统，并且验证工作能够发现由动效库引入的对比度和标记错误。

工作流与关卡

1. 需求说明。 收集产品、受众、页面组成部分、真实的示例数据，以及用户喜欢的1-2个参考网站。如果用户没有，从 references/ui-references.md（图库、真实产品UI库、组件来源）中挑选2-3个适合该网站类型的参考，并展示给用户审批。将参考截图保存为 --ref 图片；当用户要求推荐时，显示带编号的截图以及2-3个组合供选择（方法：ui-references，“捕捉参考”）。
2. 先有草稿再编码。 在用户批准草稿之前，绝不为视觉更改编辑代码。使用 image-gen 技能。顺序：
   1. 如果方向未定，每个方向生成一张概览图（通常2张）；用户先选择一种方向，然后再进行细节工作。然后生成一张全页长图（1024x1536）以固定页面系统。
   2. 每个部分/面板生成一张全分辨率细节图。
   3. 子页面，然后为动效生成交互故事板（每次交互3-4帧）。 展示每一批，收集反馈，迭代。提示词模板：references/draft-prompts.md。
3. 构建 仅构建已批准的草稿，放在预览路由后面，直到用户说替换正式页面。模式：references/build-patterns.md。
4. 验证 在任何提交/PR之前：references/verification.md。
5. 将草稿和截图保存在项目的 gitignored 暂存文件夹中（例如 tmp/design/vN/），每轮一个文件夹，提示词与图片一起保存。

页面系统（消除“割裂感”的关键）

当一个页面的每个部分都复用相同的系统时，它才像一个整体。从已批准的草稿中确定该系统的值，然后将其写入每个提示词和代码令牌中：

• 整个页面使用统一的背景处理；避免各个部分自行发明不同的条带或渐变。
• 统一的区块模块（容器、圆角、填充、边框、内边距、宽度），以及其中一小套布局，在各个部分重复使用。
• 统一的字体比例：每个部分标题使用相同的大小和字重，统一的正文样式，一致的间距。
• 一个标志性元素承载艺术指导（通常在首屏区域）；布局中其他部分保持低调，但仍对交互作出响应。该元素来自需求说明，而非模板：请参见下面的“艺术指导”。
• 所有展示的产品UI都必须是同一个应用（相同的导航、主题、数据），因此页面读起来像是一个产品。
• 调色板足够克制以保持系统连贯性（有一个网站使用了纯单色）；Logo保留其原始颜色。在任何地方都使用真实的品牌Logo，绝不使用正方形内的字母占位符。
• 内容：使用产品领域中的真实数据（合理的姓名、数字和时间），以及每个项目决定的一个统一文件和对象命名约定；不使用 lorem ipsum 文字、虚假的推荐或统计数据、以及空洞的口号。

应用UI和认证页面

相同的关卡适用于产品内部，但使用不同的参考和令牌：

• 参考来自真实产品UI（例如 Refero、可比产品网站上的产品截图、聊天/智能体界面的组件文档），而非落地页图库。
• 复用应用自身的令牌和组件；不要导入营销网站的调色板。首先确定一小套共享原语（面板、页面容器宽度、对话框宽度、分段控件），然后使用它们重新设计界面样式。
• 使用托管认证小部件（例如 Clerk）实现登录/注册：通过其外观 API 和本地化功能设置样式，并检查构建模式中的常见陷阱（“认证页面”）。

艺术指导（空间维度与动效）

根据网站自身需求设计空间维度和动态部分，然后像任何其他视觉元素一样进行草稿设计。不要复用以前网站的配方或固定值。

1. 从需求说明中推导。 访问者必须理解的一个核心概念是什么（产品实际运行、一种转变、规模、精确、平静）？谁是受众，品牌基调是什么，使用什么设备和性能预算？标志性元素应展示该概念，理想情况下使用真实产品。
2. 探索2-3个选项 适合页面系统和基调，例如：透视产品窗口、带视差的分层深度、讲述工作流程的滚动驱动场景、插画或3D对象、数据/视觉隐喻、或带有丰富微交互的平静扁平页面。每个选项生成图片草稿，对于动效则生成故事板；由用户选择。
3. 明确说明，然后构建。 为所选选项写下：什么元素在运动，触发条件是什么（加载、滚动、指针、时间、点击），静止状态，减少动效版本，以及移动端版本。根据浏览器中已批准的草稿调整角度、时间和强度，而不是根据模板。
4. 检查成本。 不得损害可读性、对比度、布局稳定性或加载时间；在无JS和减少动效的情况下，必须优雅降级。

丰富的交互，来自库

静态页面感觉廉价。主动使用组件和动画库，使每一次交互都感觉生动：

• 每个状态都有反馈：悬停、按下、聚焦、加载/运行中、成功/失败、出现/消失、布局变化。在交互故事板中规划这些，而不是事后考虑。
• 优先使用构建良好的现成组件，而非手写效果。将每个交互映射到一个模式，然后从为此项目选择的库中选取组件（references/ui-references.md，“交互模式”）。
• 产品演示是动态的：真实任务在进展，结果显示，数字变化，场景切换。
• 保持目的性：动效解释状态或将视线引向变化的内容。沉重的装饰效果应属于营销页面，而非工作屏幕。在所有地方尊重减少动效偏好。

选择库

为项目选择组件和动画库；没有强制要求。

• 已有项目：使用已有的库；仅在有缺口时添加新库，且绝不要添加与现有库功能重叠的库。
• 新项目：根据项目类型、框架和需求选择（标准和候选库见 references/build-patterns.md，“选择库”）。保持一个基础组件系统和一个主要动画库，除非有明确理由。
• 优先选择通过注册表/CLI或复制方式作为可编辑源代码安装到项目中的库，而不是不透明的包，以便组件遵循项目的令牌。

来之不易的规则（详情见构建模式）

• 每个文本色调与其所在表面的对比度必须达到4.5:1；检查面板填充上最浅的令牌，而不只是页面背景上的。
• 首屏入场不要使用不透明度淡入，“不活跃”状态不要使用不透明度变暗——无障碍审计在动画中间会检测对比度问题。使用仅变换的入场和颜色变化。
• 动画包装器不能放在 <ul>/<ol> 和 <li> 之间；在 <li> 内部进行动画。
• 滑动选择块：将标签放在一个 relative 的 <span> 中，位于绝对定位的选择块上方；不要使用 -z-10 + isolate。
• 计数器在服务器上渲染最终值，仅在视口中时进行动画。
• 在多语言网站上，每个可见字符串都要走国际化流程，包括模拟窗口中的演示UI和回放会话。
• 网格需要明确的单列 / minmax(0,1fr) 轨道，页面根节点需要裁剪水平溢出，以避免移动端溢出。