Design
gpt-taste
gpt taste
92.7K 355.7K
View 
Frontend Design Pro
frontend-design-pro
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.
SKILL.md
Full skill 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 |
| Aurora / Mesh Gradient | aurora, northern lights, mesh gradient, luminous, flowing | Teal â purple â pink smooth blends | Animated/static CSS or SVG mesh gradients, subtle color breathing, layered translucency |
| Retro-Futurism / Cyberpunk | vaporwave, 80s sci-fi, crt scanlines, neon glow, glitch, chrome | Neon cyan/magenta on deep black, chrome accents | Scanlines, chromatic aberration, glitch transitions, long glowing shadows |
| 3D Hyperrealism | realistic textures, skeuomorphic, metallic, WebGL, tactile | Rich metallics, deep gradients | Three.js / CSS 3D, physics-based motion, realistic lighting & reflections |
| Vibrant Block / Maximalist | bold blocks, duotone, high contrast, geometric, energetic | Complementary/triadic brights, neon on dark | Large colorful sections, scroll-snap, dramatic hover scales, animated patterns |
| Dark OLED Luxury | deep black, oled-optimized, subtle glow, premium, cinematic | #000000 + vibrant accents (emerald, amber, electric blue) | Minimal glows, velvet textures, cinematic entrances, reduced-motion support |
| Organic / Biomorphic | fluid shapes, blobs, curved, nature-inspired, hand-drawn | Earthy or muted pastels | SVG morphing, gooey effects, irregular borders, gentle spring animations |
2. Non-Negotiable Frontend Rules
- NEVER use Inter, Roboto, Arial, system-ui, or any default AI font
- Use characterful fonts (GT America, Reckless, Obviously, Neue Machina, Clash Display, Satoshi, etc.)
- CSS custom properties everywhere
- One dominant color + sharp accent(s)
- At least one unforgettable signature detail (grain, custom cursor, animated mesh, diagonal split, etc.)
- Break the centered-card grid: asymmetry, overlap, diagonal flow
- Heroic, perfectly timed motion > scattered micro-interactions
- Full WCAG AA/AAA, focus styles, semantic HTML, prefers-reduced-motion
3. PERFECT IMAGES SYSTEM (new â never break)
When the design needs images (hero, background, cards, illustrations, etc.):
-
Real-world photography (people, office, nature, products, textures)
â Use ONLY real Unsplash â Pexels â Pixabay photos
â Provide DIRECT image URL ending in .jpg/.png with ?w=1920&q=80
â Deliver ready <img> tag + SEO alt text
Example:
<img src="https://images.unsplash.com/photo-1708282114148-9e0e8d0f2f83?w=1920&q=80" alt="Developer focused on code in dark luxury studio"> -
Hero images, custom backgrounds, conceptual scenes, illustrations
â Write a hyper-detailed, copy-paste-ready prompt for Flux / Midjourney v6 / Ideogram
â Wrap exactly like this:[IMAGE PROMPT START]
Cinematic photograph of [exact scene that matches the design 100%], dramatic rim lighting, ultra-realistic, perfect composition, 16:9 --ar 16:9 --v 6 --q 2 --stylize 650
[IMAGE PROMPT END] -
Never invent fake links or low-effort AI slop
4. Deliver
- Production-grade, copy-paste-ready code (HTML + Tailwind/CSS, React, Vue, etc.)
- Fully responsive + performant
- Every image is either a perfect real photo OR a flawless custom prompt
Now go build interfaces that look like they cost a fortune â because visually, they just did.
More Design skills
Design
brandkit
Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.
92.7K 345.8K
View Design
image-to-code
Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.
92.7K 341.7K
View Design
imagegen-frontend-web
Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.
92.7K 337.8K
View Design
imagegen-frontend-mobile
Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.
92.7K 331.8K
View 
Design
Emil Design Engineering
Emil Kowalski's philosophy on UI polish, component design, and the invisible details that make software feel good.
43.5K 323.4K
View 
Design
impeccable
Frontend design and iteration for production-grade interfaces, from concept to ship.
76.8K 313.3K
View 
Design
extract-design-system
Reverse-engineer design tokens from public websites into starter token files for your project.
232 129.9K
View Design
Animate
Builds an animation from scratch by making the decisions in the order that determines whether it feels right.
43.5K 117.9K
View 
Design
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
179.7K 114.2K
View Design
brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
179.7K 100.1K
View Design
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
179.7K 89.5K
View Design AI tools
Images
Maze Guru
Chat-to-edit AI studio for product photos, portraits, branding, and video.
Freemium
View R
Design
RoomGPT
Generate your dream room in seconds.
Paid
View Design
Interior AI
Redesign your interior in seconds using AI
Paid
View Design
Reroom
Transform rooms with AI-generated designs.
Freemium
View Design
Jife
Transform Your Space with AI-Powered Japanese Interior Designs by Jife
Paid
View Design
Visily
AI-powered wireframes for non-designers.
Free
View Design
Get Floor Plan
Revolutionize Property Viewing with AI-Generated Floor Plans and Virtual Tours
Paid
View Design
Archsynth
Transform sketches into stunning architectural renders with AI.
Paid
View