Modular Prompt AI Website Building Test: Generate a Complete Website with Front-end and Back-end from a Single Sentence

One Sentence to Generate a Website? Reality Isn't That Simple

Some people believe that "with AI, anyone can build a website." Is this true? I'd say it's half right.

If you want to create a simple landing page, a lightweight admin panel, or a project prototype, AI can indeed handle most of the work. But once real user data and privacy protection are involved, AI-generated code should never go live without human review.

The core reason AI-generated code carries risk is that large language models are trained on data containing numerous outdated or known-vulnerable code patterns. For example, AI might generate SQL queries without parameterization (creating SQL injection risks), forms lacking CSRF Token validation, user passwords stored without encryption, or API keys exposed on the front end. According to a 2023 Stanford study, developers using AI-assisted programming actually produced code with a higher proportion of security vulnerabilities than the control group that didn't use AI—partly because developers placed excessive trust in AI output. Under regulatory frameworks like GDPR (EU General Data Protection Regulation) and China's Personal Information Protection Law, user data breaches caused by code vulnerabilities can result in massive fines, making manual security review an indispensable step.

Based on this understanding, a developer created an open-source AI website-building Agent called "Niumao Project Builder" (牛马项目构建), now available on both Gitee and GitHub for free. The project's core philosophy isn't to replace programmers, but to organize project analysis, engineering rules, UI animations, and delivery workflows in advance, turning AI into a reliable project assistant.

Demo Results: A Complete Website with Front-end and Back-end Generated from a Single Prompt

In the demo, the author entered just one prompt, asking the Agent to:

1. Analyze project requirements
2. Generate engineering documentation
3. Build a fitness personal training studio website

The front-end includes: homepage, course introduction, trainer showcase, pricing plans, and a booking form. The back-end includes: dashboard, course management, booking management, and member lead management. The entire first version was completed automatically by the Agent.

From the demo results, the AI-generated website has a complete front-end and back-end structure, reasonable page layouts, and clear interaction logic. However, the author repeatedly emphasized: This type of project is only suitable for demos and prototypes. Before going live, security audits and data protection must be checked item by item.

Why Use Modular Prompts? A Single Ultra-Long Prompt Simply Can't Handle It

This AI website-building Agent isn't a single prompt—it's a modular project building system. This is what fundamentally distinguishes it from most AI website-building solutions on the market.

The Fatal Flaws of Ultra-Long Prompts

If you cram all rules into one ultra-long prompt, two serious problems emerge:

• Context overload: AI's attention gets diluted, easily missing critical information
• Loss of focus in long tasks: In complex multi-step tasks, AI may "forget" earlier constraints

To understand these issues, you need to know about the "context window" mechanism of large language models. The context window refers to the maximum number of tokens a model can process in a single inference. Even though GPT-4 Turbo supports a 128K token context window, research shows that models exhibit significant "Lost in the Middle" phenomena when processing long texts—models remember information at the beginning and end of input text better, but attention to middle sections drops noticeably. This means when you pack all rules into one ultra-long prompt, key constraints positioned in the middle are likely to be ignored by the model. Additionally, more tokens mean higher inference costs (billed per token), so modular on-demand loading not only improves accuracy but also significantly reduces API call costs.

The Modular Prompt Solution

This project splits rules into multiple independent modules, loaded on demand:

Module	Responsibility
Base Rules	Always loaded, ensures code quality
Animation Module	Handles page animations
Design Style	Controls visual consistency
Widgets	Reusable UI component library
Sketch Module	Rapid prototype generation
International Indie Sites	Special rules for overseas scenarios

The benefit: Each task only loads the modules it needs, saving context window space while effectively reducing AI hallucinations and style inconsistencies. AI hallucination in code generation has its own unique manifestations: the model might call API methods that don't exist, reference deprecated library versions, fabricate function parameters, or generate code that's syntactically correct but logically wrong. For example, AI might confidently use a v3 API of an npm package when the package has only been released up to v2, causing the project to fail compilation. In website-building scenarios, hallucinations might manifest as route configurations pointing to non-existent pages, or database schemas that don't match front-end form fields. Modular prompts effectively narrow the model's "creative space" by limiting the scope and referenced tech stack for each task, thereby reducing the probability of hallucinations.

Four-Layer Prompt Architecture Explained: What Each Layer Solves

The author publicly shared the prompts and implementation workflow in an accompanying blog post. The entire Agent is divided into four core layers:

Layer 1: Base Coding Assistant Rules

This is the foundation of the entire system, responsible for:

• Code quality control: Ensuring generated code meets engineering standards
• File modification scope constraints: Not arbitrarily deleting or modifying existing functionality
• Chinese communication: All interactions in Chinese
• README summary: Automatically generating project documentation

This layer is always loaded regardless of the task being executed—essentially setting a "professional baseline" for the AI.

Layer 2: AnimeJS Animation Planning

All front-end websites, apps, and UI projects enter the animation planning phase, handling page entrance animations, popup feedback, and other motion effects. This references the open-source project AnimeJS, which has earned 68.5K stars on GitHub and is a benchmark tool in front-end animation.

AnimeJS is a lightweight JavaScript animation library developed by Julian Garnier. At only ~17KB compressed, it can animate CSS properties, SVG, DOM attributes, and JavaScript objects. Its high community recognition comes from its clean API design and precise timeline control—developers can orchestrate complex multi-step animation sequences using chained calls. Compared to native CSS animations, AnimeJS offers finer easing function control and callback mechanisms; compared to commercial solutions like GSAP (GreenSock Animation Platform), AnimeJS is completely open-source and free with no license restrictions. In AI website-building scenarios, pre-setting AnimeJS usage conventions as a prompt module prevents AI from "inventing" incompatible or poorly performing animation implementations, ensuring generated animations are both smooth and maintainable.

By isolating animation rules into a module, the Agent can invoke mature animation solutions when needed, rather than "reinventing" animation effects from scratch every time.

Layer 3: Design Style Reference Agent

This layer is also based on an open-source project with 70K+ stars. Its working mechanism is interesting—it doesn't copy brand websites directly, but instead references mature websites' colors, fonts, layouts, and component language, extracts design specifications, and then applies them to new projects.

The "learn design language rather than copy designs" approach involves important legal and technical considerations. Legally, directly copying visual elements from brand websites (such as specific logo color combinations, custom fonts, or original layouts) may constitute copyright or trademark infringement. However, design language itself—abstract design principles like "use generous whitespace + sans-serif fonts + monochrome CTA buttons"—constitutes general design methodology not protected by copyright. Technically, this approach is similar to building a Design System: extracting spacing scales, color palettes, typography scales, and component interaction patterns from mature products to form a set of reusable design tokens, then applying these tokens to new projects. This is exactly the core methodology behind mainstream design systems like Ant Design and Material Design. This approach avoids copyright risks while ensuring generated websites achieve professional-grade visual quality.

Layer 4: On-Demand Extension Modules

These include scenario-specific modules like widget libraries, sketch generation, and international indie sites, dynamically loaded based on specific project requirements. This flexible extension mechanism allows the entire Agent to adapt to different types of website-building needs.

Clear Positioning: AI Website-Building Assistant, Not a Programmer Replacement

The author provides a very pragmatic positioning at the end:

Niumao Project Builder doesn't turn ordinary people into programmers overnight. Instead, it organizes project analysis, engineering rules, UI animations, components, and delivery workflows in advance, helping programmers improve efficiency while serving as a reliable project assistant for non-technical users.

This positioning deserves reflection from all AI tool developers. The biggest problem with current AI website-building tools isn't insufficient capability, but uncontrolled expectation management—users think AI can handle everything with one click, only to find the generated code riddled with vulnerabilities and messy styling.

The value of modular prompt architecture lies in drawing clearer boundaries between "what AI can do" and "what humans need to do." Base rules ensure code doesn't go off-track, animation and design modules ensure visuals don't fall apart, while security audits and data protection—those critical elements—remain under human oversight.

Conclusion: Modular Prompts Are the Right Approach to AI Website Building

The core innovation of the "Niumao Project Builder" open-source AI website-building Agent is its modular prompt architecture. By splitting rules into multiple independent modules loaded on demand, it effectively solves context overflow and hallucination problems caused by long prompts. For front-end developers who need to quickly build landing pages, prototypes, or internal tools, this is an efficiency tool worth paying attention to. But remember: AI-generated code always requires human review, especially in scenarios involving user data and security.