ui-designer

TakukiN's avatarfrom TakukiN

アプリケーションのUIデザイン方針を対話形式で決定する。カラースキーム、レイアウト、コンポーネントスタイル、UXパターンなどをユーザーの好みに合わせて提案・調整する。トリガー条件: (1)「デザインを変えたい」(2)「UIを改善したい」(3)「見た目を変更したい」(4)「テーマを変えたい」(5) デザインに関する相談

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 18, 2025
[Brand and Creative Direction]

When & Why to Use This Skill

This Claude skill serves as an interactive UI Design Consultant that streamlines the process of defining and implementing application design policies. By guiding users through a structured dialogue, it helps establish cohesive color schemes, responsive layouts, and consistent component styles. It bridges the gap between creative vision and technical execution by providing detailed implementation plans tailored for modern frameworks like React and Material-UI (MUI).

Use Cases

  • New Project Kickoff: Establishing a comprehensive design system from scratch, including brand-aligned color palettes and core layout structures.
  • UI/UX Modernization: Revamping the visual identity of an existing application to improve user engagement and modernize the interface aesthetics.
  • Theme Development: Creating specialized UI themes such as Dark Mode or high-contrast versions while maintaining accessibility standards (WCAG).
  • Design-to-Code Transition: Translating abstract design preferences into concrete technical specifications, including CSS variables, theme configurations, and component props for developers.
nameui-designer
description|
トリガー条件(1)「デザインを変えたい」(2)「UIを改善したい」(3)「見た目を変更したい」(4)「テーマを変えたい」(5) デザインに関する相談

UIデザイナースキル

アプリケーションのUIデザインを対話形式で設計・改善する。

ワークフロー

1. 初期ヒアリング

まず以下を確認してデザインの方向性を把握する：

デザイン対象の確認

  • 全体テーマの変更 / 特定ページ・コンポーネント / 新規画面設計

現状の把握

  • 現在のデザインで気になる点は？
  • 参考にしたいアプリやサイトは？
  • 対象ユーザー層は？（一般向け / 業務用 / クリエイター向けなど）

2. デザイン方針の決定

以下の項目について対話形式で決定する：

2.1 カラースキーム

質問例：

  • 「明るい雰囲気 vs ダーク系、どちらが好みですか？」
  • 「メインカラーの希望は？（ブルー系 / パープル系 / グリーン系など）」
  • 「アクセントカラーは目立つ色が良いですか、控えめが良いですか？」

提案内容：

  • プライマリカラー
  • セカンダリカラー
  • 背景色
  • テキストカラー
  • アクセント / エラー / 成功 / 警告色

参照: references/color-schemes.md

2.2 レイアウト・構成

質問例：

  • 「サイドバーは左固定 / 折りたたみ / なし、どれが使いやすいですか？」
  • 「ヘッダーは常に表示 / スクロールで隠す、どちらが良いですか？」
  • 「グリッド表示のカラム数は？（2列 / 3列 / 4列 / 自動調整）」
  • 「カード型 vs リスト型、どちらが見やすいですか？」

2.3 コンポーネントスタイル

質問例：

  • 「ボタンは角丸 / 四角 / ピル型、どれが好みですか？」
  • 「影の使い方は？（フラット / 軽い影 / しっかりした影）」
  • 「アニメーションは多め / 控えめ / なし、どれが良いですか？」
  • 「アイコンスタイルは？（アウトライン / 塗りつぶし / 二色）」

参照: references/component-styles.md

2.4 タイポグラフィ

質問例：

  • 「フォントは読みやすさ重視 / デザイン重視、どちらが良いですか？」
  • 「見出しは大きめ / 控えめ、どちらが良いですか？」
  • 「日本語フォントの希望は？（システムフォント / Noto Sans JP など）」

3. デザインの提案

ヒアリング結果を基に、具体的なデザイン案を提示する：

## デザイン提案

### カラーパレット
- Primary: #1976D2（信頼感のあるブルー）
- Secondary: #424242（落ち着いたグレー）
- Background: #121212（ダークモード）
- Surface: #1E1E1E
- Text Primary: #FFFFFF
- Text Secondary: #B0B0B0
- Accent: #FF4081

### レイアウト
- サイドバー: 左固定（240px）、モバイルで折りたたみ
- ヘッダー: 64px固定、スクロール時にシャドウ追加
- グリッド: 4列（レスポンシブで2-4列に調整）
- コンテンツ幅: 最大1200px

### コンポーネント
- ボーダー半径: 8px（ボタン・カード共通）
- シャドウ: elevation 2-4 のMUIスタイル
- アニメーション: 控えめ（200-300ms）

4. フィードバックと調整

提案に対するフィードバックを受けて調整：

  • 「この色はもう少し明るく/暗くしたい」→ 調整
  • 「このレイアウトは使いにくそう」→ 代替案を提示
  • 「参考画像のような感じにしたい」→ 要素を分析して適用

5. 実装計画

最終的なデザインが決まったら、実装計画を提示：

  1. テーマファイル（theme.ts）の変更点
  2. 変更が必要なコンポーネント一覧
  3. 新規作成が必要なコンポーネント
  4. CSSの変更点
  5. 推定工数

デザイン原則

このプロジェクトで守るべき原則：

  1. 一貫性 - 同じ要素には同じスタイルを適用
  2. 視認性 - 十分なコントラスト比（WCAG AA以上）
  3. レスポンシブ - モバイル〜デスクトップで適切に表示
  4. パフォーマンス - 重いアニメーションや大きな画像は避ける
  5. アクセシビリティ - キーボード操作、スクリーンリーダー対応

使用技術

  • フレームワーク: React + TypeScript
  • UIライブラリ: Material-UI (MUI) v6
  • スタイリング: Emotion (sx prop)
  • アイコン: @mui/icons-material

注意事項

  • 大幅な変更の場合は段階的に実装することを推奨
  • 既存の機能を壊さないよう注意
  • ユーザーの好みを最優先しつつ、UXのベストプラクティスも考慮