Wireweaveとは？

Wireweaveは、シンプルで人間が読みやすい形式でUIワイヤーフレームを記述するために設計されたドメイン固有言語（DSL）です。AIアシスタントが会話を通じて自然にワイヤーフレームを生成できるように特別に作られました。

なぜWireweaveを使うのか

従来のワイヤーフレームツールは手動のドラッグ＆ドロップ操作が必要ですが、AIアシスタントはこれを実行できません。Wireweaveはテキストベースの形式を提供することでこの問題を解決します：

• 読み書きが簡単 - 人間もAIも構文を理解できます
• プロフェッショナルな出力を生成 - クリーンなHTML/SVGワイヤーフレームを生成します
• 高速な反復をサポート - コードを変更すると即座に結果を確認できます
• AIツールと統合 - ネイティブMCP（Model Context Protocol）サポート

例

シンプルなログインページのワイヤーフレームです：

page "Login" {
  card center {
    heading "Welcome Back"
    input "Email" email
    input "Password" password
    button "Sign In" primary
    link "Forgot password?"
  }
}

このコードは、適切なスタイリングとレイアウトが適用された完全なワイヤーフレームを生成します。

主な機能

セマンティックコンポーネント

Wireweaveは、一般的なUIパターンにマッピングされる高レベルUIコンポーネントを提供します：

• Page - ルートコンテナ
• Card - オプションの境界線を持つグループ化されたコンテンツ
• Form - ラベル付きの入力フィールドコレクション
• Table - ヘッダー付きのデータ表示
• Navigation - メニューとリンク

複数の出力形式

さまざまな形式でワイヤーフレームを生成します：

• HTML - CSSを含むインタラクティブなプロトタイプ
• SVG - ドキュメント用の静的イメージ
• AST - カスタムレンダラー用のJSON

AI統合

WireweaveはAIアシスタントと連携するように設計されています：

• MCPサーバー - Model Context Protocol統合
• VS Code拡張 - シンタックスハイライトとプレビュー
• Markdownプラグイン - ドキュメントにワイヤーフレームを埋め込み

次のステップ

• はじめる - インストールして最初のワイヤーフレームを作成
• コンポーネントリファレンス - 利用可能なコンポーネントの完全なリスト
• 文法リファレンス - 完全な文法ドキュメント