메뉴
デザインシステムの新規構築と既存ルールの強制を行う。トークン設計、コンポーネント設計、 プロジェクトセットアップ、日本語タイポグラフィをガイドする。 「デザインシステムを作りたい」「DS を構築」「コンポーネントライブラリを作る」 「トークンを設計」「デザインシステムに従って」などのリクエストで使用する。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
写真に写っている人物の顔を検出してぼかし、匿名化した画像を作成する。YuNet による 2 パス顔検出、ガウスぼかし、拡大クロップでの目視検証、取りこぼしの手動追いぼかしまでのワークフロー。「顔をぼかして」「顔にモザイク」「写真の顔を隠して」「人物を匿名化して」などのリクエストで使用する。
Analyze X creator subscription accounts through X's authenticated internal Web API. Use when asked to collect subscriber counts, subscription-only post counts, monthly prices, estimated gross monthly revenue, rankings, or summary statistics for X Subscriptions, including the user's managed set of subscribed creators.
X（Twitter）上の公開情報を検索し、投稿、アカウント、スレッド、最近の話題、評判、反応を根拠となる x.com URL 付きで調査する。「X で検索して」「X でこの投稿やアカウントを探して」「X で最近何が話題？」「X 上の反応や評判を調べて」などで使用する。投稿、返信、引用、いいね、フォロー、ブロック、ミュート、報告、削除などの書き込み操作や、指定された X URL またはログイン済み X 画面そのものを開いて閲覧・確認する依頼には使用しない。
chrome-devtools MCP でログイン済み Chrome を使い、X (Twitter) の内部 Web API (api.x.com / i/api) を fetch で呼んで一括操作する。ブロック解除、ブロック、ミュート、フォロー解除などをまとめて処理したいときに使う。X のレートリミット (短い窓あたり約 10 件) の回避方法を含む。「X で全員ブロック解除して」「まとめてミュート」「一括でフォロー解除」などのリクエストで使用する。
Check Luma event guests against X profile, follow, mutual-follow, affiliation, and recent-account-activity requirements. Use when Codex needs to review a Luma event guest table, extract pending guests and X profile links, identify missing/invalid/deleted/protected X accounts, use X relationship lookup to verify whether guests follow the logged-in organizer account, check whether candidates have posted from their own X account within the last month excluding repost-only activity using read-only internal APIs, prioritize mutual follows before followed-by-only candidates, check whether a specific X handle registered and what current Luma status it has, manage X rate limits without causing 429s, and report decline or approval-support candidates without ever performing approve, decline, or other guest write actions.
Archive only the current Codex App thread when the user invokes /archive or $archive to finish the current thread. Use the Codex App thread archive tool without passing a thread id so no other thread is archived.
| name | design-system |
| description | デザインシステムの新規構築と既存ルールの強制を行う。トークン設計、コンポーネント設計、 プロジェクトセットアップ、日本語タイポグラフィをガイドする。 「デザインシステムを作りたい」「DS を構築」「コンポーネントライブラリを作る」 「トークンを設計」「デザインシステムに従って」などのリクエストで使用する。 |
デザインシステムの構築から運用までをガイドするスキル。2 つのモードで動作する。
プロジェクトに .design-system/system.md が存在しない場合に適用。
トークン設計 -> 技術選定 -> プロジェクト初期化 -> コンポーネント実装の順にガイドする。
各フェーズの決定事項を .design-system/system.md に記録し、次のフェーズへ進む。
プロジェクトに .design-system/system.md が存在する場合に適用。
ファイルに記録されたトークン、パターン、技術スタックに従ってコーディングを強制する。
.design-system/system.md を探す既存プロダクトがある場合のみ実施。新規の場合は Phase 2 へ。
出力: 矛盾リストと優先コンポーネントリストをユーザーに提示。
ユーザーと対話して 3-5 個のデザイン原則を策定する。
質問する内容:
各原則に Do/Don't の具体例を添える。
出力例:
1. 明確さ優先 - 装飾より情報の伝達を優先する
Do: ラベルを省略しない、エラー原因と対処法を両方伝える
Don't: アイコンだけで意味を伝えようとしない
決定内容を .design-system/system.md の Design Principles セクションに記録。
references/token-design.md を参照して以下を決定する。
決定事項:
ユーザーにカラー候補を提示する際は、既存ブランドカラーがあるか確認する。
日本語フォントは references/japanese-typography.md を参照。
出力フォーマット(DTCG JSON):
{
"color": {
"primitive": {
"blue-500": { "$type": "color", "$value": "#3b82f6" }
},
"semantic": {
"primary": { "$type": "color", "$value": "{color.primitive.blue-500}" }
}
}
}
決定内容を .design-system/system.md の Tokens セクションに記録。
references/tech-stack-guide.md を参照し、ユーザーと対話して決定する。
決定事項:
ユーザーの経験や好みに合わせて推奨構成を提案する。 迷った場合のデフォルト推奨: React + Tailwind v4 + Radix UI + CVA + tsdown + pnpm + Turborepo
決定内容を .design-system/system.md の Tech Stack セクションに記録。
references/project-setup.md を参照してモノレポを構築する。
design-system/
apps/
docs/ # Storybook
packages/
tokens/ # DTCG JSON + Style Dictionary
components/ # UI コンポーネント
icons/ # SVG -> コンポーネント変換
pnpm-workspace.yaml
turbo.json
package.json
各パッケージの初期ファイルを生成:
packages/tokens/: Phase 3 で決定したトークンを DTCG JSON で配置、Style Dictionary 設定packages/components/: Headless UI + バリアント管理のベース設定packages/icons/: SVG 変換パイプラインapps/docs/: Storybook 設定references/component-patterns.md を参照してコンポーネントを実装する。
推奨実装順:
cn() ヘルパー、型定義各コンポーネントの実装時に守ること:
...rest props)Storybook のセットアップと拡張:
tags: ['autodocs'])ドキュメントサイトが必要な場合は Astro Starlight を推奨。
npm パッケージとしての公開準備:
package.json の exports フィールドで ESM エントリを定義"sideEffects": false で Tree-shaking を有効化MCP サーバー化(オプション): デザインシステムのトークンとコンポーネント情報を MCP 経由で AI エージェントに公開する。 日本企業の先行事例: Spindle MCP, kamii-mcp, MFUI MCP
.design-system/system.md が存在する場合、以下のルールを適用する。
#xxx, rgb())を使わない。トークン経由で参照するreferences/japanese-typography.md と system.md の Japanese Typography セクションに従う:
ルールから逸脱する必要がある場合:
構築モードの各フェーズで決定した内容を以下のフォーマットで保存する。 強制モードではこのファイルを読み込んでルールを適用する。
# Design System: [project-name]
## Design Principles
1. [原則名] - [説明]
Do: [具体例]
Don't: [具体例]
## Tokens
### Colors
- primitive: { blue-500: #3b82f6, ... }
- semantic: { primary: blue-500, background: white, ... }
- dark: { background: gray-900, ... }
### Typography
- font-family: "Noto Sans JP", sans-serif
- base-size: 16px
- scale-ratio: 1.25
- sizes: { xs: 10px, sm: 13px, base: 16px, lg: 20px, xl: 25px, 2xl: 31px }
### Spacing
- base: 4px
- scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80]
### Elevation
- level-0: none
- level-1: 0 1px 2px rgba(0,0,0,0.05)
- level-2: 0 4px 6px rgba(0,0,0,0.07)
- level-3: 0 10px 15px rgba(0,0,0,0.1)
- level-4: 0 20px 25px rgba(0,0,0,0.15)
### Border
- radius: { sm: 4px, md: 8px, lg: 12px, full: 9999px }
### Breakpoints
- sm: 640px, md: 768px, lg: 1024px, xl: 1280px
## Component Patterns
- headless-base: Radix UI
- variant-tool: CVA
- styling: Tailwind CSS v4
- component-style: Compound Components
## Tech Stack
- framework: React
- styling: Tailwind CSS v4
- build: tsdown
- monorepo: pnpm + Turborepo
- docs: Storybook 10
- test: Vitest + Testing Library
- versioning: Changesets
## Japanese Typography
- font: "Noto Sans JP", sans-serif
- line-height-body: 1.7
- line-height-heading: 1.3
- letter-spacing: 0.03em
## Exceptions
(ルールからの逸脱を記録)