Siteprint
Siteprint · コーディング · プロンプト
Siteprintは実際のブラウザでサイトの色、フォント、余白、レイアウトを測り、それをプロンプト、DESIGN.md、テーマファイルに変えてAIコーディングエージェントに渡すツールだ。
Siteprint について
About
Siteprintとは
Siteprintはウェブサイト設計抽出ツールである。URLを貼ると、サービス側の実際のブラウザでページが開き、20秒ほどでパレット、フォントスタック、書体スケール、余白の刻み、角丸、影、イージング曲線、ブレークポイント、ロゴ、フレームワークが並ぶ。値はすべてレンダリング後のページから測るので、訪問者が見ている姿が出てくる。スタイルシートの建前ではない。
解いているのは、AIビルダーが必ずといっていいほど受け取る指示、「このサイトみたいにして」だ。スクリーンショットは見た目を運ぶが、値は運ばない。エージェントは16進の色コード、行高、ボタンの内側余白を勘で埋め、そのあと1時間ピクセルを押して回ることになる。サイトをプロンプト化する工程がこの製品の中心で、SiteprintはLovable、Claude Code、Cursor向けに書いたプロンプトに正確な値を載せる。さらにDESIGN.mdを添え、設計を固定ページではなく方向性として記述する。
始める前に押さえるべき制約が2つある。Siteprintは設計を測るだけで作らない。コードを書くのはエージェントか人だ。そしてWeb版は自社サーバーからページを読むため、自動アクセスを拒むサイト、ログインの内側、ページの一部だけを対象にする場合はMacのSafari拡張が要る。
はじめかた
- siteprint.appを開き、サイトのアドレスを貼る。この段階でアカウントは不要だ。
- スキャンを待つ。実際のブラウザでサイトを開くので20秒ほどかかり、そのあと測定値がページに並ぶ。
- 必要な区画を読む。色と役割、フォントとテキストスタイル、余白と形状、影とモーション、ブレークポイント、素材と技術。値はクリックでコピーできる。
- 再構築プロンプトとDESIGN.mdはログインしてProへ。Build with this designを開き、プロンプトをLovable、Claude Code、Cursorに貼る。
- MacのSafariで作業するなら拡張を入れる。ログインの内側、単一セクション、自動アクセスを拒むサイトをスキャンでき、保存したスキャンをMCP経由でエージェントに読ませられる。
AIツール情報
Siteprintの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者と個人開発者：目で測るスクリーンショットではなく、寸法、ウェイト、曲線が入ったプロンプトを受け取れる。Proの支払いが条件だ。
- 参考サイトを調べるデザイナー：無料枠でもパレット、フォント、余白が見られ、アカウントも要らない。競合の下調べはほぼこれで足りる。
- 雰囲気は言葉にできるがCSSは書けない創業者やマーケター：数字はプロンプトが運ぶので、エージェントが形容詞を解釈しなくて済む。
- 複数製品の見た目を揃えたいチーム：保存したDESIGN.mdと書き出したデザイントークンで、全員が同じ参照ファイルを見られる。
タスク
- AIビルダーでランディングページを作り直す：レイアウト、モーション、正確な寸法をLovable、Claude Code、Cursor向けにまとめる。
- 気に入ったサイトからデザイントークンを引き出す：書き出しにはTailwind v4、shadcn/ui、CSS変数が含まれる。
- 作りかけの画面を参考サイトに寄せる：Match your buildが自分のページとスキャン済みのサイトを比べ、差を埋めるプロンプトを返す。
シーン
- 社内ダッシュボードをチームが承認済みの見た目に変える：スキャンはLibraryに残り、エージェントがlist_designsとget_designで取り出す。
- 2つのサイトから新しい視覚方向を組む：Composeで片方の色に、もう片方の書体とレイアウトを重ねる。
- リニューアル前に競合の書体スケールと余白のリズムを調べる：無料スキャンがサイズと余白の刻みを並べ、レイアウトが切り替わるブレークポイントも示す。
主な機能
役割つきのパレット
ページ上の色をすべて拾い、中性色と有彩色に分け、HEX、RGB、HSLで示す。スキャン1回がそのサイトのデザインシステムになる。色に加えて、キャンバス、サーフェス、テキスト、淡色といった役割を付けるので、どの色をどこに置くかがエージェントに伝わる。ダークモードの派生やグラデーションは、使われていれば別枠で記録する。
書体と書体スケール
タイポグラフィのパネルには、フォントファミリー、ウェイト、読み込んでいるファイルとその配信元が並ぶ。テキストスタイルにはサイズ、行高、字間、適用先の要素が付く。スクリーンショットが渡せない部分はここで、作り直しがずれ始めるのもたいていここだ。
余白、形状、モーション
余白の刻み、角丸、コンテンツ幅はレンダリング後のレイアウトから読み取る。推測はしない。影、イージング曲線、継続時間にはプレビューが付き、カーソルを乗せると再生される。参考サイトでは正しく見えるボタンが自分の実装で変に見えるとき、これが効く。
再構築プロンプトとDESIGN.md
Proはスキャン1回を、レイアウト、モーション、寸法を記述した1本のプロンプトに変える。指定したAIビルダーの書式に合わせる。DESIGN.mdは同じ設計を固定ページではなく方向性として書くので、参考サイトにまだ存在しない画面にもエージェントが適用できる。
書き出しとデザイントークン
プロンプトに加えて、Tailwind v4の設定、shadcn/uiのテーマ、CSS変数、トークンファイルを書き出す。色もテキストスタイルも名前を付けて配置済みなので、手作業のリネームで半日溶かす工程がなくなる。
MCP経由のエージェント接続
Safari拡張はローカルのMCPデザインサーバーを立て、list_designs、get_design、get_reference_imageの3つのツールを出す。Claude Code、Cursor、Codex、その他のMCPクライアントが、保存済みスキャンをプロンプト、デザイン、レイアウト、Tailwind設定、shadcnテーマ、CSS、JSONとして読める。Web版はLibraryからエージェントをつなぐ。拡張側の経路ではファイルがマシンの外に出ない。
Match your build
自分の版のアドレスを貼ると、Siteprintが参考サイトと比べる。返ってくるのは修正リストと、ページを元の姿に寄せるプロンプトだ。レイアウトが数ピクセルずれているとき、色コードの差分を見るより役に立つ。
メリットとデメリット
メリット
- サイト数に制限なく無料で調べられ、クリックでコピー、登録も不要。
- 値は実際のレンダリングから取るため、静的HTMLでは見えない計算済みスタイルも入る。
- 再構築プロンプトがLovable、Claude Code、Cursorなどを名指しするので、手書きの手間が減る。
- Safari拡張はページをローカルで読むため、ログインの内側やボット拒否のサイトにも届き、スキャンはMacに残る。
- ComposeとLibraryで、単発の下調べが再利用できる参照セットになる。
デメリット
- 再構築プロンプト、DESIGN.md、書き出しはProの内側にある。無料枠は問いに答えるが、作るための素材は渡さない。
- Webのスキャンは1回20秒ほどかかり、自動アクセスを拒むサイトでは失敗する。Mac利用者が有料拡張へ流れる理由でもある。
- 拡張はmacOS 14以降のSafari専用で、WindowsやChromeの利用者は遅いサーバー経路しか使えない。
- 測るだけで作らないので、出力はエージェントが正しく解釈すべき指示のまま残る。
よくある質問
サイトの検分は無料でアカウントも要らない。色、フォント、余白、素材、技術まで見られる。Proは月9ドルまたは年69ドルで、再構築プロンプト、DESIGN.md、書き出し、動く背景、Match your buildが付く。Safari拡張は別売りで19.99ドルの買い切りだ。
関連コンテンツ
Siteprintに関連するツール、スキル、記事を探す。
Siteprintの代替ツール
Base Code
Base44 (Wix) · コーディング · 生産性向上Base CodeはBase44の共有クラウド開発環境だ。既存のGitHubリポジトリに対する変更をチャットで伝え、プレビューで確認し、プルリクエストとして返せる。
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
GitGlow
GitGlow · コーディング · 生産性向上GitGlow は自分のコードと AI エージェントの変更を一つのレビューにまとめるデスクトップ Git クライアントだ。出荷前に、マシンから何が出ていくのかを確かめられる。