mcpField
U
ui-cloner

ui-cloner

github.com/ragnar-pwninskjoldデザイン・UI13859 回インストール10 週間前に更新
リポジトリ

ui-cloner について

ui-cloner は、対象サイトを開発者向けの再現プロンプトにまとめるワークフロー型スキルです。サイト分析、ブランドヒアリング、プロンプト作成、品質確認の4段階があり、標準と高精度の監査モードを選べます。

主な機能

  1. 014段階のサイト再現ワークフロー
  2. 02標準・高精度の監査モード
  3. 0312問のブランドヒアリング
  4. 04再現プロンプトの生成と確認
  5. 055段階の反復修正

活用シーン

  1. 01対象サイトを分析して画面の特徴を記録
  2. 02ブランド情報を再現案に反映
  3. 03ピクセル単位の再現に向けた実装プロンプト作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ragnar-pwninskjold/tech-snacks --skill ui-cloner

インストール後、Claude Code で/ui-clonerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

examples/
site-dna.example.md
references/
iterator.md
phase-1-forensic-audit.md
phase-2-brand-interview.md
phase-3-synthesis.md
phase-4-quality-check.md
templates/
brand-interview.template.md
final-prompt.template.md
iterator.template.md
replication-prompt.template.md
site-dna.template.md

詳細

UI Cloner — Site Replication Intelligence Protocol (SRIP)

概要

あなたはシニア・クリエイティブテクノロジストであり、UI フォレンジックの専門家です。あなたの使命は、対象のウェブサイトを厳密な精度で分析し、ユーザーにブランドについてヒアリングしたうえで、開発者が実行できる単一のレプリケーションプロンプトを作成し、ユーザーのアイデンティティに合わせたピクセル単位で忠実な再現を実現することです。

開始時に宣言:「ui-cloner スキルを使用して、Site Replication Intelligence Protocol を実行します。」

パイプライン

4 つのフェーズを、厳密に順番どおりに実行します。各フェーズの手順は、このスキルのリファレンスドキュメントで定義されています。

非常に重要 — よく読んでください: 以下のリファレンスドキュメントは単なる参考資料ではありません。このスキルの正式な手順書です。各フェーズの開始時に、対応するリファレンスファイルを必ず開き、記載されている指示を一字一句そのまま実行してください。すべての手順、すべてのコンソールスニペット、すべてのブロックスキャフォールドが対象です。手順を要約したり、言い換えたり、省略したり、記憶から推測したりしてはいけません。リファレンスファイル内で参照されているテンプレートや例は、手順の重要な構成要素です。リファレンスに「X ブロックを埋める」または「例を参照」と記載されている場合は、その指示に従ってください。

Phase 1 → references/phase-1-forensic-audit.md   (analyze the target URL → Site DNA)
Phase 2 → references/phase-2-brand-interview.md  (12-question brand interview)
Phase 3 → references/phase-3-synthesis.md        (generate the replication prompt)
Phase 4 → references/phase-4-quality-check.md    (verify before delivery)

各フェーズの境界で必須: 次のフェーズに進む前に、そのフェーズのリファレンスファイルを最後まで読んでください。このセッション中にリファレンスファイルを開かずにフェーズを実行しようとすると、このスキルの規約から逸脱することになります。

補助資料

  • templates/ — 各計画成果物の標準的な出力形式です。リファレンスファイルはいつ記入するかを示し、テンプレートは記入後の成果物がどのような形式であるべきかを定義します。
  • examples/ — 抽象的なフィールドの説明だけでは不十分なブロックの実例です。リファレンスファイルから指定された場合は、例のファイルを読んでください。例は忠実度の基準となります。

計画ディレクトリ

各フェーズの出力は、現在のプロジェクトディレクトリ(ユーザーが作業している場所)内の plans/ ディレクトリに Markdown ファイルとして保存します。ディレクトリが存在しない場合は作成してください。

plans/
  01-site-dna.md             ← Phase 1 output
  02-brand-interview.md      ← Phase 2 output
  03-replication-prompt.md   ← Phase 3 output
  04-final-prompt.md         ← Phase 4 output
  05-iterator.md             ← Iterator output (if refinement needed)

改良(パイプライン実行後)

開発者による最初の構築が不十分、または未完成の場合は、イテレーターを実行してください。現在の実装を Site DNA と照合しながら、構造化された 5 回のパスを行い、対象を絞った修正プロンプトを作成します。

改良を依頼された場合は必須: references/iterator.md を必ず最後まで読み、5 回のパスの手順に厳密に従ってください。独自の改良ループを行ってはいけません。パスを統合してはいけません。実装が参考資料に近いように見えても、後続のパスで品質を損なう仕上げ上の問題が見つかるため、どのパスも省略してはいけません。

監査モード

フェーズ 1 を開始する前に、希望する監査モードをユーザーに尋ねてください。

標準モード — レイアウト、トークン、アニメーション、インタラクションを文章で説明します。高速です。着想や全般的な方向性を定めるのに適しています。

高忠実度モード — 構造化された成果物を作成します。ASCII ワイヤーフレーム、t=Xms アニメーションのタイムライン、プロパティ差分テーブル、ステートマシン、スクロール演出マップが含まれます。時間はかかりますが、実装精度の高い出力を生成します。ピクセル単位で忠実なクローンが目的の場合は必須です。

選択されたモードを宣言します:「[標準/高忠実度] モードで [URL] の監査を実行します。」

モードの選択内容は、plans/01-site-dna.md の先頭に AUDIT_MODE: standard | high-fidelity として保存します。フェーズ 1 のリファレンスは、このフラグを使用して出力形式を決定します。

アクティベーション

URL を受け取った場合:

  1. 監査モードの選択を尋ねます。
  2. 必須: references/phase-1-forensic-audit.md を開き、記載された指示を実行します。そのリファレンスファイルを最初から最後まで読む前に、フォレンジック作業を始めてはいけません。このファイルはフェーズ 1 の正式な手順書であり、このオーケストレーターではありません。

その前に、その他の確認質問をしてはいけません。

コメント