npx skills add https://github.com/wix/skills --skill wds-docs文档路径: node_modules/@wix/design-system/dist/docs/
文件通常有 200-900+ 行。请遵循以下分阶段探索流程。
目标: 根据功能/关键词搜索组件
Grep: "table" in components.md
Grep: "form\|input\|validation" in components.md
Grep: "modal\|dialog\|popup" in components.md
输出: 组件名称 + 描述 + 注意事项
下一步: 带着组件名称进入阶段 2
目标: 获取属性并发现可用示例
# 2a. 获取属性(小文件可以阅读,大文件使用 grep)
Read: components/ButtonProps.md # 如果 <100 行,可以阅读
Grep: "### disabled" in components/BoxProps.md -A 3 # Box 文件很大
# 2b. 列出可用示例(始终使用 grep,切勿阅读)
Grep: "^### " in components/ButtonExamples.md -n
来自 2b 的输出:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
5:### Size
17:### Skin
71:### Affix
123:### Disabled
183:### Loading state
下一步: 从列表中选择示例,进入阶段 3
目标: 仅阅读你需要的示例(约 30-50 行)
# 选项 A:使用偏移量阅读(来自阶段 2 的行号)
Read: components/ButtonExamples.md offset=183 limit=40
# 选项 B:使用上下文进行 Grep
Grep: "### Loading state" in components/ButtonExamples.md -A 40
输出: 该特定功能的 JSX 代码示例
Grep: "Add\|Edit\|Delete\|Search" in icons.md
┌─────────────────────────────────────────────────────────┐
│ 阶段 1: 在 components.md 中根据关键词进行 Grep │
│ → 找到: Button, Card, Table... │
└────────────────────┬────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 阶段 2a: 阅读/Grep {Component}Props.md │
│ → 获取: 带有类型和描述的属性 │
│ │
│ 阶段 2b: 在 {Component}Examples.md 中 Grep "^### " │
│ → 获取: 示例名称 + 行号 │
│ "5:### Size, 71:### Affix, 183:### Loading" │
└────────────────────┬────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 阶段 3: 阅读 offset=183 limit=40 │
│ → 获取: 特定示例的 JSX 代码 │
└────────────────────────────────────────────────────────┘
# 阶段 1: 查找组件
Grep: "image\|card\|price" in components.md
→ 找到 Image, Card, Text
# 阶段 2a: 获取 Card 属性
Read: components/CardProps.md
# 阶段 2b: 列出 Card 示例
Grep: "^### " in components/CardExamples.md -n
→ 5:### Basic, 25:### With media, 60:### Clickable
# 阶段 3: 获取 "With media" 示例
Read: components/CardExamples.md offset=25 limit=35
→ 获取带有 Image 的 Card 示例代码
# 根据需要为其他组件重复阶段 2-3
结果: 仅阅读约 80 行,而不是 1500+ 行
| 阶段 | 命令 | 输出 |
|---|---|---|
| 1. 查找 | Grep: "keyword" in components.md | 组件名称 |
| 2a. 属性 | Read: {Name}Props.md | 属性列表 |
| 2b. 示例 | Grep: "^### " in {Name}Examples.md | 示例名称 + 行号 |
| 3. 获取 | Read: offset=N limit=40 | 示例代码 |
| 4. 图标 | Grep: "IconName" in icons.md | 图标是否存在 |
| 文件 | 行数 | 策略 |
|---|---|---|
| components.md | ~970 | 使用 Grep,切勿完整阅读 |
| icons.md | ~400 | 针对特定图标使用 Grep |
| 大多数 Props.md | 30-100 | 可以完整阅读 |
| BoxProps.md | 8000+ | 仅使用 Grep! |
| 大多数 Examples.md | 100-600 | Grep → 偏移量阅读 |
| PageExamples.md | 940 | Grep → 偏移量阅读 |
# 表单
Grep: "form\|input\|validation" in components.md
# 布局
Grep: "layout\|page\|card\|box" in components.md
# 数据展示
Grep: "table\|list\|badge" in components.md
# 反馈
Grep: "notification\|toast\|loader" in components.md
| 设计元素 | WDS 组件 | 备注 |
|---|---|---|
| 矩形/容器 | <Box> | 布局包装器 |
| 文本按钮 | <TextButton> | 次要操作 |
| 带标签的输入框 | <FormField> + <Input> | 包装输入框 |
| 切换开关 | <ToggleSwitch> | 开/关设置 |
| 模态框 | <Modal> + <CustomModalLayout> | 一起使用 |
| 网格 | <Layout> + <Cell> | 响应式 |
当设计师指定像素时,转换为最接近的 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">
仅对 gap、padding、margin 使用 SP 令牌,不用于 width/height。
import { Button, Card, Image } from '@wix/design-system';
import { Add, Edit, Delete } from '@wix/wix-ui-icons-common';
每周安装量
182
代码仓库
GitHub 星标数
3
首次出现
2026年2月3日
安全审计
安装于
opencode161
cursor88
codex83
gemini-cli81
github-copilot77
kimi-cli73
Docs path: node_modules/@wix/design-system/dist/docs/
Files are 200-900+ lines. Follow the staged discovery flow below.
Goal: Search for component by feature/keyword
Grep: "table" in components.md
Grep: "form\|input\|validation" in components.md
Grep: "modal\|dialog\|popup" in components.md
Output: Component name + description + do/don'ts
Next: Go to Stage 2 with component name
Goal: Get props AND discover available examples
# 2a. Get props (small files OK to read, large files grep)
Read: components/ButtonProps.md # OK if <100 lines
Grep: "### disabled" in components/BoxProps.md -A 3 # Box is huge
# 2b. List available examples (ALWAYS grep, never read)
Grep: "^### " in components/ButtonExamples.md -n
Output from 2b:
5:### Size
17:### Skin
71:### Affix
123:### Disabled
183:### Loading state
Next: Pick example(s) from list, go to Stage 3
Goal: Read only the example you need (~30-50 lines)
# Option A: Read with offset (line number from Stage 2)
Read: components/ButtonExamples.md offset=183 limit=40
# Option B: Grep with context
Grep: "### Loading state" in components/ButtonExamples.md -A 40
Output: JSX code example for that specific feature
Grep: "Add\|Edit\|Delete\|Search" in icons.md
┌─────────────────────────────────────────────────────────┐
│ Stage 1: Grep components.md for keyword │
│ → finds: Button, Card, Table... │
└────────────────────┬────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Stage 2a: Read/Grep {Component}Props.md │
│ → gets: props with types & descriptions │
│ │
│ Stage 2b: Grep "^### " in {Component}Examples.md │
│ → gets: example names + line numbers │
│ "5:### Size, 71:### Affix, 183:### Loading" │
└────────────────────┬────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Stage 3: Read offset=183 limit=40 │
│ → gets: specific example JSX code │
└────────────────────────────────────────────────────────┘
# Stage 1: Find components
Grep: "image\|card\|price" in components.md
→ Image, Card, Text found
# Stage 2a: Get Card props
Read: components/CardProps.md
# Stage 2b: List Card examples
Grep: "^### " in components/CardExamples.md -n
→ 5:### Basic, 25:### With media, 60:### Clickable
# Stage 3: Fetch "With media" example
Read: components/CardExamples.md offset=25 limit=35
→ Gets Card with Image example code
# Repeat Stage 2-3 for other components as needed
Result: ~80 lines read instead of 1500+
| Stage | Command | Output |
|---|---|---|
| 1. Find | Grep: "keyword" in components.md | Component name |
| 2a. Props | Read: {Name}Props.md | Props list |
| 2b. Examples | Grep: "^### " in {Name}Examples.md | Example names + lines |
| 3. Fetch | Read: offset=N limit=40 | Example code |
| 4. Icons | Grep: "IconName" in icons.md |
| File | Lines | Strategy |
|---|---|---|
| components.md | ~970 | Grep, never read fully |
| icons.md | ~400 | Grep for specific icon |
| Most Props.md | 30-100 | Read fully OK |
| BoxProps.md | 8000+ | Grep only! |
| Most Examples.md | 100-600 | Grep → offset read |
| PageExamples.md | 940 | Grep → offset read |
# Forms
Grep: "form\|input\|validation" in components.md
# Layout
Grep: "layout\|page\|card\|box" in components.md
# Data display
Grep: "table\|list\|badge" in components.md
# Feedback
Grep: "notification\|toast\|loader" in components.md
| Design Element | WDS Component | Notes |
|---|---|---|
| Rectangle/container | <Box> | Layout wrapper |
| Text button | <TextButton> | Secondary actions |
| Input with label | <FormField> + <Input> | Wrap inputs |
| Toggle | <ToggleSwitch> | On/off settings |
| Modal | <Modal> + |
When designer specifies pixels, convert to the nearest SP token:
| Token | Classic | Studio |
|---|---|---|
SP1 | 6px | 4px |
SP2 | 12px | 8px |
SP3 | 18px | 12px |
SP4 | 24px | 16px |
SP5 | 30px | 20px |
SP6 |
<Box gap="SP2" padding="SP3">
Only use SP tokens for gap, padding, margin - not for width/height.
import { Button, Card, Image } from '@wix/design-system';
import { Add, Edit, Delete } from '@wix/wix-ui-icons-common';
Weekly Installs
182
Repository
GitHub Stars
3
First Seen
Feb 3, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode161
cursor88
codex83
gemini-cli81
github-copilot77
kimi-cli73
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
116,600 周安装
Nansen 聪明钱 Alpha 发现工具 - 追踪智能资金代币积累信号
212 周安装
Python网络安全工具开发指南:构建高效安全测试应用与扫描器
157 周安装
TechNews Skill:AI驱动科技新闻聚合与摘要工具,自动抓取TechMeme热点并分析社交媒体热议
136 周安装
Google Search Console (GSC) 技能:自动化获取搜索分析、索引状态与SEO洞察
135 周安装
LangGraph 实现指南:构建有状态多参与者智能体应用的图架构框架
131 周安装
Java架构专家 | Java 21、Spring Boot 3、微服务架构、性能优化实战指南
141 周安装
| Icon exists |
<CustomModalLayout>| Use together |
| Grid | <Layout> + <Cell> | Responsive |
| 36px |
| 24px |