Building an AI Website Builder

Introduction

Creating personal websites is slow for non-technical users. To simplify this, I built an AI Website Builder that allows users to write simple prompts and compiles them into modern page layouts in real-time.

Background

Generating raw HTML directly from an LLM often results in broken layouts or invalid syntax. To ensure layout quality, the website builder generates a structured JSON page schema that defines sections, blocks, colors, and content, which is then rendered by pre-built React components.

Implementation

The builder uses Next.js server functions to request JSON schemas from Gemini. The client parses this schema and renders components using dynamic routing.

Challenges

Generating UI layouts using LLMs presents several design challenges:

• Visual Consistency: AI selecting random color palettes that create ugly or low-contrast layouts.
• Slow Inferences: Waiting 8-12 seconds for the model to compile page structures, causing users to abandon the page.

Solutions

We solved this by establishing rendering rules:

1. Design Tokens: The system maps model outputs to pre-defined colors, typography, and spacing tokens rather than letting the AI write raw styling.
2. Streaming Inferences: Streaming JSON tokens and parsing them on the client to render sections as they are generated.

Results

Design validation rules eliminated all low-contrast layouts. Client-side JSON parsing reduced perceived latency from 10 seconds to under 400ms, creating a smooth page generation experience.

Conclusion

AI UI generation requires strict constraints. By decoupling page structure generation from styling tokens, you build robust generators that create beautiful, accessible pages.