1仕組みと動作原理
スキル全体が純粋なプロンプト指示ファイル（スクリプトやアセットなしの単一 SKILL.md ファイル）であり、ペルソナと絶対的なコマンドによって「高級デザイン」を実行可能なルールへとコンパイルします。まずペルソナ「Vanguard_UI_Architect」を確立して目標を設定し、次に「即失格（ハードフェイル）」型の禁止事項によってアンチパターンを徹底的に封じます。
skills/soft-skill/SKILL.md
**The Variance Mandate:** NEVER generate the exact same layout or aesthetic twice in a row. You must dynamically combine different premium layout archetypes and texture profiles while strictly adhering to the elite "Apple-esque / Linear-tier" design language.
「NEVER…twice in a row（2回連続は厳禁）」によって重複防止を直接ハードな制約として記述しており、これはモデル出力の均質化に対抗する中核メカニズムの1つです。
ネガティブリスト（ABSOLUTE ZERO）で基準の下限を固定：フォント、アイコン、境界線/シャドウ、レイアウト、モーションの5分類にわたる「AIデフォルト値」が一度でも出現すれば失敗と判定し、チープに見える原因を個別に名指しして禁止します。
skills/soft-skill/SKILL.md
If your generated code includes ANY of the following, the design instantly fails: - **Banned Fonts:** Inter, Roboto, Arial, Open Sans, Helvetica. (Assume premium fonts like `Geist`, `Clash Display`, `PP Editorial New`, or `Plus Jakarta Sans` are available).
引用は原文の導入指示文＋最初の禁止事項（連続する2行）であり、続いて同様の箇条書きでBanned Icons/Borders/Layouts/Motionなどが並びます。ここで行われていること：モデルはデフォルトでInter + Lucide + グレー枠線 + 対称グリッドを出力しがちですが、このリストはそうした統計的デフォルト値を直接狙い撃ちします。「Assume … are available」はフォントの決定をホストプロジェクトのリソースに委ねており、スキル自体はフォントを一切ロードしません。
ポジティブな生成は「組み合わせ変異エンジン」によって駆動：Vibe（雰囲気）× Layout（レイアウト）をそれぞれ1つ選択し、コンテキストに応じたランダムな選択を強調することで毎回の出力重複を回避します。各レイアウトにはモバイル向けの折りたたみフォールバックルールが標準装備されています。
skills/soft-skill/SKILL.md
Before writing code, silently "roll the dice" and select ONE combination from the following archetypes based on the prompt's context to ensure the output is uniquely tailored but always premium:
Section 3 では3種の雰囲気（Ethereal Glass / Editorial Luxury / Soft Structuralism）と3種のレイアウト（Asymmetrical Bento / Z-Axis Cascade / Editorial Split）を提示し、768px未満では一律 w-full の単一カラムに折りたたむよう規定しています。変異エンジンに伴うコストは「モバイルオーバーライド規則」によって相殺されます。
コンポーネントレベルの美学は具体的なTailwindアトミッククラスで固定：Double-Bezel（アウターシェル＋インナーコアの内包）、Button-in-Button の末尾バッジ、eyebrow バッジのすべてにクラスレベルのテンプレートが提供されます。
skills/soft-skill/SKILL.md
Never place a premium card, image, or container flatly on the background. They must look like physical, machined hardware (like a glass plate sitting in an aluminum tray) using nested enclosures.
直下では Outer Shell / Inner Core の2つのセクションで、p-1.5、rounded-[2rem]、ring-1 ring-black/5、inset ハイライトなどの具体的な記法を提示。「高級感」を抽象的な形容詞ではなく、そのままコピー可能な構造構文へと分解しています。
モーションはすべて物理挙動（mass/spring）に準拠：デフォルトの transition を禁止し、カスタム cubic-bezier に統一。ナビゲーション、ボタン、登場演出すべてに演出スクリプト（stagger、morph、magnetic hover）が用意されています。
skills/soft-skill/SKILL.md
Never use default transitions. All motion must simulate real-world mass and spring physics. Use custom cubic-beziers (e.g., `transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]`).
「ハンバーガーメニューからXへの流体モーフィング」や「フルスクリーンガラステーブルメニュー＋リンクのstaggerマスクreveal」などの具体的な演出が網羅されていますが、実装方法は標準的なフロントエンド3点セット（HTML/React/Tailwind クラス）に限定されています。
パフォーマンスガードレールと実装規範を並行して提示（transform/opacity-only、backdrop-blur は fixed/sticky 限定、z-index の階層化、ノイズ層の pointer-events-none）：過剰な演出によるモバイル端末のパフォーマンス低下を防ぎます。
skills/soft-skill/SKILL.md
Never animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`. Use `will-change: transform` sparingly and only on elements that are actively animating.
「高級感」の演出にはエンジニアリングの制約がセットになっており、「見た目は良いが重い」という失敗パターンを明確に防止します。Section 5C ではスクロール監視に IntersectionObserver または Framer Motion の whileInView の使用を義務付け、window の scroll リスナーを禁止しています。
納品は実行プロトコル＋11項目の事前チェックマトリックスで締めくくられ、出力はピクセルパーフェクトな React/Tailwind/HTML に統一され、汎用的なダウングレードは禁止されます。
skills/soft-skill/SKILL.md
**[OUTPUT]** Deliver flawless, pixel-perfect React/Tailwind/HTML code. Do not include basic, generic fallbacks.
Section 7 の5ステップ（SILENT THOUGHT→SCAFFOLD→ARCHITECT→CHOREOGRAPH→OUTPUT）と Section 8 のチェックリストによってモデルに納品前の自己レビューを促します。これは純粋なプロンプトスキルでよく使われる「プロセスゲート」手法です。
2コア機能
01高級/エージェンシー級のデザインシステム完全定義：フォント、余白スケール（py-24〜40）、シャドウ、カード構造、マイクロインタラクションを具体的な数値とクラスに落とし込み
02AIデフォルト値のハード禁止：5カテゴリ18以上の禁止パターン、違反時は即座に全体を失敗と判定
03Vibe × Layout の組み合わせ変異エンジン（3×3の選択肢）＋ 各レイアウトのモバイル折りたたみルール
04Double-Bezel による入れ子コンポーネント構文（アウターシェル＋インナーコアの二重背景・二重角丸）
05物理挙動に基づいたモーション演出：カスタム cubic-bezier、流体ハンバーガーメニュー、stagger マスク reveal、magnetic hover
06パフォーマンス規範：transform/opacity-only アニメーション、blur は fixed/sticky 限定、z-index 階層設計
07納品ゲート：11項目の pre-output 自己診断マトリックス（禁止項目再確認 / bezel / 余白の呼吸 / bezier / 折りたたみ / GPU）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | Framer Motion |
| package | Phosphor Light / Remix Line 图标库 |
| package | Geist / Clash Display / PP Editorial New / Plus Jakarta Sans 字体 |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示文およびルールテキストであり、スクリプト実行や外部影響は一切なし
監査ノート： 純粋な指示型の単一ファイルスキル：スクリプト実行なし、外部へのネットワーク送信なし、認証情報読み取りなし、ファイル書き込みなし（生成コードはホストエージェントがタスクに応じて書き出すものであり、ホスト側の認可範囲内の挙動です）。留意点は、フォントやライブラリの利用可能性の前提により生成コードが外部リソースへのリンクを含む可能性がある点と、指示遵守がホストモデルの性能に依存する点のみであり、いずれもコードレベルのリスクには該当しません。
5二重目の独立検証
- [ok] 目录资产面（含隐藏/未跟踪文件） — git ls-files + ls -A 双查：该 skill 目录仅 1 个文件 SKILL.md，无 scripts/references/模板/数据/隐藏文件，无可执行代码。
- [ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中（brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报，人工复核排除）。
- [ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在，无 paraphrase 冒充。
- [ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37（README 显示该提交为 docs/sponsor 修订 #102，2026-08-24）；GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
- [ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现，无脚本可调用、无越界承诺（详见本文件 how_it_works 引文）。
- [ok] description『make a website feel expensive』的实现机制 — 由 Section 2 禁令 + Section 4 双 bezel/按钮嵌套 + Section 5 物理动效具体兑现；98 行全文均为该目标服务，无与声明相悖内容。
- [ok] 『Framer Motion』仅作建议、非强制依赖 — 原文为『use IntersectionObserver or Framer Motion's whileInView』——二选一的或然表述，未强制引入库；output 层始终是标准 React/Tailwind/HTML。
- [ok] 移动端安全：变异布局是否可能破坏响应式 — 每种布局均配 Mobile Collapse 规则且 Section 8 清单第 8 项复查 <768px 单列塌陷，风险被显式对冲。
6結論
最適な用途： 「高級感/エージェンシー級（Appleライク / Linear水準の洗練さ）」を明確に目指す新規フロントエンド開発に最適：LP、SaaS/AIプロダクトサイト、ポートフォリオ、ブランドサイトなどの新規 React/Tailwind/HTML タスク。単一ファイルの純粋なプロンプトであるため、Claude Code、Codex、Cursor、ChatGPT のいずれのホスト環境にも貼り付けて使用可能です。
不向きな用途： 既存コードベースの段階的な改修には不向き（redesign-existing-projects を選択してください。本スキルには監査/互換性ルールがありません）。極限のミニマル編集風や工業的ブルータリズム風の特化要件には不向き（minimalist-ui や industrial-brutalist-ui を選択してください）。デフォルトのフォント/アイコン体系の使用が義務付けられている企業制約シナリオには不向き。ビルドや検証スクリプトの自律実行を期待するユーザーには不向き（コードの提案のみを行い、ツールは一切実行しません）。
Install Agent-Ready
① Verified Mirror 2026-09-09
Option A · Direct DownloadDownload high-end-visual-design.tar.gz
sha256:
Option B · Copy Guide for Agentc04ed91fdd2f03c8…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3cca18b368.