Home / Guides UI, UX & vibe-coding guides
33 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 Vibe Coding Tutorial: From Idea to a Working App A step-by-step vibe coding tutorial for beginners: scope the product, write the founding prompt, build in cont… · 13 min read Best Vibe Coding Tools in 2026: An Honest Comparison Compare the best vibe coding tools in 2026 — Lovable, Cursor, v0, Bolt, Replit Agent and Claude Code — by lear… · 12 min read How to Vibe Code a Website That Looks Professional Learn how to vibe code a website from brief to deployment: page structure, design tokens, responsive rules, co… · 11 min read AI App Builders Compared: What to Use and What to Avoid A practical guide to AI app builders: how Lovable, Bolt, Replit, v0 and code agents differ, what they build we… · 12 min read Lovable vs Cursor: Which Should You Use in 2026? Lovable vs Cursor compared for beginners, designers and developers: setup, visual output, backend, debugging, … · 10 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 Vibe Coding SEO: How to Make AI-Built Sites Rank Technical and on-page SEO for vibe-coded sites: rendering, metadata, internal links, sitemaps, JSON-LD, Core W… · 14 min read Lovable SEO Guide: Make Your App Visible in Search A practical Lovable SEO checklist: crawlable output, page metadata, routes, sitemap, canonical tags, JSON-LD, … · 11 min read JSON-LD for AI Search: A Practical Structured Data Guide Implement JSON-LD across a modern website: Organization, WebSite, Article, BreadcrumbList, CollectionPage and … · 13 min read Is Vibe Coding Safe? A Production Security Checklist Vibe coding security explained: the real risks in generated apps — authentication, authorization, secrets, dat… · 13 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 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 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 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 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 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 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 Web Design Trends 2026: What the Data Actually Shows Evidence-based web design trends for 2026 — measured from hundreds of top sites: light-first palettes, oversiz… · 11 min read Generative Engine Optimization (GEO): How to Get Cited by AI A practical GEO guide: how to make your site visible and citable in ChatGPT, Perplexity, Claude and Google AI … · 13 min read llms.txt Explained: What It Is and How to Write One A practical llms.txt guide: what the file is, what it can and cannot do, the exact format, a copy-paste templa… · 8 min read Cursor vs Windsurf: Which AI Code Editor in 2026? Cursor vs Windsurf compared for real projects: agent behavior, codebase understanding, UI/design work, pricing… · 10 min read Bolt vs Lovable: Which AI App Builder Should You Use? Bolt vs Lovable compared: browser runtime vs integrated product builder, design quality, backend and auth, cod… · 9 min read v0 vs Lovable: Components vs Complete Apps v0 vs Lovable compared: Vercel v0 for React components and sections versus Lovable for complete hosted apps — … · 9 min read Claude Code: A Practical Guide to the Terminal Agent How to use Claude Code effectively: what the terminal agent is good at, project setup, planning and review wor… · 10 min read shadcn/ui Explained: Why AI Tools Love It What shadcn/ui is, how the copy-in component model differs from a library, why v0 and other AI tools default t… · 8 min read Web Accessibility Checklist: A Practical WCAG Starting Point A practical web accessibility checklist based on WCAG: contrast, keyboard navigation, focus states, semantic s… · 11 min read Responsive Web Design: Breakpoints, Fluid Type and Real Rules A practical responsive web design guide: a mobile-first method, sensible breakpoints, fluid typography with cl… · 10 min read Micro-Interactions: Small Motion That Makes UI Feel Premium A guide to micro-interactions: what they are, the states worth animating, timing and easing rules, restraint, … · 8 min read SaaS Landing Page Design: Structure, Proof and Copy That Convert How the best SaaS landing pages are built: section order, hero patterns, social proof, feature framing, pricin… · 11 min read