253 lines
6.3 KiB
Markdown
253 lines
6.3 KiB
Markdown
# Frontend-Design Skill for QwenClaw
|
|
|
|
## Overview
|
|
|
|
**Name:** frontend-design
|
|
**Source:** https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
|
|
|
|
This skill provides **exceptional frontend design capabilities** to QwenClaw, enabling it to create distinctive, production-grade frontend interfaces with high design quality that avoid generic "AI slop" aesthetics.
|
|
|
|
---
|
|
|
|
## Design Thinking
|
|
|
|
Before coding, understand the context and commit to a **BOLD aesthetic direction**:
|
|
|
|
### Purpose Analysis
|
|
- What problem does this interface solve?
|
|
- Who uses it?
|
|
- What is the user's goal?
|
|
|
|
### Tone Selection
|
|
Pick an extreme aesthetic direction:
|
|
- Brutally minimal
|
|
- Maximalist chaos
|
|
- Retro-futuristic
|
|
- Organic/natural
|
|
- Luxury/refined
|
|
- Playful/toy-like
|
|
- Editorial/magazine
|
|
- Brutalist/raw
|
|
- Art deco/geometric
|
|
- Soft/pastel
|
|
- Industrial/utilitarian
|
|
|
|
### Constraints
|
|
- Technical requirements (framework, performance, accessibility)
|
|
- Browser support
|
|
- Device targets
|
|
|
|
### Differentiation
|
|
What makes this **UNFORGETTABLE**? What's the one thing someone will remember?
|
|
|
|
---
|
|
|
|
## Frontend Aesthetics Guidelines
|
|
|
|
### Typography
|
|
- Choose fonts that are beautiful, unique, and interesting
|
|
- Avoid generic fonts (Arial, Inter, Roboto, system fonts)
|
|
- Opt for distinctive choices that elevate aesthetics
|
|
- Pair a distinctive display font with a refined body font
|
|
|
|
### Color & Theme
|
|
- Commit to a cohesive aesthetic
|
|
- Use CSS variables for consistency
|
|
- Dominant colors with sharp accents outperform timid palettes
|
|
- Avoid purple gradients on white backgrounds (cliché)
|
|
|
|
### Motion & Animation
|
|
- Use animations for effects and micro-interactions
|
|
- Prioritize CSS-only solutions
|
|
- One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions
|
|
- Use scroll-triggering and hover states that surprise
|
|
|
|
### Spatial Composition
|
|
- Unexpected layouts
|
|
- Asymmetry
|
|
- Overlap
|
|
- Diagonal flow
|
|
- Grid-breaking elements
|
|
- Generous negative space OR controlled density
|
|
|
|
### Backgrounds & Visual Details
|
|
Create atmosphere and depth:
|
|
- Gradient meshes
|
|
- Noise textures
|
|
- Geometric patterns
|
|
- Layered transparencies
|
|
- Dramatic shadows
|
|
- Decorative borders
|
|
- Custom cursors
|
|
- Grain overlays
|
|
|
|
---
|
|
|
|
## What to NEVER Use
|
|
|
|
NEVER use generic AI-generated aesthetics:
|
|
- ❌ Overused font families (Inter, Roboto, Arial, system fonts)
|
|
- ❌ Clichéd color schemes (purple gradients on white)
|
|
- ❌ Predictable layouts and component patterns
|
|
- ❌ Cookie-cutter design that lacks context-specific character
|
|
- ❌ Space Grotesq (overused by AI)
|
|
- ❌ Generic Tailwind default styling
|
|
|
|
---
|
|
|
|
## Implementation Principle
|
|
|
|
**Match implementation complexity to the aesthetic vision:**
|
|
|
|
### Maximalist Designs
|
|
Need elaborate code with:
|
|
- Extensive animations
|
|
- Multiple effects
|
|
- Layered visual elements
|
|
- Complex compositions
|
|
|
|
### Minimalist Designs
|
|
Need restraint and precision:
|
|
- Careful attention to spacing
|
|
- Refined typography
|
|
- Subtle details
|
|
- Perfect proportions
|
|
|
|
---
|
|
|
|
## Usage in QwenClaw
|
|
|
|
### Basic Usage
|
|
|
|
```
|
|
Use the frontend-design skill to create a landing page for a SaaS product
|
|
```
|
|
|
|
### With Style Direction
|
|
|
|
```
|
|
Use frontend-design skill to build a dashboard with a brutalist aesthetic
|
|
```
|
|
|
|
### Complex UI
|
|
|
|
```
|
|
Use frontend-design skill to create an e-commerce product page with:
|
|
- Hero section with bold typography
|
|
- Product gallery with unique layout
|
|
- Add to cart with micro-interactions
|
|
- Related products section
|
|
```
|
|
|
|
---
|
|
|
|
## Best Practices
|
|
|
|
### 1. Choose a Clear Direction
|
|
Pick one aesthetic and commit fully. Bold maximalism and refined minimalism both work—the key is intentionality.
|
|
|
|
### 2. Be Memorable
|
|
What's the one thing someone will remember? A unique animation? An unexpected color? A distinctive layout?
|
|
|
|
### 3. Polish Every Detail
|
|
- Perfect spacing
|
|
- Thoughtful transitions
|
|
- Considered typography
|
|
- Cohesive color system
|
|
|
|
### 4. Avoid Convergence
|
|
Never converge on common AI choices. Vary between:
|
|
- Light and dark themes
|
|
- Different fonts
|
|
- Different aesthetics
|
|
- Different layouts
|
|
|
|
---
|
|
|
|
## Examples
|
|
|
|
### Minimalist Landing Page
|
|
|
|
```tsx
|
|
// Clean, refined, with perfect typography
|
|
export default function LandingPage() {
|
|
return (
|
|
<main className="min-h-screen bg-stone-50 text-stone-900">
|
|
<header className="py-8 px-12">
|
|
<nav className="flex justify-between items-center">
|
|
<Logo />
|
|
<NavLinks />
|
|
</nav>
|
|
</header>
|
|
|
|
<section className="py-32 px-12 max-w-4xl mx-auto">
|
|
<h1 className="text-7xl font-light tracking-tight mb-8 font-serif">
|
|
Design that speaks
|
|
<span className="italic text-stone-500"> quietly</span>
|
|
</h1>
|
|
<p className="text-xl text-stone-600 leading-relaxed">
|
|
We craft digital experiences with intention and precision.
|
|
</p>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Maximalist Portfolio
|
|
|
|
```tsx
|
|
// Bold, chaotic, memorable
|
|
export default function Portfolio() {
|
|
return (
|
|
<main className="min-h-screen bg-black text-lime-400 overflow-hidden">
|
|
<div className="fixed inset-0 opacity-20">
|
|
<div className="absolute inset-0 bg-[url('/noise.png')] animate-noise" />
|
|
<div className="absolute top-0 left-0 w-[100vw] h-[100vh] bg-gradient-radial from-lime-500/30 to-transparent" />
|
|
</div>
|
|
|
|
<header className="relative z-10 py-8 px-12 flex justify-between items-center mix-blend-difference">
|
|
<Logo className="text-4xl font-black tracking-tighter" />
|
|
<Menu className="text-6xl hover:rotate-45 transition-transform duration-500" />
|
|
</header>
|
|
|
|
<section className="relative z-10 py-32 px-12">
|
|
<h1 className="text-[12vw] leading-[0.8] font-black tracking-tighter">
|
|
DIGITAL
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-lime-400 via-cyan-400 to-lime-400 animate-gradient">
|
|
ALCHEMIST
|
|
</span>
|
|
</h1>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Skill Metadata
|
|
|
|
```yaml
|
|
name: frontend-design
|
|
version: 1.0.0
|
|
category: design
|
|
description: Create distinctive, production-grade frontend interfaces with exceptional design quality
|
|
author: Anthropic (https://github.com/anthropics/claude-code)
|
|
license: MIT
|
|
tags:
|
|
- frontend
|
|
- design
|
|
- ui
|
|
- css
|
|
- react
|
|
- animation
|
|
- typography
|
|
- color
|
|
```
|
|
|
|
---
|
|
|
|
**Skill ready for QwenClaw integration!** 🎨
|