ahtserhsuddav/website-design

Webデザイン

各プロジェクトは、その主題と実際の参考資料に基づいた独自の外観を持ちます。このスキルは作業の順序とこのプロジェクトのファイルを保持します。クラフトは、その隣にインストールされたデザインスキルから得られます。

ゲート

design/DESIGN.md → デザイン入力 の4行すべてが埋まるまで、ページやコンポーネントのコードは書かないでください。各行はソースまたは「none」であり、あなたが記述します。既存のデザインへの小さな調整は唯一の例外です（ルールを参照）。

1. 入力をこの順序で収集する

各ステップは、前のステップで決定された内容を読み取ります。常に前の入力が後の入力より優先されます。

1. 人間の参考資料とデザインドキュメント（最優先）。
   • design/DESIGN.md を読みます。すでに埋まっている場合（カラートークンに値がある）、それがベースになります。ステップ3に進んでください。
   • design/references/: 各画像を1回読み、画像ごとに1行をDESIGN.mdの参考資料セクションに書き込みます（file → take: … · avoid: …）。その後はそのテキストを基に作業します。
   • 会話で人間から与えられたリンク、ブランドガイド、ロゴ、カラー、フォント、およびPROJECT.md。
   • 簡単な説明が空の場合: 1つのメッセージで人間に3つの短い質問をします。それは何か、誰のためのものか、雰囲気を表す3つの言葉、好きなサイトまたは嫌いなサイト。その回答をDESIGN.mdの簡単な説明セクションに書き込みます。
   • デザイン入力 → 参考資料（見つけたもの、または「none」）を書き込みます。
2. ステップ1でデザイン言語が得られなかった場合: awesome-design-md ベース。
   • {{run}} design:md list を実行すると、カテゴリごとに1行のエントリでカタログが表示されます（--category <word> で絞り込み）。簡単な説明に合う2〜3件を提案し、それぞれに理由を1文添えて、人間に選んでもらいます。
   • {{run}} design:md use <name> を実行すると、そのエントリがクレジット付きで design/DESIGN.md にコピーされます。すべてのブランド名、ロゴ、商標をこのプロジェクトのものに置き換えます。
   • ステップ1でデザイン言語が得られた場合、またはDESIGN.mdがすでにエントリから始まっている場合（ヘッダーにそのように記載されている）、このステップはスキップします。
   • デザイン入力 → ベース（エントリ名、または「none: 人間の参考資料から構築」）を書き込みます。
3. taste-skill（スキル design-taste-frontend）: アートディレクション。
   • このページに対して、そのステップ1〜4（簡単な説明と主題のインベントリ、議論、方向性、アイデア）を実行します。
   • ステップ1〜2で色とタイプが固定された場合は、--keep palette,type を使用して、デザイン言語を置き換える代わりに、その中で構図、イメージ、セクションを計画します。
   • 選択した方向性をDESIGN.mdのセクション（テーマ、レイアウト、コンポーネント）に書き込み、デザイン入力 → 方向性（方向性IDと理由を1行）も書き込みます。
4. このサイトの要件に合った実際のサイト。
   • references/project-types.md でプロジェクトタイプのセクションを開き（rg -n "^## " <file>）、このページが必要とする特定のパターン（価格設定、チェックアウト、ドキュメント、ダッシュボード、オンボーディング…）については、references/inspiration.md のギャラリーを参照します。
   • それらのパターンについて、2〜3の実際のサイトをブラウザツールで調査します（階層、密度、説明の仕方）。それぞれ1行ずつDESIGN.mdの参考資料セクションに書き込みます。
   • デザイン入力 → 参考サイト を書き込みます。

2. ビルド

• トークン: DESIGN.mdのトークンを、{{#tanstack-start}}src/styles.css{{/tanstack-start}}{{#next}}src/app/globals.css{{/next}}{{#shadcn}}（shadcn/uiの --background、--primary、--radius…）{{/shadcn}} のテーマにマッピングします。コンポーネント内で生の16進数値を使用しないでください。
• ビルド: taste-skillの方向性シート（そのステップ5〜6）に従って、スキル frontend-design を使用してビルドします。 {{#shadcn}} shadcn/uiコンポーネント（スキル shadcn; {{dlx}} shadcn@latest add <component>）を使用します。 {{/shadcn}} コンポーネントとアイコンの選択: references/libraries.md。
• コンテンツ: 実際のコンテンツ。それを依頼するか、具体的なプレーンなコピーを書きます。ロレム・イプサム、偽のロゴ、統計、お客様の声は使用しないでください。1つを印象的にし、残りは控えめにします。
• ベースライン: 360pxからのレスポンシブ、可視フォーカス、prefers-reduced-motion、WCAG 2.2 AA コントラスト、および空、ローディング、エラーの状態に対応します。

3. レビュー

• taste-skillのゲートとルックステップ（そのステップ7〜8）。390、768、1440pxでのスクリーンショットを使用します（スキル playwright-cli{{#next}}、または開発サーバーに対する next-dev-loop{{/next}}）。
• アクセシビリティとUXのためのスキル web-design-guidelines、すべてのコピー部分のためのスキル writing-guidelines、およびメインページの読み込みパフォーマンスのためのスキル web-perf。
• 上位3つの問題を修正し、完了する前に装飾を1つ削除します。

ルール

• 参考資料から原則（階層、リズム、密度、タイプ、色）を学んでください。サイトのレイアウト、テキスト、ロゴ、イラスト、コードをコピーしないでください。また、他ブランドの名前、ロゴ、商標を出荷しないでください。
• 人間の簡単な説明と参考資料は、awesome-design-mdベースより優先され、awesome-design-mdベースはtaste-skillのデフォルトより優先され、taste-skillのデフォルトはあなた自身の好みより優先されます。
• 既存デザインへの小さな視覚的調整（間隔、パレット内の色、1つのコンポーネント）はクイックチェンジです。DESIGN.mdに従い、入力を再実行しないでください。