Back to Details

wpds

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

WordPress Design System (WPDS)

WordPress Design System (WPDS)

Prerequisites

前提条件

This skill works best with the WPDS MCP server installed. The MCP provides access to WordPress Design System documentation and resources, such as components and DS token lists.
The following terms should be treated as synonyms:
  • "WordPress" and "WP";
  • "Design System" and "DS";
  • "WordPress Design System" and "WPDS".
此技能在安装WPDS MCP服务器时效果最佳。MCP提供对WordPress设计系统文档和资源的访问，例如组件和DS令牌列表。
以下术语应视为同义词：
  • "WordPress" 和 "WP"；
  • "Design System" 和 "DS"；
  • "WordPress Design System" 和 "WPDS"。

When to use

使用场景

Use this skill when the user mentions:
  • building and/or reviewing any UI in a WordPress-related context (for example, Gutenberg, WooCommerce, WordPress.com, Jetpack, etc etc);
  • WordPress Design System, WPDS, Design System;
  • UI components, Design tokens, color primitives, spacing scales, typography variables and presets;
  • Specific component packages such as @wordpress/components or @wordpress/ui;
当用户提及以下内容时使用此技能：
  • 在WordPress相关环境中构建和/或审查任何UI（例如Gutenberg、WooCommerce、WordPress.com、Jetpack等）；
  • WordPress设计系统、WPDS、设计系统；
  • UI组件、设计令牌、颜色基础元素、间距比例、排版变量和预设；
  • 特定组件包，如@wordpress/components或@wordpress/ui；

Rules

规则

Use the WPDS MCP server to access WPDS-related documentation

使用WPDS MCP服务器访问WPDS相关文档

  • Use the WPDS MCP server to retrieve the canonical, authoritative documentation:
    • reference site (
      wpds://pages
      )
    • list of available components (
      wpds://components
      ) and specific component information (
      wpds://components/:name
      )
    • list of available tokens (
      wpds://design-tokens
      )
  • DO NOT search the web for canonical documentation about the WordPress Design System. If asked by the user, push back and ask for confirmation, warning them that the MCP server is the best place to provide information
  • 使用WPDS MCP服务器获取标准、权威的文档：
    • 参考站点 (
      wpds://pages
      )
    • 可用组件列表 (
      wpds://components
      ) 和特定组件信息 (
      wpds://components/:name
      )
    • 可用令牌列表 (
      wpds://design-tokens
      )
  • 不要在网络上搜索WordPress设计系统的标准文档。如果用户要求，应拒绝并请求确认，提醒他们MCP服务器是获取相关信息的最佳渠道

Required documentation

必备文档

Before working on any WPDS-related tasks, make sure you read relevant documentation on the reference site. This documentation should take the absolute precedence when evaluating the best course of action for any given tasks.
在处理任何与WPDS相关的任务之前，请务必阅读参考站点上的相关文档。在评估给定任务的最佳行动方案时，这些文档应具有绝对优先权。

Boundaries

边界

  • Skip non-UI related aspects of an answer (for example, fetching data from stores, or localizing strings of text).
  • Focus on building UI that adheres as much as possible to the WPDS best practices, uses the most fitting WPDS components/tokens/patterns.
  • 跳过答案中与UI无关的方面（例如，从存储中获取数据或本地化文本字符串）。
  • 专注于构建尽可能遵循WPDS最佳实践、使用最合适的WPDS组件/令牌/模式的UI。

Tech stack

技术栈

  • Unless you are told otherwise (or gathered specific information from the local context of the request), assume the following tech stack: TypeScript, React, CSS.
  • 除非另有说明（或从请求的本地环境中收集到特定信息），否则默认使用以下技术栈：TypeScript、React、CSS。

Validation

验证

  • If the local context in which a task is running provide lint scripts, use them to validate the proposed code output when possible.
  • 如果任务运行的本地环境提供了lint脚本，请尽可能使用它们来验证提议的代码输出。

Output

输出

  • As a recap at the end of your response, provide a clear and concise explanation of what the solution does, and add context to why each decision was made.
  • Be explicit about the boundaries, ie. what was explicitly left out of the task because not relevant (eg non-ui related).
  • Provide working code snippets
  • 在响应末尾添加一个总结，清晰简洁地说明解决方案的作用，并解释每项决策的原因。
  • 明确说明边界，即因不相关而明确排除在任务之外的内容（例如非UI相关内容）。
  • 提供可运行的代码片段