design-ui について
design-ui は、プロダクト UI とマーケティング・クリエイティブ向けの指針を選ぶ UI デザインスキルです。計画や美的方向性の調整、関連スキルの参照先も示します。
主な機能
- 01プロダクト UI の指針
- 02マーケティング・クリエイティブ UI の指針
- 03低忠実度計画の参考資料
- 04美的アンチパターンの参考資料
- 05アニメーション・監査・実装の関連スキル
活用シーン
- 01SaaS や管理画面の計画
- 02マーケティングやブランド体験の設計
- 03アンチパターンを使った UI 方針の調整
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/design-uiを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
aesthetic-direction.mddesign-in-code.mdmarketing-ui.mdproduct-ui.md詳細
UI デザイン
適切なトラックを選び、そのガイダンスに従ってください。
トラック
- プロダクト UI（SaaS／管理画面／データ中心）：product-ui.md を参照してください
- マーケティング／ブランド／クリエイティブ：marketing-ui.md を参照してください
参考資料
- ローファイの計画：design-in-code.md を参照してください
- アンチパターンと調整：aesthetic-direction.md を参照してください
関連スキル
- 動きのタイミング、イージング、視差効果の低減動作には
ui-animationを使用します - アクセシビリティと最終 QA には
audit-uiを使用します - React／TypeScript の実装標準には
implement-frontendを使用します
コメント
Markdown 対応