agentleFS
Sign inStart free
smiling66652smiling66652/workbuddy-skill-toolkits/frontend-design-guidelines/SKILL.md

frontend-design

Skill1 starsChanged 48 days agoMITView on GitHub

先定美学方向再写码：10 种极端美学方向（极简/极繁/复古未来/有机/奢华/玩具感/编辑杂志/粗野/装饰艺术/工业）、 字体与配色创意准则、空间构图（非对称/重叠/破网格）、动效与氛围（渐变网格/噪点/颗粒）、以及「AI 味」黑名单。 触发词：美学方向、设计风格、风格定义、创意UI、独特界面、AI味、避免AI感、紫渐变、 字体选择、字体搭配、展示字体、氛围营造、渐变网格、噪点、视觉冲击、页面调性、设计差异化 不用于：基础排版/间距/对比度规范（走 ui-design）；响应式断点实现（走 responsive-design）

We split this skill into the rules it gives an agent

7 rules. 0 are common, 7 are distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 181 edited versions we read keep these.

  • 7

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

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

    line 18
  2. Distinctive:

    Before writing code, commit to an aesthetic direction:

    line 53
  3. Distinctive:

    NEVER: use generic fonts:

    line 85
  4. Distinctive:

    Prefer CSS animations for HTML.

    line 131
  5. Distinctive:

    Create depth and atmosphere:

    line 148
  6. Distinctive:

    Never converge on patterns:

    line 166
  7. Distinctive:

    Use different font families each time

    line 168

“Common” is measured: kept by at least 6 in 10 of the 181 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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:

DirectionCharacteristics
Brutally MinimalStark, essential, nothing extra
Maximalist ChaosDense, layered, overwhelming intentionally
Retro-FuturisticBlends vintage aesthetics with modern tech
Organic/NaturalSoft, flowing, nature-inspired
Luxury/RefinedPremium materials, subtle elegance
Playful/Toy-likeFun, approachable, bright
Editorial/MagazineType-forward, grid-based
Brutalist/RawExposed structure, anti-design
Art Deco/GeometricBold shapes, symmetry, ornament
Industrial/UtilitarianFunction-forward, robust

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)

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

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free