Claude Code × Figma オリジナルスキル講座 — All-in-One Bundle
AIには、
毎回"指示"するより
"スキル"を渡した方が速い
インターネット黎明期からWeb制作の現場に立ち続け、Web制作関連書籍の執筆・監修やFigmaの企業研修講師も務める著者が、実務の時間単価を最大化するために作ったオリジナルスキル群を一挙公開。プロンプトの書き方ではなく、エージェントが理解できる「スキル」の作り方・使い方を学ぶ講座です。
76個
収録スキル数（Claude版 46個 + Figma版 30個、一般非公開のものを含む）
60本
解説動画の本数
6h5m
総再生時間（2026年9月20日時点）
その"やり取り"、
毎回ゼロからやっていませんか。
- 同じような指示を、案件のたびにゼロから書き直している
- 思った通りの結果になるかは、そのときの運と勘に左右される
- うまくいった手順を、チームや将来の自分に共有できない
スキルは、うまくいった手順をAIエージェントが理解できる形で保存し、何度でも呼び出せる「型」にする仕組みです。プロンプトを都度書く代わりに、スキルを渡すだけで再現性のある結果が得られます。
講座の中身
「使い方」だけでなく「そのスキルの中身」まで解説する、実践と学習の両面を持つパッケージです。
専門性・実績に裏打ちされた内容
黎明期からWeb制作の現場に立ち続け、書籍の執筆/監修やFigmaの企業研修講師としての実績を持つ著者の実務知見をそのまま形にしている。
76スキル × 動画60本のボリューム
一般非公開のスキルを含む全76個を日本語化し、そのスキル解説を動画にして約6時間5分に凝縮。スキルは不定期で機能改善・強化のため更新予定。
プロンプトではなく"スキル"形式
Figmaを使う実務現場でそのまま活用できる実践的スキル集であると同時に、自分の業務に合わせて改善・開発する教材にもなる。
収録スキルの一例
全76スキルのうち、代表的なものを紹介します。
本バンドルには、Claude Code向けの「KMRVID Claude Skills」（46スキル）と、Figma用に最適化されたカスタムスキル「KMRVID Figma Skills」（30スキル）の両方が含まれます。
Tailwind最適化系
css-to-tailwind
オリジナルのプレーンなCSS / Sass・SCSS のコードベースから Tailwind CSS v4 への初回移行を支援。
Figma連携・品質チェック系
figma-layer-rename
Figmaのフレーム/セクション全体を走査し、自動生成されたレイヤー名を意味のある名前にリネーム。
Figma連携・品質チェック系
figma-tokenize
変数なしのFigmaでハードコードされた色・フォントサイズ・スペーシングをトークン化して変数バインド。
モックアップ作成系
create-mockup
Figmaなしで、サイトの種類・デザインスタイル・ページ構成をヒアリングしながらUIをゼロから組み上げる。
Figma連携・品質チェック系
figma-audit / figma-weather
Figmaフレームの構造がAIにとって実装しやすいかを4つの観点で検査し、天気予報形式でスコアを提示する。
Tailwind最適化系
tailwind-review
Tailwind CSSのv3→v4移行チェックやアクセシビリティ構造の検証・自動修正まで一括で行う。
日本語サイト品質ガイドライン
japanese-web-guideline
見出しの折り返し・行間・文字サイズなど、日本語サイト特有にAIが陥りやすい実装のクセを補正する。
オーケストレーション系
mockup-pipeline / full-pipeline
セットアップからモックアップ生成、仕上げの調整までを一括で自動実行するパイプラインスキル。
講師紹介
こもりまさあき
1990年代前半、都内のDTP系デザイン会社でアルバイトを始め、大学卒業後にそのまま正社員として入出力・デザイン・ネットワーク関連の業務に従事。2001年に独立し、以降フリーランスとして活動を続けている。
案件ごとに担う役割が異なるため、単一の職域的な肩書きは持たない。Web制作関連書籍の執筆を多数手がける一方、近年はフロントエンド周りの制作業務に関わりながら、Figmaの企業研修講師やデザインシステム構築、Shopifyの運用サポート、コンサルティングなど幅広く活動中。本講座のスキル群も、こうした実務の中から生まれたものをそのまま形にしている。
これまでの執筆・監修書籍一覧（Amazon）
プロンプトを書く技術ではなく、AIと働くための「仕組み」を作る技術を届けたい。
料金
29,800円で、
すべてのスキルを
Claude Code版46スキルとFigma版30スキル、全76スキルを収録した「KMRVID Skills - All-in-One Bundle」は、29,800円（税込）の買い切りでお申し込みいただけます。
- 全76スキル（Claude版46個 + Figma版30個、非公開のものを含む）
- 解説動画60本・約6時間5分
- Claude版とFigma版を通常価格で個別に購入するより5,400円お得
- 使い方だけでなく、作り方の解説付き
- 買い切り・視聴期限なし
公式LINE友だち登録で、さらに10%OFFクーポンも配布中
LINEで10%OFFクーポンを受け取る個別パッケージ
必要な分だけ、
単体でも
Claude Code版とFigma版は、それぞれ単体パッケージとしても購入できます。使う環境が決まっている方は、こちらから詳細をご確認ください。
Claude Code
KMRVID Claude Skills
Claude Codeで動く、セットアップ・モックアップ作成・Figma連携・Tailwind最適化・仕上げまでを網羅したスキル群。
- スキル
- 46個
- 解説動画
- 40本
- 総時間
- 約4時間10分
19,800円税込・買い切り
Figma Design Agent
KMRVID Figma Skills
Figma Agentのカスタムスキルで動く、Figma専用スキル群。キャンバス上で選択して呼び出すだけで使えます。
- スキル
- 30個
- 解説動画
- 20本
- 総時間
- 約1時間55分
15,400円税込・買い切り
両方使いたい場合は、All-in-One Bundle（29,800円）がおすすめです。通常価格で個別に購入するより5,400円お得になります。
FAQ
よくある質問
Claude版・Figma版の単体パッケージとの違いは何ですか？▾
「KMRVID Skills - All-in-One Bundle」は、Claude Code向けの「KMRVID Claude Skills」（46スキル・動画40本）と、Figma Design Agent向けの「KMRVID Figma Skills」（30スキル・動画20本）の両方を収録したセットです。それぞれ単体でも購入できます。詳しくはKMRVID Claude Skills、KMRVID Figma Skillsのページをご覧ください。
スキルはどんな環境で使えますか？▾
Claude版は、主にClaude Code環境と、Vite + Tailwind CSS v4構成のフロントエンドプロジェクトを想定しています。利用環境やツールのバージョンによっては、正常に動作しない場合があります。個別のスキル修正・動作サポート対応は行っておりませんので、あらかじめご了承ください。
Figma Design Agent 専用スキルはどんな環境で使えますか？▾
従来の Claude Code 版から処理していた作業を Figma のUI内で実行できるように最適化されたカスタムスキルです。Design Agentに登録してFigma内で利用可能です。 Figmaのフレーム構造を解析してAI実装精度を診断、変数化されていない値を変数化して紐付ける、テキストを抽出してスタイル化し紐付ける、選択されたレイヤーで繰り返し登場するフレームを自動抽出してバリアント付きのコンポーネントを生成するなど、Figma内での作業効率を大幅に向上させます。詳しくはKMRVID Figma Skillsのページをご覧ください。
購入前にスキルの動作を試すことはできますか？▾
軽量版スキル「create-mockup-lite」をGitHubにて無料公開しています。購入前にお使いの環境で動作をご確認いただけます。使い方はこちらの記事でも動画付きで紹介しています。
プログラミング未経験でも受講できますか？▾
Figmaやコーディングを日常的に行うWeb制作者・フリーランスを主な対象としています。スキルの「作り方」も解説するため、AI活用ワークフローを学びたい方にも役立つ内容です。
講座の詳細な内容はどこで確認できますか？▾
全スキルの詳細・依存関係を紹介するスキル紹介ページを別途ご用意しています。詳しくはこちらからご確認ください。
本ページはコードに触れず、本講座収録スキルのみで約1時間30分で作成されました（使用モデル: Sonnet 5 - High）
