Frontend Design Styles
4つの主要デザイン言語をフロントエンドコードに忠実に落とし込みます。核となるのは「なんとなく似ている」ではなく、セマンティックトークン + コンポーネント形態 + モーションカーブの3層で一貫して再現し、成果物がそのプラットフォームのユーザーに「これがiOS」「これがMaterial」「これがWindows」と認識されるようにすることです。
使用する／しない
使用する：指定されたデザインスタイルでインターフェースを生成または改造する；4スタイルの選定比較を行う；デザイントークンとテーマファイルを出力する；デザイン言語に沿ったビジュアルレビューを実施する。
使用しない：ユーザーにスタイルの好みがなく、単に「見た目の良いページ」を素早く欲しい場合 → まずスタイル指定の要不要を確認するか、references/style-router.md の推奨ロジックに従う；純粋なバックエンド/アルゴリズムタスクは本スキルの対象外。
4スタイル簡易リファレンス
最も識別性の高い特徴です。実装前に必ずこの表を確認し、詳細は対応するリファレンスを参照してください。
| MIUIX / HyperOS | Apple HIG | Material Design 3 | Fluent 2 | |
|---|---|---|---|---|
| メインカラー | #3482FF (ライト) / #277AF7 (ダーク) | #007AFF / #0A84FF | 役割ベース、ベース #6750A4 | #0F6CBD |
| フォント | MiSans | SF Pro（<20pt テキスト、≥20pt Display） | Roboto / Roboto Flex | Segoe UI Variable |
| 本文ベースサイズ | 16–17px | 17pt | 16sp (body-large) | 14px (body-1) |
| 角丸言語 | 16dp 統一角丸 + squircle（iOS と同系統だが、ボタンはカプセル型ではない） | 連続曲率角丸（squircle）、コンテナ 10–20pt | 12dp カード / 28dp FAB & モーダル / 全角丸ボタン | 小角丸、コントロール 4px、モーダル 8px、ネストは −2px |
| 階層表現手法 | 色調階層（#FFFFFF / #F7F7F7 / #E8E8E8）、重い影はほぼ使わない | マテリアルぼかし（半透明）+ グループリスト + コンテンツがUIを圧迫 | 色調オーバーレイ（tonal overlay）優先、影は補助 | マテリアル（Mica / Acrylic）+ 控えめな多層影 |
| モーション | 軽快、弾性バウンドあり、200–300ms | スプリング物理、200–300ms、linear なし | 強調曲線 cubic-bezier(0.2,0,0,1)、持続時間トークンで段階分け | 速く抑制的、150–250ms、easyEase |
| タッチ/クリックターゲット | ≥ 48dp | ≥ 44×44pt | ≥ 48dp | コントロール高さ 32px（コンパクト/コンフォートモード） |
| 一言で表す雰囲気 | 丸み、透明度、ブルーテクノロジー感 | 抑制、余白、コンテンツ優先 | 色彩表現力豊か、階層は色調で | 生産性、鮮明、デスクトップネイティブ |
ワークフロー
Step 1 · スタイルを決める。 ユーザーが指定済み → そのまま使用。未指定 → references/style-router.md を読み、プロダクト形態/プラットフォーム/密度に応じて推奨1つ + 代替1つを提示し、ユーザーに確認する。
Step 2 · トークンを読む。 対応するリファレンスドキュメントを開き、色、フォントサイズ、スペーシング、角丸、影、モーションをすべて読んでから実装に取り掛かる。記憶だけで書かないこと：
- MIUIX / HyperOS →
references/miuix-hyperos.md - Apple HIG →
references/apple-hig.md - Material Design 3 →
references/material-design-3.md - Fluent 2 →
references/fluent-2.md
Step 3 · トークンを適用する。 assets/tokens/<style>.css をセマンティックトークンレイヤーとして直接コピーする（ライト/ダーク両テーマを含む）。コンポーネントスタイルに hex 値を直接書かないこと。 ダークモードは [data-theme="dark"] または prefers-color-scheme で切り替える。
Step 4 · コンポーネントを組み立てる。 references/components-playbook.md の該当スタイルのコンポーネント仕様に従って実装する（ボタンのバリエーション、入力フィールド、カード、ナビゲーション、オーバーレイ、スイッチ、リスト）。各インタラクション状態（hover / focus / pressed / selected / disabled）をすべて実装すること。デフォルト状態のみでは不十分。
Step 5 · モーション追加 + 自己チェック。 references/motion-and-accessibility.md に従ってトランジションを補完した後、python3 scripts/lint_tokens.py <成果物> --style <スタイル> を実行し、さらに以下のセルフチェックリストを項目ごとに確認する。
鉄則
- スタイルを混ぜない。 Fluent を選んだら iOS の
#007AFFや Material の pill FAB、HyperOS の大きな角丸カードを出現させない。混在は最も一般的な失敗パターン。 - トークン優先。 コンポーネントの CSS には
var(--xxx)のみを許可し、リテラル値の色/フォントサイズ/角丸値は許可しない。 - ライト/ダーク両テーマを同時に作る。 4体系すべてに公式のダーク値があるので、直接テーブルを参照し、
filter: invertや手動の暗色調整でごまかさない。 - プラットフォームの取り決めは変更不可。 例：iOS の最小クリック領域 44pt、Material のステートレイヤー不透明度、Fluent のコントロールの 1px 下辺ストローク、HyperOS のダーク背景
#242424（完全な黒ではない surface）。 - アクセシビリティは必須。 本文コントラスト比 ≥ 4.5:1、UI要素 ≥ 3:1、フォーカスリングは可視であること、
prefers-reduced-motionを尊重すること。 - 中国語タイポグラフィは個別に処理する。 Roboto / Segoe UI / SF Pro には完全な中国語グリフがないため、中国語インターフェースでは苹方 (PingFang) / 思源黑体 (Noto Sans SC) / MiSans などの中文字体にフォールバックし、letter-spacing を緩めること（ラテン文字間隔は中国語に適用されない）。
納品仕様
- デフォルトの成果物は単一ファイルで実行可能な HTML（インライン
<style>+<script>）。トークンは:rootCSS 変数で整理し、ユーザーがすぐにプレビューしてコピーできるようにする。 - ユーザーがフレームワークを指定した場合にのみ切り替える。マッピングルールは
references/framework-mappings.mdを参照：Tailwind はassets/mappings/tailwind.css、React/Vue はトークンオブジェクト + CSS 変数、Compose は公式ライブラリ（MIUIX はMiuixTheme、M3 はMaterialTheme）を優先。 - コンポーネントデモページは
assets/templates/showcase.htmlを参照（同一コンポーネントセットを4スタイルで並列表示、テーマと明暗の切り替え可能）。 - 成果物出力後は必ず検証を実行：
python3 scripts/lint_tokens.py <成果物ファイル> --style <スタイル>。3項目（ハードコードされた色値 / コントラスト比 / コアトークン）がパスしなければ修正し、再提出する。 - 納品時に説明すること：どの体系を使用したか、意図的な逸脱がある場合はその内容、ダークモードの切り替え方法、フォントフォールバックスタック。
セルフチェックリスト
実装後に項目ごとに確認し、パスしなければ修正する：
- 色はすべてトークンからの参照で、ハードコードされた hex がない
- フォントサイズ階層は4段階以内、本文ベースフォントサイズが該当体系に合っている
- 角丸体系が自己矛盾していない（ネスト角丸 = 外側 − 内側パディング）
- 影/マテリアル使用法が該当体系に合っている（Material は色調オーバーレイ、Fluent は Mica/Acrylic、iOS はぼかしマテリアル、HyperOS は色調階層）
- すべてのインタラクション状態が揃っている：hover / focus-visible / active / disabled / selected
- ライト/ダーク両テーマが検証済み
- クリックターゲットサイズが基準を満たしている
- コントラスト比が基準を満たし、フォーカスリングが可視である
-
prefers-reduced-motion時にモーションが低下する - 中国語フォントのフォールバックが正しく、文字間隔が調整されている
- 他の体系の要素が混入していない
リファレンスファイル
| ファイル | 内容 |
|---|---|
references/style-router.md | 4スタイル選定判断ツリー、比較マトリックス、混在禁止領域 |
references/miuix-hyperos.md | MIUIX トークン全テーブル + HyperOS 視覚的特徴 + コンポーネント仕様 |
references/apple-hig.md | システムカラー全テーブル + Dynamic Type 12段階 + マテリアル + コンポーネント仕様 |
references/material-design-3.md | 29のカラーロール 明暗全テーブル + 15段階フォントスケール + シェイプ/エレベーション/ステートレイヤー |
references/fluent-2.md | ニュートラルカラー/ブランドカラースケール + Type Ramp + コントロールサイズ + Mica/Acrylic + シャドウトークン |
references/components-playbook.md | ボタン/入力/カード/ナビゲーション/オーバーレイ/スイッチ/リストのスタイル別実装仕様 |
references/motion-and-accessibility.md | 4体系のモーションカーブと持続時間、アクセシビリティ必須要件、レビューチェックリスト |
references/framework-mappings.md | Tailwind / React / Vue / Compose / SwiftUI へのトークンマッピングルール |
scripts/lint_tokens.py | 実行可能検証：ハードコード色値、コントラスト比、コアトークンの完全性 |
assets/mappings/tailwind.css | Tailwind v4 @theme トークンマッピング、4体系を同一ページで共存可能 |