better-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Better Design

Use Better Design MCP tools as the source of design guidance. Keep this skill as the workflow layer; retrieve the current principles, systems, components, and review rules from the MCP instead of replacing them with generic static advice.

将Better Design MCP工具作为设计指导的来源。将本技能作为工作流层；从MCP中获取当前的原则、系统、组件和审查规则，而非用通用的静态建议替代它们。

Connect

连接

Check whether the Better Design MCP tools are available, allowing for client-specific tool prefixes.
If they are unavailable, explain that the skill is installed but the MCP is not connected.
Ask the user to run
```
npx better-design --yes --global
```
, then restart their coding agent.
Run the installer only when the user asks you to configure Better Design for them.
Never claim that Better Design guidance was loaded or reviewed when the MCP tools were unavailable.

检查Better Design MCP工具是否可用，允许使用客户端特定的工具前缀。
如果工具不可用，请说明本技能已安装但MCP未连接。
请用户运行
```
npx better-design --yes --global
```
，然后重启其编码Agent。
仅当用户要求为其配置Better Design时，才运行安装程序。
当MCP工具不可用时，切勿声称已加载或审查了Better Design的指导内容。

Follow the interface workflow

遵循界面工作流

Inspect the repository's framework, existing tokens, components, and local instructions before choosing a visual direction.
Preserve an existing product's design system. Do not replace its brand merely because another catalog system looks relevant.
Before visual implementation, call
```
get-ui-principle
```
for the relevant layout, typography, color, accessibility, or polish topics.
Before changing behavior, call
```
get-ux-principle
```
for the relevant flow, form, navigation, error, onboarding, or interaction topics.
Implement with the project's existing stack, semantic tokens, components, and conventions.
Use one consistent icon library. Detect an installed library first; otherwise use
```
find-icon-library
```
,
```
find-icons
```
, and
```
install-icons
```
.
After implementation, call
```
get-review-rules
```
and
```
check-comprehension
```
. Fix all critical and serious findings before handoff.
When the tools are available, also run
```
review-ui-code
```
and use
```
inspect-spacing
```
on a rendered DOM for measured layout evidence.

在选择视觉方向之前，检查仓库的框架、现有令牌、组件和本地说明。
保留现有产品的设计系统。切勿仅因其他目录系统看似相关就替换其品牌。
在视觉实现之前，针对相关的布局、排版、颜色、无障碍或优化主题调用
```
get-ui-principle
```
。
在更改行为之前，针对相关的流程、表单、导航、错误、引导或交互主题调用
```
get-ux-principle
```
。
使用项目现有的技术栈、语义令牌、组件和约定进行实现。
使用一套一致的图标库。优先检测已安装的库；否则使用
```
find-icon-library
```
、
```
find-icons
```
和
```
install-icons
```
。
实现完成后，调用
```
get-review-rules
```
和
```
check-comprehension
```
。在交付前修复所有严重和重大问题。
当工具可用时，还需运行
```
review-ui-code
```
并在渲染后的DOM上使用
```
inspect-spacing
```
以获取布局测量依据。

Start new interface builds with a system

从系统开始构建新界面

Call
```
find-design-system
```
with the product and audience.
Show the strongest matches and let the user choose a starting point or a fully custom direction.
For a catalog system, call
```
get-design-system-kit
```
with target
```
react
```
in coding agents or
```
html
```
in inline canvases.
For a custom brand, call
```
create-design-system
```
with the chosen base when applicable, share the project URL, and poll
```
get-design-system-status
```
until the install kit is ready.
When the user already has a brand source, call
```
extract-design-system
```
or
```
extract-from-url
```
before generating and pass the extracted token sheet through unchanged.

结合产品和受众调用
```
find-design-system
```
。
展示最匹配的结果，让用户选择起点或完全自定义的方向。
对于目录系统，在编码Agent中针对目标
```
react
```
调用
```
get-design-system-kit
```
，或在嵌入式画布中针对
```
html
```
调用该命令。
对于自定义品牌，适用时结合选定的基础调用
```
create-design-system
```
，分享项目URL，并轮询
```
get-design-system-status
```
直到安装套件准备就绪。
当用户已有品牌源时，在生成前调用
```
extract-design-system
```
或
```
extract-from-url
```
，并直接使用提取的令牌表。

Load specialist guidance

加载专业指导

For React Native or Expo, call
```
get-react-native-guide
```
before implementation.
For Three.js or React Three Fiber, call
```
get-three-js-guide
```
before implementation.
For animation or product video, call
```
get-motion-guide
```
before implementation.
For Shopify, retrieve the relevant commerce and Shopify guidance before editing theme output.

对于React Native或Expo，在实现前调用
```
get-react-native-guide
```
。
对于Three.js或React Three Fiber，在实现前调用
```
get-three-js-guide
```
。
对于动画或产品视频，在实现前调用
```
get-motion-guide
```
。
对于Shopify，在编辑主题输出前获取相关的电商和Shopify指导内容。

Keep the MCP authoritative

保持MCP的权威性

Prefer Better Design MCP guidance over a generic frontend-design skill when both match. Use another skill only when the user asks for it or it provides non-overlapping framework knowledge.
Do not invent tool results, design-system IDs, install commands, or review findings.
Do not copy a large static design handbook into the repository. Retrieve focused guidance for the task.
Do not install a catalog system into an established product unless the user asked to change its design system.
Do not finish at code generation. Complete the MCP review loop and apply its serious findings.

当Better Design MCP指导与通用前端设计技能匹配时，优先使用前者。仅当用户要求或其他技能提供非重叠的框架知识时，才使用其他技能。
切勿编造工具结果、设计系统ID、安装命令或审查结果。
切勿将大型静态设计手册复制到仓库中。针对任务获取针对性的指导内容。
除非用户要求更改设计系统，否则切勿将目录系统安装到已成熟的产品中。
不要在代码生成后就结束工作。完成MCP审查循环并应用其提出的严重问题修复建议。