HinkoK webd 🎨
Curated web design resources for building professional landing pages with shadcn/ui-based libraries.
When to Use
- User asks for UI component libraries or design resources
- Building landing pages that need to look professional
- Looking for alternatives to "vibe coded" designs
- Need specific components (hero sections, pricing, testimonials)
- Want animation libraries or icon sets
- Creating distinctive, non-generic frontend interfaces
- Need design direction before starting to code
Core Resources
- Design Framework - Establish aesthetic direction BEFORE coding
- Conversion Patterns - Landing page optimization from Landing Pages Explained
- UI Libraries - 17+ shadcn/ui-based component libraries
Quick Categories
For Marketing Pages
- MVP Blocks - Animated sections with Framer Motion
- Magic UI - 50+ animated components (used by Vercel/Stripe)
- Luxe UI - Premium testimonials, features, CTAs
For Animations
- Aceternity UI - Crazy 3D effects
- Motion Primitives - Animation building blocks
- Smooth UI - Buttery hover effects
For Clean/Minimal
- Origin UI - Consistent design language
- Cult UI - Minimal but powerful
- Tailark - Clean startup aesthetic
For Unique Elements
- Skipper UI - Components you won't find elsewhere
- Phosphor Icons - 9000+ alternative to Lucide
- PatternCraft - Background patterns and textures
Recommendations by Use Case
| Goal | Top Pick | Runner Up |
|---|---|---|
| Launch fast | Bundui | MVP Blocks |
| Look premium | Luxe UI | Aceternity UI |
| SaaS dashboard | Cult UI | Origin UI |
| Stand out | Skipper UI | Kokonut UI |
| Heavy animations | Aceternity UI | Magic UI |
Workflow
Option 1: Component-First (Quick)
- Identify the landing page goal (conversion, showcase, app)
- Pick 1-2 primary libraries matching the aesthetic
- Supplement with specific needs (icons from Phosphor, backgrounds from PatternCraft)
- Keep it consistent - don't mix too many design languages
Option 2: Design-First (Distinctive)
- Read design-framework.md for full process
- Define context (purpose, audience, brand)
- Choose aesthetic direction (brutalist, luxury, playful, etc.)
- Establish typography, colors, motion strategy
- Match UI libraries to aesthetic (see framework guide)
- Code with intentional design choices (avoid generic patterns)
Use Option 2 when:
- The design needs to stand out from generic AI sites
- Building a brand identity through UI
- Client wants something distinctive
- You have time to think about design properly
Option 3: Conversion-First (Marketing)
- Read conversion-patterns.md for full patterns
- Start with clarity: one clear value proposition
- Show the product (demo, screenshot, video)
- Build trust (social proof + transparency)
- Remove friction (simple forms, clear pricing)
- Optimize for speed (Core Web Vitals)
- Test everything (headlines, CTAs, visuals)
Use Option 3 when:
- Conversion rate is the primary metric
- Building SaaS, course, or product landing pages
- Need to optimize existing page performance
- Marketing/growth-focused project
Hermes usage rules
- Trigger on
/webd,@webd, landing pages, SaaS frontend work, UI redesigns, conversion optimization, and requests to avoid generic AI/vibe-coded design. - Default to Design-First when the user wants something distinctive.
- Default to Conversion-First when the user mentions sales, funnels, pricing, signup, launch, creator offers, or landing-page performance.
- Default to Component-First when the user wants a fast implementation or asks for UI libraries/components.
- Before coding, choose one clear aesthetic direction and 1-2 UI libraries; do not mix many visual systems.
- Use the linked references directly when needed:
references/design-framework.mdreferences/conversion-patterns.mdreferences/ui-libraries.md