AI が「AI エージェント」として自律し思考し道具をつかって仕事をこなすためには Agentic Engineering とよばれる
といった土台の用意が必要✏️
この記事では Claude Code から、
これらの仕組みをひとつひとつ理解し「AI エージェント」をつくって・つかってみます!
参照:
https://x.com/karpathy/status/2019137879310836075
最初に必要なものを準備しておきます。
https://code.claude.com/docs/ja/overview
mkdir /path/to/example-aiae-labs
エージェントに「ルール」を設定します。
「ルール」はエージェントにあたえる「基本指針」です。
以下のファイルをユーザーディレクトリかプロジェクトディレクトリに配置します。
CLAUDE.md
以下の例をためしてみましょう。
/path/to/CLAUDE.md
- あなたは「にゃんちゃん」です
- 常に語尾に「にゃ」とつけます

エージェントに「スキル」を設定します。
「スキル」はエージェントにあたえる「作業手順」です。
以下のファイルをユーザーディレクトリかプロジェクトディレクトリに配置します。
.claude/skills/[skill-name]/SKILL.md
以下の例をためしてみましょう。
/path/to/.claude/skills/calc-add/SKILL.md
---
name: calc-add
description: ユーザーに a と b の値をきいて足し算をおこなう
---
1. `a` の値をユーザーにきく
2. `b` の値をユーザーにきく
3. `a + b` をして結果を返す
/path/to/.claude/skills/calc-sub/SKILL.md
---
name: calc-sub
description: ユーザーに a と b の値をきいて引き算をおこなう
---
1. `a` の値をユーザーにきく
2. `b` の値をユーザーにきく
3. `a - b` をして結果を返す
エージェントが使用できる「ツール」を教えます。
「ツール」はエージェントが使うソフトウェアで CLI や MCP 経由で利用します。
「ツール」は「ルール」・「スキル」に書くことでエージェントに教えることができます。
事前にウェブサイトにアクセスするための「ツール」である playwright-cli をインストールします。
https://nodejs.org/ja/download
npm install -g @playwright/cli@latest
以下の例をためしてみましょう。
/path/to/.claude/skills/example-get-page/SKILL.md
---
name: example-get-page
description: Yahoo! Japan のウェブサイトのニュースを取得・表示
---
## ツール
以下が利用できます
- `playwright-cli --help`
## 作業手順
`https://www.yahoo.co.jp/` にアクセスし「主要」の記事の上位の3件を取得・表示

ここまででまなんだ「ルール」「スキル」「ツール」の仕組みをつかって複数のステップ(情報の収集・情報の整理・資料ページの作成・問題ページの作成・情報の告知)にまたがる仕事を計画・実行する「AI エージェント」をつくってみましょう。
以下の例をためしてみましょう。
※変更してみましょう
/path/to/.claude/skills/example-workflow/SKILL.md
---
name: example-workflow
description: ウェブページから「説明」と「問題」を作成し案内
---
## ツール
以下が利用できます
- `playwright-cli --help`
- `npx @marp-team/marp-cli@latest --help`
## 作業手順
1. 以下を読む
- 使用ツール:
- Playwright
- 対象:
- `https://claude.com/blog/common-workflow-patterns-for-ai-agents-and-when-to-use-them`
2. セクションごとの題名と説明を日本語で作成
3. `html` を作成 - 説明
- 使用ツール:
- Marp
- 対象:
- `example-1.html`
- 形式:
- page 1:
- [タイトル]
- page 2:
- [セクション1 題名]
- [説明]
- page 3:
- [セクション2 題名]
- [説明]
- ...
4. `html` を作成 - 問題
- 対象:
- `example-2.html`
- 形式:
- 問題1
- 質問: 〜でただしいのはどれ?
- 選択(ラジオボタン)
- A. [解答選択肢A]
- B. [解答選択肢B]
- C. [解答選択肢C]
- 問題2
- 質問: 〜でただしいのはどれ?
- 選択(ラジオボタン)
- A. [解答選択肢A]
- B. [解答選択肢B]
- C. [解答選択肢C]
...
- 「回答」ボタン(クリックで正答を表示)
5. 社内 Slack 向けに「説明」と「問題」の案内文を作成



ここまで一緒につくって・まなんでいただきありがとうございました!