frontend-design
Installation
SKILL.md
このスキルは、一般的な「AIスロップ」美学を避けた、独自性のあるプロダクショングレードのフロントエンドインターフェースの作成をガイドします。美的ディテールとクリエイティブな選択に細心の注意を払った、実際に動作するコードを実装します。
ユーザーがフロントエンド要件を提供:構築するコンポーネント、ページ、アプリケーション、またはインターフェース。目的、対象者、または技術的制約に関するコンテキストが含まれる場合があります。
デザイン思考
コーディング前に、コンテキストを理解し、大胆な美的方向性にコミット:
- 目的:このインターフェースはどんな問題を解決するか?誰が使うか?
- トーン:極端なものを選ぶ:残酷なまでにミニマル、マキシマリストのカオス、レトロフューチャリスティック、オーガニック/自然、ラグジュアリー/洗練、プレイフル/トイライク、エディトリアル/マガジン、ブルータリスト/ロー、アールデコ/ジオメトリック、ソフト/パステル、インダストリアル/実用的など。選べるフレーバーは非常に多い。これらをインスピレーションとして使用しながら、美的方向性に忠実なデザインをする。
- 制約:技術要件(フレームワーク、パフォーマンス、アクセシビリティ)。
- 差別化:これを忘れられないものにするものは何か?誰かが覚えているであろう一つのことは何か?
重要:明確なコンセプトの方向性を選び、精密に実行する。大胆なマキシマリズムも洗練されたミニマリズムも両方機能する - 鍵は強度ではなく意図性。
次に、以下を満たす動作するコード(HTML/CSS/JS、React、Vue等)を実装:
- プロダクショングレードで機能的
- 視覚的に印象的で記憶に残る
- 明確な美的観点を持つ一貫性
- あらゆるディテールで丁寧に洗練