mcpField
W
website-builder-setup

website-builder-setup

github.com/tenfoldmarcデザイン・UI373586 回インストール28 週間前に更新
リポジトリ

website-builder-setup について

コーディング経験のない人向けに、Claude Code 用の Web サイト制作ツールの導入を案内するスキルです。デザインリソース、Framer Motion、React コンポーネントライブラリを扱い、21st.dev Magic の MCP サーバーも設定します。

主な機能

  1. 01Node.js と npm の確認
  2. 02UI/UX Pro Max のインストール
  3. 03Framer Motion のインストール
  4. 0421st.dev Magic の設定
  5. 05失敗時の案内を含む段階的な導入

活用シーン

  1. 01Claude Code 用の Web デザインツールの準備
  2. 02サイト向けアニメーション依存関係の導入
  3. 0321st.dev Magic コンポーネントサービスの設定
  4. 04ビルド環境の段階的なセットアップ

MCP 対応

このスキルは Claude Code に 21st.dev Magic を MCP サーバーとして設定し、API キーでコンポーネントライブラリに接続します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/tenfoldmarc/website-builder-setup --skill website-builder-setup

インストール後、Claude Code で/website-builder-setupを入力して読み込まれたか確認します。

詳細

Webサイトビルダーのセットアップ

このスキルでは、Claude Codeでプロフェッショナルなアニメーション付きWebサイトを構築するために必要なものをすべてインストールします。コーディング経験は必要ありません。

インストールされるツール

ツール機能
UI/UX Pro Max50種類以上のデザインスタイル、161種類のカラーパレット、57種類のフォントの組み合わせをClaudeが利用できるようにします。生成されたような見た目ではなく、デザインされたサイトに仕上がります。
Framer Motionスムーズなアニメーションを追加します。ページ遷移、ホバーエフェクト、スクロール時の表示効果などにより、サイトに躍動感を与えます。
21st.dev MagicClaudeが利用できる、洗練されたReactコンポーネントを100種類以上収録したライブラリです。プロダクション品質の構成要素がそろっています。

ワークフロー

このスキルが呼び出されたら、各手順を一つずつユーザーに案内してください。励ましながら、わかりやすく説明してください。ユーザーにはコーディング経験がまったくないものと想定してください。いずれかの手順に失敗しても、中断しないでください。失敗したことを伝え、手動で実行するコマンドを案内して、続行してください。

Step 1: 前提条件を確認する

始める前に、必要なものがそろっているか確認します。

次を目立たないように実行してください：

node --version 2>&1 && npm --version 2>&1
  • Node.jsがインストールされている場合 → 「準備OKです。Node.jsがインストールされています。始めましょう。」
  • インストールされていない場合 → 次のように伝えてください：

まずNode.jsが必要です。https://nodejs.org にアクセスして、LTSバージョンをダウンロードしてください。インストールしたら、ターミナルを再起動してから、もう一度 /website-builder-setup を実行してください。2分で終わります。

Node.jsがない場合は、ここで終了してください。

Step 2: UI/UX Pro Maxをインストールする

Step 1 of 3: UI/UX Pro Max

これにより、50種類以上のスタイル、161種類のカラーパレット、57種類のフォントの組み合わせを備えた、大規模なデザインライブラリを利用できるようになります。Webサイトの構築を依頼されたときに、推測で作るのではなく、実際のデザインシステムを参考にします。だから、ありきたりで粗雑なAI生成物のような仕上がりにはなりません。

インストールしています……

次を実行してください：

npm install -g uipro-cli 2>&1

続いて：

uipro init --ai claude 2>&1
  • 成功した場合 → 「UI/UX Pro Maxがインストールされました。デザイン環境の準備が整いました。」
  • 失敗した場合 → 「うまくいきませんでした。あとで手動で試せます：npm install -g uipro-cli && uipro init --ai claude。続けましょう。」
Step 3: Framer Motionをインストールする

Step 2 of 3: Framer Motion

これにより、スムーズなページ遷移、ホバーエフェクト、スクロールに応じて表示される効果など、Webサイトに本格的なアニメーションを追加する方法を利用できるようになります。500ドルのサイトを1万ドル相当に見せるための要素です。

インストールしています……

次を実行してください：

npm install framer-motion 2>&1
  • 成功した場合 → 「Framer Motionがインストールされました。これから構築するサイトに、本格的なアニメーションを追加できます。」
  • 失敗した場合 → 「うまくいきませんでした。あとで手動で試せます：npm install framer-motion。次に進みます。」
Step 4: 21st.dev Magicをセットアップする

Step 3 of 3: 21st.dev Components

これにより、美しくデザインされたReactコンポーネントを100種類以上収録したライブラリに接続できます。すべてを一から作る代わりに、ボタン、ナビゲーションバー、ヒーローセクション、カード、フッターなど、プロダクション品質の構成要素を利用できます。どれもあらかじめデザインされており、すぐに使えます。

この手順では無料のAPIキーが必要です。取得方法は次のとおりです：

  1. https://21st.dev/magic/console にアクセスします
  2. サインアップするか、ログインします（無料です）
  3. APIキーをコピーします
  4. APIキーを求められたら、ここに貼り付けます

ユーザーがAPIキーを入力するまで待ちます。

APIキーが入力されたら、Claude Codeの設定にMCPサーバーを追加します：

~/.claude.json を読み込み、mcpServers オブジェクトを見つけて、次を追加します：

"21st-dev-magic": {
  "command": "npx",
  "args": ["-y", "@21st-dev/magic@latest"],
  "env": {
    "API_KEY": "THEIR_KEY_HERE"
  }
}

設定を書き込んだ後：

21st.dev Magicに接続しました。利用するにはClaude Codeの再起動が必要です。完了したら、ターミナルを閉じてもう一度開いてください。

ステップ 5：完了

これで準備完了です。 インストールしたものはこちらです。

  • UI/UX Pro Max — 50 種類以上のスタイル、161 種類のパレット、57 種類のフォントの組み合わせ
  • Framer Motion — 滑らかでプロフェッショナルなアニメーション
  • 21st.dev Magic — 本番環境ですぐに使えるコンポーネント 100 種類以上

最初のウェブサイトを作るには、次のことを伝えてください。

  • ビジネスの内容
  • 対象となる人
  • 希望する雰囲気（ダーク、ミニマル、大胆、遊び心のあるものなど）

あとはお任せください。たとえば、次のように伝えてみてください。

「中小企業の経営者を対象にした、コンサルティングビジネスのランディングページを作ってください。ダークテーマで、モダンな雰囲気にして、アニメーションも付けてください。」

重要： まず Claude Code を再起動して、21st.dev が読み込まれるようにしてください。それでは、何か作ってみましょう。

ルール

  • 各ステップを一度に 1 つずつ進めます
  • すべての手順を一度にまとめて表示しないでください
  • インストールに失敗しても中断せず、手動で実行するコマンドを伝えて、そのまま進めてください
  • 終始、励ましながら気軽に対応してください
  • コーディング経験がまったくないことを前提にしてください
  • すべてのインストールが完了したら、最初のサイトを作るよう促してください

コメント

Markdown 対応