Back to Details

ds-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Build a UI that does not look like the default output for any similar prompt.
构建不像同类提示词默认输出那样千篇一律的 UI。

Steps

步骤

  1. Read the brief and the project. Find the subject, the audience, the one action you want the user to take, the stack, the existing brand, and the images you actually have. If the brief is vague, write down how you interpret it in one line and continue.
  2. Write a direction note of five lines or fewer before you write code. Include the purpose, the audience, the tone, the one memorable thing, and the mode (persuade, operate, or read). Take it from the subject's own world, not the usual look of its category.
  3. Define the tokens before you write components:
    • Type: a display font and a body font that are clearly different. Do not use a default font for display. Use a 5-7 step scale, body text of 16px or more, and lines under 80 characters.
    • Color: 4-6 named hex values. Use one dominant color for large areas and one sharp accent for actions only.
    • Use a 4px or 8px spacing base, one or two radius values, and one shadow style or none.
  4. Ask: "Would I make this plan for any similar prompt?" Change each part where the answer is yes.
  5. Lay out the page with intent. Choose a density: airy for persuading, compact for tools. Use asymmetry or scale contrast where it serves the content. Use real copy and plausible data. Do not use lorem ipsum.
  6. Use motion only where it does a job. Use one orchestrated reveal, plus feedback on user actions.
  7. Build every state: hover, focus-visible, disabled, empty, loading, error, and long content.
  8. Meet the accessibility floor. Contrast must be 4.5:1, focus rings must be visible, and fields must have labels. Touch targets must be at least 44px, images need alt text, and reduced motion must be respected.
  9. Take screenshots at about 1440px and 390px wide. Check them against the banned defaults and the direction note. Fix the problems in one batch, then take new screenshots. Remove one decoration that does no work.
  1. 阅读需求概述和项目。明确主题、受众、希望用户完成的一个关键操作、技术栈、现有品牌风格以及实际可用的图片。如果需求概述较为模糊，用一行文字写下你的理解，然后继续。
  2. 在编写代码前，写一份不超过五行的设计方向说明。其中应包含目的、受众、基调、一个令人难忘的亮点，以及模式（说服、操作或阅读）。设计方向应源于主题自身的领域语境，而不是该类别中常见的视觉风格。
  3. 在编写组件前定义设计 token：
    • 字体：选择一款展示字体和一款正文字体，两者应有明显区别。展示字体不要使用默认字体。采用 5-7 级字体大小阶梯，正文不小于 16px，每行不超过 80 个字符。
    • 颜色：设置 4-6 个有名称的十六进制色值。大面积区域使用一种主色，操作元素仅使用一种鲜明的强调色。
    • 使用 4px 或 8px 的间距基准、一到两种圆角值，以及一种阴影样式或不使用阴影。
  4. 问自己：“我会为任何同类提示词都采用这个方案吗？”如果答案是肯定的，就修改其中每一处相同的部分。
  5. 有目的地布局页面。根据内容选择信息密度：说服型页面可以宽松，工具型页面可以紧凑。在有助于呈现内容的地方使用不对称布局或尺寸对比。使用真实文案和合理数据，不要使用 lorem ipsum。
  6. 仅在动效能够发挥作用时使用动效。使用一次经过协调的入场展示，并为用户操作提供反馈。
  7. 构建所有状态：hover、focus-visible、disabled、empty、loading、error 以及长内容状态。
  8. 达到无障碍最低标准。对比度必须达到 4.5:1，焦点轮廓必须清晰可见，表单字段必须有标签。触控区域至少为 44px，图片需要 alt 文本，并且必须尊重减少动态效果偏好。
  9. 分别在约 1440px 和 390px 宽度下截取屏幕截图。根据禁用默认项和设计方向说明进行检查。集中修复发现的问题，然后重新截图。移除一个没有实际作用的装饰元素。

Banned defaults

禁用默认项

Use one of these only if the brief asks for it:
  • Purple-blue gradients and decorative gradient washes.
  • Inter, Roboto, or the system font as the display face.
  • Emoji used as icons. Use one set of SVG icons.
  • A centered hero with three identical cards below it.
  • Glassmorphism or glow on every surface.
  • Gray text on a gray background with low contrast.
  • Stock copy such as "Unlock your potential" or "Seamless".
  • All-caps eyebrow labels above every heading.
  • The same radius and soft shadow on every card.
仅当需求概述明确要求时，才可使用以下样式：
  • 紫蓝渐变和装饰性渐变铺底。
  • 将 Inter、Roboto 或系统字体用作展示字体。
  • 使用 Emoji 作为图标。应统一使用一套 SVG 图标。
  • 居中的 hero 区域下方放置三个完全相同的卡片。
  • 在每个界面上都使用 Glassmorphism 或发光效果。
  • 灰色背景搭配低对比度的灰色文字。
  • “释放你的潜力”或“无缝体验”之类的通用营销文案。
  • 在每个标题上方都使用全大写的眉标题签。
  • 所有卡片都使用相同的圆角和柔和阴影。

Stop when

完成条件

  • The direction note and the tokens exist, and the code uses the tokens.
  • The screenshots at both widths show no banned default and no horizontal scroll.
  • All the states are built and the accessibility floor is met.
  • The one memorable thing is visible in the screenshot.
  • 设计方向说明和设计 token 已确定，并且代码中使用了这些 token。
  • 两种宽度下的截图均未出现禁用的默认样式，也没有水平滚动。
  • 所有状态均已构建，并达到无障碍最低标准。
  • 截图能够清晰呈现那个令人难忘的亮点。

Rules

规则

  • When the brief specifies a font, color, or style, use it, even if it is on the banned list.
  • A refinement keeps the identity of the UI. A redesign keeps its content and function.
  • 当需求概述指定了字体、颜色或样式时，即使它出现在禁用默认项中，也应按要求使用。
  • 优化应保留 UI 的既有辨识度；重新设计则应保留其内容和功能。