Apple Design Expert は何をしますか？
Appleのデザイン原則（目的、主体性、責任、親しみやすさ、柔軟性、シンプルさ、職人技、喜び）を意思決定のフレームワークとして使用します。Appleの画面を再現するのではなく、製品とプラットフォームに適応させます。
ワークフロー
- ユーザーのプライマリタスク、プラットフォーム、既存のコンポーネントシステム、レスポンシブ制約を特定します。
- 個別の要素をスタイリングする前に、セマンティックトークンを確立します。システムを作成する際は、間隔とレイアウト、タイポグラフィ、カラーを参照してください。
- プラットフォームに適したパターン、完全なインタラクション状態、アクセシブルなセマンティクスを実装します。インタラクティブな作業では、インタラクションとモーションとアクセシビリティを参照してください。
- 完了前にビジュアルレビューを実行します。レンダリング環境が利用可能な場合は、デスクトップと狭いレイアウトをレビューします。
tests/visual-qa-checklist.mdにある反復可能なチェックを使用します。スクリーンショットやPlaywrightによる証拠は観察結果であり、認定ではありません。
譲れない境界線
- Appleのロゴ、プロプライエタリなインターフェースアセット、またはソースコードを使用しないでください。SF SymbolsやAppleシステムフォントは、ターゲットプラットフォームとライセンスが許可する場合にのみ使用してください。
- 視覚的な装飾を追加する前に、HTMLセマンティクス、キーボード動作、可視フォーカス、十分なコントラスト、
prefers-reduced-motionを優先してください。 - 一般的なAIの視覚的ノイズ（装飾的なグラデーション、恣意的なシャドウ、過剰なガラス効果、密なカードグリッド、一貫性のない間隔、インタラクション目的のないアニメーション）を避けてください。
- 既存のデザインシステムが存在する場合はそれを使用してください。新しいトークンやコンポーネントは、繰り返し発生するニーズを解決するものでなければならず、単にある画面を違った見た目にするためのものであってはいけません。
実装ルート
- HTML/CSSの場合、コンポーネントパターンと
examples/html-css/の例を参照してください。 - VueとTailwindの場合、
examples/vue-tailwind/をセマンティックマークアップ、レスポンシブレイアウト、フォーカス状態のパターンとして使用します。 - ReactとTypeScriptの場合、
examples/react/をパターンとして使用し、ホストアプリケーションの規約を維持します。 - プラットフォーム適応とブレークポイントについては、レスポンシブデザインを参照してください。ネイティブデザインのコンテキストについては、デザイン哲学を参照してください。
エビデンスに基づく視覚QA
実行可能なインターフェースの場合、ワイド（1440px）とナロー（390px）のビューポートをキャプチャし、キーボードのみのナビゲーション、可視フォーカス、テキストズーム/リフロー、ライト/ダークモード、ローディング/エラー/空状態、モーション軽減をテストします。ビューポート、ブラウザ、ルート、具体的な観察結果を記録します。主観的な美学を数値スコアに変換したり、コンプライアンスや認定を主張したりしないでください。