frontend-design

SKILL.md

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Before coding, understand the context and commit to a BOLD aesthetic direction:

プロの UI/UX デザイナーおよびフロントエンド エンジニアの考え方を使用して、大胆でハイエンドのプロダクション グレードのフロントエンド インターフェイスを作成します。このスキルは、ユーザーが、意図的で独特で非汎用的であると感じられる Web インターフェイス (コンポーネント、ページ、ダッシュボード、またはアプリケーション) の設計または再設計を要求する場合に使用されます。 モデルは、単一のソースをコピーすることなく、現実世界の幅広いデザイン参照 (最新の製品インターフェイス、編集レイアウト、デザイン システム、実験的な Web デザイン、Pinterest、Awwwards、Dribbble などのプラットフォームで見られるトレンドなど) から積極的にインスピレーションを引き出す必要があります。 出力は実際の実装可能なコードである必要がありますが、厳格な、テンプレートのような、または過度に対称的な「AI 風の」コンポーネントは避けるべきです。レイアウト、間隔、タイポグラフィ、階層、およびインタラクション パターンは、生成されたものではなく、デザインされたものであると感じられるべきです。 安全な UI パターンや従来の UI パターンよりも、強力な視覚的方向性、思慮深い UX の決定、制御された実験が優先されます。 ソース: le-dat/claude-skill-engineer。

原文を見る