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 FrontendまたはUSWDSに傾く」
0.C ブリーフが曖昧な場合は、推測せずに1つの質問をする
正確に1つの明確化質問をしてください。複数の質問を一度に行ってはいけません。また、デザインリードが真に分岐する場合にのみ行ってください。例：「これはLinearのクリーンさに近いですか、それともAwwwardsの実験的な感じですか？」
コンテキストから自信を持って推論できる場合は、質問しないでください。デザインリードを宣言して先に進んでください。
0.D アンチデフォルト規律
デフォルトにしないこと：AIパープルのグラデーション、ダークメッシュ上の中央揃えヒーロー、3つの等しいフィーチャーカード、すべてに適用される汎用のガラスモーフィズム、無限ループのマイクロアニメーション、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、マーケティング用ブランドバリアント |
| 英国の公共セクターサービス | 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％をオーバーライドしないでください。
プロジェクトごとに1つのシステム。 同じツリー内でFluent ReactとCarbonを混在させないでください。Material 3アプリにshadcn/uiコンポーネントをインポートしないでください。
2.B ブリーフが美学であり、システムではない場合
これらの方向性には、単一の公式パッケージはありません。ネイティブCSS + Tailwind + メンテナンスされたコンポーネントライブラリで構築します。コードコメントで、借用したインスピレーションと公式素材を正直に区別してください。
| 美学 | 正直な実装 |
|---|---|
| ガラスモーフィズム / 「すりガラス」 | backdrop-filter、レイヤードボーダー、ハイライトオーバーレイ。prefers-reduced-transparencyに対してソリッドフィルのフォールバックを提供。 |
| Bento（Appleスタイルのタイルグリッド） | 混合セルサイズのCSSグリッド。これを単独で所有するライブラリはありません。 |
| ブルータリズム | ネイティブ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。 - 深いプロップドリルを回避する場合のみグローバルステート - Zustand、Jotai、またはReactコンテキスト。
- ユーザー入力（マウス位置、スクロール進行度、ポインター物理、磁気ホバー）によって駆動される連続値を追跡するために
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番目のライブラリをインストールするか、プリミティブから構成してください。アイコンパスをゼロから描画しないでください。
- プロジェクトごとに1つのファミリー。 同じコンポーネントツリー内で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を決して使用しないでください。モバイル（iOS Safariアドレスバー）でのレイアウトジャンプを防ぐために、常にmin-h-[100dvh]を使用します。 - フレックス計算よりもグリッド: 複雑なフレックスボックスのパーセンテージ計算（
w-[calc(33%-1rem)]）を決して使用しないでください。常にCSSグリッド（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）を使用します。サンセリフのディスプレイフォントは「退屈」ではありません。それはファッションで黒がデフォルトであるのと同じ理由でデフォルトです。
- 強調ルール（関連）： 見出し内の単語を強調したい場合（キネティックな「and
spatialdesign」のような動き）、同じフォントのイタリックまたはボールドを使用します。視覚的な興味を追加するためだけに、サンセリフの見出しにランダムなセリフの単語を挿入しないでください（逆もまた同様）。異なるファミリーの混在による強調はアマチュア的です。同じファミリーのイタリック / ボールドの強調が正しい方法です。 - 特にデフォルトとして禁止:
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...
（注：上記は原文の一部を翻訳したものです。完全なドキュメントはより長くなります。）