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 components / 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%を上書きしないでください。

プロジェクトごとに1つのシステム。 Fluent ReactとCarbonを同じツリーで混在させないでください。shadcn/uiコンポーネントをMaterial 3アプリにインポートしないでください。

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。サーバーコンポーネント（RSC）をデフォルトにします。
- RSC安全性： グローバルステートはクライアントコンポーネントでのみ機能します。Next.jsでは、プロバイダーを "use client" コンポーネントでラップします。
- インタラクティビティの分離： Motion、スクロールリスナー、ポインター物理を使用するコンポーネントは、先頭に 'use client' を持つ隔離されたリーフでなければなりません。サーバーコンポーネントは静的なレイアウトのみをレンダリングします。
スタイリング： Tailwind v4（デフォルト）。Tailwind v3は、既存のプロジェクトがそれを要求する場合のみ。
- v4の場合：postcss.config.js で tailwindcss プラグインを使用しないでください。@tailwindcss/postcss またはViteプラグインを使用します。
アニメーション： 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 を決して使用しないでください。常に min-h-[100dvh] を使用して、モバイル（iOS Safariアドレスバー）でのレイアウトジャンプを防ぎます。
フレックス計算よりもグリッド： 複雑なフレックスボックスのパーセント計算（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の特徴の1つです。
- セリフ体は、以下のいずれかが明示的に真である場合にのみ許容されます：
  - ブランドブリーフが文字通りセリフフォント名を挙げている、または
  - 美学ファミリーが本当にエディトリアル / ラグジュアリー / 出版 / 写本 / ヘリテージ / ビンテージであり、かつこの特定のセリフ体がこの特定のブランドに合う理由を明確に説明できる。
- その他すべて（クリエイティブエージェンシー、デザインスタジオ、モダンブランド、プレミアムコンシューマー、ポートフォリオ、ライフスタイル）については、デフォルトでサンセリフディスプレイ（Geist Display、ABC Diatype、Söhne Breit、Cabinet Grotesk Display、Migra Sans、GT Walsheim、Inter Display、PP Neue Montreal）を選択します。サンセリフディスプレイフォントは「退屈」ではありません — ファッションで黒がデフォルトであるのと同じ理由でデフォルトです。
- 強調ルール（関連）： 見出し内で単語を強調したい場合（キネティックな「そして 空間 デザイン」のような動き）、同じフォントのイタリックまたはボールドを使用します。視覚的な興味を追加するためだけに、サンセリフの見出しにランダムなセリフ体の単語を注入しないでください（またはその逆）。ミックスファミリーの強調はアマチュア的です。同じファミリー内のイタリック/ボールド強調が正しい動きです。
- 具体的にデフォルトとして禁止： Fraunces と Instrument_Serif（2つのLLMお気に入りのディスプレイセリフ体）。
- セリフ体が正当化される場合（上記の通り、稀）、このプールからローテーションし、連続するプロジェクトで同じセリフ体を再利用しないでください：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…

[以下、翻訳のため省略]

joyeking/redesigned-portfolio

redesigned-portfolio とは？

お気に入りのAIに質問する

ドキュメント