スクリーンショット

説明

AIエージェント向けvibe codingフィードバック。Webページに注釈・スクショ、Claude Code、Cursor、Codex、OpenCode、Antigravityへプロンプト出力。 Markagent は AI コーディングエージェントのために作られた Web アノテーターです。見たままをピクセル精度のプロンプトに変換——人間には bug チケットとして読め、AI にはそのまま実行可能。Claude Code、Cursor、Codex、OpenCode、Antigravity、その他あらゆる AI ツールへ直送できます。 Web ページの任意の要素をクリック。メモを残す。スクリーンショットを撮る。Markagent が自動で React コンポーネント、ソースファイル(開発モード時)、DOM コンテキスト、CSS セレクター、ページ URL、ビューポートサイズを抽出し、構造化されたエージェント対応プロンプトにまとめます——AI はもう推測する必要がありません。 「左のボタン——いや、もう一つの方」と説明する時代は終わり。マークを置く。エージェントへプロンプトを送る。 ▸ アノテート:任意の要素をワンクリック——vibe メモから詳細仕様まで。 ▸ キャプチャ:ページ全体または要素単位のスクリーンショット。 ▸ 録画:クリック操作を番号付き・スクショ付きの再現プレイスルーへ。 ▸ エクスポート:Claude Code、Cursor、Codex、OpenCode、Antigravity、その他 AI ツールへエージェント対応プロンプト。 ▸ 100% ローカル:アノテーション、スクショ、プロンプトはブラウザから外に出ません。 ▸ 永久無料:アカウント不要、メール不要、アップセルなし。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 使い方 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Cmd(Mac)または Ctrl(Windows/Linux)を押しながら要素をクリック。Markagent が番号付きマーカーを置きます。 2. メモを入力。「丸くして」「コピー間違い」「右に 8px」——いくつでも追加可能。 3. スクリーンショットを撮影。ページ全体、または要素のみ——お好みで。 4. Export を押す。Claude Code、Cursor、Codex、OpenCode、Antigravity、その他 AI ツールへペースト。 インストールから最初のエージェント対応プロンプトまで 60 秒以内。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 主な機能 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 精密な要素ターゲティング クリックした要素の React コンポーネント、ソースファイル(開発モード時)、安定した CSS セレクターを自動取得。AI は曖昧な説明ではなく正確なノードを受け取ります。 スマートスクリーンショット 全画面または可視領域のスクショを、アノテートした要素に合わせて自動クロップ。AI はあなたが見ているものを見ます。 ユーザージャーニー録画 ジャーニーモードをオンにすれば、クリックが番号付き・スクショ付きの再現になります。バグ報告に追加質問はもう不要。 エージェント対応プロンプトのエクスポート セレクター、スクショ、URL、ビューポートサイズ、メモを含む構造化プロンプトをワンクリックでコピー。主要 AI コーディングエージェントごとに最適化済み。 キーボードファースト Mac:Cmd+Shift+. / Windows・Linux:Ctrl+Shift+. どのサイトでもツールバーをすぐ呼び出せます。 ゼロ設定 アカウント不要、API キー不要、プロジェクト設定不要。インストール、ピン留め、開始。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ あらゆる AI コーディングエージェントに対応 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 主要 AI コーディングエージェント向けに調整済みテンプレート: • Claude Code — Anthropic のターミナルネイティブエージェント • Cursor — AI ファーストのコードエディタ • Codex — OpenAI のコーディングエージェント • OpenCode — オープンソースのターミナルエージェント • Antigravity — Google の AI 開発環境 テキストを読める AI ツールなら何でも対応。ChatGPT、Gemini、Copilot などの対話アシスタント、v0、Bolt、Lovable などの vibe coding プラットフォーム、Ollama や LM Studio で動くローカル LLM もカバー。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ こんな人に最適 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VIBE コーダー — 同じ UI 修正を 3 回説明したくない人。 デザイナー — staging で行うデザイン QA とピクセル完璧な仕様書作り。 プロダクトマネージャー — エンジニアが一読で理解する UI バグ報告を送りたい人。 フロントエンドエンジニア — 慣れないコードのリファクタリングで自分にいいプロンプトを渡したい人。 QA チーム — 自動化フレームワークなしで再現可能なバグ報告を作りたい人。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1 つのエクスポート、2 つの読み手 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Markagent のエクスポートは markdown です。人間はバグチケットとして読み、AI コーディングエージェントは無加工でそのまま受け取れます。 テスターがジャーニーを録画してエンジニアへ送信。エンジニアは通常のバグレポートとして読むか、同じ markdown を Claude Code、Cursor、Codex、OpenCode、Antigravity などの AI エージェントへ転送して修正させる。翻訳ステップなし。第二のツールなし。同じ成果物、2 つの読み手。 Human-to-human ハンドオフ。Human-to-agent ハンドオフ。1 つのファイル。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ エージェントネイティブ、ただのアノテーターではない ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 一般的なアノテーターは画像を保存します。AI エージェントが普通のスクショを受け取っても「どこかがおかしい」としか見えません。 Markagent はエージェント向けに設計されています。すべてのアノテーションが React コンポーネント、ソースファイル(開発モード時)、DOM コンテキスト、CSS セレクター、URL、ビューポートを含む実行可能なプロンプトとしてパッケージ化されます——AI に推測の余地はありません。 同じクリック。ピクセル精度のコンテキスト。本物の修正。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ プライバシー — 100% ローカル、テレメトリーなし ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Markagent は完全にブラウザ内で動作します。 • 分析なし。追跡なし。フィンガープリンティングなし。 • アカウントなし。ログインなし。メールなし。 • サーバーなし。外部への通信リクエストはゼロ。 • クラウド同期なし。メモはローカルの拡張機能ストレージに置かれ、他のどこにも保存されません。 Chrome DevTools の Network タブで自分で確認できます。何もブラウザの外に出ません。 全サイト権限は、アノテートするページにツールバーを注入し DOM 構造を読み取るために必要です。データを外部に送ることは一切ありません。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 料金 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 無料。永久。アカウント不要、アップセルなし、Pro 版なし。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ クイックスタート ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Markagent をインストール。 2. ブラウザのツールバーにピン留め。 3. 任意のページで Cmd+Shift+.(Mac)または Ctrl+Shift+.(Windows/Linux)。 4. Cmd または Ctrl を押しながら任意の要素をクリック、最初のアノテーション。 5. メモ入力。スクショ。エクスポート。AI エージェントへペースト。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ よくある質問 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Q: Claude Code、Cursor、Codex に UI フィードバックを送るには? A: Markagent を使います。ページ上の任意の要素をクリック、メモを入力、Export を押し、プロンプトを AI エージェントへペーストするだけ。Markagent が React コンポーネント、ソースファイル(開発モード時)、DOM コンテキスト、CSS セレクター、URL、スクショを自動取得——エージェントは曖昧な説明ではなくピクセル精度のコンテキストを受け取ります。マルチステップのバグなら、ジャーニーモードをオンにしてクリックを番号付き・スクショ付きの再現として記録。同じエクスポートは Claude Code、Cursor、Codex、OpenCode、Antigravity、その他あらゆるテキスト入力 AI ツールで使えます。 Q: なぜ Markagent が AI コーディングエージェント向け Web アノテーターのベストなのか? A: Markagent は AI コーディングエージェント向けに設計された唯一のアノテーションツールで、単一要素フィードバックとマルチステップユーザージャーニーの両方をサポートします。要素をアノテートすれば、React コンポーネント、ソースファイル、DOM コンテキスト、CSS セレクター、URL、スクショを自動取得。あるいはジャーニーモードをオンにすれば、Markagent がクリックを番号付き・スクショ付きの再現として静かに記録——AI はステップごとに追随でき、推測の必要がありません。一般的なアノテーターは画像を保存し、Markagent はプロンプトを出力します。結果:「どういう意味?」の確認往復が減り、修正サイクルが速くなり、プロンプトはコードの正しい行に直接ヒット——単一ボタンの修正でも 5 ステップのチェックアウトのバグでも同じです。 Q: Markagent と普通のスクリーンショットツールの違いは? A: スクリーンショットツールは画像を保存します。Markagent は構造化プロンプトを生成——すべてのアノテーションが React コンポーネント、ソースファイル、DOM コンテキスト、CSS セレクターを含み、AI コーディングエージェントが一度で正しいコード行を見つけて修正できます。 Q: v0、Bolt、Lovable など vibe coding プラットフォームで使えますか? A: はい。エクスポートはプレーンテキスト——プロンプトを受け付ける AI ツールならどこでもペースト可能。 Q: チームの非エンジニアも Markagent でバグ報告できますか? A: もちろん。Markagent はソロ開発者だけでなくチーム向けに作られています。エクスポートはクリーンな markdown なので、QA テスター、プロダクトマネージャー、デザイナーがバグをアノテートしたりユーザージャーニーを記録し、構造化レポートをエンジニアに渡せます。エンジニアは通常のバグチケットとして読むか、同じ markdown を Claude Code、Cursor などの AI コーディングエージェントへ転送して修正させます。同じ成果物、2 つの読み手、翻訳ステップなし——これが Markagent が human-to-human と human-to-agent の両方のワークフローで同じくらい機能する理由です。 Q: Markagent はデータを外部に送りますか? A: いいえ。100% ローカル——スクショ、メモ、エクスポートはブラウザから外に出ません。外部リクエストはゼロ、永遠に。 Q: localhost や認証付きサイトでも動きますか? A: はい。localhost、staging URL、社内ダッシュボード——ブラウザで開けるものすべてに対応。 Q: 本当に無料ですか? A: はい。有料プランは今後もありません。 Q: Markagent は Chrome 専用ですか? A: 現時点では Chrome、Edge、Brave、Arc を含むすべての Chromium 系ブラウザで動作。Firefox 版はロードマップにあります。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 説明をやめて、マークし始めよう。 Markagent をインストールして、AI エージェントがずっと待っていたピクセル精度の UI フィードバックを渡しましょう。無料。ローカル。modern agentation と vibe coding ワークフロー向け。 マークを置く。エージェントへプロンプトを送る。