スキルを探す

StripeやLinearなど54のサイトの配色・文字・余白を参考に、HTML/CSSのページを制作します。部品や画面幅に応じた表示も揃えるスキル。

• Stripeを参考にしたLP制作
• Linearを参考にしたダッシュボード制作
• 資料サイトのデザイン制作

画面の配置や情報の順序を検討するための白黒のワイヤーフレームをSVGで作り、複数画面の流れや注釈、まとめて閲覧できる確認用ページも用意するスキル。

• 実装前に画面配置を検討したいとき
• モバイルやデスクトップ画面の構成確認
• 複数画面にまたがる流れの整理

レビューで受け入れた成果物を、CLIやコードエージェント、Figmaなど指定した作業先へ引き渡し、成果物の管理情報に出力先と配布履歴を追記するスキル。

• 確認済み成果物をコードエージェントへ渡す
• 編集結果を元のFigmaファイルへ戻す
• 成果物をGitHubへPRで渡したいとき

ソースコードやFigmaの抽出データ、スクリーンショットから色・書体・余白などのデザイン設定を集め、出典や使用箇所を添えたJSONに整理します。

• コードに散らばるデザイン設定の整理
• Figmaのデザイン移行準備
• スクリーンショットからの設定抽出

Figmaファイルから要素の階層、色や文字などのデザイン設定、書き出し対象の画像素材を抽出するスキル。後続の変換や実装で使えるファイルとして保存します。

• Figmaの要素構造を抽出したいとき
• 色・文字・余白の設定を集めたいとき
• 実装用の素材を準備したいとき

Figmaのデザインをコードに落とし込む際のプロジェクト固有のルールを作り、色や余白などの共通値、命名規則、自動チェックの基準を一か所にまとめます。

• Figmaからの実装ルールを作りたいとき
• デザインの共通値と命名規則の整理
• 自動チェックの基準をまとめたいとき

コードベースをもとにFigmaのデザインシステムライブラリを作成・更新します。実装済みの部品と、デザイン側で参照するライブラリを揃える作業に使えます。

• コードからFigmaライブラリを作りたいとき
• 実装に合わせたデザインライブラリの更新
• デザインの参照資料と実装を揃えたいとき

コードや文章の説明をもとに、Figmaの画面を作成・更新するスキル。デザインシステムの部品と、色や余白などの共通設定を使ってアプリ画面を再現します。

• アプリのコードをFigmaに移したいとき
• 文章の説明から画面を作りたいとき
• 共通部品を使った画面の更新

Figma Plugin APIのスクリプトを実行し、キャンバスへの書き込みや内容の確認、変数の操作、デザインシステムに関わる作業を進めるスキル。

• スクリプトでキャンバスに書き込みたいとき
• Figmaのキャンバス内容を確認したいとき
• 変数やデザインシステムを扱いたいとき

Figmaのデザインを、元の見た目に忠実な本番向けコードへ変換するスキル。フレームをフロントエンド担当のAIエージェントへ渡し、画面の実装に使えます。

• Figmaの画面を実装したいとき
• デザインをAIエージェントへ引き継ぐ
• デザインの見た目をコードで再現

Figmaのデザイン部品とコードの部品をCode Connectで関連付け、共通のデザインルールや部品の更新をコード側へ自動反映するためのスキル。

• Figmaとコードの部品を関連付けたいとき
• デザインシステムの更新を反映したいとき
• Code Connectを導入したいとき

Figma DesignやFigJamに空の新規ファイルを作成します。デザインシステムの整備やワークショップを、エージェントで進める際の最初の準備に使えます。

• 空のFigma Designを作りたいとき
• ワークショップ用のFigJam準備
• デザインシステム作業の初期準備

Figmaファイルを解析し、ページや画面、コンポーネント、デザイン上の共通値の関係を図にまとめるスキル。対話型ダッシュボードでデザイン構造を確認できます。

• Figmaファイルの全体構成を把握したいとき
• コンポーネントや配置先の関係の確認
• デザインの共通値の使われ方の確認

Web画面・ターミナルUI・ページ文書の見た目と操作状態を検証。画面幅や明暗テーマを変えた画像を根拠に、項目ごとの合否を整理するスキル。

• UI変更後の表示確認
• デザイン見本との比較
• 日本語の文字切れ・改行の点検

Web画面の新規作成や改修で、見た目、配置、動き、使いやすさを整えるスキル。デザイン方針を文書化し、実装と実ブラウザでの表示・性能確認まで進めます。

• 参考画像やサイトからLPを作りたいとき
• 既存の管理画面の配置や見た目の改善
• アニメーションや操作時の反応の追加

本人が話す動画のナレーションを残し、Museとの会話や実際の成果物を声に合わせて見せる縦型動画に編集するスキル。体験談を共有用のクリップにまとめます。

• Museの体験談を縦型動画にしたいとき
• 声に合わせて会話を重ねたいとき
• 体験談と実際の成果物を一緒に見せたいとき

Figmaの画面から部品のバリエーション、余白、色などの共通設定や画像素材を読み取り、デザインをコードで実装するための情報を整理するスキル。

• Figma画面の実装情報を集めたいとき
• 部品のバリエーションや余白の確認
• 実装用の画像素材の取り出し

既存の製品やブランド資料から、色・書体・画像・文章のルールを整理します。再利用できるReact部品と画面見本を備えたデザインシステムを作るスキルです。

• ブランド素材とデザイン規則の整理
• 既存デザインからReact部品を作りたいとき
• 製品画面を操作できる見本にしたいとき

色・書体・レイアウト・動きのルールを一つのファイルに整理。Webサイトや動画、PDFからの抽出と、動画・スライド・デザインツールへの適用を支援します。

• 希望する雰囲気からデザイン指針の作成
• WebやブランドPDFから見た目の抽出
• 動画・スライド・デザインの見た目の統一

HyperFramesの動画制作を、プロジェクト作成から素材追加、検査、プレビュー、書き出しまで進めます。一括・クラウド描画の選択や、制作中のエラー調査も扱うスキルです。

• 動画プロジェクトを作成・確認したいとき
• ビルドや描画の失敗を調べたいとき
• データ別の動画を一括出力したいとき

文字、数字、グラフ、ロゴ、地図などに動きを付ける短尺映像を、素材の準備から構成・検証まで進め、確認後にMP4や透過動画へ書き出すスキル。

• 短いタイトルや引用を動かしたいとき
• 数値をカウントアップやグラフで見せたいとき
• ロゴの登場アニメーション制作

動画やアニメーションの依頼内容と既存プロジェクトの状態を確認し、適した制作手順へ案内します。新規制作から字幕追加、編集、検証、書き出しまで扱います。

• Webサイトや企画から製品紹介動画を作りたいとき
• 既存映像に字幕や情報カードを追加したいとき
• 既存のHyperFramesの編集を再開したいとき

複数シーンの紹介映像や既存素材の再編集など、自由な構成の動画をHyperFramesで制作・修正します。構成づくりから素材配置、動きや音声の組み立て、検証までを扱います。

• 複数シーンのブランド映像制作
• 既存映像のカットと並べ替え
• 静止タイトルやループの制作

商品サイトのURLや台本、制作概要をもとに、製品紹介・発売告知の動画を作ります。素材収集からブランドに沿った画面設計、構成、ナレーション、映像の組み立てを進めます。

• SaaSやアプリの公開告知
• 新機能を紹介したいとき
• 支給された台本のプロモーション動画化