Skip to content

README.ja.md

Latest commit

 

History

History
153 lines (107 loc) · 6.22 KB

README.ja.md

File metadata and controls

153 lines (107 loc) · 6.22 KB
Raw

harness-design

English | 中文 | 日本語 | 한국어 | Español | 繁體中文

Claude Code / Cursor 向けマーケットプレイスプラグイン：design-dna フェーズ 3 の検証スキルで、ブラウザベースのビジュアル検証を行います。エージェントが Design DNA JSON とコンテンツから HTML を生成したあと、コンソール／ネットワーク調査でページリソースを収集し、参照サイトとのセクション別スクリーンショット比較、アニメーションフレームのサンプリングを行い、成果物が ship-ready になるまで修正ループを回します。

前提条件

  • Node.js がインストールされていること
  • npx コマンドを実行できること

任意（フル検証向け）

  • Playwright — web-shader-extractor がリソース収集に使用
  • ブラウザ MCP ツール — Playwright が使えない場合のフォールバック

補助スキル（推奨）

エフェクトの深い検証のためのドメイン知識を提供します：

npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractor
npx skills add https://github.com/greensock/gsap-skills --skill gsap-scrolltrigger
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill 3d-web-experience

インストール

クイックインストール（推奨）

npx skills add zanwei/harness-design

エージェント別インストール

# Cursor のみ、グローバル、非対話
npx skills add zanwei/harness-design -a cursor -g -y

# Claude Code のみ
npx skills add zanwei/harness-design -a claude-code -g -y

ローカルクローンから

git clone https://github.com/zanwei/harness-design.git
cd harness-design
npx skills add . -y

スキルフォルダのみ：

npx skills add ./skills/harness-design -y

プラグインマーケットプレイスに登録（Claude Code）

/plugin marketplace add zanwei/harness-design

マーケットプレイス UI からインストールするか、次で直接インストール：

/plugin install harness-design@harness-design

メタデータの一覧

npx skills add zanwei/harness-design --list

利用可能なスキル

スキル 説明
harness-design 5 パスのブラウザベース検証、加重スコア、スクリーンショット証拠、DNA JSON + 参照 URL 対照の修正計画（SKILL.md）

参照：ルーブリック · 検証チェックリスト · ブラウザ検証

ワークフロー

flowchart LR
    A["Design DNA JSON<br/>フェーズ 2 出力<br/><br/>不変スペック"]
    B["生成 HTML<br/>フェーズ 3 出力<br/><br/>エージェント設計"]
    R["参照 URL<br/>元サイト<br/><br/>視覚的グラウンドトゥルース"]
    C["Harness レポート<br/>グレード A–F · スクリーンショット<br/><br/>ship-ready 出力"]

    A --> B
    R --> C
    B -->|"Pass 0 — リソース監査"| C
    B -->|"Pass 1 — 機械チェック"| C
    B -->|"Pass 2 — ビジュアル比較"| C
    B -->|"Pass 3 — 知覚レビュー"| C
    B -->|"Pass 4 — エフェクト監査"| C
    C -.->|"スコア < 90 → 修正ループ"| B
Loading
  1. design-dna フェーズ 2 → Design DNA JSON（参照 URL 由来）
  2. design-dna フェーズ 3 → 生成 HTML
  3. harness-design → DNA JSON と参照 URL の両方に対して検証・採点・修正（合格または反復上限までループ）

ハーネスは DNA JSON を変更しません。

5 パス検証

Pass 名称 方法
0 リソース監査 Playwright またはブラウザ MCP で両ページからネットワーク、コンソール、canvas 情報を収集
1 機械チェック DNA JSON トークン照合にブラウザ実描画値（getComputedStyle）を反映
2 ビジュアル比較 生成ページと参照ページのセクション別スクリーンショット比較
3 知覚レビュー スクリーンショット証拠に基づく定性的スタイル評価
4 エフェクト監査 アニメーションフレームサンプリング、スクロールトリガー検証、3D／シェーダー深掘り、CPU プロファイリング

スコアリング次元

次元 重み
design_system（トークン） 25%
design_style（知覚） 20%
visual_effects（レンダリング） 20%
resource_integrity 10%
visual_alignment 25%

補助スキル連携

エフェクト種別 補助スキル 役割
WebGL / Canvas / Shader web-shader-extractor リソース収集スクリプト + シェーダーパラメータ抽出
GSAP ScrollTrigger gsap-scrolltrigger スクロール位置とトリガー点の検証
Three.js / R3F / 3D 3d-web-experience 3D レンダリング検証とエンジン分析

Tip

反復修正。 初回検証が A 未満の場合、ハーネスはスクリーンショット証拠付きの優先修正計画を自動生成し、最大 3 反復まで修正ループを回し、その後そのまま受け入れか再生成を推奨します。

互換性

Agent Skills 仕様 に準拠。skills CLI 経由で Cursor、Claude Code、Codex、GitHub Copilot などにインストール可能です。

コントリビューション

挙動を変える場合は skills/harness-design/SKILL.md、skills/harness-design/references/ を更新し、.claude-plugin/marketplace.json の metadata.version を上げてください。

ライセンス

MIT