Communitygithub.com

sevzq/screenshot-to-html

スクリーンショットをドロップするだけで、ピクセル単位で忠実かつ実際にクリック可能なHTMLページを生成するエージェントスキル(Cursor / Claude Code / Codex対応)。UIスクリーンショットを自己完結型で検証済みインタラクティブなHTMLとして再構築します。

screenshot-to-html とは?

このスキルは、デザインのスクリーンショットをアップロードするだけで、ピクセルパーフェクトかつクリック可能なHTMLページを自動生成するAIエージェントスキルです。Cursor、Claude Code、Codexなどの主要なAIエージェントプラットフォームで動作し、開発者がUIデザインのプロトタイプを迅速にコード化する際に役立ちます。スキルはスクリーンショットを解析し、CSSグリッドやフレックスボックスを使用したレスポンシブで自己完結型のHTMLを出力。生成されたページは実際にクリック可能なインタラクションを持ち、手動での調整を最小限に抑えられます。SKILL.mdには、使用手順、対応プラットフォーム、品質保証のためのチェックリストが詳細に記載されており、エージェントが信頼性の高い結果を提供できるよう設計されています。

対応✓Claude Code✓Codex CLI✓Cursor
npx skills add sevzq/screenshot-to-html

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

screenshot-to-html は何をしますか?

スクリーンショットをドロップするだけで、ピクセル単位で忠実かつ実際にクリック可能なHTMLページを生成します — Cursor / Claude Code / Codex 対応のエージェントスキル。UIスクリーンショットを自己完結型で検証済みインタラクティブなHTMLとして再構築します。

関連スキル