Skip to content

README.md

Latest commit

 

History

History
166 lines (124 loc) · 4.47 KB

README.md

File metadata and controls

166 lines (124 loc) · 4.47 KB

UI Reconstruction Compiler

UI再現を「画像から直接HTMLを書き出す作業」ではなく、段階的なコンパイルとして扱うためのスキーム集です。
このリポジトリは主に次を提供します。

  • 各ステップの指示書: skills/*/instructions.md
  • 各ステップの出力スキーマ: skills/*/schema.yaml
  • 参照用の全体スキーマ: schemas/*
  • 差分分類の参照: diff/taxonomy.md

実行プログラム（CLI）は同梱していないため、Codex/LLMなどにステップごとの入力を渡して進めます。 cursorやVScode、CodexAppsなどで本projectフォルダを開いた状態で実行してください。

必須パイプライン

必ずこの順番で進めます。

  1. segment-ui
  2. observe-ui
  3. scaffold-ui
  4. build-ui-ir
  5. compile-ui
  6. render
  7. verify-ui
  8. patch-ui

どんなインプットを用意すればよいか

最低限必要なもの

  1. UI全体のPNG画像（必須）
  2. （推奨）セクションごとのPNG画像
    例: ヒーロー、コンテンツ、フッター

PNGのおすすめ条件

  • 形式: PNG
  • 画面全体が入っている（見切れなし）
  • 文字が読める解像度
  • 余計なUI（ブラウザバー、カーソル、通知）が映っていない
  • 圧縮やぼかしが強くない
  • 1つの案件でサイズを統一（例: 1536x2752）

ファイル配置の例

project/
  png/
    全体.png
    ヒーロー.png
    コンテンツ1.png
    コンテンツ2.png
    フッター.png

全体.png は必須です。
分割PNGは精度改善用なので、なければ全体画像だけでも開始できます。

使い方（ステップ別）

1) segment-ui

  • 入力: screenshot（通常は png/全体.png）
  • 出力: segments を持つYAML
  • 役割: 画面を意味的な領域に分割（bbox + 推定ロール）

2) observe-ui

  • 入力: screenshot + segments
  • 出力: signals を持つYAML
  • 役割: DOM風ノード・a11y・token・assets・componentsを観測値として収集

3) scaffold-ui

  • 入力: signals
  • 出力: regions を持つYAML
  • 役割: 各segmentに意味ロールと属性（interactive/repeatable/ornamental）を付与

4) build-ui-ir

  • 入力: signals + regions
  • 出力: ui_ir を持つYAML
  • 役割: 構造・スタイル・装飾グラフ・レイヤグラフ・状態をIR化

5) compile-ui

  • 入力: ui_ir
  • 出力: frontend_code を持つYAML
  • 生成対象:
    • react-tailwind/
    • html-css/
  • 重要: provenance_map と compliance_report を必ず含める

6) render

  • 入力: 生成された html-css/index.html など
  • 出力: レンダリングPNG（比較用）
  • 目的: source画像との見た目差分を検証する材料作成

7) verify-ui

  • 入力: source_screenshot + rendered_screenshot
  • 出力:
    • visual_diff
    • structural_diff
    • structural_metrics
    • gate_decision
  • 判定: pass / fail（failならpatchへ）

8) patch-ui

  • 入力: frontend_code + visual_diff
  • 出力: patched_code
  • 方針: 全再生成ではなく、差分箇所の最小修正

入力時の注意（品質を落としやすいポイント）

  • 画像をそのまま背景として貼らない
    （このスキームはHTML/CSS再構築が前提）
  • 目立つ装飾（星、リング、ドット、光彩）を削らない
  • レイヤー順（背景 → 面 → 装飾 → テキスト）を崩さない
  • テキストは画像化せずテキストノードで再現する

生成物の推奨フォルダ（任意）

pipeline/
  01-segment-ui.yaml
  02-observe-ui.yaml
  03-scaffold-ui.yaml
  04-build-ui-ir.yaml
  05-compile-ui.yaml
  06-render.yaml
  07-verify-ui.yaml
  08-patch-ui.yaml
html-css/
react-tailwind/
render/

スキーマ検証（任意）

PyYAML と jsonschema があれば、各YAMLがスキーマ準拠か確認できます。

pip install pyyaml jsonschema
from pathlib import Path
import yaml
from jsonschema import validate

root = Path(".")
doc = yaml.safe_load((root / "pipeline/01-segment-ui.yaml").read_text(encoding="utf-8"))
schema = yaml.safe_load((root / "skills/segment-ui/schema.yaml").read_text(encoding="utf-8"))
validate(doc, schema)
print("ok")

Public repository defaults

  • License: MIT (LICENSE)
  • Contribution guide: CONTRIBUTING.md
  • Security policy: SECURITY.md
  • Code of conduct: CODE_OF_CONDUCT.md