Claude Code、Codex、あなたのエージェントのためのデザインスキル

p5.js を使用したジェネラティブアート：シード付きパーティクル、フローフィールド、調整可能なパラメータ。

必要なもの：p5.js

• Images & Generative Art
• ジェネラティブアート
• OpenDesign 内

Anthropic の公式ブランドカラーとタイポグラフィを任意の成果物に適用します。Anthropic ブランド専用です。

• Brand & Design Systems
• OpenDesign 内

PNG または PDF で提供されるオリジナルポスターや静止ビジュアル作品。

• Images & Generative Art
• PNG / PDF
• OpenDesign 内

新規または既存の Web UI に対して、独自のビジュアル方向性、タイポグラフィ、レイアウトを設定します。

• Web & UI
• UI コード
• OpenDesign 内

Slack のサイズと寸法制限に準拠したアニメーション GIF。

• Motion & Video
• GIF
• OpenDesign 内

ページ、スライド、ドキュメント向けのカラーとタイプのテーマを適用または生成します。

• Brand & Design Systems
• OpenDesign 内

React、Tailwind、shadcn/ui を使用したマルチコンポーネント対話型 HTML 成果物。

• Web & UI
• HTML
• OpenDesign 内

美学、タイプ、カラー、レイアウト、モーションを含む完全なデザインシステムを提案するプロダクトデザインコンサルテーション。

• Brand & Design Systems
• デザインシステム
• OpenDesign 内

合意されたデザイン方針から、プロダクション品質の HTML/CSS を作成します。

• Web & UI
• HTML

構築済みページのデザイナー視点QA：不整合、スペーシング、階層、雑なパターンを検出し、修正します。

• Design Review & Accessibility
• レビューレポート
• OpenDesign 内

複数のデザインバリエーションを並行生成し、フィードバック用の比較ボードを開きます。

• Web & UI
• UI コード

説明または Mermaid ソースから編集可能な Excalidraw ファイルと、レンダリング済みの SVG および PNG を生成します。

必要: Excalidraw

• Diagrams & Data Visualization
• Diagram

実機上での iOS アプリのビジュアルデザイン監査。

• Mobile Apps
• レビューレポート

実装前にデザインプランの完全性と体験リスクをレビューします。

• Design Review & Accessibility
• レビューレポート
• OpenDesign 内

ソーシャルメディア、広告、ウェブサイトヒーロー、印刷物用のバナーを作成します。

• Images & Generative Art
• Image

ブランドボイス、ビジュアルアイデンティティ、メッセージングフレームワーク、ブランド一貫性。

• Brand & Design Systems

ブランドアイデンティティ、デザイントークン、UI スタイリング、ロゴ生成、コーポレートアイデンティティプログラム。

必要: 画像生成サービス（Gemini、Atlas Cloud、または MuAPI）

• Brand & Design Systems

3 層デザイントークン、コンポーネント仕様、スライド生成。

• Brand & Design Systems
• デザインシステム

Chart.js、デザイントークン、レスポンシブレイアウトを備えた戦略的 HTML スライドデッキ。

必要: Chart.js

• Presentations
• HTML スライド
• OpenDesign 内

shadcn/ui、Tailwind CSS、canvas ベースのビジュアルを使ったアクセシブルな UI スタイリング。

必要: shadcn/ui、Tailwind CSS

• Web & UI
• UI コード

Web、モバイル、デスクトップ向けの UI/UX デザインインテリジェンス:レイアウト、カラー、タイプ、UX ルール。

• Web & UI
• UI コード
• OpenDesign 内

プロジェクト内の shadcn コンポーネントを追加、検索、修正、スタイリング、構成します。

必要: shadcn/ui

• Web & UI
• UI コード

プロダクション品質でアクセシブル、レスポンシブなユーザー向け UI を構築します。

• Web & UI
• UI コード

画像生成を通じて、プレミアムなブランドガイドラインボード、ロゴシステム、アイデンティティデッキを作成します。

必要: 画像生成サービス

• Brand & Design Systems
• Image
• OpenDesign 内

ランディングページ、ポートフォリオ、リデザインのための、洗練されたフロントエンドデザインを提供します。

• Web & UI
• UI コード
• OpenDesign 内

エディトリアルレイアウト、レイアウトバリエーション、GSAP モーションを統合したフロントエンドスキル。

必要: GSAP

• Web & UI
• UI コード

ハイエンドエージェンシーの細部を伝授:タイポグラフィ、スペーシング、シャドウ、カード、モーション。

• Web & UI

まずデザイン画像を生成・分析し、その後マッチするページを実装します。

必要: 画像生成サービス

• Web & UI
• UI コード

画像生成による高精度なモバイル画面のコンセプトとフローを作成します。

必要: 画像生成サービス

• Mobile Apps
• Image
• OpenDesign 内

画像生成を通じて、セクションごとのウェブサイトデザインリファレンスを作成します。

必要: 画像生成サービス

• Web & UI
• Image
• OpenDesign 内

スイスタイポグラフィとターミナル美学を融合したブルータリストインターフェースを作成します。

• Web & UI
• UI コード

クリーンでモノクロームなエディトリアルスタイルのインターフェースを作成します。

• Web & UI
• UI コード

既存のウェブサイトやアプリを監査し、プレミアムな視覚品質にアップグレードします。

• Design Review & Accessibility
• レビューレポート

視覚的独自性を重視した Google Stitch 用の DESIGN.md を作成します。

必要: Google Stitch

• Brand & Design Systems
• DESIGN.md

インターフェースのデザイン、批評、監査、磨き上げ、アニメーション、洗練を一つのスキルで実現します。

• Design Review & Accessibility
• UI コード
• OpenDesign 内

テキスト、メモ、または記事を、生成されたシーンビジュアルを使った顔出しなしの解説動画に変換します。

必要: HyperFrames

• Motion & Video
• Video

Figma アセット、ブランドトークン、ストーリーボードを HyperFrames コンポジションにインポートします。

必要: HyperFrames, Figma

• Motion & Video
• Video

テンプレートが合わない場合に、カスタムマルチシーンHyperFrames動画を作成または編集します。

必要: HyperFrames

• Motion & Video
• Video

HyperFramesのアニメーションルール、シーンブループリント、トランジション、ランタイムアダプターです。

必要: HyperFrames

• Motion & Video
• Video

HyperFrames動画のクリエイティブディレクション：パレット、タイプ、構図、ボイスオーバー、ペーシングです。

必要: HyperFrames

• Motion & Video
• Video

HyperFramesのパンチイン、ズーム、リフレーム、Ken Burns効果、2D/3Dキーフレームです。

必要: HyperFrames

• Motion & Video
• Video

デザイン主導のショートモーショングラフィックス:キネティックタイポグラフィ、統計カウントアップ、ロゴスティング、ロワーサードを作成します。

必要: HyperFrames

• Motion & Video
• Video

製品URL、スクリプト、またはブリーフから製品ローンチやプロモーション動画を作成します。

必要: HyperFrames

• Motion & Video
• Video

フラグメント、分岐、プレゼンターモードを備えたインタラクティブなHyperFramesスライドショーです。

必要: HyperFrames

• Presentations
• HTML スライド

Markdown、Vueコンポーネント、コードハイライト、アニメーションを使った開発者向けスライドデッキです。

必要: Slidev

• Presentations
• HTML スライド

モバイルアクセシビリティと支援技術サポートを備えた、WCAG 2.2 準拠のインターフェースを実現します。

• Design Review & Accessibility
• UI コード

ブランドアイデンティティのインタビューを行い、Stitchを通じてランディングページを生成・反復します。

必要: Google Stitch

• Web & UI
• UI コード

スケーラブルなデザインシステム:トークン、テーマインフラストラクチャ、コンポーネントアーキテクチャを構築します。

• Brand & Design Systems
• デザインシステム

マイクロインタラクション、モーション、トランジション、ユーザーフィードバックパターンです。

• UX & リサーチ

KPI ダッシュボード：指標の選択、チャートの種類、レイアウト、リアルタイムパターンを設計します。

• Diagrams & Data Visualization
• Dashboard

Material Design 3 と Jetpack Compose を使用したネイティブ Android UI です。

• Mobile Apps
• UI コード

Apple の Human Interface Guidelines に従い、SwiftUI を使用したネイティブ iOS UI です。

• Mobile Apps
• UI コード

編集可能な PPTX デッキのジオメトリ、アクセシビリティ、パッケージ整合性を検証・修復します。

• Presentations
• PPTX

参照 PPTX を分析し、テーマ、タイポグラフィ、レイアウトリズム、診断情報を取得します。

• Presentations
• レビューレポート

編集可能な PPTX デッキ用の座標明示 JSON 仕様を作成します。

• Presentations
• PPTX

承認済みのアイコン、画像、SVG、インフォグラフィックを選択し、PPTX デッキに配置します。

• Presentations
• PPTX

React Native のスタイリング、ナビゲーション、Reanimated アニメーションです。

必要: React Native

• Mobile Apps
• UI コード

コンテナクエリ、流動的な文字サイズ、CSS Grid、モバイルファーストのブレークポイントを使用したレスポンシブレイアウトです。

• Web & UI
• UI コード

VoiceOver、NVDA、JAWS スクリーンリーダーを使用して Web アプリをテストします。

• Design Review & Accessibility
• レビューレポート

Tailwind CSS v4 を使用したデザインシステム：トークン、コンポーネントライブラリ、レスポンシブパターンです。

必要: Tailwind CSS

• Brand & Design Systems
• デザインシステム

統一されたビジュアルのためのタイポグラフィ、色彩理論、スペーシングシステム、アイコノグラフィ。

• Brand & Design Systems

自動テスト、手動チェック、修正ガイダンスを備えた WCAG 2.2 監査。

• Design Review & Accessibility
• レビューレポート

再利用可能な React、Vue、Svelte コンポーネントパターンと構成戦略。

• Web & UI
• UI コード

draw.io 図ファイル(.drawio、.drawio.svg、.drawio.png)を作成・編集します。

必要: draw.io

• Diagrams & Data Visualization
• Diagram

自然言語から Excalidraw 図やマインドマップを生成します。

必要: Excalidraw

• Diagrams & Data Visualization
• Diagram

パララックス、固定セクション、横スクロール、テキストスクロールアニメーション。

必要: GSAP

• Motion & Video
• UI コード

MCP ツールを通じて、Penpot でプロフェッショナルな UI/UX デザイン、コンポーネント、デザインシステムを作成します。

必要: Penpot MCP

• Web & UI
• デザインファイル

Power BI レポートデザイン:チャート選択、レイアウト、可読性、アクセシビリティを最適化します。

必要: Power BI

• Diagrams & Data Visualization
• Dashboard

実行中のウェブサイトを視覚的に検査し、レイアウトの問題を特定して修正します。

• Design Review & Accessibility
• レビューレポート

アニメーションをゼロから構築し、目的、ツール、プロパティ、カーブ、持続時間を順に決定します。

• Motion & Video
• UI コード

React Native と Expo のためのジェスチャー、スプリング、トランジション。

必要: React Native / Expo

• Mobile Apps
• UI コード

曖昧なモーションの説明を正確な用語に変換する逆引き用語集。

• Motion & Video

Apple のジェスチャー、物理的モーション、空間的階層を Web 向けに変換。

• UX & リサーチ
• UI コード

UI の洗練度、コンポーネント設計、アニメーション判断に関する Emil Kowalski の哲学。

• UX & リサーチ
• OpenDesign 内

UI 内でアニメーションすべき箇所を見つけ、パラメータを提案し、不要なものは却下します。

• Motion & Video
• レビューレポート

既存のモーションコードを監査し、優先順位付けされた独立した実装計画を作成します。

• Design Review & Accessibility
• レビューレポート

UI パーツの複数の本質的に異なるバージョンをライブビジュアルピッカーの背後で構築します。

• Web & UI
• UI コード

アニメーションコードのタイミング、インタラクション、仕上がりを高い品質基準でレビューします。

• Design Review & Accessibility
• レビューレポート
• OpenDesign 内

React の View Transition API を使用したネイティブのようなページトランジション。

必要: React

• Motion & Video
• UI コード

ゼロから作成、または PowerPoint(PPT)ファイルから変換した、アニメーション豊富な HTML スライドを提供します。

• Presentations
• HTML スライド
• OpenDesign 内

JSON 仕様をインタラクティブなターミナル UI として Ink でレンダリング。

必要: Ink

• Web & UI
• ターミナル UI

ラスター画像を生成または編集します：イラスト、写真、テクスチャ、スプライト、モックアップ。

必要: 画像生成サービス

• Images & Generative Art
• Image
• OpenDesign 内

マガジンまたはスイススタイルの単一ファイル横型 HTML PPT デッキで、スピーカービューと同期機能付き。

• Presentations
• HTML スライド
• OpenDesign 内

あらゆるプロダクトのブランドガイドライン(カラー、タイポグラフィ、ロゴ、トーン&マナー)を定義・適用します。

• Brand & Design Systems

10 の質問ウィザードを通じてブランドアイデンティティを一度キャプチャし、後のドキュメントやデッキに活用します。

• Brand & Design Systems
• デザインシステム

Markdown デッキをブランディングされたスライドに変換します。

• Presentations
• HTML スライド

デザイントークン、コンポーネントドキュメント、レスポンシブ計算、開発者への引き継ぎ。

• Brand & Design Systems
• デザインシステム

データドリブンなペルソナ、ジャーニーマップ、ユーザビリティテストフレームワーク、リサーチの統合。

• UX & リサーチ
• リサーチドキュメント

高忠実度の HTML プロトタイプ、スライド、アニメーション、ビジュアライゼーションを 3 つのドラフトから開始して作成します。

• Web & UI
• HTML

デザインまたはページの WCAG 2.1 AA 監査:コントラスト、キーボード、タッチターゲットを検証します。

• Design Review & Accessibility
• レビューレポート

ユーザビリティ、階層構造、一貫性に関する構造化されたデザインフィードバックを提供します。

• Design Review & Accessibility
• レビューレポート

デザインから開発者向けハンドオフスペックを作成:レイアウト、トークン、コンポーネント状態、ブレークポイントを含みます。

• Brand & Design Systems
• ハンドオフ仕様

既存のデザインシステムを監査、ドキュメント化、または拡張します。

• Brand & Design Systems
• デザインシステム

インタビュー、アンケート、テストメモからテーマと推奨事項を統合します。

• UX & リサーチ
• リサーチドキュメント

ユーザーインタビュー、アンケート、ユーザビリティテストを計画、実施、統合します。

• UX & リサーチ
• リサーチドキュメント

UX コピーを作成またはレビューします：マイクロコピー、エラーメッセージ、空状態、CTA。

• UX & リサーチ

GSAP コア API：to/from/fromTo、イージング、スタガー、matchMedia、モーション軽減。

必要: GSAP

• Motion & Video
• UI コード
• OpenDesign 内

Vue、Svelte などの非 React フレームワークでの GSAP：ライフサイクル、スコープ、クリーンアップ。

必要: GSAP

• Motion & Video
• UI コード
• OpenDesign 内

GSAP パフォーマンス：トランスフォーム、レイアウトスラッシュの回避、will-change、バッチ処理。

必要: GSAP

• Motion & Video
• UI コード
• OpenDesign 内

GSAP プラグイン：ScrollTo、ScrollSmoother、Flip、Draggable、SplitText、SVG および物理演算。

必要: GSAP

• Motion & Video
• UI コード
• OpenDesign 内

useGSAP フック、refs、コンテキスト、クリーンアップを使用した React および Next.js での GSAP。

必要: GSAP

• Motion & Video
• UI コード
• OpenDesign 内

ScrollTrigger を使ったスクロール連動アニメーション：ピン留め、スクラブ、トリガー、パララックス。

必要: GSAP

• Motion & Video
• UI コード
• OpenDesign 内

GSAP タイムライン：position パラメータ、ネスト、再生制御。

必要: GSAP

• Motion & Video
• UI コード
• OpenDesign 内

gsap.utils ヘルパー：clamp、mapRange、interpolate、snap、wrap、pipe。

必要: GSAP

• Motion & Video
• UI コード
• OpenDesign 内

PPT およびデザインタスク向けの、プレゼンテーション対応のカラーパレットとフォントペアリング。

• Brand & Design Systems

半径と間隔のレシピから一貫性のあるPPTスライド用ビジュアルシステム。

• Presentations

人物、ペット、物体、ロゴの写真を、キャプション付きの4つの GIF ステッカーに変換します。

• Motion & Video
• GIF
• OpenDesign 内

編集可能な PowerPoint（PPTX）スライドデッキを生成、編集、読み込みます。

• Presentations
• PPTX
• OpenDesign 内

GLSL シェーダー：レイマーチング、SDF、流体、パーティクル、プロシージャルビジュアル。

必要: GLSL / WebGL

• Images & Generative Art
• ジェネラティブアート
• OpenDesign 内

PptxGenJS で単一の PowerPoint スライドを実装します。

必要: PptxGenJS

• Presentations
• PPTX

余白、階層、タイポグラフィ、小さなレイアウトの問題を修正して、UI コードを素早く改善します。

• Design Review & Accessibility
• UI コード

既存のプロダクトリポジトリまたは公開ウェブサイトから DESIGN.md を作成または更新します。

• Brand & Design Systems
• DESIGN.md

ARIA、キーボード、フォーカス、コントラスト、フォームのエラーを監査して修正します。

• Design Review & Accessibility
• レビューレポート

カクついた CSS/JS アニメーションとスクロール連動モーションを発見し修正します。

• Motion & Video
• レビューレポート

プロダクトの画面をそのデザインエビデンスと照合して監査し、実装計画を作成します。

• Design Review & Accessibility
• レビューレポート

Stitch プロジェクトを分析し、セマンティックな DESIGN.md を作成します。

必要: Google Stitch

• Brand & Design Systems
• DESIGN.md
• OpenDesign 内

曖昧な UI アイデアを洗練された Stitch 最適化プロンプトに書き換えます。

必要: Google Stitch

• Web & UI
• OpenDesign 内

Stitch デザインを TanStack Query を使った React + Vite ダッシュボードに変換します。

必要: Google Stitch

• Web & UI
• UI コード

Stitch プロジェクトから Remotion のトランジションとズームを使ったウォークスルー動画を作成します。

必要: Google Stitch, Remotion

• Motion & Video
• Video
• OpenDesign 内

shadcn/ui コンポーネントの統合とカスタマイズ: 検索、インストール、ベストプラクティス。

必要: shadcn/ui

• Web & UI
• UI コード
• OpenDesign 内

静的 HTML とデザインシステム抽出を通じて、フロントエンドコードを Stitch デザインに変換します。

必要: Google Stitch

• Web & UI
• デザインファイル

任意のフレームワークのフロントエンドソースコードから完全な DESIGN.md を抽出します。

• Brand & Design Systems
• DESIGN.md

インライン化された CSS と画像を含む自己完結型の静的 HTML スナップショットを抽出します。

• Web & UI
• HTML

テキストまたは参照画像から Stitch で画面を生成、編集、バリエーション作成します。

必要: Google Stitch

• Web & UI
• デザインファイル

MCP ツールを通じて Stitch でデザインシステムを作成、更新、適用します。

必要: Google Stitch

• Brand & Design Systems
• デザインシステム

Stitch デザインをモジュール式の React + Vite コンポーネントに変換または同期します。

必要: Google Stitch

• Web & UI
• UI コード

Stitch HTML デザインを React Native コンポーネントに変換または同期します。

必要なもの: Google Stitch、React Native

• Mobile Apps
• UI コード

ダッシュボード、管理パネル、SaaS ツール、設定ページのためのクラフト重視のインターフェースデザイン。

• Web & UI
• UI コード

ホバー、シャドウ、ボーダー、アイコン、タイプ、マイクロインタラクションの洗練のためのデザインエンジニアリング原則。

• UX & リサーチ

WCAG 2.2 に従ってウェブアクセシビリティを監査し改善します。

• Design Review & Accessibility
• レビューレポート

モーションデザインの原則を適用：タイミング、イージング、コレオグラフィー、アニメーションの基礎。

• Motion & Video

エンドツーエンドのユーザーリサーチアシスタント:定性的・定量的調査、ガイドと計画。

• UX & リサーチ
• リサーチドキュメント

Material Design 3 のトークン、コンポーネント、アダプティブレイアウトを実装します。

• Mobile Apps
• UI コード

Kowalski、Krehel、Tompkins に基づいた、目的のあるインタラクションモーション、または既存のアニメーションのレビュー。

• Motion & Video

色の命名、理論、色空間、パレット、ランプ、グラデーション、変換、コントラスト。

• Brand & Design Systems
• OpenDesign 内

AntV API を通じて、棒グラフ、折れ線グラフ、円グラフ、レーダーチャート、サンキーダイアグラム、マインドマップ、フローチャートとしてデータをレンダリングします。

必要なもの: AntV API

• Diagrams & Data Visualization
• チャート画像

与えられたテキストからインフォグラフィックを作成します。

必要なもの: AntV API

• Diagrams & Data Visualization
• Image

ユーザー中心で、アクセシブルなマイクロコピー:ボタン、ラベル、エラー、フォーム、オンボーディング。

• UX & リサーチ