AI website builder for designers
An AI website builder that designs from your references
FNJ's AI website builder starts where designers start: references. Add screenshots or links of work you admire and it builds a design system (palette, type scale, spacing and reusable styles) and lays out every page at desktop, tablet and phone. You refine it on a visual canvas like a design tool, then export production code.
A design system, not a template
Before it lays out a single section, the builder plans the site: pages, palette, a pair of typefaces from Google Fonts, and reusable styles for headings, body text, buttons and containers. Every section it builds uses those styles, so the site holds together and changes stay consistent.
Steer the direction with the style picker (Let AI decide, Clean minimal, Sleek dark), or let your references set it.
Three breakpoints, side by side
Desktop (1440px), tablet (810px) and phone (390px) artboards sit side by side on the canvas. Each breakpoint stores only its overrides, so a change on desktop flows down until you override it on a smaller width.
Your hands on the last 10%
Select any element and change its text, spacing, size, colour, radius or image in the inspector, or ask the agent in plain words. Upload your own photos anywhere an image is used. Undo works per prompt from the chat and step by step with Ctrl+Z.
FNJ's AI website builder at a glance
- Starts from
- Your description plus up to 3 references: screenshots or links of sites you like
- Designs
- Every page at desktop (1440px), tablet (810px) and phone (390px) widths
- Editing
- Ask for changes in plain words, or edit any element by hand on the canvas
- Export
- A Next.js project, static HTML, or a push to your own GitHub repository
- Hosting
- Yours: Cloudflare Pages, Vercel, Netlify or any static host. No FNJ runtime in the code
- Price
- From $25/month, or $29 once for 50 credits. Every site you build is yours to keep
- AI account
- None needed: FNJ runs the AI for you, no API key or AI subscription
How it works
01
Show and tell
Add up to 3 screenshots or links of sites you'd like yours to look like, then say what the business is and which pages you need.
02
Watch it build
The AI builder plans the pages, palette and type, then builds each page on the canvas, section by section, while you watch.
03
Refine and ship
Ask for changes in plain words or edit by hand, then download the code or push it to your GitHub.
Built with FNJ's AI builder
Look at this beautiful site our AI builder built in 10 minutes
One prompt and a screenshot of a site we liked, recorded as it happened. The builder designed a portfolio, built every page on the canvas for desktop, tablet and phone, and handed over the code. The video skips the waiting.
For designers: questions
- Does it use templates?
- No. Each site is designed from your references and description, with its own design system. There's no template library behind it.
- Can I control the fonts and colours?
- Yes. Name them in your prompt, show them in a reference, or change them on the canvas afterwards. Fonts come from Google Fonts.
- Can I edit the tablet and phone layouts separately?
- Yes. Switch to a breakpoint and change anything; the change applies to that width and narrower, and a dot shows what's overridden.
- Can I import my own Figma design?
- Not into the AI builder. Give it screenshots of your design as references instead, and it designs in that style.
Design inspiration
Portfolio website design inspiration
10 real designs in our design library, each with a prompt that opens the builder with the design as your reference. Portfolios for illustrators, painters, product designers, photographers and developers. The name and the work do the talking: oversized type in the hero, then the work, then a short about and a clear way to get in touch.
Browse portfolio designsRelated guides
- GuideHow to Use Your Brand Guidelines With an AI Website BuilderWhat to put in a brand folder for an AI website builder (tokens, CSS variables, Tailwind config, a written guide and logos) and how to check the result.Read the guide →
- GuideHow to Build a Website With AI: A Step-by-Step GuideA ten-step process for building a website with AI: the brief, references, page list, first build, refining, SEO basics, code export, hosting and launch.Read the guide →
- GuideAI Website Builder Prompts: 20 Examples That WorkTwenty AI website builder prompts grouped by business type, the five parts every good prompt has, and the follow-up prompts that fix a first draft.Read the guide →
More from the AI website builder
- AI website builder with code exportAn AI website builder that gives you the code: design every page from a reference, then download a Next.js project or static HTML, or push it to your GitHub.Read more →
- AI website builder from imageUpload or paste a screenshot of a site you love and FNJ's AI website builder designs yours in that style, at desktop, tablet and phone, with code you own.Read more →
- AI website builder for agenciesDesign client websites with AI in minutes, refine them on a visual canvas, and hand over clean Next.js or HTML. Up to 250 credits a month on the Agency plan.Read more →
See the AI website builder and a live demo
Show it a site you love. Get yours.