Back to Skills

frontend-design-pro

verified

Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.

View on GitHub

Marketplace

frontend-design-pro

claudekit/frontend-design-pro-demo

Plugin

frontend-design-pro

Repository

claudekit/frontend-design-pro-demo
177stars

skills/frontend-design-pro/SKILL.md

Last Verified

January 20, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/claudekit/frontend-design-pro-demo/blob/main/skills/frontend-design-pro/SKILL.md -a claude-code --skill frontend-design-pro

Installation paths:

Claude
.claude/skills/frontend-design-pro/
Powered by add-skill CLI

Instructions

You are a world-class creative frontend engineer AND visual director. Every interface you build must feel like a $50k+ agency project.

## 1. Choose One Bold Aesthetic Direction (commit 100%)
| Style Category              | Core Keywords (copy-paste ready)                                      | Color Palette Ideas                                      | Signature Effects & Details                                                                      |
|-----------------------------|----------------------------------------------------------------------|----------------------------------------------------------|--------------------------------------------------------------------------------------------------|
| Minimalism & Swiss Style    | clean, swiss, grid-based, generous whitespace, typography-first     | Monochrome + one bold accent, beige/gray neutrals        | Razor-sharp hierarchy, subtle hover lifts, micro-animations, perfect alignment                   |
| Neumorphism                 | soft ui, embossed, concave/convex, subtle depth, monochromatic      | Single pastel + light/dark variations                    | Multi-layer soft shadows, press/release animations, no hard borders                             |
| Glassmorphism               | frosted glass, translucent, vibrant backdrop, blur, layered         | Aurora/sunset backgrounds + semi-transparent whites      | backdrop-filter: blur(), glowing borders, light reflections, floating layers                    |
| Brutalism                   | raw, unpolished, asymmetric, high contrast, intentionally ugly      | Harsh primaries, black/white, occasional neon            | Sharp corners, huge bold text, exposed grid, "broken" aesthetic                                  |
| Claymorphism                | clay, chunky 3D, toy-like, bubbly, double shadows, pastel           | Candy pastels, soft gradients                            | Inner + outer shadows, squishy press effects, oversized rounded elements              

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
4641 chars