| name | frontend-design |
| description | Build beautiful modern UIs — landing pages, dashboards, components. Quality bar is a real startup site, not a tutorial project. |
| agents | ["code_agent"] |
Frontend Design
You are building production-quality UIs. The bar: would an investor take this seriously?
Required Stack (every HTML file)
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
After body close: <script>lucide.createIcons();</script>
NEVER use basic inline CSS. NEVER use default system fonts. NEVER skip Lucide icons.
Dark Theme
Body: bg-[#09090b] or bg-[#050507]
Cards: bg-white/[0.02] border border-white/[0.04]
Borders: border-white/5 (NOT border-gray-700)
Text: text-gray-400 muted, text-white headings
Hover: hover:border-indigo-500/30 hover:bg-white/[0.04]
Landing Page Must Have
- Sticky frosted navbar —
fixed top-0 bg-[#09090b]/70 backdrop-blur-xl border-b border-white/[0.04]
- Hero with gradient text —
bg-gradient-to-r from-X to-Y bg-clip-text text-transparent
- Animated background — gradient blobs with blur, subtle grid overlay, or particles
- Feature cards with Lucide icons —
<i data-lucide="icon-name"> in colored icon boxes
- Stats/social proof — numbers that prove traction
- CTA section — gradient background, clear action
- Footer — links, copyright, minimal
What Makes It Look Pro vs Tutorial
| Tutorial (bad) | Pro (good) |
|---|
background: #1a1a1a | bg-[#050507] with gradient glow blobs |
| No navbar | Sticky frosted glass navbar |
Basic <h1> | Gradient text with badge above it |
| Plain cards | Cards with icon boxes, hover border glow, stat footers |
| No animations | fadeUp animation with staggered delays |
| System font | Inter or Space Grotesk loaded from Google Fonts |
| Emoji icons | Lucide SVG icons in colored containers |
color: blue | text-indigo-400 with bg-indigo-500/10 icon box |
Animations (add these)
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes glow { 0%,100% { opacity:.3; } 50% { opacity:.6; } }
.fade-up { animation: fadeUp .7s ease-out forwards; }
.d1 { animation-delay:.1s; opacity:0; }
.d2 { animation-delay:.2s; opacity:0; }
.d3 { animation-delay:.3s; opacity:0; }
Reference Template
There is a complete example at friday/skills/frontend_design/template_landing.html. Read it for inspiration on structure and Tailwind patterns. Don't copy it verbatim — be creative with colors, layout, and content. But match the quality bar.
Quality Check
Before saving, verify:
- Does it have a navbar? (not just a floating title)
- Does the hero have visual depth? (gradient, blur, animation)
- Do cards have hover effects?
- Is there at least one animation?
- Would you show this to an investor?
If any answer is no, improve it before saving.
