「初めてのアプリ」を作る設計図 Why / What / How プロンプト設計 　×　 Skill化の考え方 　×　 公式ドキュメント

REACT × AI 「初めてのアプリ」を作る設計図 Why / What / How プロンプト設計 うさうさ研修工房 × Skill化の考え方 × 公式ドキュメント

目次 01 Why/What/Howで固定するプロンプト設計 思考の順序を固定し、AI出力のブレを抑える 02 再利用可能な「型」へ — Skill化の考え方 コピペ運用から、案件横断で使える資産へ 03 参照すべき公式ドキュメント Agent Skills / React 公式リンク集 うさうさ研修工房｜React × AI 設計図 02

思考の順序を固定する：Why → What → How Why → What → How なぜこの構成にするか 作る画面・機能 実装コード 背景・目的を1〜2文で言語化させる 実装対象を箇条書きで洗い出す 要件を満たすコードを1ファイル分 出力 うさうさ研修工房｜React × AI 設計図 03

プロンプト例：単語辞典アプリ React × AI で“初めての一本”を作る、シンプルな指示 あなたは、初心者にも伝わる説明を大切にするReactエンジニアです。 専門用語を使うときは、必ず一言で言い換えを添えてください。 # お題 「入力した単語をAIに説明してもらう、シンプルな単語辞典アプリ」をReactで作る。 # 手順（Why→What→Howで進める） 1. Why：なぜこの構成にするのか、1〜2文で説明する 2. What：作る画面・機能を箇条書きで示す 3. How：useState管理／AI（Claude API）への問い合わせ／ カード表示／エラー時メッセージ、を満たす実装コードを出す # 出力形式 Why（3行以内）→ What（箇条書き）→ How（Reactコード1ファイル分） うさうさ研修工房｜React × AI 設計図 04

設計のポイント ペルソナは「わかりやすさの一貫性」のためだけに使う 正確性の担保には使わない — 査読済み研究が示すトレードオフを踏まえた設計 Why/What/Howで出力のブレを抑える 思考の順序を固定することで、毎回似た粒度の回答を引き出す 出力形式を明示し、レビューしやすい粒度に揃える 「Why→What→How」の順で区切って出力させる うさうさ研修工房｜React × AI 設計図 05

プロンプトから「型」へ：Skill化 プロンプトのまま運用 Skillという「型」に育てる ― 案件ごとに文面をコピペし続ける ― 必要な時だけ完全な指示が自動で読み込まれる ― 指示の粒度・出力形式がブレやすい ― テンプレート・サンプル・チェックリストを同梱 → ― 改善しても他の案件に反映されにくい うさうさ研修工房｜React × AI 設計図 ― 個人にも組織にも、案件横断で再利用できる 06

SKILL.mdに持たせる要素 description 「文系新人向けにReact×AIの初めてのアプリを、Why/What/Howで 説明しながら作るSkill」。Claudeが自動判断する最重要項目 サンプル集 単語辞典アプリ、簡易チャットボットなど“初めての一本”になり やすいお題集 うさうさ研修工房｜React × AI 設計図 テンプレート Why/What/Howの出力フォーマットをあらかじめ固定しておく レビュー観点 わかりやすさチェックリスト（専門用語の言い換え有無など） 07

参照リンク Agent Skills（Claude Platform Docs） platform.claude.com/docs/en/agents-and-tools/agent-skills/overview Using Agent Skills with the API platform.claude.com/docs/en/build-with-claude/skills-guide Claude Code Skills code.claude.com/docs/en/skills React 公式ドキュメント ja.react.dev うさうさ研修工房｜React × AI 設計図 08

感性ではなく、設計で。 ペルソナはトーンと構成の一貫性のための道具。正確性の保証には使わない Why/What/Howで思考順序を固定すれば、初めてのアプリでも迷わず進める プロンプトを「型」に育てれば、再現性と資産性が上がる うさうさ研修工房