Claude Code Plugins

Community-maintained marketplace

Feedback

ui-designer

@TakukiN/skillport_tmp
0
0

|

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name ui-designer
description アプリケーションのUIデザイン方針を対話形式で決定する。 カラースキーム、レイアウト、コンポーネントスタイル、UXパターンなどを ユーザーの好みに合わせて提案・調整する。 トリガー条件: (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のベストプラクティスも考慮