クロードスキルのドキュメントフロントエンド設計
高いデザイン品質を備えた、特徴的な実稼働グレードのフロントエンド インターフェイスを作成します。このスキルは、ユーザーが Web コンポーネント、ページ、アーティファクト、ポスター、またはアプリケーションの構築を要求するときに使用します (例には、Web サイト、ランディング ページ、ダッシュボード、React コンポーネント、HTML/CSS レイアウト、または Web UI のスタイル設定/美化が含まれます)。一般的な AI の美学を回避した、創造的で洗練されたコードと UI デザインを生成します。
出典: anthropics/skills (MIT) を基にしたコンテンツ。
このスキルは、一般的な「AI スロップ」の美学を回避する、独特の運用グレードのフロントエンド インターフェイスの作成をガイドします。細部の美しさと創造的な選択に細心の注意を払って、実際に機能するコードを実装します。
ユーザーは、構築するコンポーネント、ページ、アプリケーション、またはインターフェイスなどのフロントエンド要件を提供します。目的、対象者、または技術的な制約に関するコンテキストが含まれる場合があります。
デザイン思考
コーディングする前に、コンテキストを理解し、大胆な美的方向性を重視してください。
- 目的: このインターフェースはどのような問題を解決しますか?誰が使うの？
- トーン: 極端なものを選択してください: 残酷なまでにミニマル、マキシマリスト的なカオス、レトロフューチャー、オーガニック/ナチュラル、ラグジュアリー/洗練、遊び心/おもちゃのような、社説/雑誌、ブルータリスト/生、アールデコ/幾何学、ソフト/パステル、インダストリアル/実用主義など。選択できるフレーバーは非常にたくさんあります。これらはインスピレーションのために使用しますが、美的方向に忠実なものをデザインしてください。
- 制約: 技術的要件 (フレームワーク、パフォーマンス、アクセシビリティ)。
- 差別化: これが忘れられない理由は何ですか?誰かの記憶に残ることは何ですか?
重要: 明確な概念的な方向性を選択し、それを正確に実行します。大胆なマキシマリズムと洗練されたミニマリズムはどちらも機能します。重要なのは、強度ではなく意図性です。
次に、次のような実用的なコード (HTML/CSS/JS、React、Vue など) を実装します。
- プロダクショングレードの機能性
- 視覚的に印象的で記憶に残る
- 明確な美的観点との一貫性
- 細部に至るまで徹底的に洗練された
フロントエンドの美的ガイドライン
以下に焦点を当てます。
- タイポグラフィ: 美しく、ユニークで、興味深いフォントを選択してください。 Arial や Inter などの汎用フォントは避けてください。代わりに、フロントエンドの美しさを高める独特の選択肢を選択してください。予想外の特徴的なフォントの選択。特徴的な表示フォントと洗練された本文フォントを組み合わせます。
- 色とテーマ: 統一感のある美しさを追求します。一貫性を保つために CSS 変数を使用します。シャープなアクセントを備えたドミナントカラーは、控えめで均等に配置されたパレットよりも優れています。
- モーション: エフェクトやマイクロインタラクションにアニメーションを使用します。 HTML には CSS のみのソリューションを優先します。利用可能な場合は、React の Motion ライブラリを使用します。インパクトの大きい瞬間に焦点を当てます。分散されたマイクロインタラクションよりも、時間差で表示される (アニメーションの遅延) を伴う、うまく調整された 1 つのページの読み込みの方が、より大きな喜びを生み出します。驚きのスクロールトリガーとホバー状態を使用します。
- 空間構成: 予期しないレイアウト。非対称。重なる。斜めの流れ。グリッドを打ち破る要素。広々としたネガティブスペースまたは制御された密度。
- 背景と視覚的な詳細: デフォルトの単色ではなく、雰囲気と奥行きを作成します。全体的な美しさに合わせてコンテキスト効果やテクスチャを追加します。グラデーション メッシュ、ノイズ テクスチャ、幾何学模様、レイヤード透明、ドラマチックなシャドウ、装飾的な境界線、カスタム カーソル、木目オーバーレイなどの創造的なフォームを適用します。
使いすぎたフォント ファミリ (Inter、Roboto、Arial、システム フォント)、決まりきった配色 (特に白地に紫のグラデーション)、予測可能なレイアウトやコンポーネント パターン、コンテキスト固有の特徴を欠いた型にはまったデザインなど、AI によって生成された一般的な美学は決して使用しないでください。
創造的に解釈し、コンテキストに合わせて本当に設計されていると感じられる予想外の選択を行います。デザインは一つとして同じであってはなりません。明るいテーマと暗いテーマ、さまざまなフォント、さまざまな美しさの間で変化します。世代を超えて共通の選択（スペース・グロテスクなど）に決して収束しないでください。
重要: 実装の複雑さを美的なビジョンに合わせてください。マキシマリストのデザインには、広範なアニメーションとエフェクトを備えた精巧なコードが必要です。ミニマリストまたは洗練されたデザインには、抑制、正確さ、そして間隔、タイポグラフィー、微妙な細部への細心の注意が必要です。エレガンスはビジョンをうまく実行することから生まれます。
覚えておいてください: クロードは並外れた創造的な仕事ができます。遠慮せずに、既成概念にとらわれずに考え、独特のビジョンに全力で取り組んだときに本当に何が生み出せるのかを示してください。
リソースファイル
ライセンス.txt
バイナリリソース