Creative design
Create distinctive, memorable UI for landing pages, portfolios, marketing sites, and one-off creative work. Use when the user explicitly wants something "distinctive", "creative", "memorable", or "unique" - NOT for standard app components where consistency matters.From its SKILL.md
npx -y skills add t4sh/dotfiles --skill creative-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
3.3 KB, 678 tokens by cl100k_base, as published. Nobody here has run it
Creative Design
Adapted from Anthropic's frontend-design skill
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Use for creative one-offs, not standard app components.
When to Use This vs. Standard Patterns
Use creative-design | Use standard patterns |
|---|---|
| Landing pages | App dashboards |
| Portfolio pieces | CRUD interfaces |
| Marketing sites | Admin panels |
| One-off demos | Reusable components |
| "Make it memorable" | "Make it consistent" |
If working on a Next.js app with shadcn/ui, prefer theme tokens and consistent patterns unless explicitly asked for something distinctive.
Design Thinking
Before coding, commit to a BOLD aesthetic direction:
- Purpose: What problem does this solve? Who uses it?
- Tone: Pick an extreme:
- Brutally minimal
- Maximalist chaos
- Retro-futuristic
- Organic/natural
- Luxury/refined
- Playful/toy-like
- Editorial/magazine
- Brutalist/raw
- Art deco/geometric
- Soft/pastel
- Industrial/utilitarian
- Differentiation: What's the ONE thing someone will remember?
CRITICAL: Choose a clear direction and execute with precision. Bold maximalism and refined minimalism both work - the key is intentionality.
Aesthetics Guidelines
Typography
Choose fonts that are beautiful, unique, and interesting. Avoid:
- Arial, Inter, Roboto, system fonts
- Space Grotesk (overused in AI outputs)
Instead: pair a distinctive display font with a refined body font. Character over safety.
Color & Theme
- Commit to a cohesive aesthetic
- Use CSS variables for consistency
- Dominant colors with sharp accents > timid, evenly-distributed palettes
- AVOID: purple gradients on white (cliched AI aesthetic)
Motion
Focus on high-impact moments:
- One well-orchestrated page load with staggered reveals (
animation-delay) - Scroll-triggered effects
- Hover states that surprise
Prioritize CSS-only for HTML. Use Motion library for React when available.
Spatial Composition
- Unexpected layouts
- Asymmetry, overlap, diagonal flow
- Grid-breaking elements
- Generous negative space OR controlled density
Backgrounds & Texture
Create atmosphere rather than solid colors:
- Gradient meshes
- Noise textures
- Geometric patterns
- Layered transparencies
- Dramatic shadows
- Grain overlays
Anti-Patterns
NEVER produce:
- Generic font families (Inter, Roboto, Arial)
- Purple gradients on white
- Predictable layouts
- Cookie-cutter components
- Same design twice
Implementation
Match complexity to vision:
- Maximalist = elaborate animations, effects, layers
- Minimalist = restraint, precision, spacing, typography
Always produce working code (HTML/CSS/JS, React, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with clear aesthetic point-of-view
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.