recreating-ui-from-screenshots（スクリーンショットからのUI再現）

このSkillでできること

✓対象プロジェクトと参照画像を確認し、画面の視覚仕様を整理する
✓WebページやWeChatミニプログラムのUIを参照画像に基づいて実装・改善する
✓固定ビューポートで実際にレンダリングし、スクリーンショットを比較する
✓差分を分類し、構造・形状・文字・色・アセットなどの順に視覚調整する

使い方

STEP 1

対象画面、ルート、ビューポート、DPR、ページ状態などの前提を定める

STEP 2

参照画像の種類、寸法、SHA256、相対パス、出典を記録する

STEP 3

視覚コントラクトと対象プラットフォーム別のワークフローを確認してから実装する

STEP 4

レンダリング結果を全体および重要領域で比較し、差分レポートに基づいて修正する

Skillのインストール

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/alanxgl05-rgb/recreating-ui-from-screenshots

手動でインストールする

README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。

python -m pip install PyYAML
python ~/.codex/skills/.system/skill-creator/scripts/quick_validate.py .

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

このスクリーンショットを基に対象プロジェクトの画面を再現してください。まず参照画像と対象状態を確認し、視覚仕様を整理してから実装し、固定ビューポートでレンダリング比較を行って差分と次の修正箇所を報告してください。

出力例を見る

視覚仕様を確立し、対象画面を実装しました。固定ビューポートでレンダリングを比較した結果、構造・文字・色・主要領域の差分を分類し、次の修正対象を示しました。

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信明確な記述なし

Shellコマンド実行検出あり

ファイル読み取り明確な記述なし

ファイル書き込み明確な記述なし

ネットワークアクセス明確な記述なし

認証情報明確な記述なし

検出根拠を見る

shell: enshots --path . --name recreating-ui-from-screenshots ``` Bash: ```bash python ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-githu
shell: th . --name recreating-ui-from-screenshots ``` Bash: ```bash python ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py --rep

recreating-ui-from-screenshots

このSkillでできること

使い方

Skillのインストール

AIにこのSkillを追加してもらう

このSkillを使うプロンプト例

安全性チェック

関連Skill

ai-project-advisor

easyslides

image