あなたのClaude Code UI出力がずれる理由と構造化スペックがそれを修正する方法

Claude CodeをUI作業に使用していて、繰り返しプロンプトを与えても一貫しないレイアウトが返ってきて収束しない「出力のばらつき」に悩んでいるなら、その根本原因はプロンプトの質ではないかもしれません。r/ClaudeAIの詳細な投稿によると、実際の問題はフォーマットにあります。Claude Codeは散文的な説明ではなく、構造化された仕様を期待しているのです。

散文 vs 構造化仕様：何が変わったのか

投稿者によると、UIを散文で説明する（「ボタンは左側、角は少し丸く、モダンな見た目」）と一貫性のない結果が得られます。一方、正確な16進数カラーコード、正確なフォントウェイト、正確な間隔、すべての画面状態、すべてのトランジションを含む構造化仕様に切り替えたところ、出力が「解釈的なもの」から「これがそのもの」に収束しました。モデルが推測をやめれば、出力のばらつきはなくなります。

実用的なワークフロー：スクリーン録画 → MCPサーバー

詳細な仕様を手動で書くのは非現実的です。投稿者は、ほとんどの開発者がすでに必要な素材（App Storeのデモ、デザインウォークスルー、開発用録画）を持っていることに気づきました。足りなかったのは、それらの録画をClaudeの構造化フォーマットに変換する方法でした。そこで、まさにそれを行うMCPサーバーを構築し、オープンソース化しました。ビジョンは自身のClaudeサブスクリプションを通じて実行されるため、APIキーの準備は不要です。

重要なポイント

このツールは、ワークフローの変化に付随するものです。レイアウトを散文で説明するのをやめましょう。Claude CodeでUI作業を行う場合は、具体的な値を含む構造化仕様を提供してください。投稿者は問いかけています：UI作業における現在のプロンプトから出力へのワークフローはどのようなものですか？