Siteprint

SiteprintはMac向けSafari拡張機能。Webサイトの色、タイポグラフィ、余白、レイアウトなどを計測し、参照サイトを具体的なプロンプト、DESIGN.md、コーディングエージェントのワークフローに変換できます。

Webサイトからコーディングエージェントへの、計測に基づく引き継ぎ

Siteprintは、閲覧中のWebサイトのデザインを計測するMac向けSafari拡張機能です。ページのカラーパレットと色の役割、タイポグラフィのスケール、余白、角丸、シャドウ、セクション構成図を記録し、コーディングワークフローで使える具体的なデザイン値を提供します。

無料版では、検査、トークンのエクスポート、保存したスキャン用のライブラリを利用できます。Proでは、スキャンを1つのプロンプトまたはDESIGN.mdファイルに変換でき、テーマと、保存した2つのサイトを組み合わせるComposeが追加されます。また、対応するコーディングエージェントがスキャンを直接読み取れるようになります。Siteprint自体がサイトを構築するわけではなく、接続したコーディングエージェントが計測結果を使って新しいページを作成します。

Siteprintでできること

デザイントークンを計測する

SafariでWebサイトを読み取り、サンプルした色の一覧だけでなく、それぞれの役割も特定します。

ページ構造を検査する

パレット、タイポグラフィ、ページのセクション構成図を表示し、エクスポート前に参照デザインを確認できます。

コーディング用の概要を生成する

計測した値をコーディングエージェント向けの1つのプロンプトにコピーできます。ProではDESIGN.mdもエクスポートできます。

デザインの方向性をエクスポートする

新しいインターフェースで使うテーマとトークンをエクスポートし、文字サイズ、ウェイト、角丸、余白などの具体的な値を保持します。

2つの参照を組み合わせる

保存した2つのサイトスキャンを組み合わせ、どちらか一方をそのままコピーするのではなく、新しいスタイルを作成します。

スキャンをコーディングエージェントと共有する

Claude Code、Cursor、Codexなどのコーディングエージェントに接続し、Mac上で保存したスキャンを直接読み取れるようにします。

Siteprintの実用的な使い方

参照サイトをもとに新しいインターフェースを始める
Safariで参照サイトをスキャンし、タイポグラフィ、余白、パレット、セクション構成図を確認して、見た目を手作業で説明する代わりに、計測した方向性をAIコーディングツールに渡します。
デザイン参照を組み合わせる
複数のスキャンをライブラリに保存し、Composeで2つのデザイン参照を組み合わせ、オリジナルページ向けの新しいスタイルを作成します。
開発者への引き継ぎを作成する
開発者が実装やリスタイリングの際に、色、文字、角丸、余白の具体的な値を必要とするとき、トークンとテーマをエクスポートします。
エージェントにデザインコンテキストを提供する
Claude Code、Cursor、Codexに保存したスキャンへの直接アクセスを許可し、エージェントがコーディングワークフロー内で計測済みのデザインコンテキストを使えるようにします。
既存のビジュアルシステムを分析する
検査ビューを使って既存Webサイトがビジュアルシステムをどのように構成しているかを調べ、別のプロダクトに何を応用するかを決める前に分析します。

Pros and Cons

Pros

色の役割、タイポグラフィのスケール、余白、角丸、シャドウ、セクション構造など、具体的なデザイン要素を計測できます。
サイトの検査、トークンのエクスポート、ライブラリへのスキャン保存を無料で利用できます。
コーディングワークフロー向けに正確な値を含むプロンプトまたはDESIGN.mdを作成でき、Claude Code、Cursor、Codexに対応しています。
スキャンをMac上でローカル処理します。サイトでは、データをアップロードせず、ユーザーを追跡しないと説明されています。
保存した2つのサイトスキャンを新しいスタイルに組み合わせるComposeに対応しています。

Cons

現在はMac向けのSafari拡張機能で、macOS 14以降が必要です。ChromeとiPhoneには対応していません。
デザインの計測とエクスポートは行いますが、Webサイト自体を構築するわけではありません。その工程は別のコーディングエージェントが担います。
コーディングエージェントとの直接的なワークフローと生成プロンプトはPro機能です。

FAQ

Siteprintの設定方法を教えてください。

Mac App StoreからSiteprintをインストールし、アプリを一度開いてから、Safariの「設定」→「機能拡張」で機能拡張を有効にします。httpまたはhttpsのWebサイトを開き、Siteprintのツールバー・ボタンをクリックして、Safariがサイトの読み取りを許可するようにします。タブをすでに開いていた場合は、再読み込みして「再スキャン」を選択してください。

Apple Intelligenceは必要ですか？

いいえ。計測はページ自体から行われます。Apple Intelligenceを搭載したMacでは、オンデバイスモデルを使ってスキャンを追加で説明したり、「このデザインについて質問」から質問に回答したりできます。

SiteprintはWebサイトを自動で構築しますか？

いいえ。Siteprintはデザインを計測し、プロンプトまたはDESIGN.mdを出力します。Claude Code、Cursor、Codexなどのコーディングエージェントが、その情報を使ってページを構築します。

FreeとProには何が含まれますか？

無料プランには、検査、トークンのエクスポート、ライブラリが含まれます。Proでは、生成プロンプト、DESIGN.mdとテーマ、Compose、コーディングエージェントへのアクセスが追加されます。Proは一回限りの購入で、価格は$9.99です。

コーディングエージェントはスキャンを直接読み取れますか？

はい。機能拡張で「生成」→「コーディングエージェント」を開き、Claude Code、Cursor、Codexのコマンドをコピーします。Proが有効になっていれば、エージェントは同じMac上でスキャンをリクエストできます。

Quick Facts

カテゴリー: デザインツールおよび開発者向けツール
プラットフォーム: Mac向けSafari拡張機能、macOS 14以降
ワークフロー: Webサイトをスキャンし、デザインを検査してから、プロンプトまたはDESIGN.mdをエクスポート
コーディングエージェント: Claude Code、Cursor、Codex、LovableなどのAIツール。スキャンへの直接アクセスはClaude Code、Cursor、Codexについて文書化されています
料金: 無料の検査プラン。Proは一回限りの$9.99購入
データの取り扱い: Mac上で動作。サイトではアップロードはないと説明されています

Siteprintの代替品

ByteAsk

ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。

Epherem

Epheremは、Lovable、Bolt、v0、Replit、Cursor、Claude CodeなどのAIコーディングツールで構築したWebアプリ向け静的セキュリティスキャナーです。アプリを実行せず、ソースファイルと依存関係を検査し、一般的なセキュリティミスを分類して修正案を提示します。

CreateOS Sandbox

CreateOS Sandboxは、FirecrackerマイクロVM上でコードやエージェントのワークロードを実行できる分離型コンピュート環境です。SDK、CLI、MCPで制御可能。

GitBot

GitBotは、Claude Code、Codex、OpenCodeを活用した再利用可能なコーディングボットを作成できるローカルブラウザワークスペースです。永続スレッドと権限設定で、リポジトリ内の作業を効率化します。

hob

hobは、エージェントのセッション、ターミナル、履歴、後続作業を、既存のツールやプロバイダーに合わせて整理できる独立したコーディングエージェント向けワークスペース。ローカルでの制御を重視する開発者に最適。

Ably Chat

Ably Chatは、カスタムのリアルタイムチャットアプリを構築できるチャットAPIプラットフォームです。ルーム単位のメッセージ、入力中表示、プレゼンス、リアクション、メッセージ更新に対応し、利用量ベースの料金も選べます。