Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
このスキルは、一般的な「AIスロップ」美学を避けた、独自性のあるプロダクショングレードのフロントエンドインターフェースの作成をガイドします。美的ディテールとクリエイティブな選択に細心の注意を払った、実際に動作するコードを実装します。
ユーザーがフロントエンド要件を提供：構築するコンポーネント、ページ、アプリケーション、またはインターフェース。目的、対象者、または技術的制約に関するコンテキストが含まれる場合があります。
This skill guides the creation of unique, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement functional, working code with meticulous attention to aesthetic details and creative choices.
Users provide frontend requirements: components, pages, applications, or interfaces to build. Context regarding purpose, target audience, or technical constraints may be included.

デザイン思考

Design Thinking

コーディング前に、コンテキストを理解し、大胆な美的方向性にコミット：
  • 目的：このインターフェースはどんな問題を解決するか？誰が使うか？
  • トーン：極端なものを選ぶ：残酷なまでにミニマル、マキシマリストのカオス、レトロフューチャリスティック、オーガニック/自然、ラグジュアリー/洗練、プレイフル/トイライク、エディトリアル/マガジン、ブルータリスト/ロー、アールデコ/ジオメトリック、ソフト/パステル、インダストリアル/実用的など。選べるフレーバーは非常に多い。これらをインスピレーションとして使用しながら、美的方向性に忠実なデザインをする。
  • 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
  • 差別化：これを忘れられないものにするものは何か？誰かが覚えているであろう一つのことは何か？
重要：明確なコンセプトの方向性を選び、精密に実行する。大胆なマキシマリズムも洗練されたミニマリズムも両方機能する - 鍵は強度ではなく意図性。
次に、以下を満たす動作するコード（HTML/CSS/JS、React、Vue等）を実装：
  • プロダクショングレードで機能的
  • 視覚的に印象的で記憶に残る
  • 明確な美的観点を持つ一貫性
  • あらゆるディテールで丁寧に洗練
Before coding, understand the context and commit to a bold aesthetic direction:
  • Purpose: What problem does this interface solve? Who will use it?
  • Tone: Choose an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/polished, playful/toylike, editorial/magazine, brutist/raw, art deco/geometric, soft/pastel, industrial/practical, etc. There are many flavors to choose from. Use these as inspiration while designing faithfully to the aesthetic direction.
  • Constraints: Technical requirements (frameworks, performance, accessibility).
  • Differentiation: What makes this unforgettable? What's one thing someone will remember?
Important: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism work - the key is intentionality, not intensity.
Next, implement working code (HTML/CSS/JS, React, Vue, etc.) that meets the following:
  • Production-grade and functional
  • Visually striking and memorable
  • Consistent with a clear aesthetic vision
  • Meticulously polished in every detail

フロントエンド美学ガイドライン

Frontend Aesthetic Guidelines

フォーカスすべき点：
  • タイポグラフィ：美しく、ユニークで、興味深いフォントを選ぶ。ArialやInterなどの一般的なフォントを避け、フロントエンドの美学を高める独自の選択を；予想外で個性的なフォント選択。個性的なディスプレイフォントと洗練されたボディフォントを組み合わせる。
  • 色とテーマ：一貫した美学にコミット。一貫性のためにCSS変数を使用。控えめで均等に分布されたパレットよりも、鋭いアクセントを持つドミナントカラーの方が優れている。
  • モーション：エフェクトとマイクロインタラクションにアニメーションを使用。HTMLにはCSSのみのソリューションを優先。Reactには利用可能な場合Motionライブラリを使用。高インパクトな瞬間にフォーカス：スタガードリビール（animation-delay）を持つ一つのよく調整されたページロードは、散在するマイクロインタラクションよりも喜びを生む。驚きを与えるスクロールトリガーとホバー状態を使用。
  • 空間構成：予想外のレイアウト。非対称。オーバーラップ。斜めのフロー。グリッドを破る要素。広大なネガティブスペースまたはコントロールされた密度。
  • 背景とビジュアルディテール：ソリッドカラーをデフォルトにするのではなく、雰囲気と深みを作る。全体の美学に合ったコンテキストに応じたエフェクトとテクスチャを追加。グラデーションメッシュ、ノイズテクスチャ、ジオメトリックパターン、レイヤードトランスパレンシー、ドラマティックなシャドウ、装飾的なボーダー、カスタムカーソル、グレインオーバーレイなどのクリエイティブな形式を適用。
一般的なAI生成美学を絶対に使用しない：使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、陳腐なカラースキーム（特に白い背景に紫のグラデーション）、予測可能なレイアウトとコンポーネントパターン、コンテキスト固有の個性に欠けるクッキーカッターデザイン。
クリエイティブに解釈し、コンテキストに合わせて真にデザインされたと感じる予想外の選択をする。同じデザインは一つもないべき。ライトとダークテーマ、異なるフォント、異なる美学を変化させる。世代を超えて一般的な選択（例えばSpace Grotesk）に収束することは絶対にない。
重要：実装の複雑さを美的ビジョンに合わせる。マキシマリストデザインには広範なアニメーションとエフェクトを持つ精巧なコードが必要。ミニマリストや洗練されたデザインには抑制、精密さ、スペーシング、タイポグラフィ、微妙なディテールへの注意深い配慮が必要。エレガンスはビジョンをうまく実行することから生まれる。
覚えておく：Claudeは並外れたクリエイティブな仕事ができる。抑えずに、枠を超えて考え、独自のビジョンに完全にコミットしたときに真に何が作れるかを示す。
Focus areas:
  • Typography: Choose beautiful, unique, and interesting fonts. Avoid common fonts like Arial or Inter, and make unique choices that elevate frontend aesthetics; unexpected and distinctive font selections. Pair a distinctive display font with a refined body font.
  • Color & Theme: Commit to a consistent aesthetic. Use CSS variables for consistency. A dominant color with sharp accents is better than a restrained, evenly distributed palette.
  • Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. For React, use the Motion library when available. Focus on high-impact moments: one well-tuned page load with staggered reveals (animation-delay) creates more joy than scattered micro-interactions. Use surprising scroll triggers and hover states.
  • Spatial Composition: Unexpected layouts. Asymmetry. Overlaps. Diagonal flow. Elements that break the grid. Vast negative space or controlled density.
  • Backgrounds & Visual Details: Instead of defaulting to solid colors, create atmosphere and depth. Add context-appropriate effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparency, dramatic shadows, decorative borders, custom cursors, grain overlays, etc.
Never use generic AI-generated aesthetics: overused font families (Inter, Roboto, Arial, system fonts), clichéd color schemes (especially purple gradients on white backgrounds), predictable layouts and component patterns, cookie-cutter designs lacking context-specific personality.
Interpret creatively and make unexpected choices that feel truly designed for the context. No two designs should be the same. Vary light and dark themes, different fonts, different aesthetics. Never converge on generically popular choices (e.g., Space Grotesk).
Important: Match implementation complexity to the aesthetic vision. Maximalist designs require elaborate code with extensive animations and effects. Minimalist or refined designs require restraint, precision, attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back—think outside the box and show what can be created when fully committed to a unique vision.