tasteskill: アンチスラッグ フロントエンドスキル
ランディングページ、ポートフォリオ、リデザイン。ダッシュボード、データテーブル、マルチステップの製品UIは対象外です。 以下のルールはすべて状況に応じて適用されます。自動的に発動するものではありません。まずブリーフを読み、それに合うものだけを選択してください。
0. ブリーフ推論（何よりも先に状況を読む）
コードに触れたり、設定を微調整する前に、ユーザーが実際に何を望んでいるかを推論してください。LLMのデザインアウトプットの多くが悪いのは、モデルが状況を読まずにデフォルトの美的感覚に飛びつくからです。
0.A 最初にこれらのシグナルを読む
- ページの種類 - ランディング（SaaS / 消費者向け / エージェンシー / イベント）、ポートフォリオ（デベロッパー / デザイナー / クリエイティブスタジオ）、リデザイン（維持 vs 全面刷新）、エディトリアル / ブログ。
- ユーザーが使用した雰囲気ワード - "ミニマル"、"落ち着いた"、"Linearスタイル"、"Awwwards"、"ブルータリズム"、"プレミアムコンシューマー"、"Apple風"、"遊び心のある"、"シリアスなB2B"、"エディトリアル"、"エージェンシー風"、"グラッシー"、"ダークテック"。
- 参照シグナル - リンクされたURL、貼り付けられたスクリーンショット、名前の挙がった製品、競合しているブランド。
- オーディエンス - B2B調達パネル vs. デザインに敏感な消費者 vs. ポートフォリオをスキャンする採用担当者。オーディエンスが美的感覚を決めます。あなたの好みではありません。
- 既存のブランドアセット - ロゴ、色、タイポグラフィ、写真。リデザインの場合、これらは開始材料であり、オプションの入力ではありません（セクション11を参照）。
- 暗黙の制約 - アクセシビリティ重視のオーディエンス、公共セクター、規制産業、信頼第一のコマース、子供向け製品。これらの制約は美的嗜好よりも優先されます。
0.B 生成する前に、一行の「デザインリード」を出力する
コードを生成する前に、次のように一行で宣言してください。"これを読んで：<ページの種類>、<オーディエンス>向け、<雰囲気>の言語、<デザインシステムまたは美的ファミリー>に傾倒。"
デザインリードの例：
- "これを読んで：B2B SaaSランディング、技術的バイヤー向け、Linearスタイルのミニマル言語、Tailwindユーティリティ + Geist + 抑制されたモーションに傾倒。"
- "これを読んで：ソロデザイナーポートフォリオ、採用マネージャー向け、エディトリアル/キネティックタイプ言語、ネイティブCSS + スクロール駆動アニメーション + カスタムタイポグラフィに傾倒。"
- "これを読んで：公共セクターサービスサイトのリデザイン、信頼第一の言語、GOV.UKフロントエンドまたはUSWDSに傾倒。"
0.C ブリーフがあいまいな場合、一つだけ質問し、推測しない
ちょうど一つの明確化質問をしてください。複数の質問を一度に投げかけないでください。そして、デザインリードが本当に分岐する場合にのみ質問してください。例："これはLinear風のクリーンな感じですか、それともAwwwards風の実験的な感じですか？"
文脈から自信を持って推論できる場合は、質問しないでください。デザインリードを宣言して先に進んでください。
0.D アンチデフォルトの規律
以下のものにデフォルト化しないでください：AIパープルのグラデーション、ダークメッシュ上の中央寄せヒーロー、三つの等しいフィーチャーカード、すべてに適用する汎用的なグラスモーフィズム、無限ループのマイクロアニメーション、Inter + slate-900。これらはLLMのデフォルトです。デザインリードに基づいて、意図的にそれらを超えてください。
1. 3つのダイヤル（コア設定）
デザインリードの後、3つのダイヤルを設定します。以下のすべてのレイアウト、モーション、密度の決定は、これらによって制御されます。
DESIGN_VARIANCE: 8- 1 = 完璧な対称性、10 = アーティスティックな混沌MOTION_INTENSITY: 6- 1 = 静的、10 = 映画的 / 物理演算VISUAL_DENSITY: 4- 1 = 美術館 / 風通しの良い、10 = コックピット / 情報密集
ベースライン： 8 / 6 / 4。デザインリードが上書きしない限り、これらを使用します。ユーザーにこのファイルを編集するように依頼しないでください。上書きは会話の中で行われます。
1.A ダイヤル推論（デザインリード → ダイヤル値）
| シグナル | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| "ミニマル / クリーン / 落ち着いた / エディトリアル / Linearスタイル" | 5-6 | 3-4 | 2-3 |
| "プレミアムコンシューマー / Apple風 / 高級 / ブランド" | 7-8 | 5-7 | 3-4 |
| "遊び心のある / ワイルド / Dribbble / Awwwards / 実験的 / エージェンシー" | 9-10 | 8-10 | 3-4 |
| "ランディングページ / ポートフォリオ / マーケティングサイト（デフォルト）" | 7-9 | 6-8 | 3-5 |
| "信頼第一 / 公共セクター / 規制産業 / アクセシビリティ重要" | 3-4 | 2-3 | 4-5 |
| "リデザイン - 維持" | 既存に合わせる | +1 | 既存に合わせる |
| "リデザイン - 全面刷新" | +2 | +2 | 既存に合わせる |
1.B ユースケースプリセット
| ユースケース | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| ランディング（SaaS、主流） | 7 | 6 | 4 |
| ランディング（エージェンシー / クリエイティブ） | 9 | 8 | 3 |
| ランディング（プレミアムコンシューマー） | 7 | 6 | 3 |
| ポートフォリオ（デザイナー / スタジオ） | 8 | 7 | 3 |
| ポートフォリオ（デベロッパー） | 6 | 5 | 4 |
| エディトリアル / ブログ | 6 | 4 | 3 |
| 公共セクターサービス | 3 | 2 | 5 |
| リデザイン - 維持 | 既存に合わせる | 既存+1 | 既存に合わせる |
| リデザイン - 全面刷新 | +2 | +2 | 既存に合わせる |
1.C ダイヤルがアウトプットを駆動する方法
これらの値（またはユーザーが上書きした値）をグローバル変数として使用します。このドキュメント全体での相互参照は、これらの正確な変数名を参照します。LAYOUT_VARIANCE や ANIM_LEVEL のようなエイリアスを決して発明しないでください。
2. ブリーフ → デザインシステムマップ
デザインリード（セクション0）とダイヤル（セクション1）を取得したら、適切な基盤を選択します。公式パッケージが存在するものに対して、CSSをゼロから発明しないでください。美的トレンドを公式システムであるかのように装わないでください。
2.A 実際のデザインシステムを使用する場合（公式パッケージを使用）
| ブリーフが示すもの… | 使用するもの | 理由 |
|---|---|---|
| Microsoft / エンタープライズSaaS / ダッシュボード | @fluentui/react-components または @fluentui/web-components | 公式Fluent UI、Microsoftトークン、アクセシビリティ完備 |
| GoogleっぽいUI、Materialテイストの製品 | @material/web + Material 3トークン | 公式、Material Themingによるテーマ設定可能 |
| IBMスタイルのB2B / エンタープライズ分析 | @carbon/react + @carbon/styles | 公式Carbon、成熟したデータ密度パターン |
| Shopifyアプリサーフェス | polaris.js webコンポーネント / Polaris React | Shopify管理UIに必須 |
| Atlassian / Jiraスタイルの製品 | @atlaskit/* + @atlaskit/tokens | 公式Atlassian DS |
| GitHubスタイルのデブトゥール / コミュニティページ | @primer/css または @primer/react-brand | 公式Primer。マーケティングにはBrandバリアント |
| 公共セクター英国サービス | govuk-frontend | 法的/規制上期待される |
| 米国公共セクター / 信頼第一 | uswds | 同上 |
| 高速な地元ビジネス / エージェンシーMVP | Bootstrap 5.3 | 退屈だが、速く、動作する |
| モダンでアクセシブルなReact基盤 | @radix-ui/themes | プリミティブ + 洗練されたテーマ |
| コンポーネントを自分で所有するモダンSaaS | shadcn/ui (npx shadcn@latest add ...) | コードを所有し、カスタマイズが容易。デフォルト状態で出荷しない |
| TailwindベースのモダンSaaS / AIマーケティング | Tailwind v4ユーティリティ + dark: バリアント | 個人開発 + 小規模チームビルドのデフォルト |
正直ルール： ブリーフが上記のシステムのいずれかを示す場合、公式パッケージをインストールして使用します。そのCSSを手作業で再現しないでください。システムのトークンをインポートしても、その90％をオーバーライドしないでください。
プロジェクトごとに一つのシステム。 Fluent ReactとCarbonを同じツリー内で混在させないでください。Material 3アプリにshadcn/uiコンポーネントをインポートしないでください。
2.B ブリーフが美的感覚であり、システムではない場合
これらの方向性については、単一の公式パッケージはありません。ネイティブCSS + Tailwind + メンテナンスされたコンポーネントライブラリで構築します。コードコメントで、借用したインスピレーションと公式マテリアルのどちらであるかを正直に明記します。
| 美的感覚 | 正直な実装 |
|---|---|
| グラスモーフィズム / "すりガラス" | backdrop-filter、レイヤードボーダー、ハイライトオーバーレイ。prefers-reduced-transparency 用のソリッドフィル代替手段を提供。 |
| 弁当箱（Appleスタイルのタイルグリッド） | 混合セルサイズのCSS Grid。単一のライブラリがこれを所有していない。 |
| ブルータリズム | ネイティブCSS、等幅フォント、生のボーダー。ライブラリなし。 |
| エディトリアル / 雑誌 | セリフ書体、非対称グリッド、たっぷりとした余白。ライブラリなし。 |
| ダークテック / ハッカー | 等幅 + アクセントネオン、ターミナルモチーフ。ライブラリなし。 |
| オーロラ / メッシュグラデーション | SVGまたはレイヤード放射グラデーション。ライブラリなし。 |
| キネティックタイポグラフィ | ネイティブCSSアニメーション、スクロール駆動アニメーション、ハイジャック用GSAP。ライブラリなし。 |
| Apple Liquid Glass | AppleはこれをAppleプラットフォームのみで文書化しています。公式の liquid-glass.css は存在しません。 Web実装は backdrop-filter + レイヤードボーダー + ハイライトを使用した近似です。近似であることを明確にラベル付けします。 |
3. デフォルトアーキテクチャと規約
デザインリードが実際のデザインシステム（セクション2.A）を選択しない限り、これらがデフォルトです。
3.A スタック
- フレームワーク： React または Next.js。デフォルトはServer Components（RSC）。
- RSCの安全性： グローバルステートはClient Componentsでのみ機能します。Next.jsでは、プロバイダーを
"use client"コンポーネントでラップします。 - インタラクティビティの分離： Motion、スクロールリスナー、またはポインタ物理演算を使用するコンポーネントは、上部に
'use client'を持つ分離されたリーフコンポーネントである必要があります。Server Componentsは静的レイアウトのみをレンダリングします。
- RSCの安全性： グローバルステートはClient Componentsでのみ機能します。Next.jsでは、プロバイダーを
- スタイリング： Tailwind v4（デフォルト）。Tailwind v3は、既存のプロジェクトがそれを要求する場合のみ。
- v4の場合：
postcss.config.jsでtailwindcssプラグインを使用しないでください。@tailwindcss/postcssまたはViteプラグインを使用してください。
- v4の場合：
- アニメーション： Motion（旧Framer Motionとして知られるライブラリ）。
motion/reactからインポート（import { motion } from "motion/react"）。framer-motionパッケージはレガシーエイリアスとして引き続き機能します。新しいコードではmotion/reactを優先します。 - フォント： 常に
next/font（Next.js）または@font-face+font-display: swapでセルフホストを使用します。本番環境でGoogle Fontsを<link>経由でリンクしないでください。
3.B 状態管理
- 分離されたUIにはローカルの
useState/useReducer。 - 深いpropsドリルを避けるためのみのグローバルステート - Zustand、Jotai、またはReact Context。
- 決して
useStateを使用して、ユーザー入力（マウス位置、スクロール進行度、ポインタ物理演算、磁気ホバー）によって駆動される連続値を追跡しないでください。MotionのuseMotionValue/useTransform/useScrollを使用してください。useStateはすべての変更でReactツリーを再レンダリングし、モバイルではクラッシュします。
3.C アイコン
- 許可されているライブラリ（優先順位順）：
@phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react。 - 推奨されない：
lucide-react。ユーザーが明示的に要求した場合、またはプロジェクトが既に依存している場合のみ受け入れられます。 - 決してSVGアイコンを手作業で作成しないでください。 グリフが見つからない場合は、2番目のライブラリをインストールするか、プリミティブから構成してください。アイコンパスをゼロから描かないでください。
- プロジェクトごとに一つのファミリー。 同じコンポーネントツリー内でPhosphorとLucideを混在させないでください。
strokeWidthをグローバルに標準化（例：1.5または2.0）。
3.D 絵文字ポリシー
コード、マークアップ、および表示テキストではデフォルトで推奨されません。記号はアイコンライブラリのグリフに置き換えてください。上書き： ユーザーが遊び心のある / チャットスタイル / ソーシャルネイティブな雰囲気を明示的に要求した場合のみ絵文字を許可し、その場合でも意図を持って控えめに使用します。
3.E レスポンシブとレイアウトの仕組み
- ブレークポイントを標準化（
sm 640、md 768、lg 1024、xl 1280、2xl 1536）。 max-w-[1400px] mx-autoまたはmax-w-7xlを使用してページレイアウトをコンテナ化。- ビューポートの安定性： 全高のヒーローセクションに
h-screenを決して使用しないでください。常にmin-h-[100dvh]を使用して、モバイル（iOS Safariアドレスバー）でのレイアウトジャンプを防ぎます。 - フレックス計算よりもグリッド： 複雑なフレックスボックスのパーセンテージ計算（
w-[calc(33%-1rem)]）を決して使用しないでください。常にCSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）を使用してください。
3.F 依存関係の確認（必須）
サードパーティライブラリをインポートする前に、package.json を確認してください。パッケージが見つからない場合は、最初にインストールコマンドを出力します。ライブラリが存在することを決して推定しないでください。
4. デザインエンジニアリングディレクティブ（バイアス補正）
LLMは決まり文句にデフォルト化します。これらのデフォルトを積極的に上書きします。各ルールには、コンテキストを考慮した上書きパスがあります。
4.1 タイポグラフィ
-
ディスプレイ / 見出し： デフォルト
text-4xl md:text-6xl tracking-tighter leading-none。 -
本文 / 段落： デフォルト
text-base text-gray-600 leading-relaxed max-w-[65ch]。 -
サンセリフフォントの選択：
- デフォルトとして推奨されない：
Inter。代わりにGeist、Outfit、Cabinet Grotesk、Satoshi、またはブランドに適したセリフを最初に選択してください。 - 上書き： ユーザーがニュートラル / 標準 / Linearスタイルの雰囲気を明示的に要求した場合、またはブリーフが公共セクター / アクセシビリティ重視のサイトである場合、Interは受け入れられます。
- デフォルトとして推奨されない：
-
知っておくべきペアリング：
Geist+Geist Mono、Satoshi+JetBrains Mono、Cabinet Grotesk+Inter Tight、GT America+IBM Plex Mono。 -
セリフの規律（デフォルトとして非常に推奨されない）：
- セリフはどのプロジェクトのデフォルトフォントとしても非常に推奨されません。 "クリエイティブ / プレミアム / エディトリアルな感じがする" はセリフに手を伸ばす理由にはなりません。「クリエイティブなブリーフ = セリフ」というエージェントのデフォルトのメンタルモデルは、プロダクションラウンドで最もテストされたAIの兆候です。
- セリフは、以下のいずれかが明示的に真である場合にのみ許容されます：
- ブランドブリーフが文字通りセリフフォントを指定している、または
- 美的ファミリーが本当にエディトリアル / 高級 / 出版 / 原稿 / ヘリテージ / ビンテージであり、なぜこの特定のセリフがこの特定のブランドに合うのかを明確に説明できる
- その他すべて（クリエイティブエージェンシー、デザインスタジオ、モダンブランド、プレミアムコンシューマー、ポートフォリオ、ライフスタイル）については、デフォルトでサンセリフのディスプレイ（Geist Display、ABC Diatype、Söhne Breit、Cabinet Grotesk Display、Migra Sans、GT Walsheim、Inter Display、PP Neue Montreal）。サンセリフのディスプレイフォントは「退屈」ではありません。それらは、ファッションにおいて黒がデフォルトであるのと同じ理由でデフォルトです。
- 強調ルール（関連）： 見出し内の単語を強調したい場合（キネティックな「そして
空間的デザイン」のような動き）、同じフォントのイタリックまたはボールドを使用します。視覚的な興味を追加するためだけに、サンセリフの見出しにランダムなセリフの単語を注入しないでください（またはその逆）。混在ファミリーの強調はアマチュア的です。同じファミリー内のイタリック/ボールド強調が正しい動きです。 - 特にデフォルトとして禁止：
FrauncesおよびInstrument_Serif（LLMが好む2つのディスプレイセリフ）。 - セリフが正当化される場合（上記の通り稀）、このプールからローテーションし、連続するプロジェクトで同じセリフを再利用しないでください：PP Editorial New、GT Sectra Display、Cardinal Grotesque、Reckless Neue、Tiempos Headline、Recoleta、Cormorant Garamond、Playfair Display、EB Garamond、IvyPresto、Migra、Editorial Old、Saol Display、Söhne Breit Kursiv、Domaine Display、Canela、Schnyder、Tobias、NB Architekt、I...
（翻訳対象外のため本文を省略しました）