wds-docs

WDS 文档导航器

**前置条件：**必须安装 @wix/design-system（npm i @wix/design-system 或 yarn add @wix/design-system）。

辅助脚本

此技能包含 scripts/wds.js——一个 Node.js 辅助脚本，可在 node_modules 中自动发现 @wix/design-system（支持 monorepo 和工作区），并提供针对性的查询。从用户的项目目录中运行该脚本，使用捆绑脚本的绝对路径：

# WDS is the absolute path to this skill's scripts/wds.js
WDS="<this-skill-dir>/scripts/wds.js"

node $WDS search <keyword>                # Find components by keyword
node $WDS component <Name>                 # Get props + example list
node $WDS example <Name> "<ExampleName>"   # Get a specific example
node $WDS icons <query>                    # Search for icons

工作流

步骤 1：找到合适的组件

node $WDS search table
node $WDS search form input validation
node $WDS search modal dialog popup

多个关键词采用 OR 匹配。返回组件名称、描述和使用指南。

步骤 2：获取 props 和可用示例

node $WDS component Button

返回完整的 props 列表（类型和描述）以及所有可用示例的列表。对于较大的 prop 文件（>200 行），会返回包含 prop 名称和类型的摘要。

步骤 3：获取特定示例

node $WDS example Button "Loading state"

返回示例说明和 JSX 代码。匹配不区分大小写，并支持子串匹配（例如，“loading”可匹配“Loading state”）。

步骤 4：查找图标

node $WDS icons Add Edit Delete

图标来自 @wix/wix-ui-icons-common。每个图标都有一个 Small 变体（例如，Add + AddSmall）。

备用方案：直接访问文件

如果脚本不可用，文档位于 node_modules/@wix/design-system/dist/docs/：

• components.md — 组件目录（约 978 行，仅 grep）
• components/{Name}Props.md — 各组件的 props
• components/{Name}Examples.md — 各组件的示例（使用 grep ^### 查找章节列表）
• icons.md — 图标目录（约 818 行，仅 grep）

不要完整读取这些文件。先用 grep 搜索关键词，再通过 offset/limit 读取特定章节。有关确切的文档文件布局和章节结构，请参阅 references/file-structure.md。

---

快速组件映射（设计到 WDS）

设计元素	WDS 组件	备注
矩形/容器	<Box>	布局包装器
文本按钮	<TextButton>	次要操作
带标签的输入框	<FormField> + <Input>	包装输入框
开关	<ToggleSwitch>	开/关设置
模态框	<Modal> + <CustomModalLayout>	配合使用
网格	<Layout> + <Cell>	响应式

间距（px 到 SP 的转换）

当设计师指定像素值时，请转换为最接近的 SP 令牌：

令牌	Classic	Studio
SP1	6px	4px
SP2	12px	8px
SP3	18px	12px
SP4	24px	16px
SP5	30px	20px
SP6	36px	24px

<Box gap="SP2" padding="SP3">

SP 令牌仅用于 gap、padding、margin，不要用于宽度/高度。

导入

import { Button, Card, Image } from "@wix/design-system";
import { Add, Edit, Delete } from "@wix/wix-ui-icons-common";