playbooks

home / skills / seika139 / dotfiles / frontend_aesthetics

frontend_aesthetics skill

/claude/profiles/wsl-ubuntu/skills/frontend_aesthetics

This skill helps you design unique, immersive frontend aesthetics by selecting distinctive typography, cohesive color themes, and expressive motion to elevate

npx playbooks add skill seika139/dotfiles --skill frontend_aesthetics

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.6 KB
---
name: creative-frontend-aesthetics
description: AI特有の「ありきたりなデザイン（AI slop）」を回避し、独創的で洗練されたUIを構築する。LP、ダッシュボード、アプリのフロントエンド実装時に適用。
---

# Creative Frontend Aesthetics Skill

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

## 重点項目

### 1. タイポグラフィ

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

### 2. カラー & テーマ

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

### 3. モーション (動き)

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

### 4. 背景

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

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

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

## 創造的な解釈

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

Overview

This skill helps teams escape generic, AI-generated-looking UIs by guiding creative, polished frontend aesthetics. It focuses on typography, color systems, motion, and textured backgrounds to produce distinct landing pages, dashboards, and apps. The goal is memorable interfaces that respect context and user delight.

How this skill works

The skill inspects design choices and recommends concrete alternatives to common AI-sloppy defaults: unique fonts, cohesive color systems using CSS variables, layered backgrounds, and intentional motion patterns. It provides implementation guidance for HTML/CSS and React (including library suggestions like framer-motion) and flags predictable layout, overused fonts, and cliché color palettes.

When to use it

  • Designing landing pages where first impressions matter
  • Building dashboards or internal tools that need personality and clarity
  • Developing consumer apps that should feel unique and polished
  • Reworking templates or boilerplates that look generic
  • Creating theme systems (light/dark) with strong visual identity

Best practices

  • Choose distinctive, readable fonts and avoid system-default overuse (Inter/Roboto/Arial).
  • Define a dominant primary color and one or two sharp accents via CSS variables for consistency.
  • Prioritize layered backgrounds (gradients, geometric textures) to add depth over flat solids.
  • Use motion sparingly and purposefully: staggered load animations and focused microinteractions rather than constant movement.
  • Prototype theme variations (cultural inspirations, IDE themes) and test for legibility and emotional tone.

Example use cases

  • A conversion-focused landing page that uses bold typography, an IDE-inspired dark theme, and staggered hero animations.
  • An analytics dashboard with a distinct font, accent palette for data highlights, and subtle layered gradient background for depth.
  • A mobile app that swaps system fonts for a curated type pair and uses microinteractions for onboarding feedback.
  • Refining a SaaS template to remove predictable layouts, replacing them with custom component rhythm and intentional white space.

FAQ

How do I pick a font without breaking performance?

Select a limited set of web-optimized font weights, host fonts via a performant CDN or self-host, and preload critical fonts to avoid layout shifts.

What motion budget should I aim for?

Favor a light motion budget: use animations for key moments (load, state change, errors) with short durations and prefer transform/opacity for GPU acceleration.