菜单
Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, or checking props and examples. Triggers on "what component", "how do I make", "WDS", "show me props", or component names like Button, Card, Modal, Box, Text.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | wds-docs |
| description | Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, or checking props and examples. Triggers on "what component", "how do I make", "WDS", "show me props", or component names like Button, Card, Modal, Box, Text. |
Prerequisite: @wix/design-system must be installed (npm i @wix/design-system or yarn add @wix/design-system).
This skill bundles scripts/wds.js — a Node.js helper that auto-discovers @wix/design-system in node_modules (handles monorepos and workspaces) and provides focused lookups. Run it from the user's project directory using the absolute path to the bundled script:
# 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
node $WDS search table
node $WDS search form input validation
node $WDS search modal dialog popup
Multiple keywords are OR-matched. Returns component names, descriptions, and usage guidance.
node $WDS component Button
Returns the full props list (types and descriptions) plus a list of all available examples. For large prop files (>200 lines), returns a summary with prop names and types.
node $WDS example Button "Loading state"
Returns the example description and JSX code. Matching is case-insensitive and supports substrings (e.g., "loading" matches "Loading state").
node $WDS icons Add Edit Delete
Icons are from @wix/wix-ui-icons-common. Each icon has a Small variant (e.g., Add + AddSmall).
If the script is unavailable, docs are at node_modules/@wix/design-system/dist/docs/:
components.md — component catalog (~978 lines, grep only)components/{Name}Props.md — props per componentcomponents/{Name}Examples.md — examples per component (grep ^### for section list)icons.md — icon catalog (~818 lines, grep only)Don't read these files fully. Grep for keywords, then read specific sections with offset/limit. See references/file-structure.md for the exact docs file layout and section shapes.
| 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> + <CustomModalLayout> | Use together |
| Grid | <Layout> + <Cell> | Responsive |
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 | 36px | 24px |
<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";
Dynamically manage MCP server limits by toggling disabled states in mcp_config.json. Use when hitting the 100-tool limit, or when needing a specific MCP server that is currently disabled.
When the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," "tracking plan," "how do I measure this," "track conversions," "attribution," "Mixpanel," "Segment," "are my events firing," or "analytics isn't working." Use this whenever someone asks how to know if something is working or wants to measure marketing results. For A/B test measurement, see ab-test-setup.
When the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," "lifecycle emails," "trigger-based emails," "email funnel," "email workflow," "what emails should I send," "welcome series," or "email cadence." Use this for any multi-email automated flow. For cold outreach emails, see cold-email. For in-app onboarding, see onboarding-cro.
When the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking. Also use when the user mentions "sitemap," "site map," "visual sitemap," "site structure," "page hierarchy," "information architecture," "IA," "navigation design," "URL structure," "breadcrumbs," "internal linking strategy," "website planning," "what pages do I need," "how should I organize my site," or "site navigation." Use this whenever someone is planning what pages a website should have and how they connect. NOT for XML sitemaps (that's technical SEO — see seo-audit). For SEO audits, see seo-audit. For structured data, see schema-markup.
Creates HTTP endpoints for Wix CLI apps. Use only when the user specifically asks for a backend endpoint. Use when building REST API endpoints, backend HTTP handlers, or server-side logic. Triggers include backend API, HTTP endpoint, HTTP methods, form handling, file uploads.
Create backend event extensions that respond to Wix events. Use when implementing handlers that run when specific conditions occur on a site. Triggers include event extension, backend event, webhook handler.