You can now use our ai website builder to plan, prototype and design your websites in one platform.

Please provide your feedback on how to improve this shadcn ai website builder.

siteplay.ai - shadcn ai website builder

Updating the post based on u/_suren comments.

To give a context about me, I have 10+ years of experience building frontend systems for multiple IT companies.

I built this AI Website Builder to solve the problems I faced while using AI coding assistants.

•  Creating a plan takes a lot of time than writing code now a days. Starting from a blank prompt is a pain without a plan always.
• Endless prompt iteration to reach the right component thus burning valuable AI tokens.
• No visual editing workflow to control AI generation
• Inconsistent design systems
• Weak content generation
• Limited project-level understanding
• It's hard to understand what the AI built if you skip a few code reviews.

My AI Website builder helps you in fixing most of these problems.

You can plan, prototype, design and iterate your next website in one single platform using AI.

Lets understand how its built.

Shadcn as base project

• The Initial scaffolding starts from a clean shadcn template**.** All the frameworks supported by AI website builder uses https://vite.dev/ as build system.
• The design system follows standard shadcn/ui theming conventions.
• All of our website templates use the same project structure, so every project is easy to understand and maintain.

How sections are built using AI

At siteplay.ai, each website is made up of small building blocks called sections (Hero, Features, etc.).

• AI builds your website by choosing and filling these sections with content. You can control what AI generates using site prompt, page prompt and section prompts as shown in the above video.
• AI only changes the content inside each section. It does not rewrite the HTML or component code.
• This keeps the code clean, consistent, and easy to maintain while avoiding the "AI slop" that many generators produce.
• Since AI generates only the content instead of entire components, it uses far fewer tokens, making generation faster and more affordable. This approach helps us to not charge you for AI credits.
• Every section is already responsive, so it works on mobile, tablet, and desktop. You can also show or hide fields through simple section settings (double click on the section to change the section fields in app).

You can visualise this: Sections -> Pages -> Site.

Building blocks of siteplay.ai

After you download the codebase

The project is yours...

• Read the framework documentation to understand how everything works.
• All dependencies are open source software(MIT licensed) and  no proprietary technologies involved. You are free to modify anything.
• Create new sections in the AI editor and copy/paste directly into your IDE whenever you need them. This helps your project to grow.
• We release new shadcn templates and sections every week, so your projects can continue to grow.

I believe AI should help developers, not replace good engineering.

You get the speed of AI combined with a clean, developer-friendly codebase that you can continue building yourself. Our focus is to eliminate AI SLOP that's difficult to read or maintain and replace it with production-ready projects that feel like they were built by experienced developers.