①はじめに
Excelで書いた設計書をAIに渡すだけで、そのままシステムが出来上がったら、開発の生産性は大きく変わると思いませんか？
本記事では、VS Code拡張のClineとそのAgent Skills機能を使用して、Excelの設計書からシステムを生成する体験をハンズオン形式でお届けします。
具体的には、個人の資産ポートフォリオを表示する「個人ポートフォリオ分析システム」の設計書（.xlsxファイル）をClineに読み取らせ、Reactアプリケーションを自動で実装させます。読者の皆さんが実際に手を動かして体験できるよう、必要な資材はすべてダウンロード可能な形にしています。
この記事で体験できること
[1]Agent Skills（SKILL.md）を使ったClineへの作業手順の教え込み
[2]Excel設計書をAIコーディングエージェントが読み取り可能な形式に変換するテクニック
[3]たった1行のプロンプトから、設計書に沿ったシステムが自動生成される過程
今回は以下の流れで、Excel方眼紙設計書からシステムを自動生成します。
②ハンズオン用資材の解説
ハンズオン用の資材をダウンロードいただいたうえで、資材の中身と、背景にある仕組みを詳しく見ていきましょう。
資材はこちらからダウンロードしてください（agent-skills-excel-react.zip）
②-1. 資材の全体構成
上記ZIPファイルを解凍すると、以下の構成になっています。
agent-skills-excel-react/
├── .cline/
│ └── skills/
│ └── 設計書読み取り/
│ └── SKILL.md ← Agent Skills の定義ファイル
└── 設計書.xlsx ← Excel の設計書
資材は大きく分けて2つ。AIコーディングエージェントが実行する手順書であるSKILL.mdと、AIコーディングエージェントに読ませる設計書です。それぞれの背景と中身を順に見ていきます。
②-2. Agent Skillsについて
Agent Skillsは、AIコーディングエージェントに再利用可能な知識や手順を教える仕組みです。
Clineの場合、プロジェクトの.cline/skills/ディレクトリ配下にSKILL.mdファイルを置くことで、Clineがそのスキルを自動的に認識し、必要に応じて活用してくれます。
.cline/
└── skills/
└── 設計書読み取り/
└── SKILL.md ← ここにスキルの手順を記述
Claude Codeの場合は、.claudeフォルダ配下にskillsフォルダ以下をコピーする事で本記事と同じ事を実現可能です。
（GitHub Copilot Agentの場合は.copilotフォルダの下、Open AI Codexの場合は.codexフォルダの下です）
SKILL.md内には、フロントマター（name, description）と具体的な手順（Step1, Step2, ...）を記述します。
.cline/skills/設計書読み取り/SKILL.mdの内容は以下の通りで、Excelファイルを解凍→構造把握→XML読み取り→実装という一連の流れをClineに教えるスキルになっています。
---
name: 設計書読み取り
description: "Excelファイルの内容を元にシステムを開発するスキルです。Excelの設計書を読み取る場合にこのスキルを使用して下さい"
---
## Step1
プロンプトで与えられた設計書を以下のいずれかのコマンドで解凍して下さい。
### macOS環境の場合
unzip {与えられたファイルへのパス}
### Windows環境の場合
call powershell -command "Expand-Archive {与えられたファイルへのパス}"
### Step2
xl/フォルダ配下のファイルツリー構造を出力して下さい。
tree xl/
### Step3
xlフォルダ配下はOpen Document形式です。xmlファイル群の内容はシステムの設計書です。
ファイルツリー構造を出力したxlフォルダ配下のすべてのxmlファイルの中身を意味理解し、
設計書の内容に従ってアプリケーションを実装して下さい。
xlフォルダ配下のxmlファイルの内容を意味理解する事を途中でやめないで下さい。
ところで、Step1でExcelファイルを「解凍」しているは少し不思議に思われるかもしれません。なぜExcelをそのまま読ませず、わざわざ解凍するのでしょうか？
②-3. なぜExcelをXMLで読ませるのか？
設計書.xlsxには以下の3つのシートが含まれており、オートシェイプを用いて画面遷移フローや画面レイアウトを記載しています。
Excelファイルは実は、Office Open XML（OOXML）としてオープンな仕様のxml群をzipでまとめたもので、.xlsxの拡張子を.zipに変えて解凍すると、中のxml（生のExcelファイルの中身の情報）を読む事ができるのです。
xl/
├── sharedStrings.xml ← セル内の文字列データ
├── styles.xml ← スタイル情報
├── workbook.xml ← ブック全体の構成
├── worksheets/
│ ├── sheet1.xml ← 「共通要件」シート
│ ├── sheet2.xml ← 「画面遷移」シート
│ └── sheet3.xml ← 「トップ画面」シート
├── drawings/
│ └── drawing1.xml ← オートシェイプ・図形の情報
└── ...
通常、AIコーディングエージェントにExcelを読ませようとすると、セル内やオートシェイプ内のテキストデータしか読み取る事ができません。しかしながらXMLとして解凍しAIコーディングエージェントに読み込ませれば、情報のロスト無く生のすべての情報をAIが意味理解する事ができます。つまり、AIコーディングエージェントにXMLを読み取らせる事で、図形で描かれた画面ワイヤーフレーム、フローチャート、矢印の向き、矢印の場所などを頂点座標テキストとして拾い、意味理解した上でコードに反映できるのです。
この手法はClaude Sonnet 3.7時代ではワークせず、Claude Opus 4.1以上の能力の高いLLMを使用する事で、LLMの能力向上により2025年後半から実現可能になりました。
設計書.xlsxでも、画面遷移やトップ画面のシートにはオートシェイプを使用しています。XML経由でこれらの図形情報まで含めてAIコーディングエージェントに理解させる事が、今回のアプローチの最大の目玉です。先ほどのSKILL.mdはまさにこの仕組みを活用しています。
③ハンズオン：やってみよう
ここからは実際に手を動かして、Excel設計書からシステムを自動生成する体験をしていきます。
前提条件
以下が準備できている必要があります
- VS Codeがインストール済み
- Cline拡張がインストール済み（デモではv3.63.0を利用しています）
- Clineで利用するAIモデルのAPIキーが設定済み（デモではClaude Opus 4.6の1Mトークンモデルを利用しています）
- Node.js（v20以上推奨）がインストール済み
- macOSまたはWindows（手順はどちらにも対応しています）
手順1：ダウンロードした資材をVScodeで開く
まず、ダウンロードした資材をVS Codeで開きます。
手順2：プロンプトを入力して実行する
VS CodeでClineのチャット画面を開き、以下のプロンプトを入力し、右下の送信ボタンを押下してください。
設計書.xlsxを読み取り、システムを開発して下さい。
手順3：生成されたシステムを確認する
本記事に添付した設計書の場合は10分程度待っていると、設計書.xlsxの要件に沿ったReactアプリケーションが完成しますのでを確認してください。
④まとめ
本記事では、ClineのAgent Skillsを使ってExcel設計書からシステムを自動生成するハンズオンを体験していただきました。
やったことの振り返り
- Excelファイルの内容を意味理解してシステムをコーディングする手順をAgent Skillsとして定義
-
.xlsxをunzipしてXMLとして読ませるテクニックで、オートシェイプの図形情報までAIコーディングエージェントに意味理解させた - たった1行のプロンプトで、設計書に沿ったReactアプリを自動生成
⑤応用編
添付した設計書.xlsxの内容は、短時間で上記プロセスを体験できるように少なめにしておりますが、さらに追加で
- バックエンドAPIアプリに関する要件
- 振込処理の内容
- 残高はPostgreSQLに永続化せよという指示
- ReactアプリとバックエンドAPIアプリとの間のAPI仕様は自分で考えてOpenAPI Specification v3でYAML出力しておいて
などの要件・設計を加筆すれば、バックエンドAPIアプリからPostgreSQLの構築、ダミーデータの投入まで自動で実施してくれるだけの能力をAIコーディングエージェント＋高度なLLMは備えています。
ぜひ本記事の内容を応用して、色々なExcel設計書をAIコーディングエージェントに投入し、どこまで複雑なシステムまで実装させられるのか試してみて下さい。100万トークンの入力コンテキストサイズが、1タスクで遂行可能な入力設計量の限界になります。
なお、掲載したAgent Skillsと設計書はサンプルになります。掲載されている資材を使用することで発生するいかなる損害や不利益について、当社は一切の責任を負いませんので自己の責任においてご利用ください。
この記事を読んで、当社にご興味を持たれましたら下記よりアクセス頂ければと思います。
Discussion