creative-frontend-aesthetics

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Creative Frontend Aesthetics Skill

あなたは、統計的にありがちな「AIが生成したっぽい」デザイン（AI slop）から脱却し、ユーザーを驚かせ、喜ばせる独創的なフロントエンドを構築しなければなりません。

You must build original frontends that surprise and delight users, breaking away from statistically common "AI-generated-looking" designs (AI slop).

重点項目

Key Focus Areas

1. タイポグラフィ

1. Typography

美しく、ユニークで、興味を惹くフォントを選択してください。
回避: Arial, Inter などの汎用フォント。
推奨: フロントエンドの美学を高める特徴的なフォント。

Select beautiful, unique, and engaging fonts.
Avoid: Generic fonts like Arial, Inter.
Recommended: Distinctive fonts that enhance frontend aesthetics.

2. カラー & テーマ

2. Color & Theme

一貫した美学（Cohesive aesthetic）を徹底してください。
CSS変数を使用して一貫性を保ち、ぼやけた配色ではなく「強い主色 + 鋭いアクセント」の構成を優先します。
インスピレーション: IDEのテーマ、文化的な美学（サイバーパンク、レトロ、北欧モダンなど）から着想を得てください。

Maintain a cohesive aesthetic throughout.
Use CSS variables to ensure consistency, prioritizing a "strong primary color + sharp accent" structure over muddy color schemes.
Inspiration: Draw inspiration from IDE themes, cultural aesthetics (cyberpunk, retro, Nordic modern, etc.).

3. モーション (動き)

3. Motion

効果的なアニメーションとマイクロインタラクションを導入します。
HTMLの場合はCSSのみの解決策を、Reactの場合は
```
framer-motion
```
等のライブラリを優先してください。
戦略: 散発的な動きよりも、ページロード時のスタッガード（時間差）表示など、「ここぞ」という瞬間の演出に注力してください。

Incorporate effective animations and micro-interactions.
For HTML, prioritize CSS-only solutions; for React, prefer libraries like
```
framer-motion
```
.
Strategy: Focus on impactful moments such as staggered reveals during page loading, rather than scattered movements.

4. 背景

4. Backgrounds

単色（Solid colors）を避け、雰囲気と奥行きを作ります。
CSSグラデーションのレイヤー、幾何学模様、文脈に合わせた背景エフェクトを重ねて質感を高めてください。

Avoid solid colors; create atmosphere and depth.
Layer CSS gradients, geometric patterns, and context-appropriate background effects to enhance texture.

回避すべき「AI生成デザイン」の特徴

Avoidable Characteristics of "AI-Generated Designs"

フォント: Inter, Roboto, Arial, システムフォントの使いすぎ。
配色: 白背景に紫のグラデーション（あまりにも典型的）。
レイアウト: 予測可能なコンポーネント配置、テンプレート感のあるデザイン。
性格: 文脈を無視した「どこにでもあるような」デザイン。

Fonts: Overuse of Inter, Roboto, Arial, or system fonts.
Color Schemes: Purple gradients on white backgrounds (too typical).
Layout: Predictable component placement, template-like designs.
Personality: "One-size-fits-all" designs that ignore context.

創造的な解釈

Creative Interpretation

ライト/ダークテーマの切り替え、フォントの冒険、意外性のある選択を積極的に行ってください。特定のフォント（Space Groteskなど）に固執せず、常に「枠を超えた（Think outside the box）」提案をしてください。

Proactively implement light/dark theme switching, adventurous font choices, and unexpected selections. Don't stick to specific fonts (like Space Grotesk) and always propose "think outside the box" ideas.