皆さん、こんにちは。こもりです。
2026年4月と5月に「【CeeBeeDee】これから始めるClaude Code 〜 Figma MCP編」「【CeeBeeDee】これから覚えるTailwind CSS」と立て続けに2本のセミナーを開催していただきました。で、それぞれ「Claude Code」「Figma MCP」「Tailwind CSS」を取り扱っていたわけですが、こちらのセミナーの特典として解説用のファイルをいくつか配布しています。
実はその中には「AIエージェント用のスキル（Claude CodeとCopilot用）」を忍ばせていたのですが、その内容にさらに便利なスキルをいくつか追加して日本語化しまして、「これらのスキルの解説と実際どういう感じで使うのか」を講座の付録パートとして新版の添付ファイル付き（React版／HTML版）で追加しました。
こちらは「Figma × AI」（Figma Design -マスター編、Figma Design -パック、それぞれの講座にも含まれています）、「Tailwind CSS v4 実践ガイド」の双方の講座の付録パートして公開していますので、是非ご覧ください。
追加した内容は以下です。
---
スキルを使った自動化
- 配布ファイルと動作環境（5:37）
- 作業環境の準備（5:29）
- Figmaのデータをコード変換＆最適化（8:34）
- エージェントに任せて一度に実行（4:21）
- Figmaの変数をTailwindのテーマへ（4:42）
- TailwindのテーマをFigmaの変数へ（4:01）
- FigmaやコードからDESIGN.mdを生成（6:21）
- コードのTailwindクラスをレビュー（7:38）
- Tailwindの書体サイズを変更する（8:41）
- モックアップを生成してFigmaへ（7:06）
---
実際、Figmaのコード化にしても、Tailwind CSSを使った実装にしても、もはやAIエージェントに作業をやってもらえるような時代になっています。これらのスキルは、FigmaやTailwind CSSを扱う際には大変便利な物が含まれていると思います。いくつかのスキルは既にGitHubなどで公開しているものもありますが、付録パートの中身は全部日本語化していますから、スキルの作り方の研究などにも使っていただけるかと。
それではまた。
次はAstroの講座をリリース予定です。