redesign について
redesignは、既存の動作を保ちながらUIを監査・再設計するデザインスキルです。コードベースの分析、共通トークンテーマの適用、実装、アクセシビリティとデザインの検証を案内します。
主な機能
- 01監査を起点とする再設計ワークフロー
- 02コードベースとフレームワークの調査
- 03優先度付きデザイン指摘
- 04ページ間で共有するトークンテーマ
- 05アクセシビリティとデザインの検証
活用シーン
- 01既存アプリのUI再設計
- 02複数ページのテーマ統一
- 03既存フローを保ったデザイン改善
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/redesignを入力して読み込まれたか確認します。
詳細
スキル：再設計と監査
ステップ 0：キットはありますか？ このスキルはキット内のファイルを読み取ります。一度確認してください：
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSINGKIT_MISSINGの場合、インストールされているのはスキルフォルダーのみです。これはnpx skills addの動作です。その旨を明確に伝え、npx ux-ui-agent-skills initまたはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの内容を推測しないでください。
動作を維持する、監査優先の再設計です。
手順
${CLAUDE_SKILL_DIR}/../../../workflows/redesign-audit.mdを読みます（Scan → Diagnose → Direct → Apply → Verify の全手順と Output Completeness）。- Scan：コードベースを調査します。フレームワーク、スタイリング方法（→ 対応する
${CLAUDE_SKILL_DIR}/../../../frameworks/アダプターに振り分け）、トークンの実態、コンポーネント、維持すべきものを確認します。 - Diagnose：Banned Defaults チェックリスト（
${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md）とレビュー基準（design-reviewスキル）を使って診断します。優先順位を付けた所見の表を作成します。 - Direct：ブランドに合うアーキタイプ／システムを選択します（
apply-aestheticスキル）。 - Apply：順番に適用します（まずトークン、次にタイポグラフィ／余白、次にコンポーネントの状態、最後にモーション）。ルート／データ／マークアップのセマンティクスは変更しません（アクセシビリティ修正を除く）。
- Verify：
design-reviewとa11y-auditを再実行し、これまで動作していたすべてのフローをスモークテストします。ダークモードとレスポンシブ表示を抜き取り確認します。トークンのソースに${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.pyを実行し、変更したコードに${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.pyを実行します。
ガードレール
見た目のために、動作している機能を犠牲にしないでください。コントラスト要件を満たさないブランドカラーをリリースしないでください。既存のアクセシビリティ機能を削除しないでください。プレースホルダーを残さず、ファイルを完全な形で提出してください。
単一テーマの一貫性（複数ページのアプリでは重要）
共有トークンテーマを1つに統一し、すべてのページでそれを使うようにします。ページごとに異なるパレットを使い続ける再設計は失敗です。ページ単位や場当たり的な色をセマンティックトークンに置き換え、${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py で、どのページにもテーマ外の値が再導入されていないことを確認します。テーマの切り替えはページの編集ではなく、単一のトークンソースから行います（${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md → Single-Theme Consistency）。