VibeOps
Powered by 21st.dev MCP

社内ツール開発を、
バイブコーディングで加速する

エンジニアがCursorで「こう動いてほしい」と伝えるだけ。 21st.dev MCPがUIコンポーネントの検索・生成・レビューまで担い、 社内ツールを数日でプロトタイプから本番投入まで支援します。

無料ヒアリングを予約ワークフローを見る
3日
MVP立ち上げ
80%
UI実装工数削減
0
デザイナー待ち

Problem

エンジニアが知っている、社内ツール開発のリアル

社内ツールの開発が後回し

本番機能にリソースが割かれ、申請フォームやダッシュボードはスプレッドシートのまま。現場の不満が積み上がる。

UI実装がボトルネック

ロジックは書けるが、見た目・UX・アクセシビリティで時間を溶かす。毎回ゼロからコンポーネントを組むのは非効率。

デザイナー不在チームの壁

小さな社内ツールのためにデザインレビューを回す余裕がない。結果、使いにくいツールが定着してしまう。

Solution

21st.dev MCP × バイブコーディング
= 社内ツールの新しい開発体験

VibeOpsは、エンジニアが普段使うCursor環境に21st.dev MCPを組み込み、 「言葉でUIを指示 → エージェントが実装 → 人間がレビュー」という バイブコーディングのワークフローを社内ツール開発に最適化します。

  • 21st.dev MCPをCursorに接続し、エージェントがUIカタログを直接検索・取得
  • プロンプトからUIバリアントを生成し、現場で即座に比較・採用
  • 既存プロジェクトのデザインシステムに沿った画面を自動構築
  • a11y・レスポンシブのレビューをエージェントが実行し、修正まで支援
  • チームライブラリとして社内コンポーネントをpublish・共有
.cursor/mcp.json
{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "YOUR_API_KEY"
      }
    }
  }
}

$ エージェントへの指示例

「申請一覧ダッシュボードを作って。
21stで admin table を検索して、
ステータスフィルタ付きで実装して」

Workflow

エンジニア目線の6ステップ

Cursor内で完結。ターミナルを行き来せず、エージェントが21st MCPツールを自律的に呼び出します。

01

要件をバイブで伝える

「こういう画面が欲しい」「このワークフローを自動化したい」を自然言語で。仕様書より会話から始める。

02

21st MCPでUIを探索

エージェントが search / get_component でカタログから最適なUIを取得。依存関係ごとプロジェクトに組み込む。

search · get_component
03

AI生成でバリアント比較

generate で複数案を生成し、現場でプレビュー。iterate で微調整してから採用。

generate · iterate
04

既存コードベースに統合

21st-ui-build スキルで、プロジェクトのデザインシステム・命名規則に沿って本番品質のUIを構築。

21st-ui-build skill
05

自動レビュー & 修正

21st-ui-review でa11y・レスポンシブ・デザイン一貫性を監査。問題点をエビデンス付きで修正。

21st-ui-review skill
06

チームライブラリ化

publish で社内コンポーネントを共有。次のツール開発は install 一発で再利用。

publish · team library

Offering

提供プラン

エンジニアチームの規模と成熟度に合わせて選べます。 すべてのプランに21st.dev MCP環境構築が含まれます。

Kickstart

まず1本、試す

¥300,000〜/ 2週間

社内ツール1本のMVPを、21st MCP環境込みで立ち上げ

  • Cursor + 21st MCP セットアップ
  • 21st Skills インストール & チーム研修（2h）
  • 社内ツール MVP 1本 開発支援
  • チームライブラリ初期構成
  • 引き継ぎドキュメント
このプランで相談
おすすめ

Scale

チームに定着させる

¥800,000〜/ 1ヶ月

複数ツール開発 + ワークフロー定着 + レビュー体制構築

  • Kickstart の全内容
  • 社内ツール 最大3本 開発支援
  • 21st チームライブラリ設計 & publish
  • コードレビュー & a11y監査（各ツール）
  • バイブコーディング ガイドライン策定
  • 1ヶ月間のSlackサポート
このプランで相談

Embed

内製化まで伴走

要相談/ 3ヶ月〜

エンジニアチームが自走できる状態までフルサポート

  • Scale の全内容
  • 社内ツール 無制限 開発支援
  • エンジニア向けハンズオン研修
  • CI/CD + デプロイパイプライン構築
  • 21st テーマ & デザインシステム同期
  • 専任エンジニア アサイン
このプランで相談

FAQ

よくある質問

21st.devが提供するMCP（Model Context Protocol）サーバーです。Cursor等のAIエディタから、UIコンポーネントの検索・コード取得・AI生成・レビュー・publishが可能。エージェントが自律的に呼び出せます。

Contact

社内ツール、まだスプレッドシートですか？

30分の無料ヒアリングで、貴社の課題に合った21st MCP導入プランをご提案します。 「こんなツール作りたい」というアイデアだけでもOK。

hello@vibeops.devSlack / Teams で相談