Frontend Design

高品質なフロントエンドインターフェースを構築し、ジェネリックな「AIスロップ」な美学を避けます。このスキルは設計哲学のガイダンスと、既存デザインの分析および設計システムアーティファクト生成のための実用的な TypeScript ツーリングを組み合わせています。

コア原則: 明確な美的方向性を選択し、それを精密に実行します。大胆な最大主義も洗練されたミニマリズムも機能します - 重要なのは意図性であり、強度ではありません。

このスキルを使う場合

使用する場合:

• Webコンポーネント、ページ、またはアプリケーションを構築する
• 既存の CSS を設計の一貫性について監査する
• レガシーコードベースから設計トークンを抽出する
• カラーパレットとタイポグラフィシステムを生成する
• フレームワーク全体でコンポーネントテンプレートを作成する
• 設計要素のアクセシビリティ準拠をチェックする

使用しない場合:

• シンプルなテキストコンテンツの変更
• バックエンドのみの作業
• 非ビジュアル機能

前提条件

• Deno ランタイム (スクリプト実行用)
• オプション: 分析用の既存 CSS/デザインファイル
• オプション: 参照用の設計トークンファイル

クイックスタート

このスキルは 3 つのモードで動作します:

1. 分析モード

既存のスタイルを監査し、トークンを抽出し、アクセシビリティをチェックします。

# CSS を設計パターンと不整合性について監査
deno run --allow-read scripts/analyze-styles.ts styles.css

# 既存の CSS から設計トークンを抽出
deno run --allow-read scripts/extract-tokens.ts ./src --format css

# アクセシビリティをチェック (コントラスト、フォーカス状態)
deno run --allow-read scripts/analyze-accessibility.ts component.tsx

2. 指定モード

生成内容を定義する JSON 仕様を作成します。スキーマの例は assets/ を参照してください。

3. 生成モード

パレット、タイポグラフィシステム、トークン、コンポーネントを作成します。

# カラーパレットを生成
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#2563eb" --theme warm

# タイポグラフィシステムを生成
deno run --allow-read --allow-write scripts/generate-typography.ts --display "Playfair Display" --body "Source Sans Pro"

# 設計トークンファイルを生成
deno run --allow-read --allow-write scripts/generate-tokens.ts tokens-spec.json ./output/

# コンポーネントを生成
deno run --allow-read --allow-write scripts/generate-component.ts --name Button --framework react --styling tailwind

---

手順

フェーズ 1: 分析 (オプションですが推奨)

新しいデザインを作成する前に、既存のコードを監査して現在のパターンを理解します。

1a. スタイル分析

CSS ファイルを分析して、色、タイポグラフィ、スペーシング、不整合を識別します:

deno run --allow-read scripts/analyze-styles.ts <input> [options]

Options:
  --tokens <file>    Compare against existing design tokens
  --pretty           Pretty-print JSON output
  --format <type>    Output format: json (default), summary

出力に含まれるもの:

• 16 進数正規化を使用した色使用の在庫
• タイポグラフィパターン (フォント、サイズ、太さ)
• スペーシング値の分布
• 不整合と推奨事項

1b. トークン抽出

CSS ファイルから設計トークンを標準化されたフォーマットに抽出します:

deno run --allow-read scripts/extract-tokens.ts <input> [options]

Options:
  --format <type>    Output: css, scss, tailwind, style-dictionary, tokens-studio
  --output-css       Also output CSS variables file

1c. アクセシビリティ監査

設計関連のアクセシビリティの問題をチェックします:

deno run --allow-read scripts/analyze-accessibility.ts <input> [options]

Options:
  --format <type>    Output: json, summary
  --level <AA|AAA>   WCAG conformance level (default: AA)

チェック内容:

• カラーコントラスト比率
• フォーカスインジケーターの存在
• タッチターゲットのサイズ
• モーション設定の尊重

---

フェーズ 2: 生成

2a. カラーパレット生成

シードカラーまたはテーマから調和したカラーパレットを生成します:

deno run --allow-read --allow-write scripts/generate-palette.ts [options] <output>

Options:
  --seed <color>     Primary seed color (hex)
  --theme <type>     warm, cool, neutral, vibrant, muted, dark, light
  --style <type>     minimalist, bold, organic, corporate, playful
  --shades           Generate 50-950 shade scale
  --semantic         Generate success/warning/error colors
  --contrast <lvl>   Target contrast: AA (default), AAA
  --format <type>    css, scss, tailwind, tokens, json

仕様例 (palette-spec.json):

{
  "seedColors": {
    "primary": "#2563eb",
    "accent": "#f59e0b"
  },
  "theme": "cool",
  "generateShades": true,
  "generateSemantics": true,
  "contrastTarget": "AA",
  "outputFormat": "css"
}

2b. タイポグラフィシステム生成

フォントスタックとスケールを含むタイポグラフィシステムを生成します:

deno run --allow-read --allow-write scripts/generate-typography.ts [options] <output>

Options:
  --display <font>   Display/heading font family
  --body <font>      Body text font family
  --mono <font>      Monospace font family
  --scale <type>     minor-second, major-second, minor-third, major-third, perfect-fourth, golden-ratio
  --base <px>        Base font size (default: 16)
  --line-height      tight, normal, relaxed
  --responsive       Generate responsive breakpoints
  --format <type>    css, scss, tailwind, tokens

タイプスケール:

Scale	Ratio	特性
minor-second	1.067	控えめで保守的
major-second	1.125	バランスが取れたプロフェッショナル
minor-third	1.200	明確な階層
major-third	1.250	強い存在感
perfect-fourth	1.333	大胆でインパクトのある
golden-ratio	1.618	ドラマティック、芸術的

2c. 設計トークン生成

複数のフォーマットで包括的な設計トークンファイルを生成します:

deno run --allow-read --allow-write scripts/generate-tokens.ts <spec> <output-dir>

仕様の構造:

{
  "name": "my-design-system",
  "tokens": {
    "color": { "primary": "#2563eb", "secondary": "#64748b" },
    "spacing": { "xs": "0.25rem", "sm": "0.5rem", "md": "1rem" },
    "typography": {
      "fontFamilies": { "display": "Playfair Display", "body": "Inter" },
      "fontSizes": { "sm": "0.875rem", "base": "1rem", "lg": "1.125rem" }
    },
    "shadow": { "sm": "0 1px 2px rgba(0,0,0,0.05)" },
    "border": { "radius": { "sm": "0.25rem", "md": "0.5rem" } },
    "animation": { "duration": { "fast": "150ms", "normal": "300ms" } }
  },
  "outputFormats": ["css", "scss", "tailwind", "ts"]
}

2d. コンポーネント生成

設計に焦点を当てたスタイリングでコンポーネントテンプレートを生成します:

deno run --allow-read --allow-write scripts/generate-component.ts [options] <output-dir>

Options:
  --name <name>      Component name (required)
  --type <type>      button, card, input, modal, navigation, hero, custom
  --framework <fw>   react, vue, svelte, html
  --styling <type>   css, tailwind, css-modules, styled-components, emotion
  --aesthetic <type> minimal, bold, organic, brutalist, glassmorphism, neumorphism
  --animation <lvl>  none, subtle, expressive
  --dark-mode        Include dark mode support
  --tokens <file>    Use design tokens file

フレームワーク出力例:

React with Tailwind:

export function Button({ variant = 'primary', children }: ButtonProps) {
  return (
    <button className="px-4 py-2 rounded-lg font-medium transition-all">
      {children}
    </button>
  );
}

Vue with scoped CSS:

<template>
  <button :class="['btn', `btn--${variant}`]"><slot /></button>
</template>
<script setup lang="ts">
defineProps<{ variant?: 'primary' | 'secondary' }>();
</script>
<style scoped>.btn { /* styles */ }</style>

Svelte:

<script lang="ts">
  export let variant: 'primary' | 'secondary' = 'primary';
</script>
<button class="btn btn--{variant}"><slot /></button>
<style>.btn { /* styles */ }</style>

---

例

例 1: レガシー CSS を監査して近代化

# 1. 既存のスタイルを分析
deno run --allow-read scripts/analyze-styles.ts ./legacy/styles.css --pretty > audit.json

# 2. 分析からトークンを抽出
deno run --allow-read scripts/extract-tokens.ts ./legacy/styles.css --format css > tokens.css

# 3. 優位な色から改善されたパレットを生成
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#336699" --shades --format css palette.css

例 2: デザインシステムをゼロから作成

# 1. カラーパレットを生成
deno run --allow-read --allow-write scripts/generate-palette.ts \
  --seed "#8b5cf6" --theme vibrant --shades --semantic --format css colors.css

# 2. タイポグラフィシステムを生成
deno run --allow-read --allow-write scripts/generate-typography.ts \
  --display "Space Grotesk" --body "Inter" --scale major-third --responsive --format css typography.css

# 3. 包括的なトークンを生成
deno run --allow-read --allow-write scripts/generate-tokens.ts design-spec.json ./tokens/

例 3: コンポーネントライブラリを生成

# React with Tailwind 用のボタンコンポーネントを生成
deno run --allow-read --allow-write scripts/generate-component.ts \
  --name Button --framework react --styling tailwind --aesthetic bold ./components/

# Vue with CSS modules 用のカードコンポーネントを生成
deno run --allow-read --allow-write scripts/generate-component.ts \
  --name Card --framework vue --styling css-modules --aesthetic glassmorphism ./components/

# Svelte 用の input を生成
deno run --allow-read --allow-write scripts/generate-component.ts \
  --name Input --framework svelte --styling css --aesthetic minimal ./components/

例 4: ローンチ前のアクセシビリティチェック

# すべてのコンポーネントを監査
deno run --allow-read scripts/analyze-accessibility.ts ./src/components --level AAA --format summary

---

スクリプトリファレンス

スクリプト	目的	パーミッション
analyze-styles.ts	CSS をパターンと不整合性について監査	--allow-read
extract-tokens.ts	CSS から設計トークンを抽出	--allow-read
analyze-accessibility.ts	設計アクセシビリティをチェック	--allow-read
generate-palette.ts	カラーパレットを生成	--allow-read --allow-write
generate-typography.ts	タイポグラフィシステムを生成	--allow-read --allow-write
generate-tokens.ts	マルチフォーマットトークンを生成	--allow-read --allow-write
generate-component.ts	フレームワークコンポーネントを生成	--allow-read --allow-write

---

設計哲学

ジェネリックな「AIスロップ」な美学を避けます。詳細なガイダンスは references/design-philosophy.md を参照してください。

主要な原則:

• タイポグラフィ: 既定ではなく特徴的なフォントを選択 (Arial、Inter、Roboto を避ける)
• 色: 小心なパレットではなく、優位な色と鋭いアクセント
• モーション: 散らばったマイクロインタラクションではなく、調整された表示
• コンポジション: 非対称、オーバーラップ、グリッドを破る要素
• テクスチャ: グラデーション、ノイズ、パターン - フラットなベタ色ではなく

絶対に収束しないこと:

• 白い背景の紫色グラデーション
• システムフォントまたは使い古されたファミリー
• 予測可能なカードベースのレイアウト
• ありきたりな Bootstrap 美学

---

よくある問題

"CSS parsing failed"

• 有効な CSS 構文を確認してください
• SCSS/PostCSS は事前処理が必要な場合があります

"Color contrast check failed"

• 解決できなかった CSS 変数をチェックしてください
• 実際の色の値またはトークンファイルを提供してください

"Unknown framework"

• サポート: react, vue, svelte, html
• スペルと小文字をチェックしてください

"Token format not supported"

• サポート: css, scss, tailwind, style-dictionary, tokens-studio, json, ts

---

追加リソース

• references/design-philosophy.md - 詳細なアンチスロップ美学ガイド
• references/token-formats.md - 設計トークン形式仕様
• references/framework-templates.md - フレームワーク固有のパターン
• assets/*.json - 仕様用の JSON スキーマファイル

---

関連スキル

• web-search - 設計のインスピレーションとトレンドを研究する
• research-workflow - 設計システムに深く掘り下げる