██FR█████ █INTELL███████████

“Pixie”, End-to-End Voice-Driven Website Builder (n8n + Bright Data) — AI Agents Challenge submission


This content originally appeared on DEV Community and was authored by sana

This is a submission for the AI Agents Challenge powered by n8n and Bright Data

What I Built

Pixie, A fully automated voice-driven website redesign pipeline that accepts a spoken or typed requirement, scrapes the target site, generates a structured Product Requirements Document (PRD), and automatically creates or updates a prototype website on Lovable.dev, then emails the result to the user.

Demo

n8n Workflow

I’m attaching the full n8n workflow JSON export View full n8n workflow on GitHub Gist so the judges can review and even run it themselves. This single file contains the entire end-to-end pipeline — from the webhook trigger to Bright Data scraping, AI agent, Lovable automation, and Gmail updates.

To make it easier to visualize, I’ve also added a few screenshots below:

Workflow overview — all nodes in one view.
n-8-n workflow

Bright Data node — showing how it’s configured with Web Unlocker.
BrightData node

AI Agent — showing how the PRD is passed into Lovable and message for the Voice Agent.
AI Agent

Technical Implementation

  • Voice input — User speaks requirements via ElevenLabs, which passes the transcript into an n8n webhook.
  • Extract URL — A code node pulls out the target website URL and design instructions from the user’s request.
  • Scrape the Website — Bright Data Verified Node fetches the site’s HTML reliably, handling geo/anti-bot restrictions with Web Unlocker.
  • Extract HTML Elements — A parsing node structures the raw HTML into JSON (headings, images, meta tags, tables, and links).
  • Merge — User design ideas are combined with the structured website data.
  • AI Agent — A LangChain-powered agent generates a detailed PRD using both inputs, then forwards it to the Website Maker. It is explicitly instructed to (1) create the PRD (2) call the Website Maker (3) provide webhook progress updates.
  • Website Maker: Uses Airtop commands to control Lovable.dev:
    1. opens a session 2.submits the PRD 3.polls until the project URL with a valid project ID is retrieved On success or failure, it sends both an email and a webhook update

Bright Data Verified Node

Bright Data was used to reliably fetch the target website HTML in the Scrape the Website step. With web_unlocker1 and country=us, it ensured accurate rendering and avoided client-side blocking. The scraped HTML was then parsed in Extract HTML Elements to build the structured payload for PRD generation.
What I found really helpful is that Bright Data can be used in many ways, as it works seamlessly for any custom URL.

Journey

  • Problem Solved:
    Building websites is usually slow and full of back-and-forth. With my pipeline, I turn a simple idea or voice instruction into a live prototype in just a few agent calls—speeding up web design like never before

  • Challenges & Solutions:

  1. Reliable HTML extraction: Bright Data + Web Unclocker handled even custom sites effortlessly, their databases cover Amazon, Facebook, and more.

  2. Deterministic automation: Strict agent system prompts (PRD → website_maker → webhook → URL extraction) keep flows predictable

  • Learnings: Agent is super easy: just give the URL and changes perfect for frontend prototyping with customers. I tried something new and it works smoothly!!!! Thanks to n8n & Bright Data, automation is now faster, reliable, and accessible.


This content originally appeared on DEV Community and was authored by sana