OpenDesign

入力した文章やデータを、いいね・リポスト・閲覧数付きのX風投稿カードに整え、動画への重ね表示や画像共有に使う単一HTMLを作るスキル。

• 動画に投稿カードを重ねたいとき
• 印象的な言葉を共有用カードにしたいとき
• 入力データを短い投稿文にまとめたいとき

UIのデザインを観点ごとに10点満点で評価し、満点に必要な状態とAI生成にありがちな表現を示すスキルです。変更を統合する前の品質確認に使えます。

• UI変更の統合前に品質を確認したいとき
• デザインを観点別の点数で把握したいとき
• AI生成らしい定型表現を見直したいとき

文字組み、余白、配色、カードの重なり、控えめな動きを具体的なルールで整え、上質で落ち着いた印象のWebページをコードで制作するスキルです。

• 文字組みにこだわったLP制作
• 非対称なSaaS機能紹介の制作
• 柔らかな影と余白の作品紹介

Pixelbinで画像・動画の生成や編集を行い、見た目を整えたウェブページの制作にも使えるスキル。85種類以上のAPIを利用する作業を案内します。

• Pixelbinで画像・動画を生成したいとき
• 既存の画像・動画を編集したいとき
• 見た目を整えたウェブページの制作

デスクトップ全体、アプリのウィンドウ、指定したピクセル領域を撮影し、宣伝素材やデザインレビュー、不具合報告に使うスクリーンショットを用意するスキル。

• 宣伝用のアプリ画面を撮影したいとき
• デザインレビュー用の画像を用意したいとき
• 不具合報告用に画面の一部を残したいとき

Google Stitchで画面を生成する際のデザイン方針をDESIGN.mdにまとめます。配色、書体、配置、動き、避ける表現を具体化し、画面間の統一に使います。

• Google Stitchの画面に共通ルールを作る
• 配色や書体、部品の振る舞いを文書化
• モバイル表示と動きのルールを定義

太い見出しと幾何学的なカードを使い、スイス風のプレゼン型ページを単一HTMLで作るスキル。スライド移動やテーマ切り替え、注釈表示も組み込みます。

• プレゼン型の紹介ページ制作
• スイス風のHTMLスライド制作
• 操作できる製品発表ページ制作

Apple HIG、Material Design 3、WCAG 2.2に基づく300以上のルールを参照し、iOS・Android・Webに共通する画面設計を支えるスキル。

• iOS・Android・Web共通の画面設計
• HIGやMaterial Designを参照したいとき
• WCAG 2.2を踏まえた使いやすさの検討

PowerPoint資料の読み取り、新規作成、既存スライドの調整を支援。経営層向け資料や研修、製品レビューに使うレイアウトやテンプレートも扱います。

• 経営層向けの説明資料作成
• 研修用スライドの準備
• 製品レビュー資料の作成

PDFからのテキスト抽出、新しいPDFの作成、フォームの扱いを支援。プレスリリースやブランドに合わせた一枚資料、印刷用の制作物づくりに使えます。

• 既存PDFから文章を取り出したいとき
• プレスリリースをPDFにしたいとき
• ブランドに合わせた一枚資料の作成

AIエージェントが画面を作る際に、複数の小さなUI部品へ共通の制作ルールを適用するためのスキル。インターフェース全体の一貫性を保つ指針として使います。

• 複数のUI部品の一貫性を保ちたいとき
• 画面制作の共通ルールをエージェントに渡す
• 制作計画にUIの制約を取り入れたいとき

プルリクエストのレビュー指摘やマージ競合を確認し、修正と検証を進めるスキル。コミットやプッシュ前に読み取り専用の相互レビューを行い、対応結果と残る課題を報告します。

• PRのレビュー指摘を修正したいとき
• 上流の変更を保ったマージ競合解消
• コミットやプッシュ前の修正レビュー

既存のWebサイトやアプリの画面を点検し、文字・配色・配置・操作時の表示を改善します。現在の技術構成と機能を保ちながら、段階的に整えるスキル。

• 既存サイトのデザインを点検したいとき
• 定型的な画面パターンを見直したいとき
• 読み込み中・空データ・エラー表示の改善

shadcn/uiで、構造が整理され、アクセシビリティに配慮した画面の部品を実装するスキル。Stitchのデザイン反復作業と組み合わせて使えます。

• shadcn/uiで画面部品を作りたいとき
• アクセシビリティに配慮した部品の実装
• Stitchのデザイン反復と連動した開発

文書の分析と画像生成を組み合わせ、内容を整理したPPT資料を作るスキル。NanoBananaを使い、スタイルを指定した画像を含むプレゼンテーションにまとめます。

• 文書をPPT資料にまとめたいとき
• 生成画像入りのスライドを作りたいとき
• 文書分析から資料作成まで依頼したいとき

HTMLから生成したPPTXを元資料と照合し、文字の欠けやフッターへの重なり、斜体の消失を調査。原因を整理し、配置ルールを見直して再出力・検証します。

• HTMLと出力済みPPTXの比較
• 文字切れやフッターの重なり修正
• 斜体の消失やフォント変更の調査

UI/UXの設計パターンを探す際に、導入候補をエージェントへ知らせるカタログ項目です。検索データやテンプレートは含まず、実際の利用には配布元の一式が必要です。

• UI/UX設計の参考候補を探したいとき
• 必要なファイルの導入状況確認
• 配布元の導入方法を知りたいとき

SwiftUIの画面デザインで、AIにありがちな画一的な表現を避けるルール、方向性の助言、ブランド素材の扱い、5つの観点でのレビューを支援します。

• SwiftUI画面の方向性を決めたいとき
• AI特有の画一的な見た目の見直し
• ブランド素材の扱いを確認したいとき

画面のアニメーション実装を、動きの速さや自然さ、割り込み対応、描画性能、アクセシビリティの観点で点検します。修正案と理由を示し、承認可否を判断します。

• ドロップダウンやツールチップの動きの点検
• 連続操作への追従性を確認したいとき
• 描画性能を損なうアニメーションの発見

既存のOD Next計画に必要な画像などの素材を準備します。利用可能な機能や素材を再利用し、取得・寸法確認・非同期処理の結果回収まで、要件を保って進めます。

• 既存計画に必要な素材をそろえたいとき
• 複数ページで既存素材を再利用したいとき
• 配置に使う素材の寸法確認

Venice.aiで文章を音声に変換し、ナレーションや対話エージェントの声を用意するスキル。モデル、声、出力形式、ストリーミングを扱います。

• 原稿をナレーションにしたいとき
• 映像に重ねる音声の作成
• 対話エージェントの音声化

画像・音声・動画の生成に使うAIモデルを、ReplicateのAPIで探し、比較して実行するスキル。複数モデルを試し、用途に応じて切り替える作業に向いています。

• 画像生成モデルを探したいとき
• 音声生成モデルを比較したいとき
• 動画生成モデルを試したいとき

製品紹介や発表内容を、余白と大きな見出しを生かしたKeynote風のWebスライドにまとめます。左右キーやスペースキーで切り替え、ページ番号も表示します。

• 製品紹介のスライド作成
• 登壇用の発表資料を準備したいとき
• データ図を1枚で見せたいとき

コードや文書の生成で、省略コメントや未実装のひな形を避け、依頼された全項目を出力するためのスキル。長文は区切りと再開位置を明示します。

• ソースファイルを全文受け取りたいとき
• 指定したコンポーネントの一括生成
• 長い文書の省略を避けたいとき