ポイント＆クリックによる要素選択
⌃⇧1でインスペクターを開き、ライブページ上でカーソルを合わせ、作業したい要素をクリックします。このサイトでは、ボタン、カード、セクション、個々のテキスト行などを選択できると説明されています。
概要
Skissoは、コーディングエージェントとともに作業する人向けの、ブラウザベースのインターフェース編集・パッチ生成ツールです。ライブページ上の要素を選択し、表示結果を直接調整して、エージェントが実装するための変更内容を構造化された説明としてコピーできます。
コピーされたパッチには、対象要素のアドレス、変更されたプロパティ、変更前後の値が含まれます。このサイトでは、長い視覚的な説明を具体的な引き継ぎに置き換える方法としてこのワークフローを位置づけており、localhostを含む任意のページでインスペクターを開けると説明しています。
機能
ライブインターフェース編集
意図する結果を文章で説明する代わりに、レンダリングされたページ上でスペーシング、色、タイポグラフィ、レイアウト、コピー自体を直接変更します。
正確なパッチ生成
変更を、要素のアドレス、変更された各プロパティ、変更前後の値を含む、クリップボードにコピーできるdiffに変換します。
任意のスクリーンショットコンテキスト
構造化された変更情報に加えて、任意のスクリーンショットをパッチに含めることができ、コーディングエージェントに追加の視覚的コンテキストを提供します。
ブラウザからエージェントへの引き継ぎ
ブラウザベースのインターフェースと、ターミナルで作業するコーディングエージェントをつなぐワークフローとして設計されており、localhostから配信されるページにも対応します。
ユースケース
localhostのプロトタイプを調整する
実行中のローカルビルドでカード、ボタン、見出し、セクションを選択し、意図した結果になるまで外観を調整して、生成されたパッチをエージェントに渡します。
正確なUI調整を伝える
文章によるプロンプトで対象を特定する時間をかけずに、スペーシング、色、タイポグラフィ、レイアウトなどの小さな視覚的修正を行います。
エージェントが構築したインターフェースをレビューする
エージェントがブラウザベースのレビューに基づいて変更を実装する際、変更前後の値と対象アドレスを具体的な引き継ぎ情報として使用します。
パッチとともに視覚的コンテキストを送る
構造化されたパッチに編集後の状態について追加の視覚的コンテキストが必要な場合、任意のスクリーンショットを含めます。
Pros and Cons
Pros
- 文章による説明だけに頼らず、レンダリングされたインターフェース上の要素を直接指定できます。
- 要素のアドレスとプロパティの値を含む、変更前後のパッチとして変更内容を表示します。
- スペーシング、色、タイポグラフィ、レイアウト、コピーなど、一般的なインターフェースの詳細を編集できます。
- localhostのページで使用でき、引き継ぎに任意のスクリーンショットを含められます。
Cons
- 利用可能な情報では、具体的なコーディングエージェント連携、ブラウザやオペレーティングシステムの対応、料金、チーム機能について説明されていません。
- このツールはCSSとライブページの変更を中心に紹介されており、より広範な編集機能や本番デプロイ機能があるとは、情報から確認できません。
FAQ
Skissoはどのように開きますか？
Skissoは、localhostを含む任意のページで、キーボードショートカット⌃⇧1を使って開くブラウザベースのツールとして紹介されています。
インターフェース要素はどのように選択しますか？
要素にカーソルを合わせてクリックすると選択できます。このページでは、ボタン、カード、セクション、個々のテキスト行を選択できると説明されています。
どのような変更を加えられますか？
ライブページ上で、スペーシング、色、タイポグラフィ、レイアウト、コピーを直接調整できます。変更は、レンダリングされたインターフェースに対して行うCSSの変更として説明されています。
Skissoは何をクリップボードにコピーしますか？
Enterキーを押すと、選択した要素のアドレス、変更されたプロパティ、変更前後の値、任意のスクリーンショットを含むパッチがコピーされます。そのパッチをコーディングエージェントに渡せます。
どのコーディングエージェントとプラットフォームに対応していますか？
このサイトでは、ターミナルで動作するコーディングエージェントについて明示的に言及し、Skissoはlocalhostで開けると説明しています。具体的なエージェント、連携、オペレーティングシステム、ブラウザ要件については特定していません。
Quick Facts
- カテゴリー
- 開発者ツール；デザインツール
- 主なワークフロー
- 要素を選択し、ライブページを編集して、パッチをコピー
- アクセス方法
- ⌃⇧1で開くブラウザベースのインスペクター
- 出力
- 対象アドレス、変更前後の値、任意のスクリーンショットを含むクリップボードパッチ
- エージェントの利用環境
- ターミナルで動作するコーディングエージェント向けに設計
- ローカル開発
- localhostを含むページで動作するとサイトに記載
Skissoの代替品
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プラットフォームです。ルーム単位のメッセージ、入力中表示、プレゼンス、リアクション、メッセージ更新に対応し、利用量ベースの料金も選べます。