ds-design

构建一个 UI，使其看起来不像任何类似提示词生成的默认输出。

步骤

1. 阅读设计简报和项目。找出主题、受众、希望用户采取的唯一操作、技术栈、现有品牌，以及实际可用的图片。如果设计简报含糊不清，用一句话记下你的理解，然后继续。
2. 编写代码前，先写一份不超过五行的设计方向说明。说明用途、受众、语气、一个令人难忘的元素，以及模式（说服、操作或阅读）。从主题自身的世界中汲取灵感，不要沿用该类别的常见风格。
3. 编写组件前先定义设计令牌：
   • 字体：一种展示字体和一种正文字体，两者要明显不同。展示字体不要使用默认字体。采用 5 到 7 级的字号阶梯，正文至少为 16px，每行不超过 80 个字符。
   • 颜色：4 到 6 个命名的十六进制颜色值。大面积区域使用一种主色，操作元素则只使用一种醒目的强调色。
   • 使用 4px 或 8px 作为间距基数，设置一到两种圆角值，并使用一种阴影样式或不使用阴影。
4. 问自己：“如果是任何类似的提示词，我都会制定这样的计划吗？”如果答案是肯定的，就调整计划中的相应部分。
5. 有目的地布局页面。选择内容密度：说服型页面要疏朗，工具型页面要紧凑。根据内容需要使用不对称布局或大小对比。使用真实文案和合理的数据。不要使用 lorem ipsum。
6. 仅在确有作用时使用动效。设置一段协调的入场动画，并为用户操作提供反馈。
7. 实现所有状态：悬停、键盘焦点可见、禁用、空状态、加载中、错误，以及长内容。
8. 达到无障碍的基本要求。对比度必须为 4.5:1，焦点环必须清晰可见，字段必须有标签。触控目标至少为 44px，图片必须有替代文本，并且必须尊重减少动态效果设置。
9. 在宽度约为 1440px 和 390px 时截图。对照禁止项和设计方向说明检查截图。一次性修复所有问题，然后重新截图。移除一处不起作用的装饰。

禁止使用的默认设计

只有当设计简报明确要求时，才可使用以下设计：

• 紫蓝渐变和装饰性渐变背景。
• 将 Inter、Roboto 或系统字体用作展示字体。
• 用表情符号作为图标。请使用同一套 SVG 图标。
• 居中主视觉，下方排列三个相同的卡片。
• 玻璃拟态，或在每个界面元素上使用辉光效果。
• 低对比度的灰色文字搭配灰色背景。
• “释放你的潜能”或“无缝体验”之类的套话。
• 每个标题上方都使用全大写的眉题标签。
• 每张卡片使用相同的圆角和柔和阴影。

停止条件

• 设计方向说明和设计令牌已经就绪，代码也使用了这些令牌。
• 两种宽度下的截图都没有出现禁止使用的默认设计，也没有横向滚动。
• 所有状态都已实现，并且满足无障碍基本要求。
• 截图中能看到那个令人难忘的元素。

规则

• 如果设计简报指定了字体、颜色或风格，即使它们属于禁止项，也必须使用。
• 优化应保留 UI 的身份特征；重新设计则应保留其内容和功能。