The Future of Web Design Starts in Your Browser

Microsoft Edge rolls out Copilot Mode here's how to use it like a research assistant for UX, UI, and AI-powered workflow.

🗺️ Newsletter Overview

Happy Monday, creative family, and welcome to Logiaweb Weekly.

This week’s design intelligence briefing reveals:

  • 🧪 What I'm Building: Private Discord Community

  • 🚨 Big News: Microsoft Just Brought Copilot to Your Browser

  • 🤖 Design Inspiration: Steal-Worthy Hero Designs (Built with AI)

  • 🛠️ Tutorial of the Week: Build a Full Brand Identity in Minutes with Lovart AI

  • 💡 Prompt of the Week: Hero Sections That Convert

🧪 What I'm Building

in the works…

After a week off in Ibiza, I came back more focused than ever and finally wrapped up my design course. It officially drops this Monday.

Inside, I walk you through the full web design process to help you build high-ticket websites using AI to move faster without sacrificing quality. You’ll get everything you need: Notion docs, Figma templates, prompt templates, and more.

The early-bird offer is now closed, but it will launch at a special price. You’ll also get instant access to the Private Discord community as soon as you join.

🚨Big News: Microsoft Just Brought Copilot to Your Browser

Forget switching tabs, bouncing between tools, or pasting screenshots into ChatGPT.

Edge just went fully AI-native.

Microsoft rolled out a new Copilot Mode inside the Edge browser and it’s a game changer for web designers, researchers, and anyone building in the browser.

Here’s what that means:

🧠 Prompt the Web Like a Workspace
Want to summarize a messy landing page? Highlight a pricing comparison? Copilot lets you highlight any tab, ask questions in plain English, and get real time insights without leaving your flow.

Think of it like a research assistant that lives inside your browser. You ask. It fetches. You keep building.

🎯 Contextual Awareness Across Tabs
Copilot sees what you’re working on across tabs. No more copy/paste fatigue. Just ask:

“What’s the CTA style on these three SaaS sites?”
“Summarize the hero sections from all these startup pages.”

It pulls context from your open tabs and gives you usable takeaways.

🧹 Declutter Mode: Cleaner Browsing by Default
You can activate Focus View to hide distractions, extract key elements, and get a simplified, scroll friendly version of the page perfect for auditing or inspiration.

Great for UX teardown sessions or saving clean references to Notion.

💼 Why This Matters for AI-Powered Web Designers

Design no longer starts in Figma.
It starts in the browser with prompts, context, and feedback loops.

Copilot Mode is the first sign that your browser is now your co-designer.

And while it’s currently free, Microsoft’s already teasing a Pro version so the time to integrate this into your workflow is now.

If you design, research, iterate, and present in the browser...
Copilot isn’t optional.
It’s leverage.

Welcome to the age of conversational browsing.

🤖 Design Inspiration: Steal-Worthy Hero Designs (Built with AI)

see prompt #1

see prompt #2

see prompt #3

Tool Used: Framer Wireframer
Design a bright, playful, and futuristic SaaS landing page hero section inspired by modern productivity tools like Notion and Linear, but with a more colorful, energetic twist. Use a light gradient background (soft coral to peach-pink) with rounded abstract shapes or squiggles faintly in the background for texture. In the top-left, place a logo that reads “Zentra” in a fun, slightly rounded geometric font with a spark/star icon. In the top-right, show navigation: Solutions, Customers, Resources, Blog, and a bold CTA button labeled “Try for Free” in a sunset-orange to deep-pink gradient, fully rounded, with a subtle glow. Center the hero with a social line above the headline that reads: “Powering 25,000+ fast-moving teams” — accompanied by avatar stack and a lightning icon. The main headline should say: “Organize. Move Fast. Stay Zen.” — large, bold, and centered using a font like Satoshi or General Sans, in a dark gray or near-black tone. Beneath that, add a witty subheadline in a cooler gray: “Zentra helps growing teams ship faster with shared docs, synced sprints, and a calm, beautiful UI.” Below that, display two bright CTA buttons: “Start Your Workspace” (sunset gradient, bold white text) and “See Zentra in Action” (white with orange border, subtle shadow). Below the CTAs, show a row of colorful brand logos (like Whirl, Bloom, Driftspace, Linkly, and CoreHub) in full color — not grayscale. Add a soft-glassmorphism card on the lower half with a quick “Productivity Score” dashboard visual, showing weekly completed tasks, team sprint velocity, and a quote: “Feels like Notion and Linear had a chill baby.” Keep everything spaced beautifully, responsive, and slightly animated — hover states, light shadows, and soft transitions.
Tool Used: Uizard
Design a cinematic, high-tech landing page hero section in deep matte black and neon green/blue accents, evoking the feel of a stealth startup or AI-driven analytics company. The overall mood should feel futuristic, precise, and intelligent — like something out of a sci-fi thriller or hacker lab. Use a low-noise textured background with a radial gradient spotlight on the center. In the top-left, place a sleek logotype that says “ObscuraAI” in a thin, mono-spaced typeface with a minimal glowing eye icon. Top-right navigation should read: Platform, Use Cases, Docs, Security, and a sharp neon-outlined button that says “Launch Console” in bold type with hover glow. Center the hero with a discrete social proof line: “Trusted by leading defense teams and deeptech innovators,” paired with subtle grayscale brand icons. The headline should say: “Predict Threats. Protect Infrastructure.” in bold, high-contrast type (e.g. Space Grotesk or Neue Haas Grotesk), white on black, slightly condensed. Below it, include a subheadline in light gray-green: “ObscuraAI is the intelligence layer for critical systems — scan anomalies, decode patterns, and secure your stack in real-time.” Add two sharp CTA buttons beneath: one filled neon green “Start Monitoring” and one ghost-style “View Platform Tour.” Just below the CTAs, place a horizontal data stream animation or abstract line graph visual with a “Live Systems Status” tag and flickering green dots to simulate activity. Add a semi-transparent sidebar-style card that says “Live Threat Intel” with a mini dashboard UI, including recent log snippets, risk level heatmap, and active alert feed. Use sharp UI cuts, thin outlines, neon glows, and soft blur hover states. Font should be mono or semi-mono, and everything should feel like it’s running in a secure ops environment.
Tool Used: Dora AI
Design a cinematic, high-tech landing page hero section in deep matte black and neon green/blue accents, evoking the feel of a stealth startup or AI-driven analytics company. The overall mood should feel futuristic, precise, and intelligent — like something out of a sci-fi thriller or hacker lab. Use a low-noise textured background with a radial gradient spotlight on the center. In the top-left, place a sleek logotype that says “ObscuraAI” in a thin, mono-spaced typeface with a minimal glowing eye icon. Top-right navigation should read: Platform, Use Cases, Docs, Security, and a sharp neon-outlined button that says “Launch Console” in bold type with hover glow. Center the hero with a discrete social proof line: “Trusted by leading defense teams and deeptech innovators,” paired with subtle grayscale brand icons. The headline should say: “Predict Threats. Protect Infrastructure.” in bold, high-contrast type (e.g. Space Grotesk or Neue Haas Grotesk), white on black, slightly condensed. Below it, include a subheadline in light gray-green: “ObscuraAI is the intelligence layer for critical systems — scan anomalies, decode patterns, and secure your stack in real-time.” Add two sharp CTA buttons beneath: one filled neon green “Start Monitoring” and one ghost-style “View Platform Tour.” Just below the CTAs, place a horizontal data stream animation or abstract line graph visual with a “Live Systems Status” tag and flickering green dots to simulate activity. Add a semi-transparent sidebar-style card that says “Live Threat Intel” with a mini dashboard UI, including recent log snippets, risk level heatmap, and active alert feed. Use sharp UI cuts, thin outlines, neon glows, and soft blur hover states. Font should be mono or semi-mono, and everything should feel like it’s running in a secure ops environment.

🛠️ Tutorial of the week: Build a Full Brand Identity in Minutes with Lovart AI

Just for you this is your full video breakdon check it out here

Here’s how to build a complete brand identity (logos, color palette, website, social posts, and merch) from a single prompt:

Step 1: Set Up Your AI Canvas
Get started with Lovart’s private beta.

  • Log into Lovart (invite-only for now keep an eye out for access links)

  • You’ll land on a clean 3-panel interface:

    • Toolbox (left)

    • Canvas (center)

    • AI Agent Panel (right)

Click into the Agent panel and enter your prompt:

“Design a brand visual identity for a real estate industryrtup called EasyRent.”

🧠 Pro Tip:
You can also upload a logo or image to guide the style and select from their built in style presets (3D icons, posters, minimal, etc.) or go freestyle for maximum AI planning.

Step 2: Let Lovart Plan the Visual Direction
Lovart doesn’t just generate it thinks.

In under 60 seconds, it will:

  • Collect style inspiration

  • Create 4 logo options

  • Describe the design thinking behind each concept

Pick your favorite logo direction and Lovart expands it into a full identity suite.

Step 3: Review Your Auto-Generated Brand Kit
In 2–3 minutes, you’ll have:

  • Full color palette

  • Font guidelines

  • Logo variations

  • Social templates

  • Website mockups

  • Branded merch (like tote bags, mugs, etc.)

It’s not a finished client deliverable but it's a head start that normally takes hours.

Step 4: Start Editing or Generate New Assets
Want to expand or tweak? You’ve got two options:

  1. Start a new chat and prompt the agent again

  2. Edit directly on the canvas

  • Left click to select any element

  • Hit spacebar + click to drag

  • Zoom with scroll for detail work

Use Lovart like Figma or Framer layout is fully editable.

Step 5: Use the Image Generator to Add Custom Graphics
Lovart’s AI image tool uses GPT-powered vision models for ultra-clean graphics.

  • Click the image tool

  • Select a style or upload reference images

  • Prompt it:

“Generate a hero section background with modern real estate imagery”

📌 You can reference existing elements from the canvas (like a logo or color scheme) for consistent image generation.

Step 6: Add & Edit Elements Like a Real Design Tool
You’re not stuck with AI output.

  • Add text, shapes, or layout blocks (just like Figma)

  • Edit images by clicking them, then typing in what you want to change

“Add tagline below logo in bold white text”

Lovart makes the change in seconds no layer hunting or manual resizing.

Step 7: Export or Share with Clients
Once you’ve got a layout you like:

  • Click "Share Chat" to send the design conversation to collaborators

  • Export assets for Figma or web

  • Or keep iterating with new prompts (movie posters, product manuals, storyboards all possible)

🧪 Bonus Use Cases:

  • Generate product manuals with consistent layouts

  • Auto-generate HTML landing pages

  • Storyboard video sequences with consistent visuals + scenes

💡 Prompt of the week: Hero Sections That Convert

Design a modern, premium SaaS landing page hero section in dark mode, matching the look and feel of the LanX website. Use a layout with a logo on the top-left that includes a bold wordmark (“LanX”) and a simple square icon, and a top-right navigation bar with menu items: Features, Pricing, Contact, Updates, and a bold CTA button labeled “Get Template” styled in a dark-blue or neon blue gradient with rounded edges. The center hero section should include a social proof line above the headline that says “Join 10,000+ other loving customers” with overlapping circular avatars. Below that, place the main headline: “The best platform to grow your business” in large, bold, rounded sans-serif font (similar to Inter or Plus Jakarta Sans), centered and white. Add a smaller subheadline: “The most powerful tools to boost sales, hire the best people, and access exclusive market insights” in a lighter gray-white tone. Below the text, include two CTA buttons: one primary “Get Started Now” in a bright gradient blue with bold white text, and one secondary “Book a Demo” in a semi-transparent dark button with a white border and text. Beneath the CTAs, include a horizontal row of grayscale logos for Asterisk, Eooks, Opal, Dune, and Oasis spaced evenly. Just below that, place two side-by-side cards with soft blur (glassmorphism) or translucent dark backgrounds: the left card titled “Distinguish yourself” with supporting text “Elevate your brand with a golden tick and connect with top-tier associates,” and example badges for LanderX (gold tick), Robinson jr. (blue check), and Crystallo (pink icon); the right card titled “Enterprise Insights” with text “Insights provides instant access to public sentiment, evolving market patterns, and trends,” including sample badges for Chase app and Robinson jr., and a dropdown-style UI with category tags like Web Business, E-commerce Brands, SaaS Startups, Tech Innovators, Marketing Agencies, and Creative Studios. The overall visual style should use a dark grid or subtle radial background with light blur effects, a rounded sans-serif font like Inter, a deep navy and electric blue color palette, and modern UI elements with soft shadows, smooth transitions, and mobile-responsive spacing.

Where To Use Prompt

Use with tools similar to Framer Wireframer (in this example Framer Wireframer I is used)

Wrapping Up


That’s a wrap for today. Could you do me a 30-second favor?

👉 [Survey] – What do you want me to cover next?

Loved this issue? Forward it to a friend who’s stuck in the proposal loop.
Got a win with AI this week? Hit reply I want to hear it.

Catch you next Monday,
— Adrien