Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend design

前端设计

Use this for UI work. It records taste, not a generic design process.
本指南适用于UI设计工作。它记录的是设计风格偏好，而非通用设计流程。

Taste

风格偏好

  • Pick one visual direction that fits the product: editorial, industrial, playful, utilitarian, luxury, brutalist, calm, dense, or sparse.
  • Avoid the default AI SaaS look: purple gradients, Inter/Roboto/Arial stacks, centered hero plus three cards, generic glassmorphism, vague marketing copy.
  • Use typography on purpose. Pair a distinctive display face with a readable body face when the project allows custom fonts.
  • Make backgrounds feel designed: texture, pattern, depth, image treatment, asymmetric blocks, or strong whitespace. Do not leave a flat page unless flatness is the concept.
  • Use color with intent. A narrow palette with one sharp accent usually beats many evenly weighted colors.
  • Add motion only where it explains hierarchy or state: page entrance, section reveal, hover affordance, navigation transition.
  • 选择一个契合产品的视觉方向：编辑风、工业风、趣味风、实用风、奢华风、粗野风、沉稳风、紧凑风或简约风。
  • 避免AI SaaS的默认风格：紫色渐变、Inter/Roboto/Arial字体栈、居中英雄区加三张卡片的布局、通用毛玻璃效果、模糊的营销文案。
  • 有目的性地运用排版。若项目允许使用自定义字体，可将独特的标题字体与易读的正文字体搭配使用。
  • 让背景更具设计感：运用纹理、图案、层次感、图像处理、不对称区块或充足留白。除非扁平是核心设计理念，否则不要使用单调的纯色页面。
  • 有目的性地运用色彩。通常，一个包含鲜明强调色的精简配色方案优于多种权重均衡的色彩组合。
  • 仅在能体现层级或状态变化的场景添加动效：页面进入、区块展示、悬停反馈、导航切换。

Implementation

实现要求

  • Preserve the app's existing framework, routing, component library, and design system unless the user asks for a new direction.
  • Ship working responsive UI, not a static mockup.
  • Check mobile layout explicitly: touch targets, wrapping, viewport height, overflow, and readable type.
  • Prefer CSS variables or design tokens for repeated color, spacing, radius, shadow, and motion values.
  • Keep accessibility visible: semantic elements, labels, focus states, contrast, reduced-motion fallback when animation is substantial.
  • Match code complexity to the design. Quiet layouts need precision; expressive layouts can justify heavier visuals.
  • 除非用户要求全新方向，否则保留应用现有的框架、路由、组件库和设计系统。
  • 交付可运行的响应式UI，而非静态原型。
  • 明确检查移动端布局：触摸目标区域、内容换行、视口高度、溢出情况以及文字可读性。
  • 对于重复使用的颜色、间距、圆角、阴影和动效参数，优先使用CSS variables或设计令牌。
  • 确保无障碍可见性：使用语义化元素、标签、焦点状态、足够对比度，当动效较复杂时提供减少动效的备选方案。
  • 代码复杂度与设计风格匹配。简约布局需要精准的代码；富有表现力的布局可适配更复杂的视觉效果。

Output

输出规范

When editing files, make the change and summarize the visual direction plus the main implementation points. When only proposing a design, give one clear direction instead of a menu of generic options.
编辑文件时，完成修改后总结视觉方向及主要实现要点。仅提出设计方案时，给出一个清晰的方向，而非一系列通用选项。