Haizhucodex デザインスキル
明確なビジュアルテーゼ、使いやすいインタラクションモデル、アクセシブルなコンポーネント、抑制されたモーション、そして検証された実装品質で、洗練されたフロントエンド体験を創造します。
オペレーションモード
リクエストとプロジェクトの状態に応じて、以下のいずれかのモードを選択します。
- デザイン: 実装の前に、階層、ビジュアルの方向性、トークン、コンポーネント、状態、モーションを確立します。
- ビルド: 提供された概要、スクリーンショット、モックアップ、または既存のデザインシステムを、現在のフロントエンドスタックで実装します。
- リデザイン: プロダクトの動作を維持しながら、階層、ブランディング、レスポンシブ性、アクセシビリティ、および知覚品質を向上させます。
- 監査: 既存のインターフェースを検査し、問題を影響度でランク付けし、最も価値の高い問題を修正します。
- デザインシステム:
DESIGN.md、トークン、コンポーネントルール、モーションルール、および再利用可能なパターンを作成または洗練します。
コアワークフロー
- 編集前にリポジトリを検査します。フレームワーク、パッケージマネージャー、ルート、コンポーネント、スタイリングシステム、トークン、依存関係、ビルドコマンド、およびプロジェクトの規則を特定します。
- プロダクトタイプ、ターゲットユーザー、プライマリタスク、コンテンツ階層、ブランド属性、プラットフォーム、レスポンシブターゲット、アクセシビリティ要件、および技術的制約を含む、簡潔な設計概要を抽出します。
- 1つのビジュアルテーゼを選択します。タイポグラフィの特性、色の振る舞い、スペーシングの密度、形状言語、エレベーション、イメージ、およびモーション階層を定義します。
- 利用可能な場合、5つの専門スキルを通じて作業を進めます。
- UI UX Pro Max: プロダクトカテゴリ別のUXパターン、情報アーキテクチャ、パレットとタイポグラフィのオプション、プラットフォームの規則、およびアクセシビリティ制約。
- Design MD Collection: プロジェクトレベルのデザイン言語、トークン、再利用可能なコンポーネントルール、および
DESIGN.mdのガイダンス。 - Taste Skill: 構成、差別化、ビジュアル判断、アンチジェネリック制約、およびアートディレクション。
- shadcn: アクセシブルなReactプリミティブ、コンポーネントAPI、フォーム、オーバーレイ、ナビゲーション、データ表示、および状態。
- Impeccable: 階層、タイポグラフィ、スペーシング、洗練度、レスポンシブ性、およびアクセシビリティをカバーする最終監査。
references/prompt-library.mdを読みます。特定のプロダクトまたはインタラクションの目標に役立つソースパターンのみを選択します。- ページセクション、再利用可能なコンポーネント、コンテンツ状態、レスポンシブ動作、インタラクション、アニメーションの所有権、モーション抑制動作、および検証コマンドをカバーする実装マップを作成します。
- 既存のスタックに直接実装します。新しい依存関係が明確な価値を提供しない限り、現在の依存関係と規則を再利用します。
- 該当する場合、ローディング、空、エラー、無効、ホバー、フォーカス、アクティブ、選択、成功、および破壊状態を検証します。
- キーボードナビゲーション、フォーカス可視性、セマンティック構造、コントラスト、タッチターゲット、レスポンシブレイアウト、ランタイムエラー、および
prefers-reduced-motionをテストします。 - フォーマッター、リンター、型チェック、テスト、およびプロダクションビルドを実行します。作業によって導入された障害を修正します。
- Impeccableスタイルの最終批評を実施し、最も影響の大きい残存欠陥に対処します。
パターン選択ルール
- Motion Sites は、スクロールナラティブ、エディトリアルトランジション、ローンチ、ポートフォリオ、および没入型ヒーローセクションに使用します。
- React Bits は、再利用可能なReactアニメーションプリミティブ、アニメーションテキスト、リスト、カード、背景、およびトランジションに使用します。
- Uiverse は、ボタン、入力、トグル、ローダー、ツールチップなどのフォーカスされたコントロールとマイクロインタラクションに使用します。
- Anime.js は、調整されたタイムライン、SVGシーケンス、スタッガードアニメーション、およびCSSだけではクリーンに表現できない状態駆動型モーションに使用します。
- Aceternity UI は、プレミアムなReactランディングページ構成、機能紹介、ナビゲーション、カード、および雰囲気のある背景に使用します。
利用可能だからといって、効果を重ねて使用しないでください。すべての効果は、階層、フィードバック、方向性、ストーリーテリング、または理解をサポートする必要があります。
デザインガードレール
- 1つの支配的なビジュアルアイデアを確立し、一貫して適用します。
- タスク完了と情報アーキテクチャを装飾よりも優先します。
- ありきたりなグラデーション主体のAIスタイリング、過度なグラスモーフィズム、ランダムなフローティングカード、装飾的なチャート、統一された角丸長方形、およびすべての要素へのアニメーションを避けます。
- 目立つ書体、アクセントカラー、エレベーションレベル、ボーダー半径、およびモーションファミリーを制限します。
- セマンティックHTMLとアクセシブルなコンポーネントプリミティブを使用します。
- モバイルを、圧縮されたデスクトップレイアウトではなく、意図的な構成として扱います。
- 単純な状態変更にはCSSトランジションを優先し、調整やシーケンスが必要な場合にのみJavaScriptアニメーションを導入します。
- 可能な場合はtransformとopacityをアニメーション化します。レイアウトスラッシングや不要な連続アニメーションを避けます。
- ハイドレーション前およびアニメーションが無効になっている場合でも、読み取り可能なコンテンツを維持します。
- 外部ライセンスを尊重します。文書化されたAPIまたはインストール方法を使用し、許可なくサードパーティのソースを再配布しないでください。
依存関係ポリシー
パッケージを追加する前に:
- プロジェクトに同等の依存関係が既に存在するか確認します。
- フレームワーク、レンダリングモデル、およびバージョンの互換性を確認します。
- CSSまたは既存のユーティリティで不十分な理由を説明します。
- リポジトリのパッケージマネージャーでインストールします。
- インポートを狭く保ち、未使用の実験的コードを削除します。
- 最終サマリーに依存関係とその目的を記録します。
名前付きスキルまたはライブラリが利用できない場合は、その役割を直接実行して続行します。オプションの統合のために日常的な実装をブロックしないでください。
必須の成果物
デザインのみの作業の場合、以下を返します:
- 設計概要。
- ビジュアルテーゼ。
- ページとコンポーネントのアーキテクチャ。
- トークンとタイポグラフィの方向性。
- モーションプラン。
- レスポンシブとアクセシビリティの要件。
実装作業の場合、以下を返します:
- 選択した方向性とその根拠。
- 変更したファイルと主要なコンポーネントの決定。
- モーションとインタラクションの動作。
- アクセシビリティとレスポンシブの検証。
- 実行したコマンドと結果。
- 追加した依存関係。
- 残っている前提またはトレードオフ。