Claude Code SkillがStitchデザインをピクセルずれゼロでNext.jsに変換

このツールの機能

Claude Codeスキル（スラッシュコマンド）は、Google Stitch AIのデザインをNext.jsコンポーネントに変換し、この作業でClaudeを使用する際に典型的に発生するピクセルずれを防止します。このツールは、Claudeがtext-[15px]のような値をtext-smに丸めたり、#1E293Bのような正確な色をbg-slate-800のような近似のTailwindクラスに置き換えたり、期限切れのCDN URLによる画像アセットの喪失、フォントの見落としなど、特定の課題に対処します。

主な機能とプロセス

• MCP経由でStitchから正確なHTML/CSSを抽出 - コピー＆ペーストやスクリーンショットは不要
• 正確なピクセル値を全体にわたって保持（text-[15px]はtext-[15px]のまま、Tailwindクラスに丸められない）
• URLの期限が切れる前に、Stitch CDNからすべての画像をダウンロード
• 29種類のStitchフォントすべてをnext/font/googleに適切にマッピング
• 進む前に出力をソースと比較する5つの必須検証チェックポイントを含む
• 正確に保持された内容と判断が必要だった内容を示す完全な監査レポートを生成
• 正確なスタイルオーバーライドによるShadCN/UIコンポーネントマッピングをサポート

インストールとセットアップ

インストール方法: curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash

インストール時には、stitch-mcpサーバーも自動的に設定されます。

検証チェックポイントが必要な理由

検証チェックポイントは、Claudeが独力で作業する際にTailwindの慣習にずれていく傾向に対処します。このスキルのプロンプトはこのパターンを明示的にフラグ付けし、各段階で再検証を強制します。完全に失敗しないわけではありませんが、このアプローチにより、一般的な失敗モードが連鎖する前に捕捉できます。

このツールはGitHubで利用可能です: https://github.com/yshaish1/stitch-to-nextjs