今日の今日で告知をするなという話なのですが、いつもお世話になっている「CeeBeeDee」さんで「手作業から解放される！Claude Codeで実現するWeb制作の自律自動化」と言うセミナーを本日7/1（水）21:00〜緊急開催することになりました。
セミナーの内容
```
AIにプロンプトを投げて、出力されたコードをコピペして満足する時代は終わりました。AIが「エージェント」として自律的にタスクを推論・実行できるようになった今、Web制作における面倒な手作業やルーティンワークは、独自の「スキル」を開発してエージェントに丸投げするのがこれからのスタンダードです。
本セミナーでは、Figmaからコードへの変換、環境構築、デザイン修正の自動化など、Web制作の現場ですぐに使える具体的な「スキル」の実例をデモを交えてご紹介します。さらに、AIエージェントに迷いなく、自律的に働いてもらうための「自分仕様のスキルの作り方」と「タスク分解のコツ」までを体系的に解説します。手作業を減らし、よりクリエイティブな業務に集中したいフロントエンドエンジニアやWebデザイナー必見のセッションです。
```
ということで、そもそものプロンプトとスキルの違いみたいな話から、実際に講座内のスキルを使って制作の現場で起きがちな問題をスキルを使って解決する例をいくつか取りあげて、スキルの作り方や一連のワークフローをエージェント任せにして自律実行させる方法までを採り上げる予定です。
受託が中心の人も事業会社の人もいろいろいらして、仕事の内容も取り扱ってることも人それぞれ組織それぞれでしょうし。事例として取りあげる課題とかそれを解決するスキルは、あくまでも「こういう問題を解決したり、ここ自動化できるよ」っていう参考例として用意しています。
講座自体は、日本語化された23個のスキル群の個々の解説動画が入っているパッケージなのですが、セミナーの内容はそれを踏まえて「ここでこういう使い方ができるよ」という具体的な使用例が出てくると思っていただければと。既に他の講座を購入いただいていて、講座自体は無料で閲覧可能な方でも（講座は重複して手に入る形には見えてしまいますが）セミナーの内容は講座のそれとはちょっと違うことになります。
今日の今日の告知で大変申し訳ないのですが、こちらのセミナーもよろしくお願いいたします（深々）。
講座に収録されているスキル一覧
一部スキルについてはGitHubにて一般公開されているスキルですが、講座内に収録されているスキルは公開・非公開に関係なく全てのスキルは日本語化されております。
setup-astro
Astro v6 + Tailwind v4 の新規プロジェクトをセットアップするスキル。スターターテンプレートからクローン・依存インストール・git 初期化まで一括で行います。ディレクトリ名やリポジトリ URL を引数で指定できます。呼び出すテンプレートのURLを変えることで、ご自身のテンプレートでもセットアップできるようになっています。
→ 非公開
setup-html
Vite + TypeScript + Tailwind のバニラ HTML プロジェクトをセットアップするスキル。スターターテンプレートからクローン・依存インストール・git 初期化まで一括で行います。ディレクトリ名を引数で指定できます。呼び出すテンプレートのURLを変えることで、ご自身のテンプレートでもセットアップできるようになっています。
→ 非公開
setup-react
Vite + React + TanStack Router の新規プロジェクトをセットアップするスキル。スターターテンプレートからクローン・依存インストール・git 初期化まで一括で行います。ディレクトリ名やリポジトリ URL を引数で指定できます。呼び出すテンプレートのURLを変えることで、ご自身のテンプレートでもセットアップできるようになっています。
→ 非公開
create-mockup
UIモックアップを作成するスキル。サイトの種類・デザインスタイル・ページ種別をヒアリングしてから、プロジェクトの技術スタック（Astro / React / Vite など）に合わせた実装を行います。Figma URL なしでUIを組み上げたいときに使います。決定したカラートークンは CSS に書き込まれるので、後続の create-multi-mockup で同じデザインスタイルの別パターンを生成することもできます。
→ 非公開
create-multi-mockup
1回のリクエストで複数レイアウトパターンのモックアップをまとめて生成するスキル。共通のカラーシステム・デザイン言語を維持しながら複数案を出せるので、デザイン方向性を決める前の比較検討に適しています。既存ページへの追加にも対応しており、特定セクションのレイアウトバリエーションを複数生成することもできます。
→ 非公開
mobile-polish
既存のモックアップにモバイル対応を追加するスキル。ハンバーガーメニュー・ボトムタブバー・スライドアウトドロワーから最適なナビゲーションパターンを推奨・実装し、見出しのモバイルサイズ調整・タッチターゲットの最小44px確保・スペーシング見直しまで一括で行います。create-mockup や create-multi-mockup の後続スキルとして使います。
→ 非公開
astro-doctor
Astro コードを最新仕様に照合してコンポーネント粒度を最適化するスキル。create-mockup などで生成した直後に実行するのが推奨です。light（仕様修正のみ）/ medium（コンポーネント抽出、デフォルト）/ deep（アトミックデザイン再構成）の3段階で最適化レベルを選べます。
→ 非公開
click-to-fix
ブラウザ拡張不要のビジュアル編集スキル。ブラウザ上の任意の場所をクリックして修正指示を入力すると、ローカルサーバー経由で Claude に渡してそのまま実装します。VS Code・Claude Desktop・ターミナルなど Claude Code のどのインターフェースでも動作します。クリック時の画面サイズを検出するので、全サイズ共通・このサイズ以下・このサイズのみなど、ブレークポイントを絞った変更も指定できます。
→ GitHub
create-design-md
Google の design.md 仕様に従った DESIGN.md をプロジェクトルートに生成するスキル。コードベース探索・Figma URL・既存 DESIGN.md URL・テキスト貼り付けの4モードに対応し、生成後はリンターで自動検証します。
→ GitHub
export-design-md
DESIGN.md をブログ風のビジュアル HTML ドキュメントに変換するスキル。デフォルトテンプレートを内蔵し、Astro プロジェクトでは src/pages/design-preview.astro を生成します。生成後に Figma へのエクスポートも選択できます。
→ GitHub
tailwind-review
Tailwind CSS コードをレビュー・最適化・移行するスキル。v3→v4 移行、任意値のトークン化、競合クラスの除去、HTML アクセシビリティ構造の検証など5つの観点でチェックします。HTML / React / Vue / Svelte / Astro に対応。
→ GitHub
tailwind-typescale
Tailwind CSS v4 プロジェクトに調和のとれたタイプスケールを適用するスキル。ベースフォントサイズとスケール比率名（typescale.com 準拠）を選ぶと、@theme に --text-xs 〜 --text-9xl を設定し、@layer base で h1〜h6 のサイズも整えます。
→ GitHub
tailwind-to-figma
Tailwind CSS v4 の @theme トークンを Figma Variables として書き出すスキル。CSS エントリファイルを自動検索し、型ごとに整理された Variable コレクションを Figma ファイルに作成します。既存ファイルへの追記・新規ファイル作成どちらにも対応。
→ GitHub
figma-to-tailwind
Figma ファイルの Variables をすべて取得し、Tailwind CSS v4 の @theme カスタムプロパティとしてプロジェクトの CSS エントリファイルに書き出すスキル。Figma URL を引数に渡すだけで使えます。
→ GitHub
figma-audit
Figma フレーム URL を受け取り、AI が正確に実装できる構造かどうかを4つの観点で検査してレポートを出力するスキル。レイヤー命名・構造の明瞭さ・自動レイアウトの整合性・コンテンツの分かりやすさなどをチェックします。
→ GitHub
figma-component-audit
Figma コンポーネント／コンポーネントセット URL を受け取り、バリアント構造・コンポーネントプロパティ・AI 実装精度を5つの観点で監査してレポートを出力するスキル。コード生成や AI 実装の精度向上に向けた改善提案を行います。
→ GitHub
figma-node-check
use_figma で Figma ノードを生成する前に読み込むチェックルール集。セクションの高さが100pxに潰れるバグ（resize() 後に primaryAxisSizingMode が FIXED のまま固定される問題）の防止と、生成後の必須確認フロー（高さ数値確認 → スクリーンショット比較 → 目視確認）を規定します。スキル自体は単体でも動作しますが、create-mockup で「Figma ノードとして生成」を選択した際には同じ階層にこのスキルがあれば自動的に読み込まれます。詳しくは下記の依存関係の項目をご覧ください。
→ 非公開
figma-workflow
Figma URL を受け取り、実装 → レビュー → 最適化 → Tailwind レビューの各フェーズをサブエージェントで逐次実行するワークフロースキル。プロジェクトの種類（Astro / React / Vanilla）を自動検出して適切な手順に分岐します。大きなページは、Hero・Features・CTA などセクション単位のフレームを渡して複数回実行するのが推奨です。
→ 非公開
figma-weather
Figma フレーム URL を受け取り、AIが正確に実装できる構造かどうかを4つの観点で分析し、天気予報形式（☀️ 快晴〜🌀 台風）でスコアを出力するスキル。チェック内容は figma-audit と同じで、出力形式が異なります。figma-pipeline と組み合わせて実装前の品質チェックに使います。スコアが低い場合はレイヤー命名・変数設定を見直すと実装精度が上がります。
→ 非公開
figma-pipeline
Figma フレーム URL を受け取り、figma-weather による品質チェック → スターターキットのセットアップ → Figma 変数の同期 → コード実装 → 開発サーバー起動までをまとめて実行するパイプラインスキル。新規プロジェクトを Figma デザインから一気に立ち上げたいときに使います。変数の有無によってトークン同期の方向（Figma→コード / コード→Figma）が自動的に分岐します。
→ 非公開
mockup-pipeline
プロジェクトセットアップのオーケストレーターとなるスキル。フレームワーク・ベースフォントサイズ・タイプスケール・DESIGN.md・モックアップスタイルなどの設定をまとめて収集してから、setup-* → create-design-md → tailwind-typescale → create-mockup / create-multi-mockup の順でパイプライン実行します。途中で質問を繰り返さず、一連の作業をまとめて行いたいときに使います。
→ 非公開
japanese-web-guideline
日本語Webサイト・ページの実装時に、AIが陥りやすいデフォルト設定を補正するガイドラインスキル。見出しの揃え方・イタリック回避・行間・モバイル文字サイズ・日本語コンテキストに合ったカラーの選び方などをカバーします。日本語サイトを実装・レビューする際に判断基準として参照します。
→ 非公開
visual-polish
実行中のページのスクリーンショットを撮りながらレイアウト・見た目の問題を自律的に修正するスキル。デスクトップとモバイル両方を確認し、最大5回のループで問題がなくなるまで繰り返します。2回目以降は判事エージェントが品質チェックを担い、修正担当のエージェントが自ら適当に作業をやめてしまうのを別の目線から監視します。Figma URL を渡すとデザインとの比較も行えます。
→ 非公開
code-to-figma
Figmaの公式Chrome拡張では難しい書き出しをスキルで解決。コードベースからページを複数選択してDesktop/Mobileそれぞれをキャプチャする「Code to Canvas」、オートレイアウト付きノードからコンポーネント・変数バインドまで生成する「ノード生成」など、書き出しの深さをレベルで選択できます。プロンプトでの指示ではなく選択肢から選んで実行するので、意図どおりに動かないストレスを解消。
→ 非公開
---
新作の「code-to-figma」スキルは、セミナー先行で公開予定。使い方の動画は、セミナー終了後に本編に追加します。