frontend-design

✓Verified·Scanned 2/19/2026

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Focuses on creative direction and memorable design choices.

from clawhub.ai·v1.1.0·17.3 KB·0 installs
Scanned from 1.0.0 at 4e392c8 · Transparency log ↗
$ vett add clawhub.ai/wpank/frontend-design

Frontend Design

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

What's Inside

  • Design thinking process (context, direction, memorable element)
  • 10 bold aesthetic directions (Brutally Minimal, Maximalist, Retro-Futuristic, etc.)
  • Typography guidelines with distinctive font pairings
  • Color and theme system with CSS variables
  • Spatial composition and unconventional layouts
  • Motion and micro-interaction patterns
  • Backgrounds and atmosphere techniques

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

Installation

npx add https://github.com/wpank/ai/tree/main/skills/frontend/frontend-design

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install frontend-design

Manual Installation

Cursor (per-project)

From your project root:

mkdir -p .cursor/skills
cp -r ~/.ai-skills/skills/frontend/frontend-design .cursor/skills/frontend-design

Cursor (global)

mkdir -p ~/.cursor/skills
cp -r ~/.ai-skills/skills/frontend/frontend-design ~/.cursor/skills/frontend-design

Claude Code (per-project)

From your project root:

mkdir -p .claude/skills
cp -r ~/.ai-skills/skills/frontend/frontend-design .claude/skills/frontend-design

Claude Code (global)

mkdir -p ~/.claude/skills
cp -r ~/.ai-skills/skills/frontend/frontend-design ~/.claude/skills/frontend-design

Related Skills

  • ui-design — Fundamentals of typography, color, and spacing
  • web-design — CSS patterns and techniques

Part of the Frontend skill category.