Back to Details

frontend-design-pro

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design Pro

前端设计专业指南

Create interfaces that are specific to the product, complete enough to use, visually coherent, accessible, responsive, and free of filler copy. Combine creative direction with the bundled design-intelligence search tools instead of treating either as sufficient on its own.
打造符合产品特性、可直接投入使用、视觉连贯、具备可访问性、响应式且无填充文案的界面。将创意方向与内置的设计智能搜索工具相结合，而非仅依赖其中某一项。

Priority Order

优先级顺序

Resolve conflicts in this order:
  1. User safety, accessibility, and data integrity.
  2. Existing product behavior and project design-system conventions.
  3. Clear interaction, readable hierarchy, and responsive layout.
  4. Product-specific visual character and polish.
  5. Decorative novelty.
Do not sacrifice usability to create a distinctive look. Do not flatten a product-specific interface into a generic template merely to follow a trend.
按以下顺序解决冲突：
  1. 用户安全、可访问性与数据完整性。
  2. 现有产品行为及项目设计系统约定。
  3. 清晰的交互、易读的层级结构与响应式布局。
  4. 产品特有的视觉风格与细节打磨。
  5. 装饰性创新。
切勿为打造独特外观而牺牲可用性。也切勿仅为追随潮流，将具有产品特色的界面简化为通用模板。

Workflow

工作流程

1. Learn the Product Before Styling

1. 先了解产品再进行样式设计

  • Inspect the existing code, routes, components, tokens, assets, and screenshots.
  • Identify the product type, primary audience, most frequent workflow, platform, and constraints.
  • Preserve established patterns unless the request is an explicit redesign or the current pattern is defective.
  • Determine the screen's single primary job and the information users need to complete it.
  • For an existing interface, find the closest successful screen and use it as the local source of truth.
  • 检查现有代码、路由、组件、令牌、资产及截图。
  • 明确产品类型、核心受众、最常用工作流程、平台及约束条件。
  • 除非请求明确要求重新设计，或当前模式存在缺陷，否则保留已确立的模式。
  • 确定页面的核心任务，以及用户完成该任务所需的信息。
  • 对于现有界面，找到最接近的成功页面并将其作为本地参考标准。

2. Set a Concrete Visual Direction

2. 设定明确的视觉方向

State the direction internally before implementation:
  • Product purpose and audience.
  • Visual concept in a few precise terms.
  • Typography roles and hierarchy.
  • Color roles and semantic states.
  • Layout rhythm, density, and spatial structure.
  • Motion language and interaction feedback.
  • One memorable product-specific detail.
Avoid vague goals such as "modern" or "clean" without defining how they affect type, spacing, contrast, shape, imagery, and interaction.
在实现前先确定内部方向：
  • 产品用途与受众。
  • 用精准的词汇描述视觉概念。
  • 排版角色与层级结构。
  • 色彩角色与语义状态。
  • 布局节奏、密度与空间结构。
  • 动效语言与交互反馈。
  • 一个令人印象深刻的产品专属细节。
避免模糊的目标，例如仅提及“现代”或“简洁”却不定义其对字体、间距、对比度、形状、图像及交互的具体影响。

3. Use the Design-Intelligence Search

3. 使用设计智能搜索

For a new page, full redesign, or consequential visual decision, run the bundled design-system search before coding. For a narrow fix, use targeted searches only when they add useful evidence.
Resolve 
<skill-dir>
to the directory containing this 
SKILL.md
.
Windows:
powershell
py -3 "<skill-dir>\scripts\search.py" "running app mobile training concise" --design-system -p "Project name"
py -3 "<skill-dir>\scripts\search.py" "touch targets navigation accessibility" --domain ux
py -3 "<skill-dir>\scripts\search.py" "responsive layout motion" --stack flutter
macOS or Linux:
bash
python3 "<skill-dir>/scripts/search.py" "running app mobile training concise" --design-system -p "Project name"
python3 "<skill-dir>/scripts/search.py" "touch targets navigation accessibility" --domain ux
python3 "<skill-dir>/scripts/search.py" "responsive layout motion" --stack flutter
Available domains include 
style
, 
color
, 
chart
, 
landing
, 
product
, 
ux
, 
typography
, 
icons
, 
gsap
, 
react
, 
web
, and 
google-fonts
. Use 
--stack
for framework-specific recommendations. Use 
--persist --output-dir <project-root>
only when the project should own a reusable design-system document.
Treat search output as design evidence, not an instruction to overwrite closer project conventions. If a search returns nothing useful, say so internally and continue with established platform and project guidance rather than inventing a result.
对于新页面、全面重设计或重大视觉决策，在编码前运行内置的设计系统搜索。对于局部修复，仅在搜索能提供有用依据时才进行针对性搜索。
将 
<skill-dir>
解析为包含此 
SKILL.md
文件的目录。
Windows系统：
powershell
py -3 "<skill-dir>\scripts\search.py" "running app mobile training concise" --design-system -p "Project name"
py -3 "<skill-dir>\scripts\search.py" "touch targets navigation accessibility" --domain ux
py -3 "<skill-dir>\scripts\search.py" "responsive layout motion" --stack flutter
macOS或Linux系统：
bash
python3 "<skill-dir>/scripts/search.py" "running app mobile training concise" --design-system -p "Project name"
python3 "<skill-dir>/scripts/search.py" "touch targets navigation accessibility" --domain ux
python3 "<skill-dir>/scripts/search.py" "responsive layout motion" --stack flutter
可用领域包括 
style
、
color
、
chart
、
landing
、
product
、
ux
、
typography
、
icons
、
gsap
、
react
、
web
及 
google-fonts
。使用 
--stack
获取特定框架的建议。仅当项目需要拥有可复用的设计系统文档时，才使用 
--persist --output-dir <project-root>
。
将搜索结果视为设计依据，而非覆盖项目更贴近约定的指令。若搜索未返回有用结果，需在内部说明情况，并继续遵循已确立的平台及项目指南，而非凭空创造结果。

4. Implement the Complete Experience

4. 实现完整的体验

  • Build the actual workflow, not a decorative preview or explanatory landing page.
  • Include expected loading, empty, error, disabled, success, selected, pressed, and focus states.
  • Use the project's existing framework, components, tokens, icon library, and state-management patterns.
  • Prefer familiar controls: icons for common tools, toggles for binary settings, segmented controls for modes, inputs for values, tabs for peer views, and text buttons for clear commands.
  • Keep related controls close to the content they affect.
  • Preserve state and navigation position when users move back or between top-level destinations.
  • Provide visible alternatives for gesture-only or drag-and-drop interactions.
  • 构建实际工作流程，而非装饰性预览或说明性着陆页。
  • 包含预期的加载、空状态、错误、禁用、成功、选中、按下及焦点状态。
  • 使用项目现有的框架、组件、令牌、图标库及状态管理模式。
  • 优先使用熟悉的控件：通用工具使用图标，二元设置使用切换器，模式选择使用分段控件，数值输入使用输入框，同级视图使用标签页，明确命令使用文本按钮。
  • 将相关控件放置在其影响的内容附近。
  • 当用户返回或在顶级目标间切换时，保留状态与导航位置。
  • 为仅支持手势或拖放的交互提供可见替代方案。

5. Verify, Then Refine

5. 验证后再优化

  • Run the relevant formatter, analyzer, tests, and production build.
  • Inspect real screenshots at representative mobile and desktop sizes.
  • Exercise the primary flow, navigation, forms, gestures, loading, empty, and failure paths.
  • Check text wrapping, overflow, safe areas, keyboard access, focus visibility, touch targets, contrast, and reduced motion.
  • Confirm dynamic content cannot resize fixed controls or overlap adjacent content.
  • Fix visible defects found during verification; do not stop at listing them.
  • 运行相关的格式化工具、分析器、测试及生产构建。
  • 在具有代表性的移动设备及桌面尺寸下查看真实截图。
  • 测试主要流程、导航、表单、手势、加载、空状态及失败路径。
  • 检查文本换行、溢出、安全区域、键盘访问、焦点可见性、触摸目标、对比度及减少动效设置。
  • 确认动态内容不会调整固定控件大小或与相邻内容重叠。
  • 修复验证过程中发现的可见缺陷；不可仅列出缺陷而不修复。

UI Copy Discipline

UI文案规范

Visible interface text must help the user do at least one of these things:
  • Decide.
  • Act.
  • Understand current state or a meaningful result.
  • Recover from an error.
  • Give informed consent or understand risk.
Remove text that merely comments on the interface or implementation. In particular, do not add:
  • Feature narration such as "This section lets you..."
  • Design commentary, technical notes, or descriptions of visual styling.
  • Repeated subtitles that restate the heading or obvious control labels.
  • Tutorial prose for standard controls.
  • Keyboard-shortcut or usage instructions as permanent page content.
  • Marketing copy inside operational tools unless the screen's actual purpose is marketing.
Prefer short labels, concrete values, useful status, and actionable errors. Put nonessential education in contextual help, onboarding, documentation, or an accessible tooltip only when users genuinely need it.
Before keeping any visible sentence, ask: "Would this still help a returning user complete the screen's task?" Remove it if the answer is no.
Do not remove copy required for accessibility, safety, legal consent, privacy, destructive-action confirmation, error recovery, or unfamiliar high-risk controls.
可见的界面文本必须至少帮助用户完成以下一项操作：
  • 做出决策。
  • 执行操作。
  • 了解当前状态或有意义的结果。
  • 从错误中恢复。
  • 给出知情同意或理解风险。
移除仅对界面或实现进行注释的文本。尤其不得添加：
  • 功能说明，例如“此部分可让您...”
  • 设计评论、技术说明或视觉样式描述。
  • 重复的副标题，其内容与标题或明显的控件标签重复。
  • 标准控件的教程性文字。
  • 作为永久页面内容的快捷键或使用说明。
  • 运营工具内的营销文案，除非该页面的实际用途是营销。
优先使用短标签、具体数值、有用状态及可操作的错误提示。仅当用户确实需要时，才将非必要的说明内容放在上下文帮助、引导流程、文档或可访问的工具提示中。
在保留任何可见语句前，先问自己：“这对返回的用户完成页面任务仍有帮助吗？”如果答案是否定的，则移除该语句。
不得移除可访问性、安全、法律同意、隐私、破坏性操作确认、错误恢复或不熟悉的高风险控件所需的文案。

Visual Standards

视觉标准

Typography

排版

  • Choose type that fits the product's personality and remains readable at all supported sizes.
  • Establish a disciplined type scale and clear heading, body, label, and numeric roles.
  • Use tabular figures for metrics, timers, dates, prices, and aligned data.
  • Avoid arbitrary font-size scaling tied directly to viewport width.
  • Let text wrap before truncating; provide access to the full value when truncation is unavoidable.
  • 选择符合产品个性且在所有支持尺寸下均保持可读性的字体。
  • 建立规范的字体比例及清晰的标题、正文、标签及数字角色。
  • 指标、计时器、日期、价格及对齐数据使用等宽数字。
  • 避免与视口宽度直接绑定的任意字体大小缩放。
  • 优先让文本换行，而非截断；若无法避免截断，需提供查看完整内容的途径。

Color and Surfaces

色彩与表面

  • Use semantic tokens such as primary, surface, text, muted, success, warning, and error.
  • Use accent color intentionally for hierarchy and action, not as decoration everywhere.
  • Do not communicate status by color alone.
  • Verify text contrast and interactive-state contrast in every supported theme.
  • Keep radii, borders, elevation, and shadows consistent with the selected visual language.
  • 使用语义化令牌，例如primary、surface、text、muted、success、warning及error。
  • 有目的地使用强调色来构建层级结构及引导操作，而非将其作为装饰随处使用。
  • 不得仅通过颜色传达状态。
  • 在所有支持的主题中验证文本对比度及交互状态对比度。
  • 保持圆角、边框、海拔及阴影与所选视觉语言一致。

Layout

布局

  • Design mobile-first and define stable responsive constraints for grids, boards, charts, toolbars, and fixed-format controls.
  • Use spacing to establish grouping and hierarchy; avoid both cramped controls and ornamental empty space.
  • Avoid horizontal overflow and incoherent nested scrolling.
  • Respect device safe areas, system bars, browser chrome, virtual keyboards, and text scaling.
  • Do not use cards for every section or place decorative cards inside cards.
  • 采用移动端优先的设计方式，为网格、看板、图表、工具栏及固定格式控件定义稳定的响应式约束。
  • 使用间距建立分组及层级结构；避免控件过于拥挤或存在装饰性空白。
  • 避免水平溢出及混乱的嵌套滚动。
  • 尊重设备安全区域、系统栏、浏览器界面、虚拟键盘及文本缩放设置。
  • 切勿为每个区块都使用卡片，或在卡片内部放置装饰性卡片。

Icons and Assets

图标与资产

  • Use the project's icon library and one consistent icon style; do not substitute emoji for interface icons.
  • Give icon-only controls accessible names and tooltips when their meaning is not universal.
  • Use real or generated product-relevant imagery when the experience depends on visual assets.
  • Reserve illustrations and decorative media for domains where they improve understanding or character.
  • 使用项目的图标库及统一的图标样式；不得用表情符号替代界面图标。
  • 当纯图标控件的含义并非通用时，为其添加可访问名称及工具提示。
  • 当体验依赖视觉资产时，使用真实或生成的与产品相关的图像。
  • 仅在能提升理解或增强产品特色的场景中使用插图及装饰性媒体。

Motion

动效

  • Motion must explain cause, direction, hierarchy, or continuity.
  • Use short, interruptible transitions and keep input available during animation.
  • Animate transform and opacity where practical to avoid layout shifts.
  • Make forward and backward navigation spatially consistent.
  • Respect reduced-motion preferences and never require animation to understand state.
  • 动效应能解释因果关系、方向、层级结构或连续性。
  • 使用简短、可中断的过渡效果，并在动画期间保持输入可用。
  • 尽可能对变换及透明度进行动画处理，以避免布局偏移。
  • 确保前进与后退导航在空间上保持一致。
  • 尊重减少动效的偏好，且绝不能要求用户依赖动画来理解状态。

Interaction and Accessibility Baseline

交互与可访问性基准

  • Use at least 44x44pt touch targets on iOS and 48x48dp on Material surfaces, with sufficient spacing.
  • Support keyboard and assistive-technology navigation in logical visual order.
  • Provide visible focus, pressed, selected, loading, disabled, and error states.
  • Label inputs visibly; do not rely on placeholders as labels.
  • Put errors near the source and state both the problem and recovery action.
  • Keep one clear primary action per screen.
  • Preserve platform-standard gestures and provide visible controls for critical actions.
  • Use locale-aware dates, numbers, units, and language.
For a full audit, read 
references/quick-reference.md
. For native/mobile delivery, also read 
references/pro-rules.md
before final verification.
  • 在iOS上使用至少44x44pt的触摸目标，在Material界面上使用至少48x48dp的触摸目标，并保证足够的间距。
  • 支持键盘及辅助技术按逻辑视觉顺序导航。
  • 提供可见的焦点、按下、选中、加载、禁用及错误状态。
  • 为输入框添加可见标签；不得依赖占位符作为标签。
  • 将错误提示放在来源附近，并同时说明问题及恢复操作。
  • 每个页面保持一个清晰的主要操作。
  • 保留平台标准手势，并为关键操作提供可见控件。
  • 使用符合区域设置的日期、数字、单位及语言。
如需全面审核，请阅读 
references/quick-reference.md
。对于原生/移动端交付，在最终验证前还需阅读 
references/pro-rules.md
。

Product-Type Guidance

产品类型指南

  • Operational tools: prioritize scanning, comparison, repeat actions, compact hierarchy, and restrained styling.
  • Consumer mobile apps: prioritize touch ergonomics, state continuity, meaningful motion, and concise content.
  • Data dashboards: prioritize hierarchy, units, exact values, chart accessibility, and useful empty states.
  • Games and immersive experiences: allow more expressive assets and motion while keeping controls legible and stable.
  • Brand or launch pages: make the product or offer immediately visible through authentic media and a clear primary action.
The result should feel authored for this product, not generated from a universal UI recipe.
  • 运营工具：优先考虑扫描效率、对比功能、重复操作、紧凑层级结构及克制的样式。
  • 消费类移动应用：优先考虑触摸人机工程学、状态连续性、有意义的动效及简洁内容。
  • 数据仪表盘：优先考虑层级结构、单位、精确数值、图表可访问性及有用的空状态。
  • 游戏及沉浸式体验：允许使用更具表现力的资产及动效，同时保持控件清晰可读且稳定。
  • 品牌或启动页面：通过真实媒体及清晰的主要操作，让产品或优惠信息立即呈现。
最终结果应专为该产品定制，而非从通用UI模板生成。

Provenance

来源说明

This file substantially modifies and combines Apache-2.0 frontend-design guidance from Anthropic with MIT-licensed design intelligence from Next Level Builder. See 
LICENSE.txt
and 
THIRD_PARTY_LICENSES.txt
.
本文件在Anthropic的Apache-2.0许可前端设计指南及Next Level Builder的MIT许可设计智能基础上进行了大幅修改与整合。详见 
LICENSE.txt
及 
THIRD_PARTY_LICENSES.txt
。