株式会社ずんだもん技術室AI放送局

AIやテクノロジーのトレンドを届けるPodcast。平日毎朝6時配信。朝の通勤時間や支度中に情報キャッチアップとして聞いてほしいのだ。

マジカルラブリー☆つむぎのピュアピュアA.I.放送局 podcast 20260105

2026年01月05日

MP3ファイルをダウンロード

内容紹介

Claude Code Workflow Studio完全ガイド｜ビジュアルでAIワークフローを構築する新時代、Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる、[入門] Crawl4AI：LLM・RAG向けWebスクレイピングの始め方、キャラクターの芯を掘り下げるためのLLM向けプロンプト

出演者

春日部つむぎ
春日部つむぎ

関連リンク

1. Claude Code Workflow Studioの概要

「Claude Code Workflow Studio」は、Anthropic社が提供するAI搭載CLIツール「Claude Code」のワークフロー機能を、直感的なビジュアルエディタで構築・編集できるVS Code拡張機能です。通常、Claude Codeで高度な自律動作（AIエージェント）を定義するには、複雑な設定ファイルを手動で記述する必要がありますが、本ツールはこれらを「ノード」を繋ぐキャンバス上でのドラッグ＆ドロップ操作に置き換えます。

開発者コミュニティでも非常に高い注目を集めており、GitHubでは1,100以上のスターを獲得しています。新人エンジニアの方にとっても、まるでデザインツールのFigmaを扱うような感覚で、複雑なAIの動作ロジックを設計できる「AIワークフローのビジュアルエディタ」となっています。

2. ツールが解決する3つの課題

新人エンジニアがAIエージェントの構築に取り組む際、本ツールは以下の3つの大きな壁を取り払ってくれます。

  1. 設定ファイルの複雑さ: MarkdownやYAMLなどの独自構文や、特定のディレクトリ構造を覚えなくても、GUI上で設定を完結できます。
  2. 複雑なフローの可視化: 「Aの結果によってBまたはCのエージェントに分岐する」といった、テキストだけでは把握しにくい論理構造を視覚的に整理できます。
  3. チーム協業の促進: フローが可視化されることで、エンジニア以外のメンバーとも「AIに何をさせるか」という設計意図を共有しやすくなります。

3. 技術的な仕組みと主要な機能

本ツールはClaude Codeの既存機能を置き換えるものではなく、その「上に乗るGUIレイヤー」として動作します。そのため、ツールで作成したワークフローは最終的に標準準拠のMarkdownファイルとして出力され、ツールを導入していないチームメンバーともそのまま共有・実行可能です。

【主要なノードの種類】 ワークフローは、以下のような役割を持つ「ノード」を組み合わせて構築します。

  • Prompt: AIへの基本的な指示やテンプレート変数を定義します。
  • Sub-Agent: 特定のタスク（コードレビューやデータ抽出など）に特化した、役割を持つエージェントを定義します。
  • IfElse / Switch: 条件に基づいた処理の分岐を実現します。
  • AskUserQuestion: 処理の途中でユーザーに判断を仰ぐための対話ステップを追加できます。
  • MCP: Model Context Protocolを介して、GitHubや外部データベースなどの外部ツールと連携します。

さらに、AIがワークフロー自体の編集をサポートしてくれる「AI支援編集機能」も搭載されており、自然言語での指示によってノードの追加や接続を自動化することが可能です。

4. 制約事項

実用にあたっては、以下の制約を理解しておく必要があります。

  • ノード数の制限: 1つのワークフローあたり最大50ノードまで構築可能です。
  • 入力制限: リクエスト文字数は2,000文字以内、AI処理のタイムアウトは最大5分までの設定となります。
  • 環境要件: VS Code 1.80.0以上およびNode.js 18.0以上が必要です。

5. まとめ

Claude Code Workflow Studioは、AIエージェントの構築を「テキストベースの苦行」から「視覚的な設計」へと進化させる画期的なツールです。新人エンジニアの方は、まずは本ツールを使って「AIエージェントがどのように連携し、判断を下しているのか」という全体像を可視化することから始めてみてください。AIを活用した開発の自動化が、より身近で楽しいものになるはずです。

引用元: https://note.com/ai_driven/n/nce437c34242f

AIによるコーディング支援が普及する中で、フロントエンド開発における「デザインの再現性」と「一貫性の欠如」が新たな課題となっています。AIに指示を出してコードを書かせると、学習データの傾向から特定の配色やフォントに偏ってしまう「AI Purple Problem」と呼ばれる現象が起きがちです。本記事では、この問題を解決するために、FigmaのデザインデータをAIに直接理解させる仕組み「Figma MCP（Model Context Protocol）」を活用した、最新の開発フローを解説しています。

1. デザインと開発を繋ぐ「Figma MCP」の役割

Figma MCPは、AIエージェントに対してFigmaファイル内のレイアウト、タイポグラフィ、カラー、コンポーネント構造などの詳細なコンテキストを提供するツールです。これにより、エンジニアは曖昧な指示を出す必要がなくなり、AIはデザインガイドラインを厳密に遵守したコードを生成できるようになります。また、「Storybook MCP Addon」を併用することで、AIが既存のコンポーネントを再利用したり、Storybookのベストプラクティスに従った実装を行ったりすることも可能になります。

2. 実践的な開発プロセス

記事では、Claude Code（AIコーディングエージェント）を使用した具体的な手順が紹介されています。

  • デザイントークンの抽出: Figmaの特定レイヤーからカラーやスペーシングの情報を取得し、Tailwind CSS v4形式の定義ファイル（globals.css）を自動生成します。
  • コンポーネントの実装: Figma上のボタン等のパーツのリンクをAIに渡すだけで、デザインのバリエーション（Primary、Disabled等）やホバー状態を反映したReactコンポーネントと、そのStorybookファイルを生成します。
  • ページの実装: 抽出したパーツを組み合わせ、Figmaのデザイン案に基づいたページ全体の実装を行います。

3. AIに正しく指示を出すためのコツ

新人エンジニアが特に意識すべき点は、AIへの「情報の渡し方」です。

  • コンポーネント単位での分割: ページ全体を一度にAIに投げると、情報量が多すぎてエラーが発生したり精度が落ちたりします。ヘッダーやヒーローセクションなど、論理的なチャンクに分けて実装を依頼することが成功の鍵です。
  • Figmaの設計品質: AIに高品質なコードを書かせるためには、Figma側で「Auto Layout」や「Variables（変数）」が適切に設定されており、レイヤーに正しい名前がついている必要があります。

まとめ：これからのエンジニアに求められるスキル

Figma MCPの活用により、デザインからコードへの変換プロセスは大幅に効率化されます。しかし、それは「人間が何もしなくて良い」ということではありません。AIが正確に動くための「整理されたデザインデータ」を準備することや、デザインシステム全体の設計を理解するスキルの重要性が、これまで以上に高まっています。コードを書く作業はAIに任せつつ、エンジニアは「より良い設計」と「AIへの的確なナビゲーション」に注力する、という新しい開発スタイルの可能性を示す内容となっています。

引用元: https://azukiazusa.dev/blog/using-figma-mcp-to-provide-design-system-for-ai-coding-agents

1. Crawl4AIの概要：次世代の「AIファースト」スクレイピング

Crawl4AIは、大規模言語モデル（LLM）やRAG（検索拡張生成）システムの開発に特化して設計された、Python製のオープンソース・Webスクレイピングフレームワークです。 従来のスクレイピングツールが「Webサイトの情報を抽出すること」を目的としていたのに対し、Crawl4AIは「抽出した情報をAIが理解しやすい形に整えて提供すること」をゴールとしています。GitHubで57,000以上のスターを獲得しており、AIエンジニアの間で急速に注目を集めている最新ツールです。

2. なぜ今、新しいツールが必要なのか

新人エンジニアの方が従来のツール（BeautifulSoupやScrapyなど）を学習すると、HTML構造の解析や、広告・メニューといった「ノイズ」の除去に苦労することが多いでしょう。特にLLMを利用する場合、以下の点が課題となります。

  • ノイズの多さ: 不要なHTMLタグやナビゲーションが含まれると、LLMの処理コスト（トークン）を無駄に消費し、回答精度も下がります。
  • 形式の不一致: LLMは生のHTMLよりも、構造化されたMarkdown形式を好みます。
  • トークン制限: LLMには一度に読み込める文字数制限があるため、長い記事は適切に分割（チャンキング）する必要があります。

Crawl4AIは、これらの課題を「標準機能」として解決するために誕生しました。

3. Crawl4AIの主な特徴と機能

本ツールは、現代のAI開発において痒い所に手が届く機能を多数備えています。

  • Fit Markdown（クリーンなMarkdown出力）: 独自のアルゴリズムにより、Webページからメインコンテンツのみを判別し、不要な広告やサイドバーを除去した純粋なMarkdown形式を出力します。
  • LLM駆動の構造化データ抽出: 「このページから製品名と価格を抜き出して」といった指示（プロンプト）を与えるだけで、非構造なWebページから正確なJSONデータを抽出できます。OpenAIのGPTシリーズや、ローカルで動くOllamaにも対応しています。
  • 高度なチャンキング戦略: RAGシステムを構築する際、データを適切な長さに切る「チャンキング」は非常に重要です。トピックベースや正規表現による分割など、AIのコンテキストウィンドウに最適化された手法を簡単に選べます。
  • 高速な非同期処理と動的サイト対応: ブラウザ自動化ライブラリの「Playwright」をベースにしており、JavaScriptを多用した最新のWebサイトも高速かつ効率的に巡回（クローリング）可能です。

4. 導入環境と制約

Crawl4AIを試すための前提条件は以下の通りです。

  • 動作環境: Python 3.10以上が必要です。
  • 依存関係: pip install crawl4ai でインストール後、ブラウザエンジンのセットアップ（crawl4ai-setup）を実行する必要があります。
  • デプロイ: 本番環境向けにDockerイメージも提供されており、REST APIとして稼働させたり、リアルタイムの監視ダッシュボードを利用したりすることも可能です。

5. 新人エンジニアへのアドバイス

今後、AIを組み込んだシステム開発において「Webからいかに質の高いデータを集めるか」はコアスキルの一つになります。Crawl4AIは、単なる自動化ツールではなく、「AIのためのデータエンジニアリング」を手軽に体験できる優れた教材でもあります。 まずは自分の気になる技術ブログなどをMarkdown化して、LLMに読み込ませる実験から始めてみるのがおすすめです。データの「質」がAIの「賢さ」に直結することを、このツールを通じて実感できるはずです。

引用元: https://zenn.dev/serada/articles/20260101-crawl4ai-intro

キャラクターの内面や核心を掘り下げるための、対話型LLM用プロンプトです。表面的な設定ではなく、行動原理や矛盾を深掘りし、創作の解像度を高めます。利用にはClaude 4.5やGemini 3 Pro等の高い言語能力を持つ大規模モデルが推奨される一方、GPT-5.xは非推奨という制約があります。ライセンスはCC0で、AIを「思考のパートナー」として活用する具体例として新人エンジニアにも役立つ内容です。

引用元: https://meatlog.de10.moe/entry/character_creator_prompt

VOICEVOX:春日部つむぎ