wix-design-system

WDS ドキュメントナビゲーター

前提条件： @wix/design-system がインストールされている必要があります（npm i @wix/design-system または yarn add @wix/design-system）。

ヘルパースクリプト

このスキルには scripts/wds.cjs が含まれています。これは node_modules 内の @wix/design-system を自動検出し（モノレポやワークスペースにも対応）、目的を絞った検索を行う Node.js ヘルパーです。バンドルされたスクリプトへの絶対パスを使用して、ユーザーのプロジェクトディレクトリから実行してください。

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

node $WDS search <keyword>                 # Find components by keyword
node $WDS component <Name>                 # Get props + example list (one component)
node $WDS components <Name1> <Name2>...    # Same as `component`, but for several at once
node $WDS example <Name> "<ExampleName>"   # Get a specific example
node $WDS testkit <Name> [method]          # Get testkit imports + driver API
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：プロパティと利用可能な例を取得する

node $WDS component Button

プロパティの完全な一覧（型と説明）と、利用可能なすべての例の一覧が返されます。大きなプロパティファイル（200 行超）の場合は、プロパティ名と型を含む概要が返されます。

必要なコンポーネントが複数わかっている場合（たとえば、ステップ 1 で候補が絞り込めた場合）は、コンポーネントごとの往復を避けるため、一括形式を使うことをおすすめします。

node $WDS components Button Card Table Input Text Thumbnail

出力では、各コンポーネントのプロパティブロックが --- で区切られます。見つからないコンポーネントは標準エラー出力に記録され、スキップされます。コマンドが失敗するのは、指定したコンポーネントがすべて見つからない場合のみです。

ステップ 3：特定の例を取得する

node $WDS example Button "Loading state"

例の説明と JSX コードが返されます。大文字と小文字を区別せず、部分一致にも対応します（例：「loading」は「Loading state」に一致します）。

ステップ 4：コンポーネントのテストキットでテストを作成する

node $WDS testkit Button             # Imports + full driver API for Button
node $WDS testkit Button click       # Just the click() method details

unidriver、vanilla、puppeteer、playwright の各形式のインポート用スニペットと、ドライバーメソッドの API（名前、引数、戻り値の型、説明）が返されます。メソッド名の照合では、大文字と小文字を区別せず、部分一致します。

ステップ 5：アイコンを見つける

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 — コンポーネントごとのプロパティ
• components/{Name}Examples.md — コンポーネントごとの例（セクション一覧は ^### を grep）
• components/{Name}Testkit.md — コンポーネントごとのテストキットのインポートとドライバー API（メソッド一覧は ^### を grep）
• testkits.md — テストキットカタログ（テストキットのドキュメントが生成されているコンポーネントの一覧）
• icons.md — アイコンカタログ（約 818 行。grep のみ）

これらのファイルを全件読み込まないでください。キーワードを grep してから、オフセットと読み込み件数を指定して必要なセクションを読み込んでください。ドキュメントファイルの正確な構成とセクションの形式については、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";

ガイドライン

1. WDS の CSS トークンを上書きしないでください。他に方法がない場合に限り、これはアンチパターンであり、絶対に避けるべきであることをプロンプターに明確に伝えてください。

トラブルシューティング

• コンポーネントのスタイルが適用されない（プレーンな HTML の見た目で、WDS の余白やタイポグラフィが反映されない）：ルート／メインコンポーネント（例：page.tsx、モーダルのエントリーポイント）に import "@wix/design-system/styles.global.css"; を一度追加します。子コンポーネント、タブ、ヘルパーファイルには追加しないでください。