Home / Guides UI, UX & vibe-coding guides
12 guides · grounded in measured data from the Norrly library
Everything we learn from measuring the best-designed sites on the web, turned into practical guides — how to prompt AI tools, how to choose palettes and type, and how to structure pages that convert.
What Is Vibe Coding? A Practical Guide Vibe coding means describing the product you want and letting AI tools like Lovable, Cursor and v0 write the c… · 7 min read How to Write Lovable Prompts That Produce Beautiful UI A practical Lovable prompting guide: the founding-prompt structure, exact design tokens, negative constraints … · 8 min read Cursor Prompts for UI Work: A Design-Spec Approach How to prompt Cursor for frontend and UI tasks: design-language specs, DESIGN.md files, component scoping and … · 7 min read v0 Prompt Guide: Components, Variants and States Get clean output from Vercel v0: component-scoped prompts with explicit props, variants, states and usage cont… · 6 min read How to Avoid the Generic AI Look in Web Design Purple gradients, emoji headings, three identical cards — the generic AI look is a prompting problem. Concrete… · 6 min read Landing Page Color Palettes: How the Best Sites Choose Colors Palette patterns from 350+ measured award-level sites: neutral bases, single accents, dark-theme ratios and co… · 7 min read Font Pairing for the Web: What Top Sites Actually Use Measured typography from 350+ leading sites: the pairings that recur, free Google Fonts equivalents to commerc… · 7 min read Landing Page Structure That Converts: A Section-by-Section Guide The section order used by high-converting landing pages: hero, proof, features, objection handling, final CTA … · 8 min read Dark Mode Web Design: Measured Rules From Sites That Do It Right Dark theme design guide from measured data: real background values, text contrast tiers, elevation without sha… · 7 min read Design Tokens Explained: The Vocabulary of Consistent UI What design tokens are, the minimal set worth defining (color, type, spacing, radius, shadow, motion) and how … · 6 min read Hero Section Design: Patterns From Award-Winning Sites Four measured hero patterns — typographic, product-proof, media-led, WebGL — with headline sizing, CTA rules a… · 7 min read How to Recreate a Website's Design Language (Without Copying It) A five-step method to extract and reuse the design language of a site you admire — palette, typography, spacin… · 7 min read