Axis Designer

4. レスポンシブデザイン

• モバイル最適化（320px〜）
• タブレット対応（768px〜）
• デスクトップ対応（1024px〜）
• ダークモード対応（Phantom Wallet連携考慮）

ワークフロー

タスク受信時

1. Issue確認

   # デザインタスクを確認
   gh issue view {issue_number}
   

2. ブランチ作成

   cd /Users/yusukekikuta/.openclaw/workspace/Axis_MVP
   git checkout main
   git pull origin main
   git checkout -b style/designer-{task-description}
   

3. デザイン分析

   • 既存のスタイルパターン確認
   • references/design-system.md 参照
   • references/color-palette.md でブランドカラー確認

実装

対象ファイル:

• axis-agent/src/components/**/*.tsx - コンポーネントのclassName
• axis-agent/src/index.css - グローバルスタイル
• axis-agent/src/mobile-styles.css - モバイル専用スタイル
• tailwind.config.js (存在する場合)

スタイリング例:

// Before
<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Stake
</button>

// After（デザインシステム適用）
<button className="btn-primary">
  Stake
</button>

/* index.css */
.btn-primary {
  @apply bg-gradient-to-r from-axis-purple to-axis-pink 
         text-white font-semibold px-6 py-3 rounded-xl
         hover:shadow-lg hover:scale-105 transition-all duration-200
         focus:outline-none focus:ring-2 focus:ring-axis-purple focus:ring-offset-2;
}

レスポンシブデザイン例

<div className="
  w-full 
  px-4 sm:px-6 lg:px-8
  grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
  gap-4 md:gap-6
">
  {/* コンテンツ */}
</div>

Tailwind最適化

スクリプト実行:

cd /Users/yusukekikuta/.openclaw/workspace/my-company/.company/development/axis-team/skills/axis-designer
node scripts/optimize-tailwind.js

テスト確認

cd /Users/yusukekikuta/.openclaw/workspace/Axis_MVP/axis-agent

# 開発サーバー起動
npm run dev

# ビルド確認
npm run build

Commit & Push

git add axis-agent/src/
git commit -m "style(components): {変更内容}

- 変更内容1
- 変更内容2
- 変更内容3"

git push origin style/designer-{task-description}

PR作成

gh pr create \
  --title "style: {変更タイトル}" \
  --body "## 変更内容
- デザイン改善詳細

## スクリーンショット
（可能であれば添付）

## デザインシステム遵守
- [x] カラーパレット使用
- [x] レスポンシブ対応
- [x] アクセシビリティ確認

## テスト
- [x] デスクトップ表示確認
- [x] モバイル表示確認
- [x] ビルド成功" \
  --base main

デザインガイドライン

カラーパレット（references/color-palette.md参照）

/* Axisブランドカラー */
--axis-purple: #7B3FF2;
--axis-pink: #FF69B4;
--axis-dark: #1A1A2E;
--axis-light: #F5F5F5;

/* 状態カラー */
--success: #10B981;
--warning: #F59E0B;
--error: #EF4444;
--info: #3B82F6;

タイポグラフィ

/* 見出し */
.heading-1 { @apply text-4xl lg:text-5xl font-bold; }
.heading-2 { @apply text-3xl lg:text-4xl font-semibold; }
.heading-3 { @apply text-2xl lg:text-3xl font-semibold; }

/* 本文 */
.body-large { @apply text-lg; }
.body { @apply text-base; }
.body-small { @apply text-sm; }

スペーシング

/* 一貫したスペーシング */
gap-4    /* 16px - 小 */
gap-6    /* 24px - 中 */
gap-8    /* 32px - 大 */
gap-12   /* 48px - 特大 */

アニメーション

/* 標準トランジション */
.transition-smooth {
  @apply transition-all duration-200 ease-in-out;
}

/* ホバーエフェクト */
.hover-lift {
  @apply hover:scale-105 hover:shadow-lg transition-smooth;
}

チェックリスト

デザイン実装前

• references/design-system.md 確認
• 既存コンポーネントのスタイルパターン調査
• ブランドカラー確認

実装中

• Tailwindユーティリティクラス優先使用
• カスタムCSS最小限
• レスポンシブ対応（sm/md/lg/xl）
• ダークモード考慮

実装後

• デスクトップブラウザで確認
• モバイルブラウザで確認（Chrome DevTools）
• アクセシビリティチェック（コントラスト比）
• npm run build 成功確認

PR作成前

• スクリーンショット準備
• 変更ファイルが axis-agent/ のみ
• mainブランチと同期

トラブルシューティング

スタイルが反映されない

# キャッシュクリア
rm -rf node_modules/.vite
npm run dev

Tailwindクラスが効かない

# tailwind.config.jsの設定確認
# content配列にファイルパスが含まれているか確認

レスポンシブ確認方法

# Chrome DevTools
# F12 → デバイスツールバー（Ctrl+Shift+M）
# 各ブレークポイントで確認

成果物

期待される成果

• 統一感のあるUI
• スムーズなアニメーション
• 完璧なレスポンシブ対応
• アクセシブルなデザイン

品質基準

• Tailwindクラスの適切な使用
• カスタムCSS < 100行
• すべてのブレークポイントで正常表示
• Lighthouseアクセシビリティスコア > 90

リソース

スクリプト

• scripts/optimize-tailwind.js - Tailwind最適化
• scripts/generate-color-classes.js - カラークラス生成

ドキュメント

• references/design-system.md - デザインシステム全体
• references/color-palette.md - ブランドカラー定義
• references/responsive-patterns.md - レスポンシブパターン集

参考コード

• axis-agent/src/components/common/ - 共通コンポーネント
• axis-agent/src/index.css - グローバルスタイル
• axis-agent/src/mobile-styles.css - モバイルスタイル

デザインで Axis MVP を美しく 🎨