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

現実的な極端データと開発専用の比較トグルで既存UIをストレステストし、修正の前に失敗を報告します。

コンポーネントのソース、既存のデモデータ、フィールドの上限。目視確認用に、動作するアプリとブラウザ。

• UIストレステスト
• エッジケース用フィクスチャ
• レビューレポート

Webアニメーションのフレーム落ちを診断します。対象は、描画コスト、メインスレッドの競合、フレームごとのReact更新、継承されたCSS変数です。

アニメーションのソースと再現可能な操作。性能を検証するためのブラウザのプロファイリングと実際の対象デバイス。

• Webアニメーション
• フレームパフォーマンス
• 診断レビュー

提供されたスクリーンショットを既存アプリで再現し、リファレンスのビューポートでレンダリングして、目に見える違いを修正します。

読み取り可能なリファレンス画像、その対象ビューポート、プロジェクトへのアクセス、利用可能なアセットを用意してください。視覚的な一致を検証するには、ブラウザでのレンダリングが必要です。UIZZEアカウントもMCP接続も不要です。

• スクリーンショットからコードへ
• リファレンスの再現
• UI実装

動画リクエストを適切なワークフローに振り分け、既存プロジェクトを再開し、HTMLのコンポジション、メディア、プレビュー、レンダリングを調整します。

CLIにはNode.js 22以上とFFmpegが必要です。まずコアスキルから始め、作成用ワークフローは必要に応じてインストールされます。メディアサービスやクラウドレンダリングには追加の要件がある場合があります。

• HTMLから動画へ
• ワークフローのルーティング
• 動画制作

丁寧に作られたアイソメトリックなSVGの仕組みとモデル駆動のインタラクションで、技術的なアイデアを説明します。

キットにはNode.js 20.10以上と、チェック用のChromeまたはChromiumが必要です。skills CLIには別のNode要件があり、READMEにはCLI 1.7.1向けに22.20以上と記載されています。

• アイソメトリックSVG
• 技術解説
• インタラクティブな図

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
• UI コード

視覚的独自性を重視した 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
• デザインシステム

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

• Motion & Video
• UI コード

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 向けに変換。

• Web & UI
• UI コード

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

• Web & UI
• 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 コード

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

• Web & UI

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 & リサーチ

各アクセシビリティの指摘を、対象要素、修正案、検証結果と結びつけたまま管理します。

同梱ツール用のPython、ソースへのアクセス、文脈に応じた検証のためのブラウザまたは支援技術の環境が必要です。

• アクセシビリティ
• デザインレビュー
• フロントエンド

議論、エビデンス、スライドタイトルを軸に学術発表を設計します。PPTXファイルは別のツールで作成します。

別のPPTXスキルが必要です。エントリーでは、実装に関連する依存関係として markitdown、PptxGenJS、LibreOffice、Poppler が挙げられています。

• プレゼンテーション
• 学術研究
• PowerPoint

Illustratorのドキュメント、アートワーク、書き出しを作成・編集するExtendScriptスクリプトを書きます。

Adobe Illustrator CC以降が必要です。生成されたスクリプトは、そのExtendScript環境で実行されます。

• ベクターデザイン
• 自動化
• Illustrator

調査上の観察を、元の根拠とのつながりを保ったままテーマにまとめます。

提供された書き起こしやノートを読めるエージェントを使用してください。参加者IDとデザイン上の問いを用意してください。このスキルは既存の根拠を統合するもので、インタビューを実施するものではありません。

• UXリサーチ
• 統合・分析

ひとつのトランジションに明確な目的を与え、インターフェースの状態変化を支えるモーションのプロファイルを設計します。

インターフェースの変化前後の状態、トリガー、対象デバイスを用意してください。実行可能なプレビューで、タイミング、中断、モーション低減時の挙動を確認します。

• UIモーション
• デザインガイダンス

ビジュアルの方向性を選ぶ前に、プロダクト本来のオブジェクトと制約から始めます。

プロジェクトファイルを読めるエージェントと、視覚確認のためのレンダリング環境が必要です。有料の UIZZE MCP は任意です。

• UIデザイン
• デザインレビュー

AntV G2 v5のマーク、エンコーディング、スケール、インタラクションを使ってチャートを作成します。

@antv/g2 v5、またはドキュメントに記載されたブラウザ用バンドルが必要です。任意のリファレンス取得には、外部のAntVコンテキストサービスを使用します。

• Data Visualization
• チャート
• JavaScript

AntV G6 v5 で、グラフレイアウトやインタラクティブな探索を含むネットワークデータを可視化します。

@antv/g6 v5 を使うアプリケーション、ブラウザ上のグラフコンテナ、そして文書化された参照取得サービスが必要な場合はネットワークアクセスが必要です。API はインストール済みのリリースで確認してください。

• グラフ可視化
• ネットワーク
• AntV

AntV X6で、接続、編集の挙動、必要なプラグインを備えたノード・エッジ型ダイアグラムエディタを構築します。

ブラウザキャンバスと必要なプラグインを備えた、文書化されている@antv/x6 v3のAPIを使用します。追加の参照資料を取得するにはネットワークアクセスが必要です。例はインストール済みのバージョンで確認してください。

• ダイアグラムエディタ
• ノードインターフェース
• AntV

出典に基づくオリジナルの解説動画を、ナレーションと一貫したビジュアル表現で制作します。

提供されたRemotion/Nodeプロジェクト、Python補助スクリプト、レンダリング環境、適切なTTS経路が必要です。文書化されている中国語と英語の既定設定では、異なる音声エンジンを使用します。マルチエージェントでの構築も記載されたワークフローの一部です。

• モーショングラフィックス
• 動画
• Remotion

スクリーンショット、キャプション、ビジュアル素材から、統一感のあるアプリストア掲載画像セットを構成します。

パッケージ済みの Next.js エディタ、対応する Node とパッケージマネージャーの環境、ブラウザが必要です。PNGエクスポートには html-to-image を使用します。ソースのキャプチャ、フォント、その他の素材には適切な利用権が必要です。

• アプリマーケティング
• スクリーンショット
• ローカライズ

Appleプラットフォームのインターフェースを、プラットフォーム固有のデザインおよびアクセシビリティのガイダンスに照らしてレビューします。

チェッカー用のPython 3(標準ライブラリのみ使用)、最新のApple Human Interface Guidelines(HIG)、そして動作確認のための実機またはシミュレータが必要です。

• ネイティブUI
• アクセシビリティ
• デザインレビュー

記事の適切な箇所で要点を説明する挿絵を計画し、生成します。

利用可能なラスター画像生成バックエンドと、このスキルの参照ファイルおよび設定ファイルが必要です。バックエンドへのアクセスと費用は別です。

• 編集用イラスト
• コンテンツデザイン

コミックページを生成する前に、各コマで何を教えるかを計画します。

利用可能な画像バックエンド。付属の PDF 結合スクリプト用に、Bun または npx ベースの Bun ランタイム。

• コミック
• 教育デザイン
• ストーリーテリング

1つの中心的なアイデアを軸に、定義された構図とビジュアルスタイルで記事カバーを生成します。

利用可能なラスター画像バックエンドと、スキルの設定およびアートディレクションの参照資料。

• エディトリアルデザイン
• カバー画像

プロトタイプ、プレゼンテーションのコンセプト、再利用可能なビジュアルシステムのために、ファイルベースのデザインワークフローを使います。

ファイルを扱えるエージェントと、リポジトリのメソドロジー、組み込みガイド、参照ドキュメント、スクリプトが必要です。エクスポートとインポートの経路には、それぞれ別の前提条件があります。

• プロトタイピング
• デザインシステム
• プレゼンテーション

関係、ラベル、コネクタの経路を、検査可能なベクターファイルに明示的に残します。

SVG用のテキスト/コード環境。付属のPNG変換スクリプト用に、Bun、またはnpx経由のBunが必要です。

• 図解
• SVG
• インフォメーションデザイン

バッチワークフローを含め、サポート対象のプロバイダーを通じて画像の生成・編集ジョブを実行します。

Bun、または npx 経由で使える Bun ランタイム、選択したサポート対象ルートに対応した完全なプロバイダーアダプター、および認証情報またはログインが必要です。

• 画像生成
• バッチワークフロー
• ビジュアル素材

素材に合った比較・階層・プロセス・概要のレイアウトで、コンテンツをインフォグラフィックにします。

利用可能なラスター画像バックエンドと、レイアウト・スタイル・設定のリファレンスが必要です。

• インフォグラフィック
• インフォメーションデザイン

イラスト付きスライドを生成し、共有用の画像ベースのデッキを組み立てます。個々のスライドオブジェクトは編集できません。

ラスター画像の生成バックエンドと、PPTX/PDF 組み立てスクリプト用の Bun または npx 経由の Bun が必要です。

• プレゼンテーション
• エディトリアルデザイン

1枚に1つの主要なアイデアを持たせた、視覚的に一貫した小紅書(Xiaohongshu)向け画像カードシリーズを作成します。

適切な参照機能に対応したラスター画像バックエンドと、設定およびカードレイアウトの参照資料が必要です。

• ソーシャルグラフィック
• コンテンツデザイン
• 画像カード

元の資料を、エディトリアルなタイポグラフィ、レイアウト、イラストを備えた読みやすい HTML 記事に変換します。

文書化されているビルドでは Node/npm、Vite、React、TypeScript、Reacticle を使用します。文書の抽出や任意の PDF 出力には追加のツールが必要になる場合があります。生成画像には、別途利用可能なバックエンドが必要です。

• エディトリアルデザイン
• HTML
• ロングフォーム

参加者のカードのグルーピングを分析し、ナビゲーションのカテゴリ案を作成するとともに、判断が分かれる項目を特定します。

各参加者のカードの配置、ラベル、調査方法を含む、完了済みのカードソート結果を用意してください。このスキルは提供された情報を分析するものであり、参加者の募集やデータ収集は含まれません。

• UXリサーチ
• 統合・分析

ファーストクリックテストを計画し、人々がタスクをどこから始めればよいか見分けられるかを確認します。

画面またはプロトタイプ、ユーザーの目標、リクルート条件を用意してください。このスキルが作成するのはテスト計画です。セッションの実施とクリックの収集には、別途調査の準備が必要です。

• UX
• デザインガイダンス

元資料をイラスト付きスライドに変換し、個別に編集できるスライド内容ではなく画像ベースのスライド内容でPPTXを組み立てます。

Python 3、利用可能な画像生成バックエンド、リポジトリの組み立て用および状態記録用スクリプトが必要です。実際の実行には、参照されているワークフロー文書が必要です。

• プレゼンテーション
• 画像生成

ブランドカラーを、使えるインターフェースのロールと、前景色と背景色の組み合わせへと落とし込みます。

ブランドカラー、インターフェースのロール、アクセシビリティの目標を用意してください。提案された色の組み合わせは、実際のコンポーネントの状態とコントラストチェックツールで評価します。

• カラーデザイン
• デザインガイダンス

見た目と同じ丁寧さで挙動を説明し、1つのコンポーネントを実装可能にします。

コンポーネントの目的、ビジュアルバリアント、対象プラットフォームを提供してください。出力は実装とテストのための仕様書であり、実装済みのコンポーネントではありません。

• デザインシステム
• 仕様書

システムが何を伝え、ユーザーに何を期待し、その2つが噛み合わないときにどう立て直すかを設計します。

対応するタスク、チャネルの制約、確認が必要な事項を用意してください。音声フローには、デバイスと音声認識のテストも必要です。文章のダイアログだけでは認識品質を確認できません。

• UX
• デザインガイダンス

色を反転させるのではなく、インターフェースの階層をダークサーフェスに置き換えます。

既存のライトモードのパレット、コンポーネント例、メディア素材から始めます。ダークモードのコントラスト、テーマ切り替え、画像の扱いは、レンダリングしたインターフェースで確認してください。

• カラーデザイン
• デザインガイダンス

1つのコンテンツソースから別のスライドレイアウトを生成し、ローカルエディターでプレビューしてエクスポートします。

Node.js 20以上と、パッケージ済みジェネレーターを使うための npm が必要です。編集やエクスポートの機能にはそのローカルプレビューサービスを使用してください。一般的な静的サーバーではそれらの API は提供されません。

• プレゼンテーション
• HTML スライド
• PPTX

最も凝ったグラフではなく、比較を理解しやすくするグラフを選びましょう。

実際のデータ、フィールド定義、読み手の問い、表示上の制約を用意してください。このスキルはグラフのデザインを導くもので、データの検証やグラフの実装は別のタスクです。

• Data Visualization
• デザインガイダンス

ビジュアルに関する判断に、コンポーネントが再利用できる名前と関係性を与えます。

既存のビジュアル値、コンポーネントの例、命名上の制約を用意してください。このスキルが定義するのはトークン名とその関係であり、エクスポートツールやフレームワークとの連携は別途セットアップが必要です。

• デザインシステム
• 仕様

1回のインタビューで振り返って再構成しようとするのではなく、セッションの合間に展開する体験を捉えます。

リサーチの目的、参加者の条件、期間、実際に使える記録ツールを用意してください。出力は調査計画です。募集、チェックイン、参加者データの収集は別途実施する必要があります。

• UXリサーチ
• 調査計画

まず目標となるスクリーンショットを用意し、それを実装のターゲットとして使います。

ターゲット画像が必要です。用意がない場合は画像生成へのアクセスが必要です。詳細なツール要件は選択した参照ワークフローに依存し、エントリファイルだけでは確認できていません。

• ビジュアルイテレーション
• ゲームデザイン
• プロトタイピング

ユーザーの視点を共有しつつ、直接のエビデンスと解釈を区別して示します。

調査メモを読み取れるエージェント、定義済みのユーザーまたはセグメント、そしてマップが判断材料となるデザイン上の意思決定が必要です。

• UXリサーチ
• 統合・分析

失敗したときに何が起きたかを説明し、作業内容を失わせることなく先へ進む手段を示します。

対象のフロー、既知の失敗ケース、そしてプロダクトが実際にサポートしている回復アクションを読み取れるエージェントが必要です。

• UX
• デザインガイダンス

Code Connectで、公開済みのFigmaコンポーネントを対応するコードコンポーネントにマッピングします。

接続済みのFigma MCP、公開済みコンポーネントとコードベースへのアクセス、そして現在有効なCode Connectの利用資格と編集権限が必要です。

• Figma
• デザインシステム
• 開発者へのハンドオフ

エージェントが Figma のデザインを実装する際に使うべきリポジトリのパス、コンポーネント、規約を文書化します。

Figma MCP の接続と対象コードベースへのアクセスが必要です。ルールの出力先形式はコーディングホストによって異なります。

• Figma
• デザインシステム
• エージェントルール

デザインシステムとつながったまま編集できるFigma画面を作成します。

接続済みのFigma MCP、対象ファイルへのアクセス、公開済みのデザインシステム、キャンバス操作用の補助スキルfigma-useが必要です。

• Figma
• UIデザイン
• デザインシステム

デザイントークンから始めてコンポーネントを追加し、再利用可能な Figma ライブラリを構築します。

編集可能なファイルにアクセスできる Figma MCP、リポジトリへのアクセス、および補助の figma-use Skill とヘルパー参照が必要です。

• Figma
• デザインシステム
• コンポーネントライブラリ

対象リポジトリのコンポーネントと規約を使ってFigmaデザインを実装し、その結果をデザインと比較します。

接続済みのFigma MCP、選択したデザインと対象リポジトリへのアクセス、視覚的な検証のために実行できるプレビューが必要です。

• Figma
• フロントエンドデザイン
• 開発者向けハンドオフ

最初のフィールドから送信完了まで、修正や再訪も含めた流れを具体的に定めます。

フォームの概要、必須フィールドと検証ルール、既存のフォーム画面を読み取れるエージェント。

• UX
• デザインガイダンス

寸法が指定されたモデリング作業を、確認と調整が可能なFreeCADオブジェクトに変換します。

FreeCADと付属のPythonが必要です。GUI作業では付属のPySideも、シーングラフ作業ではPivyも使用します。

• 3Dデザイン
• CAD
• Python

対応プロバイダーを通じて、プロジェクトに設定済みの認証情報を使い、画像アセットを生成して保存します。

対応プロバイダーの API キーとネットワークアクセスが必要です。モデルの利用可否と利用料金は別途確認してください。

• 画像生成
• ビジュアルアセット

最後のスワイプ操作だけでなく、ジェスチャーの前・最中・後に何が起こるかを設計します。

インタラクションの要件、対象プラットフォーム、ボタンやメニューから利用できる操作を読み取れるエージェント。

• UX
• デザインガイダンス

画像プロンプトを準備し、利用可能なネイティブ画像ツールまたは設定済みのローカルAPIワークフローで、生成や編集を実行します。

ローカルのAPIモードには、Garden の明示的な有効化、Node スクリプト、設定済みの認証情報が必要です。ネイティブモードはホストの画像ツールに依存します。モデルへのアクセス、料金、対応パラメーターは、その環境で確認する必要があります。

• 画像生成
• プロンプト設計
• 画像編集

インターフェースのユーザビリティをレビューし、専門家の判断を参加者調査として扱うことなく、各所見の根拠を記録します。

インターフェースを確認できるエージェント、定義済みのユーザータスク、関連するドメイン上の制約。

• UX
• デザインガイダンス

カードを作成する前に、箔加工の表現か、見る角度で画像全体が変化する表現を選びます。

画像生成、Python、Blender、および納品されるビューア用のWebランタイムが必要です。ソースには、パイプライン中にローカルで依存関係をインストールすることが記載されています。

• 3Dデザイン
• コレクターカード
• Blender

スライドの切り替えの連続ではなく、アートディレクションから短編映像を作ります。Huashu Art Motion は、コードで描くシーン、キャラクタースプライト、モーションレビューをローカルのレンダリングワークフローにまとめます。

ローカルレンダリングには uv、FFmpeg、Playwright Chromiumが必要です。人物風のスプライトには、既存のキャラクターフレームを用意するか、別の画像生成ワークフローを使ってください。音声とフォントには、それぞれ別途アセットと利用許諾が必要です。

• アートアニメーション
• Canvas
• 短編映像

ビジュアルリファレンス、デザインルール、トークンから、再利用可能なデザインスキルを作成します。

ファイルアクセス、適切なリファレンス確認ツール、validate.mjs 用の Node、視覚的な確認のためのブラウザでのレビューが必要です。ツールの利用可否は抽出の忠実度に影響します。

• デザインシステム
• スキル作成
• デザイントークン

無関係なシンボルを寄せ集めるのではなく、アイコンに一貫した構成ルールと命名体系を与えます。

代表的なアイコン、想定サイズ、必要なデザイン形式とコード形式を確認できるエージェント。

• デザインシステム
• 仕様

制作を依頼するイラストや繰り返し使うイラストに、共通のビジュアル言語と、インターフェース上での明確な役割を与えます。

ビジュアルの参考資料、プロダクトの色、イラストが表示される画面とサイズを確認できるエージェント。

• UX
• デザインガイダンス

スクリーンショットの上に編集可能なテキストを重ねるのではなく、視覚的なスライドを構造化されたデッキに変換します。

editppt CLI、適切な画像生成機能、複数ページ実行のためのマルチエージェント実行が必要です。PaddleOCRは任意で設定する補助手段であり、オフラインのヒントは品質特性が異なります。

• プレゼンテーション
• PowerPoint
• 再構築

ナビゲーションの見た目を決める前に、情報をどこに置くかを決めます。

プロダクトのコンテンツとユーザータスクに関する根拠が必要です。ソースは特定のデザインアプリケーションを必要としていません。

• UX戦略
• コンテンツ構造

リサーチ目的を、答えを誘導せず根拠となる事実を引き出す質問へと変換します。

主な入力はリサーチ目標、参加者の条件、セッション上の制約です。録画サービスや参加者募集サービスは提供されません。

• UXリサーチ
• インタビュー

プロダクトの意思決定を、人が成し遂げようとしていることを軸に捉え直します。

ユーザーリサーチ、または仮説と明記した内容が必要です。インタビュー自体は収集しません。

• UXリサーチ
• プロダクト戦略

個々のタッチポイントを、人が実際に経験する一連の体験としてつなげます。

既存のペルソナ、リサーチ、アナリティクスを使用します。自動の感情測定は確立されていません。

• UXリサーチ
• ジャーニーマッピング

ページの主張とビジュアルルールを、想定する単一のコンバージョンに結びつけます。

単一のアプリケーションランタイムは必要ありません。実装例ではTailwindの値、IntersectionObserver、任意のモーションツールを参照しています。

• ランディングページ
• コピーライティング
• Webデザイン

コンポーネントを生成する前に、実際の製品の提案内容をページのセクションに結び付けます。

Tailwind を使う互換性のある React または Next.js プロジェクトが必要です。参照される UI コンポーネントや任意のブランド分析ツールは、別途セットアップが必要な場合があります。

• ランディングページ
• コピーライティング
• フロントエンド

関連するページレイアウトで共通して使うカラム、マージン、レスポンシブな挙動を定義します。

指定されたランタイム依存はありません。有用なグリッド値を選ぶには、実際のコンテンツの制約が必要です。

• UIデザイン
• レスポンシブレイアウト

進捗について誤解を与えることなく、待機中に何が起きているかを示します。

正確な操作時間と進捗機能の情報は、プロダクトチームまたは実装チームから提供される必要があります。

• インタラクションデザイン
• ローディングUX

翻訳された文字列だけでなく、言語による違いにも対応できるインターフェースを準備します。

対象ロケールのテキスト、フォント、適切な言語・文化レビューが必要です。自動ローカライズプラットフォームは付属しません。

• デザインシステム
• ローカライズ

ブランドキット全体へ展開する前に、マークを構築してテストします。

ソースでは依存関係のないPythonヘルパースクリプトが説明されていますが、実際の画像レンダリングにはCairoSVG、Inkscape、Chromeなど、利用可能な対応レンダラーが必要です。

• ブランディング
• Logo Design
• SVG

アニメーションの参考資料だけでなく、小さなインタラクションの背後にある挙動をエンジニアリングに伝えます。

特定のモーションライブラリは必要ありませんが、対象デバイスでのテストは引き続き必要です。

• インタラクションデザイン
• UIハンドオフ

アニメーションに関する判断を、コンポーネントやチームをまたいで再利用できるようにします。

トークンの実装、またはプラットフォームごとの同等の仕組みが必要です。ソースはアニメーションフレームワークを必須としていません。

• デザインシステム
• モーション

参照画像と同梱のPythonスクリプトを使い、OpenRouter を通じて画像を生成・編集します。

uv、同梱のPythonスクリプト、適切なモデルアクセス権とクレジットを持つ OPENROUTER_API_KEY が必要です。

• 画像編集
• コンポジット

情報階層を、わかりやすいナビゲーションコントロールと、目的地間の明確な経路に落とし込みます。

情報階層とタスクの優先度が必要です。ナビゲーションのコンポーネントパッケージは付属しません。

• インタラクションデザイン
• ナビゲーション

製品全体の学習を求める前に、新規ユーザーが有用な成果にたどり着けるよう支援します。

後から計測を行う場合は、製品固有のアクティベーション定義と計測の仕組みが必要です。

• インタラクションデザイン
• オンボーディング

選択した形式に適したレイアウトルールを使い、HTMLページまたはスライドデッキにブランドシステムを適用します。

URLからのブランド抽出にはFirecrawlが必要です。デフォルトの出力は外部JavaScriptへの依存を避けていますが、フォントや画像素材については、それぞれの利用可否と権利の確認が必要な場合があります。

• Webデザイン
• プレゼンテーション
• ブランドシステム

表現力豊かなランディングページ、ポートフォリオ、インタラクティブなプレゼンテーションのための、方針が明確なフロントエンドガイドです。

フロントエンドのプロジェクトと、意図して選んだアニメーションライブラリが必要です。ガイド自体は特定のランタイムを必須としていません。

• フロントエンドデザイン
• モーション
• タイポグラフィ

動画のタイムライン上でスタイルを付ける前に、字幕テキストとタイミングを定義されたデータ構造で保持します。

Remotionプロジェクト、@remotion/captions、および文字起こし・インポート・表示に関連するリファレンスファイルが必要です。

• 動画
• 字幕

動画の企画書から Remotion プロジェクトとコンポジションをセットアップし、開発中にプレビューを利用できるようにします。

Node.js、Git、パッケージのインストール、Remotion Studio、関連するコンポジション/レイアウトのリファレンス。

• 動画
• React

Reactソースがレイヤー、タイミング、コントロールを公開する方法を変えて、動画をStudioで編集できるようにします。

文書化されたInteractive APIに対応するRemotionのバージョンが必要です。説明されている編集可能なパス補間には、さらに@remotion/pathsが必要です。

• 動画
• React
• インタラクション

Remotionで、狙うショットに合わせて手法、プロバイダー、データを選び、アニメーション地図を作ります。

Remotionに加え、選択した手法のライブラリとデータが必要です。取得したソースによると、Mapboxにはキーが必要です。

• 動画
• 地図

CSSアニメーションを使ったウェブページではなく、ビデオのタイムラインとして動作するReactマークアップを書きます。

プロジェクトのバージョンに合うRemotionと機能別パッケージ。追加のメディア、エフェクト、フォント、書き出しの要件は、リンク先のリファレンスで決まります。

• 動画
• React
• モーション

コマンドの連続実行にはマクロを、モデリング作業にロジックが必要な場合はスクリプトを選びましょう。

Rhino 7 以降。統合 Script Editor には Rhino 8 がソースの推奨環境です。

• 3Dデザイン
• CAD
• 自動化

スクロールで操作する、事前にレンダリングされたカメラ旅。リアルタイムの3D世界ではありません。

文書化されたパイプラインでは、Higgsfield と Monid の動画経路に加え、ffmpeg/ffprobeとブラウザ環境を使用します。プロバイダーのアカウント、クレジット、モデルの機能、任意の画像ルートは、あらためて確認が必要です。

• スクロールアニメーション
• 動画
• ランディングページ

失敗する検索も含め、情報取得の体験全体をデザインします。

検索サービスとクエリの計測は、このガイダンスの対象外です。

• インタラクションデザイン
• 検索

顧客に見える部分の背後にある運用業務を可視化します。

ステークホルダーとプロセスに関する根拠が必要です。単独では運用システムにアクセスしません。

• UX戦略
• サービスデザイン

Slangシェーダーを書き、その入力、リソース、出力がレンダラーとどう接続されるかを確認します。

対象バックエンドに適したSlangのコンパイル環境とレンダラー環境が必要です。統合に関する主張には、ホスト側での検証が必要です。

• シェーダー
• GPUグラフィックス
• 3Dデザイン

個別のピクセル調整ではなく、要素同士の関係と目的に基づいて余白を選びます。

特定のトークンツールは必要ありません。適用方法は既存のコンポーネントシステムによって異なります。

• UIデザイン
• デザイントークン

コンポーネントのあらゆる状態から、次に何が起こり得るかを記述します。

特定のstate-machineパッケージは必要ありません。実際の実装とテストは後続の作業として残ります。

• インタラクションデザイン
• 振る舞いのモデリング

構造を複製することなく、1つのコンポーネントライブラリの見た目を切り替えられるようにします。

実装にはプロジェクトのトークンシステムまたはプラットフォームの同等機能を使用します。ランタイムでの切り替えは、構築とテストが必要です。

• デザインシステム
• テーマ設定

既存のブランドマークやサービスアイコンを、プロジェクトに必要な形式で取得します。

レジストリまたはCDNへのネットワークアクセスが必要です。React、CLI、Figma、MCPとの連携は任意の利用形態であり、単純なURL取得の前提条件ではありません。

• ブランドアセット
• SVG
• クラウド構成図

読み込んだキャラクターやプロダクトモデルに、明確な再生とブレンドの方針を持たせます。

動作するThree.jsプロジェクトとレンダラーが必要です。ソースの例は、インストール済みのリリースに照らして確認してください。追加のコントロールやローダーは、選ぶ方法によって異なります。

• 3D
• Three.js

表面のスタイリングやアニメーションを加える前に、形状の表現方法を選びます。

動作する Three.js プロジェクトとレンダラーが必要です。ソースの例は、インストール済みのリリースに照らして確認してください。追加のコントロールやローダーは、選択する方法によって異なります。

• 3D
• Three.js

キャンバスとカメラの実際の座標を使って、ジェスチャーを意図した3Dオブジェクトに結び付けます。

動作する Three.js プロジェクトとレンダラーが必要です。ソース内の例は、インストール済みのリリースに照らして確認してください。追加のコントロールやローダーは、選ぶ方法によって異なります。

• 3D
• Three.js

やみくもに明るくするのではなく、意図したライティング構成でモデルを見やすくします。

動作する Three.js プロジェクトとレンダラーが必要です。ソースの例は、インストール済みのリリースに照らして確認してください。追加のコントロールやローダーは、選んだ方法によって異なります。

• 3D
• Three.js

サーフェスに合うシェーディングモデルを選び、想定する照明の下で確認します。

動作する Three.js プロジェクトとレンダラーが必要です。ソース内の例は、インストール済みのリリースで確認してください。追加のコントロールやローダーは、選んだ方法によって必要になります。

• 3D
• Three.js

スクリーンエフェクトを、無関係なフィルターの寄せ集めではなく、順序のあるレンダリングパイプラインとして扱います。

動作するThree.jsプロジェクトとレンダラーが必要です。ソースのサンプルは、インストール済みのリリースに照らして確認してください。追加のコントロールやローダーは、選択する方法によって異なります。

• 3D
• Three.js

マテリアルのプリセットでは表現できないエフェクトに、カスタムの頂点処理やピクセル処理を使います。

動作するThree.jsプロジェクトとレンダラーが必要です。ソースの例は、インストール済みのリリースに照らして確認してください。追加のコントロールやローダーは、選択する方法によって異なります。

• 3D
• Three.js

表面が引き伸ばされたり色あせたりしている原因を調べる前に、各画像へ正しい役割を割り当てます。

動作するThree.jsプロジェクトとレンダラーが必要です。ソースのサンプルは、インストール済みのリリースに照らして確認してください。追加のコントロールやローダーは、選択する方法によって異なります。

• 3D
• Three.js

文書化された少数のテキストスタイルから、読みやすい階層を作ります。

意味のある視覚的検証を行うには、実際のフォントファイル、または利用可能なプラットフォームフォントが必要です。

• UIデザイン
• タイポグラフィ

セッションを調整する前に、調査で何を明らかにする必要があるかを決めます。

利用可能なテスト対象物と参加者へのアクセスが必要です。リクルートやセッション用プラットフォームは提供されません。

• UXリサーチ
• ユーザビリティテスト

ユーザーが1つの目標を達成するまでに通りうるルートを示します。

ソースでは作図アプリケーションは必須とされていません。ただし、選んだ出力形式で明確な表記を保てる必要があります。

• プロトタイピング
• ユーザーフロー

顧客のストーリーを創作することなく、プロダクトの意思決定に一貫したユーザー像の拠り所を提供します。

調査に基づく主張には実際のユーザーエビデンスが必要です。提供された製品URLについては、別途調査が必要になる場合があります。

• UXリサーチ
• ペルソナ

インターフェースキャプチャ、ショットの指示、タイミング付きコンポジションから、Remotionプロダクト動画を計画し組み立てます。

Remotion/Node環境、ブラウザキャプチャ、ffmpegが必要です。一部のコンポーネントにはThree.js関連パッケージが必要で、任意の音楽分析や剪映(Jianying)エクスポートでは別途依存関係が加わります。Remotionに適用されるライセンスは、各自で確認してください。

• プロダクト動画
• Remotion
• モーションデザイン

最初に目に留めてほしいものを決め、その選択を支える構成にします。

実際のコンテンツとレンダリング後の確認が必要です。ビジュアルを採点するツールは同梱されていません。

• UIデザイン
• 構成

ビジュアルの方向性を定め、代表的なインターフェースを構築し、デザインを広げる前にブラウザーで確認します。

コードを扱えるエージェントと、ブラウザーで表示できるフロントエンド環境が必要です。選択したパターンによっては React、Babel、チャート、その他のライブラリを使用します。ブラウザー受け入れ確認には適切なブラウザーツールが必要です。

• フロントエンドデザイン
• プロトタイピング
• デザインシステム

タイミングを合わせたビジュアルシーンと任意のナレーションで、ブラウザベースのプレゼンテーションを作成します。録画は別の工程です。

Vite、React、TypeScript、Node のツールを使用します。任意の TTS は、選択したプロバイダー、認証情報、アダプターに依存します。最終的な録画にはブラウザのキャプチャまたは録画ソフトが必要です。

• プレゼンテーション
• モーション
• ナレーション

低忠実度の画面を、挙動やコンテンツについて議論できる精度に仕上げます。

特定のワイヤーフレーミングツールは必要ありません。ただし、使えるブリーフにはコンテンツと状態に関する情報を含める必要があります。

• プロトタイピング
• ワイヤーフレーム