Communitygithub.com

diegosouzapw/awesome-omni-skill

AIエージェントを使ってフルスタックアプリケーションを迅速に構築、プロトタイピング、デプロイします。グリーンフィールド開発や高忠実度プロトタイプ作成、社内ツールの迅速な開発に最適です。

awesome-omni-skill とは?

このスキルは、PMが要求を書いてエンジニアに渡す従来のプロセスを廃し、AIエージェントに直接指示してソフトウェアを構築する「AIネイティブなプロダクト開発」を実現します。開発期間を数ヶ月から数週間に短縮し、コストを最大99%削減します。Bolt、Cursor、Claude Codeなどの主要な「テキスト→アプリ」ツールで動作し、Figmaデザインからのコード生成、ライブプロトタイピング、ワンクリックデプロイ(Netlify/Vercel)をサポートします。JIRAチケットを書くようにプロンプトを設計する「JIRA-Promptフレームワーク」を採用し、技術スコープの定義、仕様と「雰囲気」のバランス、反復デバッグ(スクリーンショットデバッグ、アンスタックプロトコル)を徹底することで、高品質なアウトプットを安定して得られます。CRMやランディングページなどの実例を通じて、実際のビジネス価値を生む方法を学べます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/diegosouzapw/awesome-omni-skill/tree/HEAD/skills/design/ai-native-product-building

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

AIネイティブなプロダクト開発は、プロダクトマネージャーの役割を「他者に要件を書く」ことから「AIエージェントを直接指揮してソフトウェアを構築する」ことへと変革します。このアプローチにより、開発期間が数ヶ月から数週間に短縮され、コストは最大99%削減されます。

「JIRA-Prompt」フレームワーク

AIエージェント(Boltなど)とのやり取りはすべて、シニアエンジニアに良質なチケットを書くのと同じ要領で行います。

1. 技術スコープを定義する

漠然とした説明ではなく、AIが環境を立ち上げるために必要な具体的なパラメーターを提供します:

  • コア機能を特定する: 「ストリーミング、プレイリスト、MP3ファイルサポート付きのSpotifyクローンを作成して」
  • スタックを指定する: 必要なインテグレーションを明記します(例:「データベースにはSupabase、ホスティングにはNetlifyを使用してください」)。
  • データコンテキストを提供する: 生データ(例:LinkedInの経歴、CSVの行、ブランドガイドライン)をプロンプトに直接貼り付けて、AIにコンテキストを与えます。

2. 仕様と「雰囲気」のバランスを取る

AIエージェントは、厳格な要件と創造的自由の両方が与えられたときに最高のパフォーマンスを発揮します。

  • 高い具体性: ビジネスロジック、データスキーマ、ユーザーフローにはこれを使用します。
  • 「雰囲気」プロンプト: UI/UXには、具体的なCSSではなく、説明的な言葉遣いを使用します。
    • 例: 「高級な医療寄付サイトのように、清潔でプロフェッショナル、そして信頼できる見た目にしてください。」
    • 例: 「より美しく、モダンにしてください。」

3. 反復的なデバッグを実装する

AIが行き詰まったりエラーを生成したりした場合:

  • スクリーンショットデバッグ: UIの問題やエラーメッセージのスクリーンショットをアップロードし、「これを意図したデザインに合わせて修正してください」と依頼します。
  • 「アンスタック」プロトコル: 特定のロジック問題でAIが3回試行しても失敗した場合は、ヒューマン・イン・ザ・ループアプローチに移行します。専門家または開発者に相談してその特定の「細かい部分」を修正してもらい、AIにはコードベース全体の管理を任せたままにします。

ワークフロー:Figmaからデプロイまで

ステップ 1: デザインの抽出

直接URL方式を使用して、静的デザインをコードに変換します:

  • FigmaのデザインURLを取得します。
  • その前にAIツールのURLを追加します(例:bolt.new/[FIGMA_URL])。
  • エージェントにアセットとレイアウトを「吸収」させ、初期環境を作成させます。

ステップ 2: ライブプロトタイピング

Figmaでフレームをドラッグする代わりに、機能変更をプロンプトで指示します:

  • 「Supabase Authを使用したログインページを追加してください。」
  • 「usersテーブルからデータを取得するダッシュボードを作成してください。」
  • QRコードプレビューを使用して、自分のデバイスでリアルタイムにアプリをテストします。

ステップ 3: ワンクリックデプロイ

アプリをすぐにプロダクションURLに移行します:

  • 「デプロイ」をクリックします。
  • ホスティングプロバイダー(Netlify/Vercel)に接続します。
  • カスタムドメインをアタッチして、プロトタイプを実際のビジネスに変えます。

例

例 1: 「ゼロから市場へ」CRM

  • コンテキスト: ある起業家がStripe請求機能付きのカスタムCRMを必要としているが、エージェンシーに30,000ドルを支払う予算がない。
  • 入力: 「不動産業者向けのCRMを構築してください。リード追跡、月額サブスクリプション用のStripe統合、AI搭載のメール下書き機能を含めてください。清潔感のある青を基調としたUIにしてください。」
  • アプリケーション: Boltを使用してベースアプリを生成します。「'最終連絡日'列を追加してください」や「Stripeテストキーを統合してください」と繰り返し指示することで反復します。
  • 出力: 約300ドルの推論コストで3週間で構築された、機能的な収益を生むSaaS製品。

例 2: 迅速なマーケティングランディングページ

  • コンテキスト: PMが新機能実験用のランディングページを必要としている。
  • 入力: [LinkedInの経歴/ブランド仕様を貼り付け] + 「個人ポートフォリオサイトを作成してください。プロフェッショナルなダークモードを使用してください。簡単に編集できる「現在のプロジェクト」セクションを追加してください。」
  • アプリケーション: サイトを生成し、続けて「エントリーを私のメールに送信するお問い合わせフォームを追加してください」とプロンプトします。
  • 出力: 10分以内にトラフィックを受け入れる準備が整った、公開ホストされたURL。

よくある落とし穴

  • レガシーコードの移行: 20年前の数千ファイルからなるプロダクションコードベースをブラウザベースのAIエージェントに移行しようとしないでください。これらのツールは、グリーンフィールドプロジェクトや管理画面、マーケティングサイトなどの独立した「ポッド」に使用してください。
  • 初回の過剰プロンプト: 最初のバージョンに5ページものプロンプトを書かないでください。「Spotifyクローン」のベースから始めて、AIが混乱しないように機能を1つずつ追加してください。
  • 決定論の無視: コードは決定論的であり、実行されるかされないかのどちらかであることを忘れないでください。AIが壊れたアプリを生成した場合、コードが間違っていると仮定する前に、環境(WebContainer)の起動が完了しているかどうかを確認してください。
  • デザイナー専用として扱う: UIにだけ使用しないでください。データベース、認証、APIなどの「フルスタック」を構築する能力を活用して、プロトタイプが単なる高忠実度モックアップではなく、実際に機能することを確認してください。

Individual skills in this repo

This repo contains 16 individual skills — each has its own dedicated page.

diegosouzapw/awesome-omni-skill

Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory.

diegosouzapw/awesome-omni-skill

Factor modeling and portfolio construction (Markowitz, Black-Litterman, constraints, turnover).

diegosouzapw/awesome-omni-skill

Analyze the CustomGPT.ai Labs Innovation workbook and cost tracking data to surface portfolio-level insights, trends, and recommendations for where to focus Innovation efforts.

diegosouzapw/awesome-omni-skill

Optimize project portfolio selection under constraints using mathematical optimization

diegosouzapw/awesome-omni-skill

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios,...

diegosouzapw/awesome-omni-skill

Minimalist, typography-focused portfolio design system inspired by neo-brutalist and Swiss design principles. Emphasizes bold typography, generous whitespace, monochromatic color schemes, and elegant simplicity for developer/designer portfolios.

diegosouzapw/awesome-omni-skill

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

diegosouzapw/awesome-omni-skill

High-converting landing pages. Copy + design + implementation. Triggers: landing page, conversion page.

diegosouzapw/awesome-omni-skill

Portfolio allocation and rebalancing optimizer. Manages asset allocation across stocks/cash/bonds, performs periodic rebalancing, and ensures diversification according to market regime and risk tolerance.

diegosouzapw/awesome-omni-skill

Detect and explain risk drift in lending portfolios over time using vintage analysis, migration matrices, and concentration metrics. Use when monitoring portfolio credit quality trends, preparing board risk reports, conducting stress testing, or when risk metrics deviate from appetite thresholds.

diegosouzapw/awesome-omni-skill

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

diegosouzapw/awesome-omni-skill

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

diegosouzapw/awesome-omni-skill

Index-based file discovery using ABOUTME headers. Use INSTEAD of grep or Explore agent when searching for files by purpose or feature. Faster and more accurate than scanning code. Invoke this skill when user asks "which files handle X", "where is Y implemented", or when you need to find files related to a feature or task.

diegosouzapw/awesome-omni-skill

Index-based file discovery using ABOUTME headers. Use INSTEAD of grep or Explore agent when searching for files by purpose or feature. Faster and more accurate than scanning code. Invoke this skill when user asks "which files handle X", "where is Y implemented", or when you need to find files related to a feature or task.

diegosouzapw/awesome-omni-skill

Automate Klipfolio tasks via Rube MCP (Composio). Always search tools first for current schemas.

diegosouzapw/awesome-omni-skill

Build a GitHub portfolio that gets you hired — curate 3-5 polished projects, craft compelling READMEs, deploy live demos, tell a coherent story across your repos, and align everything to AI-native development roles. Use when preparing your GitHub for job searches, deciding what to pin, or auditing your public presence.

関連スキル