badmuriss/incredibly-pretty-websites

インプレッシブリー・プリティ・ウェブサイト

実際のプロダクトチームが納品したように見え、言語モデルが「モダンでクリーン」と推測したように見えないウェブサイトの、ビジュアルおよび技術的な決定のための単一の情報源です。

$refero-design との連携

$refero-design が利用可能な場合は、それを先に読み込み、ビジュアルリサーチ、Referoツールのルーティング、合成、リファレンスロック、および決定台帳を管理させてください。このスキルは、そのロックの後に、実装の制約（既存システムのスコープ、サーフェスモード、フレームワークの選択、空間的およびインタラクションのクラフト、レスポンシブ動作、アンチスロップチェック、レンダリング検証）を担当するために使用します。

順序は固定です：

1. $refero-design が、タスクの規模に応じてスタイル、スクリーン、フローをリサーチします。
2. $refero-design が1つの主要な方向性を選び、境界付けられた副次的な影響を記録します。
3. このスキルが、承認されたロックを方向性契約と本番UIに変換します。
4. このスキルが、ロックとサポートされるプラットフォームに対してレンダリング結果を検証します。

両方のスキルを競合するテイストの権威として実行しないでください。Referoはプロダクトとビジュアルのエビデンスを提供します。このスキルはフロントエンド実行の規律を提供します。Refero MCPが利用不可の場合、$refero-design はバンドルされたフォールバックを使用し、このスキルは結果として得られるロックから続行します。

デフォルトのフレームワークは React (Vite / Next / vite-react-ssg) です。Astro、Vue、および バニラCSS/JS も第一級です。フレームワーク固有のイディオムは framework-adapters.md にあります。何も指定されていない場合は、Reactを想定します。既存システムがAstroであるか、または概要がEmDashを必要とする場合は、サーバーサイドレンダリングを維持し、デフォルトでAstroコンポーネントを使用し、インタラクションが本当に必要な場所にのみフレームワークアイランドを追加します。

使用方法

0. direction-workflow.md を読む。既存の真実を解決し、CHANGE_SCOPE と SURFACE_MODE を設定します。
1. スコープに比例してリサーチする。world の場合は完全なリサーチが必須です。local は周囲のサーフェスを継承します。
2. プロジェクトタイププリセット（セクション1）を使用して、ドメインの抑制と技術的コストを調整します。美観を選ぶために使用しないでください。
3. エビデンスから方向性を導き出します。バイブとレイアウトのアーキタイプを語彙と挑戦者として使用し、必須のメニューとしては決して使用しないでください。
4. コードを書く前に方向性契約を記録し、その後すべてのセクションを新しく構築します。
5. スペーシング、モーション、状態、レスポンシブ、a11yに関する技術リファレンスを適用します。
6. セクション14とセクション13のAIテルに対してセルフ監査を実行し、その後境界付けられたビジュアルパスを完了します。

リファレンスファイル:

• direction-workflow.md — ターゲットコンテキスト、CHANGE_SCOPE、SURFACE_MODE、方向性契約、コンプスゲート、境界付けられた完了
• foundations.md — ヒーロータイプ、ビューポートの高さ、モーションプロパティ、アイブロー、既存システム優先順位の権威ある制限
• spatial-design.md — 4ポイントスケール、階層、コンテナクエリ
• motion-design.md — イージング、持続時間、モーション抑制、トランヂションパターンカタログ
• interaction-design.md — 8つの状態、focus-visible、ポップオーバー、モーダル
• laws-of-ux.md — 名前付きリサーチ（ヒック、ミラー、フィッツ、フォン・レストルフ、ピークエンド、ヤコブ、認知負荷）を用いた構成ヒューリスティック
• form-validation.md — バリデーションのタイミング、入力ステートマシン、:user-invalid、エラーサマリー、クロススタック契約としてのスキーマ
• responsive-design.md — モバイルファースト、ポインタクエリ、safe-area、srcset
• framework-adapters.md — モーション、状態、ハイドレーションに関するReact / Vue / バニラの同等機能
• component-libs.md — (Reactのみ) コピーインしてアニメーションコンポーネント: Magic UI、React Bits、shadcnレジストリ経由のアニメーションLucideアイコン
• scroll-motion.md — (Tier 3) GSAP ScrollTrigger + Lenis スムーススクロール（パフォーマンス/a11yのガードレール付き）
• design-references.md — (リサーチ、無料) Referoなしのリサーチ層: ライブサイトの実際のトークンの読み取り、DESIGN.mdパック、無料ガラリー、公開デザインシステム、およびセグメント → リファレンスバンク
• media-pipeline.md — 無料ストックフォト（Pexels/Unsplash/Pixabay/パブリックドメイン、ソース別のホスティングルール付き）+ Magnificのライセンスカタログ（REST経由）+ 生成スチル（2つのピアレーン（$image-gen / Magnific MCP）、アルファカットアウトルート経由）+ (Tier 3、コストゲート) Magnificによる画像→ビデオ（<video>レシピ付き）
• style-interview.md — (インタビューモード) ディレクションについてユーザーに尋ねるタイミング、ラウンドスクリプト、アーキタイプリストをメニューとして提供する代わりにリサーチから候補を構築する方法
• redesign.md : (リデザインモード) スキャン、診断、修正; モード検出（グリーンフィールド / 保存 / 全面変更）; 決して黙って変更しないもの
• conversion-diagnosis.md — (ランディングページ) コピー前の配信ゲートと10層の獲得およびコンバージョン診断

SEO、アクセシビリティスコア、Core Web Vitalsはここで監査されません。 このスキルは構築します。ライブURLの検証は、オンぺージSEOルール（タイトル、メタ、カノニカル、OG、スキーマ、robots、サイトマップ）、AEO/GEO層、axe-core実行、CWV予算を担当する site-audit スキルに属します。§14のプリフライトまで構築し、その後デプロイされたURLをsite-auditに指示します。

ライブのランディングページは、コピーを書き換える前に診断されます。 conversion-diagnosis.md を読み、実際のユーザーブラウザプロファイルとレンダリングされたGooglebotプロファイルでデプロイされたページを開き、両方が動作するページを受信していることを確認します。壊れたスクリプト、遅いファーストスクリーン、ブロックされたクローラー、動作しないCTA、または使用不可能なフォームは、コピーの洗練よりも優先されます。SEOは訪問を得ます。配信される体験は、それをリーどに変える必要があります。

---

2つのモード: 自律（デフォルト） vs インタビュー

自律（デフォルト）: 既に持っているコンテキストと、プリセットからの合理的な仮定に基づいて作業します。ユーザーに何も尋ねません。詳細が不足していますか？最も可能性の高い値を想定し、その仮定を1行でメモし、続行します。これは、ループ内に人間がいない場合に唯一安全なモードです。

インタビュー: 呼び出しが明示的にそれを要求した場合（--interview、「モード・エントレビスタ」、「スタイルを選んで」）、または CHANGE_SCOPE=world で、セッションが参加型で、ユーザーがリファレンスもブランドも固定していない場合にトリガーされます。これは2つのビートで実行されます: 概要を収集（セグメント/製品、オーディエンス、目的是、トーン、異論、制約、彼らが既に好きなサイト）、その後 リサーチして、選ぶための2〜3つの具体的な方向性を持って戻ってくる — キャンバス、タイプ、アクセントの役割、メディア戦略、シグネチャームーブ、そしてそれぞれが由来する実際の製品。要点は、有能なデフォルトではなく、ユーザーの顔が見えるサイトです。

どちらのモードもセクション0のリサーチを行い、どちらも同じリファレンスロックと方向性契約で終了します。唯一の違いは、誰がテイストの判断を下すかです。完全なプロトコル、質問スクリプト、アンチメニュールール、およびラウンドの制限は style-interview.md を参照してください。

新しく構築するのではなく、既存のサイトをリデザインする？ リデザインモード（スキャン、診断、修正）および保存vs全面変更のルールについては、redesign.md を参照してください。上記のどちらのモードも適用されます。リデザインは、ライブサイトが既に獲得しているものを保護するだけです。

---

0. 最初にリサーチ — 変更スコープに比例

CHANGE_SCOPE=world の場合は交渉不可。 完全に定義されたブランドであっても、新しいまたは置き換えワールドの構造的リサーチをスキップする理由にはなりません。surface の場合、既存システムを維持しながら、比較可能な構造とフローをリサーチします。local の場合、周囲のサーフェスが主要なエビデンスです。それが答えられないものだけをリサーチします。direction-workflow.md を参照してください。

すべてのビジュアル決定は、モデルの「良いセンス」の記憶からではなく、実際の製品が実際に出荷したもののエビデンス から始まります。モデルはコードと論理に強く、製品のセンスに弱いだめ、センスを実際のリファレンスに結び付けます。

リサーチ先

推奨プレミアム — Refero (refero.design)。 mcp__refero__* ツールが利用可能な場合は、それらを最初に使用します。3つの層:

• スタイル（ビジュアルディレクション、ここから開始）: refero_search_styles(query) → refero_get_style(...)。
• スクリーン（具体的なUI）: refero_search_screens(query, platform:"web"|"ios") → refero_get_screen(...)、refero_get_similar_screens(...)、refero_get_screen_image(...)。
• フロー（複数ステップのジャーニー — オンぼーディング/チェックアウト）: refero_search_flows(...) → refero_get_flow(...)。
• スクリーンはUUIDを使用し、フローは数値IDを使用します。page でのみページネーションします。get_screen_image はビジョンコールを消費します — ピクセルを検査する必要がある場合にのみ使用します。

無料パス（Referoなし） — design-references.md。 Referoはこのステップを高速化しますが、それを可能にするものではありません。無料パスは、同じクラスのエビデンスから同じリファレンスロックを生成し、ファイルには完全なアドレス帳が含まれています: curl/WebFetchを使用してライブサイトの実際のトークンを読み取る方法（最も強力なエビデンスであり、すべてのスクリーンショットよりも優れています）、オープンソースの DESIGN.mdパック（VoltAgent/official-design-md のファーストパーティ、VoltAgent/awesome-design-md の70以上のリバースエンジニアリングされたブランド）、検証済み無料ガラリー（siteinspire、httpster、minimal.gallery、onepagelove セクション、dark.design、navbar.gallery、footer.design）、公開デザインシステム、および セグメント → 実際の製品調査データベース により、白紙のクエリから始めることはありません。

他に何も読まない場合のショートバージョン: セグメント内の2〜3の実際の製品を選び、それらを開き、タイプスタックとCSSカスタムプロパティを抽出し、それぞれの良い点を特定し、記録します。実際に見ていない特性を決してロックしないでください。

ワークフロー

1. コンテキスト + 短い概要: 既存の真実、CHANGE_SCOPE、SURFACE_MODE、何を / 誰のために / プラットフォーム / 目的 / トーン / 異論 / 制約を解決します。（自律: 推測。インタビュー: 質問。）
2. スタイル優先: 異なる角度からの2〜3の検索 — 1つは美的、1つはドメイン/セグメント、1つは強いリファレンスブランド。1〜3の強い方向性を開きます。
3. スクリーン/フロー 具体的な画面構造やジャーニー論理が必要な場合。SURFACE_MODE=persuade の場合、ピクセルターゲット自体が、可視の焦点メディアを持つ説得力のあるマーケティングサーフェスである必要があります。法的/規約ページ、ドキュメンテーション、ディレクトリ、チェンジログ、アーカイブ索引、ダッシュボード、およびテキストのみの編集ページは反例であり、主要なスクリーンロックになることはありません。コーディングの前に、ターゲットの焦点メディアと1つのサポートするビジュアルモーメントを指定します。検査された画面が写真、イラストレーション、製品画像、またはモーションによって機能している場合、そのメディアの役割を維持します。それをタイポグラフィ、ルール、メタデータ、または空のカードに置き換えることは、リファレンスドリフトです。
4. 合成 — 平均化しない。 1つの支配的な主要方向性 を選び、その特徴的な特性を維持します。セカンダリリファレンスはそれぞれ1つの詳細を提供します。すべてのぬるま湯の平均は決して使わない: 1つのリファレンスがダーク、1つがセリフ、1つがアシッドの場合、答えは 丁寧なクリーム色 + 教養のあるセリフ ではありません。
5. リファレンスロック + 決定台帳 + 方向性契約 コードの前:
   • リファレンスロック: 主要な方向性 + 維持する3〜5の特性（キャンバス、タイプ、アクセント、レイアウト、デンシティ、メディア）+ セカンダリから借りるもの + 役割ルール（CTAのみ、コードのみ、デコレーションのみ）+ メディア戦略（リアル / 生成 / ストック / プレースホルダー）。
   • 決定台帳: 決定 | ソース | 役割/ルール | 理由 のテーブル。主要なビジュアル選択はすべて、リファレンス、クライアントの制約、既存のビジュアルの真実、またはこのスキルのクラフトルールに遡れます。ソースがない場合、それは出荷されません。
   • 方向性契約: direction-workflow.md の5つの短いブロック。仕上げパスは、レンダリングをそれらに対してチェックします。
6. 実装 プリセット（セクション1）、ティア（PREMIUM_TECH_TIER）、およびアンチスロップルール（セクション13）を使用します。

何が何をオーバーライドするか（リサーチ vs このスキル）

ハード — 製品の真実、アクセシビリティ、既存システムが優先:

• local および surface スコープでは、確立されたブランドトークンとコンポーネントの慣習が、このスキルのセンスのデフォルトを打ち負かします。ユーザーがリデザインを承認するか、その特徴を削除するよう依頼しない限り、既存のフォント、パープルのブランドカラー、Lucideシステム、ラジアス、またはコンポーネント言語を置き換えないでください。foundations.md を参照してください。
• アクセシビリティ、セマンティックな正確さ、動作する動作、実際のアセット、明示的なユーザー制約が常に優先されます。コントラストの失敗を修正しても、それを製品の再スタイリングの許可として使用しないでください。
• world スコープでは、コンテンツとセンスの特徴がすべての新しい選択に適用されます: emダッシュの多用、デコラティブなフローティングピル、反射によるAIパープル、理由のないデフォルトフォント、 testimonial内の偽のAI人間、デコレーションボックス内のアイコン。
• 1つのスタイルを完全にクローンしないでください。トークンの役割をそのまま維持します（CTAのみのアクセントはCTAのみのまま）。

ソフト — 実際のリファレンスが優先（構造とレイアウト）:

• ページ構造、セクションの順序と数、フッターの形状、ヒーローの形状、レイアウトのバリエーション、デンシティ: 固定テンプレートではなく、リサーチによって導かれます。 このスキルの構造ルールは 賢明なデフォルトであり、法律ではありません — リファレンスがそのケースに対して異なる、適切な構造を示している場合は、リファレンスに従います。
• 構造は、ユーザービリティ、コンバージョン、レスポンシブ性を壊す場合にのみ「間違っている」と見なされます — このスキルのデフォルトから逸脱しているからではありません。

0.1 — ビジョン

…