Kc1t/sites-pixel-perfect

ピクセルパーフェクトなサイト

AIが作るサイトが安っぽく見える理由は三つあります：曖昧な計画、ストック画像のアセット、そして結果を誰も確認しないこと。このスキルはその三つを解決します。アセットはHiggsfieldでオーダーメイド生成、計画はすべてに数値が指定されたピクセルパーフェクトなプロンプト、結果は納品前にスクリーンショットで確認します。

以下の手順は必ず順番通りに実行してください。

1. 依頼を読み、判断する（質問はしない）

以下の5つを決定し、選択内容を短いメッセージで伝えてください。

• 何を、誰に： 製品または人物、そしてそのページが誰を説得したいのか。
• 雰囲気を3つの言葉で （例：「落ち着いた、高級感のある、夜の」）。
• 演出（1つだけ）ページの特徴となります（レシピは references/efeitos.md にあります）。
  • カーソル： キャラクターがマウスを追って首を振る（マウスで操作する動画）。
  • ランタン： カーソルが円形のスポットライトを作り、画像の内部を照らし出す。
  • ループ： 写真をループ動画にし、レイヤーにパララックス効果を付ける。
• 出力： index.html のみ（デフォルト）、またはプロンプトのみ（プロンプトだけが依頼された場合）。
• スコープ： ヒーローセクションのみ（デフォルト）、またはランディングページ全体。

質問するのは、回答なしでは手順を進められない場合のみです（例：実際のブランド名）。

2. Higgsfieldでアセットを生成する

アセットこそがページを高級に見せる鍵です。優先順位：

1. ユーザー提供のアセット。
2. Higgsfieldで生成（MCP経由）選択した演出のレシピ（references/efeitos.md）に従う。
3. 生成できない場合：タイポグラフィと動きだけのページ。絶対にグレーのプレースホルダー、ストック画像、架空のURLは使わない。

全演出に共通するルール：

• 画像を先に、動画は後で。 画像はクレジットをほとんど消費せず、動画は数十消費します。画像が確定するまでは動画を生成しないでください。動画生成の前にコストを伝えること。
• 2枚目の画像は必ず1枚目の編集とする（Nano Bananaでベース画像を編集）。「keep everything identical」とし、変更点だけを指定します。ゼロから再生成すると位置がずれます。
• 方向は画像の端を基準に指定（「キャラクターの左」ではなく「画像の左端に向かって頭を向ける」）。モデルは「彼の左」を誤解します。
• Nano Bananaは1度に1ジョブしか受け付けません。 1つ送信し、完了を待ってから次を送信してください。同時に2つ送るとレート制限エラーになります。
• テキスト用に半分は空けておく： 被写体を片側に寄せ、反対側はシンプルに。
• 画像の背景＝ページの背景。 画像の端の色（hex）をメモし、それを --bg に設定します。

3. ピクセルパーフェクトなプロンプトを作成する

以下の8パートを、references/especificacao.md のテンプレートに従い、この順序で作成します：フォント、カラー、アセット、構造、アニメーション、JavaScript、レスポンシブ、チェック。

すべてに具体的な値を指定します。「きれいなグラデーション」や「なめらかなアニメーション」は禁止。各形容詞にはそれを実現する数値を伴わせます。ページの実際のテキスト（タイトル、サブタイトル、ナビゲーション、ボタン）も記述します。

プロンプトのみが依頼の場合、それが成果物です：references/revisao.md で確認し、ここで終了します。

4. 実装する

プロンプトの内容を正確に実装します：

• 単一の index.html ファイル。<style> と <script> は内部に記述、フォントはリンクで読み込み、CDNライブラリはバージョン固定。
• CSSの最初のルールで html, body に背景色を設定し、白いフラッシュを防ぎます。
• セマンティックHTML、適切な <title>、alt 属性、フォーカス可視化、prefers-reduced-motion の尊重。
• モバイル（マウスなし）および動きを抑えた設定の場合、演出は静止した美しいフレームで表示されること。
• ダミーテキスト（lorem ipsum）、プレースホルダーボックス、絵文字アイコンは禁止。

5. 確認し、修正する（必須）

デスクトップ（1440×900）とモバイル（390×844）でページのスクリーンショットを撮り、それを目視確認します。 Playwrightを使用：npx playwright screenshot --viewport-size=1440,900 index.html desktop.png。スクリーンショットツールがない場合は、ページが視覚的に確認されていないことを伝え、references/revisao.md に照らしてコードをレビューします。

references/revisao.md の採点基準で評価し、最も弱い3点を具体的な数値で修正し、再度スクリーンショットを撮ります。最大3ラウンド、または平均点が8点を超え、かつ最低点が7点以上になるまで繰り返します。

6. 公開する（依頼された場合）

Higgsfield MCPでサイトを .higgsfield.app ドメインにアップロードします（create_website と deploy_website；手順は get_workflow_instructions で website-builder-flow を指定）。すべてのデプロイは即座に公開されます： 事前に伝え、機密キーや個人情報をサイトに残さないでください。

7. 納品する

• ファイルとその開き方。
• デスクトップの最終スクリーンショット。
• 演出と選択した理由について2〜3行。
• Higgsfieldで消費したクレジット（アセットごと）。
• 仮対応の項目があれば、何を差し替えるか。

ファイル

• references/efeitos.md：3つの演出レシピ（生成プロンプトとコード）。
• references/especificacao.md：8パートからなるピクセルパーフェクトプロンプトのテンプレート。
• references/revisao.md：評価基準と修正サイクルの定義。

構造（依頼 → メディア → 仕様 → 実装 → スクリーンショット）は MotionSites Web Builder（MITライセンス、LICENSE.md 参照）を基にしています。プロンプト、レシピ、コードは本スキルの独自のものです。