name: frontend-design model: reasoning version: 1.1.0 description: > Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Focuses on creative direction and memorable design choices. tags: [frontend, design, ui, web, aesthetics, creative] related: [ui-design, web-design, theme-factory]

Frontend Design

Create memorable frontend interfaces that stand out from generic AI-generated aesthetics through bold creative choices.

See also: ui-design for fundamentals (typography, color, spacing), web-design for CSS patterns.

Installation

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install frontend-design

WHAT This Skill Does

Guides creation of visually distinctive web interfaces by: - Establishing a bold aesthetic direction before coding - Making intentional typography, color, and spatial choices - Implementing motion and micro-interactions that delight - Avoiding the predictable patterns that mark AI-generated UIs

WHEN To Use

• Building a new component, page, or web application
• Creating landing pages, marketing sites, or product UIs
• Redesigning interfaces to be more memorable
• Any frontend work where visual impact matters

KEYWORDS

frontend design, web ui, ui design, landing page, creative ui, web aesthetics, typography, visual design, motion design, distinctive interface

Design Thinking Process

Before writing code, commit to an aesthetic direction:

1. Understand Context

• Purpose: What problem does this interface solve?
• Audience: Who uses it and what do they expect?
• Constraints: Framework, performance, accessibility requirements

2. Choose a Bold Direction

Pick an extreme aesthetic — mediocrity is forgettable:

3. Identify the Memorable Element

What single thing will someone remember about this interface? Commit to it.

Aesthetic Guidelines

Typography

NEVER use generic fonts: - Arial, Helvetica, system-ui - Inter, Roboto (unless highly intentional)

小葱技能7w4.net有完整的技能分类。

DO choose distinctive fonts: - Pair a characterful display font with a refined body font - Explore: Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader

/* Example pairing */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Satoshi', sans-serif;

Color & Theme

• Commit to a cohesive palette — don't hedge with safe choices
• Dominant + accent outperforms evenly-distributed colors
• Use CSS variables for consistency
• Avoid purple gradients on white (the "AI default")

:root {
  --color-bg: #0a0a0a;
  --color-surface: #141414;
  --color-text: #fafafa;
  --color-accent: #ff4d00;
  --color-muted: #666666;
}

Spatial Composition

Break expectations: - Asymmetry over perfect balance - Overlap elements intentionally - Diagonal flow or unconventional layouts - Generous negative space OR controlled density — not middle ground - Grid-breaking elements that draw attention

Motion & Interaction

Focus on high-impact moments: - Page load: Staggered reveals with animation-delay - Scroll-triggered animations that surprise - Hover states with personality - Prefer CSS animations for HTML; Motion library for React

/* Staggered entrance */
.card { animation: fadeUp 0.6s ease-out backwards; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

Backgrounds & Atmosphere

Create depth and atmosphere: - Gradient meshes and multi-stop gradients - Noise textures and grain overlays - Geometric patterns or subtle grids - Layered transparencies - Dramatic shadows or complete flatness - Custom cursors for interactive elements

Implementation Principles

Match Complexity to Vision

• Maximalist vision → elaborate code with extensive animations
• Minimalist vision → restraint, precision, perfect spacing
• Elegance = executing the vision well, not adding more

Vary Between Generations

Never converge on patterns: - Alternate light/dark themes - Use different font families each time - Explore different aesthetic directions - Each design should feel unique

NEVER Do

1. NEVER use generic font families (Inter, Roboto, Arial, system fonts)
2. NEVER use purple gradients on white backgrounds — the "AI aesthetic"
3. NEVER use predictable, cookie-cutter layouts
4. NEVER skip the design thinking phase — understand before building
5. NEVER hedge with safe, middle-ground aesthetics — commit to a direction
6. NEVER forget that distinctive design requires distinctive code
7. NEVER converge on the same patterns across generations — vary intentionally
8. NEVER add complexity without purpose — minimalism and maximalism both require intention

这个 Skill 质量中等偏上，专注于帮助创建独特、好看的网页界面。主要优点是提供了丰富的设计方向和具体的配色、字体建议，可直接参考使用。不足之处在于缺少实际的设计案例展示，仅靠文字描述难以完全理解设计效果，且安装说明有些复杂。总体来说适合想提升界面审美、避免千篇一律设计的开发者使用。