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

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

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

2026年01月26日

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

内容紹介

Claude CodeやCursorを使って、AIがUIデザインを生成することができる「Pencil」が登場！、【Google Antigravity】新機能「Skills」について、varg/sdk — declarative video rendering for AI agents、旦那さんからのリクエストで作った “朝食用食券機” が完成度高くてすごい「何この技術力!」「中身どうなってる?」

出演者

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

関連リンク

Pencilは、AIエージェントによる操作を前提に設計された、新しい「エージェント駆動型MCP（Model Context Protocol）キャンバス」です。従来のFigmaのようなデザインツールの機能に加え、AIがデザインデータを直接読み取ったり、編集したりできる点が大きな特徴です。新人エンジニアの方にとっても、UIデザインとコード実装の距離を劇的に縮める画期的なツールと言えます。

■ Pencilの主な概要と特徴 Pencilは、単なる作図ツールではなく、コードベースの中に存在するデザインフォーマットを採用しています。主な特徴は以下の通りです。

  1. AIエージェントとの高い親和性：MCPという標準的なプロトコルを介して、Claude Code、Cursor、VS Codeといった普段使っている開発環境（IDEやCLI）からUIの生成・編集が可能です。
  2. コンテキストとしてのデザインデータ：デザインの構造をAIにコンテキストとして渡せるため、「このデザインに沿ってフロントエンドのコードを書いて」といった指示がより正確に伝わります。
  3. 開発フローの統合：デザインデータやドキュメント、変更履歴をGitHubで一括管理できるため、エンジニアが得意とする「Gitベースのワークフロー」にデザインを組み込めます。

■ 開発現場でのメリット これまでの開発では「デザイナーがFigmaで作る」→「エンジニアがそれを見て実装する」という分断がありましたが、Pencilはこの境界を曖昧にします。

  • プロンプトからのUI生成：例えば「コーヒーショップのダークな雰囲気のサイトを作って」と指示するだけで、デザインの骨組みが瞬時に作成されます。
  • ドキュメント駆動の開発：仕様書（Design Docs）をAIに読み込ませてUIを生成させ、それをもとにフロントエンドの実装まで一気に繋げるシームレスな体験を提供します。
  • 双方向の編集：コードを書く延長線上でUIを調整できるため、デザインツールを別途立ち上げて試行錯誤する手間が省けます。

■ 制約と今後の展望 現時点では、細かなレイアウト調整や視覚的なブラッシュアップといった「人間が手動で行う詳細なデザイン操作」においては、依然としてFigmaに分があります。しかし、Pencilは「AIを前提としたデザイン開発フロー」を再設計するツールであり、特にスピード感が求められるプロトタイプ制作や、AIエージェントを活用した効率的な開発において非常に強力な武器になります。

エンジニアが「デザイン」をより身近なコンテキストとして扱えるようになるPencilは、これからのフロントエンド開発のスタンダードを変える可能性を秘めています。

引用元: https://qiita.com/degudegu2510/items/eff0f63dac99554e6439

Googleが提供するAIエージェントツール「Google Antigravity」に、新機能Skills（スキル）が追加されました。これは、エージェントに特定のタスクの進め方やベストプラクティスを学習させるための、再利用可能なパッケージ機能です。

従来の「カスタム指示（Customizations/Rules）」は、すべての指示を1つのプロンプトに詰め込む必要がありましたが、Skillsはこれらを構造化されたフォルダとして切り出し、必要な時だけエージェントに読み込ませることができます。

1. Skillsを構成する4つの要素

Skillsは、以下の4つの要素を.agent/skills/ディレクトリに配置することで機能します。

  • SKILL.md（指示書）: エージェントがいつ、どのように動くべきかを定義するメインのファイルです。
  • scripts/（道具）: Pythonなどのスクリプトです。計算や機械的なチェックなど、LLMが苦手とする「厳密な処理」を代行させます。
  • resources/（素材）: 社内規定やチェックリスト、設計書などの参照データです。
  • examples/（お手本）: 理想的な出力形式やコードの書き方の実例です。これにより、AIの回答トーンを「シニアエンジニア風」にするなどの制御が容易になります。

2. エンジニアがSkillsを導入すべき3つのメリット

新人エンジニアにとっても、Skillsの活用は開発体験を大きく向上させます。

  • AIの「集中力」と精度の向上（コンテキスト節約） すべてのルールを常に読み込ませると、AIは指示の優先順位を見失い、誤回答（ハルシネーション）を起こしやすくなります。Skillsは必要な時だけ動的に読み込まれるため、AIが目の前のタスクに集中でき、精度の高い回答が得られます。
  • AIとプログラムの「いいとこ取り」 「文字数を数える」「TODOコメントを探す」といった論理的な作業はスクリプト（scripts）に任せ、その結果を「人間らしく、優しく伝える」部分をAIが担うという、効率的な分業が可能です。
  • チーム内での「品質の標準化」と共有 Skillsはファイルとして存在するため、Gitで管理・共有が可能です。チーム共通の「レビュー観点」や「テストコードの書き方」をSkills化しておけば、新しく参加したメンバーもリポジトリをプルするだけで、チームの基準に沿ったAIアシスタントを即座に利用できます。

3. 今後の活用アイデア

この機能はコードレビュー以外にも、自社のテーブル定義を参照した「SQL生成」、特定のフレームワークに合わせた「テストコード作成」、ログを解析してフォーマット通りに出力する「バグ報告書作成」など、定型化されたあらゆるエンジニアリング業務に応用可能です。

Skillsは、AIを単なるチャット相手から、プロジェクト固有のルールを理解した「自律的なチームメンバー」へと進化させる強力な機能といえます。

引用元: https://zenn.dev/emp_tech_blog/articles/google-antigravity-skills

varg/sdkは、AIエージェントがJSXのような宣言的なコードを用いて動画を生成・編集するためのSDKです。AIがコードを記述し、それをFFmpegが解釈して動画をレンダリングします。

主な特徴:

  • 宣言的な記述: Reactに似たJSX構文で動画を構成し、AIによる動画生成を容易にします。
  • 多様なAIプロバイダー連携: fal.ai, ElevenLabs, OpenAI Sora, Replicateなど、複数のAIサービスと連携可能です。
  • キャッシュ機能: 生成された要素をキャッシュすることで、APIコストを削減し、高速な再レンダリングを実現します。
  • サーバーサイドでの実行: FFmpegとファイルシステムアクセスが必要なため、Node.js/Bunサーバー、CLIツール、またはサーバーレス関数(FFmpegレイヤー付き)で動作します。
  • コスト: SDK自体はApache 2.0ライセンスで無料ですが、利用するAIプロバイダーのAPI利用料が発生します。

新人エンジニアの方へ: このSDKを使うことで、AIエージェントに動画生成を任せることができ、これまで手間のかかっていた動画編集作業を自動化できます。JSXに慣れていれば比較的容易に利用できるでしょう。

引用元: https://varg.ai/sdk

百均の箱を使った朝食用食券機を自作。コインと1000円札を判別し、サーボで食券を出す仕組み。内部はガムテープ固定だが、強度向上のアイデアも多数。DIYによる課題解決と高い技術力に注目が集まっている。

引用元: https://togetter.com/li/2655846

VOICEVOX:春日部つむぎ