はじめる

このガイドでは、Wireweaveをセットアップして最初のワイヤーフレームを作成する方法を説明します。

インストール

Playgroundを使用する

Wireweaveを試す最も簡単な方法はPlaygroundを使用することです。インストール不要で、すぐにコードを書き始められます！

NPMパッケージ

プロジェクトにコアライブラリをインストールします：

npm install @wireweave/core

AIアシスタント用MCPサーバー

Claudeやその他のAIアシスタントでWireweaveを使用するには：

1. DashboardでAPIキーを取得します

2. Claude Desktopの設定に追加します：

{
  "mcpServers": {
    "wireweave": {
      "command": "npx",
      "args": ["@wireweave/mcp-server"],
      "env": {
        "WIREWEAVE_API_KEY": "your-api-key"
      }
    }
  }
}

3. Claudeにワイヤーフレームの作成を依頼しましょう！

最初のワイヤーフレーム

シンプルなお問い合わせフォームを作成してみましょう：

page "Contact" {
  navbar {
    logo "Company"
    nav {
      link "Home"
      link "About"
      link "Contact" active
    }
  }

  main {
    heading "Get in Touch"
    text "We'd love to hear from you."

    card {
      form {
        input "Name" text
        input "Email" email
        input "Message" textarea
        button "Send Message" primary
      }
    }
  }

  footer {
    text "2026 Company Inc."
  }
}

構文を理解する

ページ

すべてのワイヤーフレームはpageで始まります：

page "Page Title" {
  // コンテンツがここに入ります
}

コンポーネント

コンポーネントはページ内にネストされます：

page {
  card {
    heading "Title"
    text "Description"
    button "Action"
  }
}

モディファイア

モディファイアを追加してコンポーネントをカスタマイズします：

button "Click Me" primary    // primaryスタイル
button "Cancel" secondary    // secondaryスタイル
card center                  // 中央揃えレイアウト
input "Email" email          // メール入力タイプ

次のステップ

• コンポーネントガイド - 利用可能なコンポーネントを学ぶ
• レイアウトガイド - レイアウトオプションをマスターする
• MCPサーバーガイド - AI統合をセットアップする