Modular Prompt AI Website Building Test: Generating a Complete Full-Stack Website from a Single Sentence

Can You Really Generate a Website with One Sentence? 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, lightweight admin panel, or project prototype, AI can indeed handle a lot of the heavy lifting. 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 parameterized handling (creating SQL injection risks), forms lacking CSRF Token validation, passwords stored without encryption, or API keys exposed on the frontend. 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 unskippable step.

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

Demo Results: Generating a Complete Full-Stack Website 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 frontend includes: homepage, course introduction, trainer showcase, pricing plans, and booking form. The backend 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 and back-end structure with reasonable page layouts and clear interaction logic. However, the author repeatedly emphasized: This type of project is only suitable for demos and prototypes. Security reviews and data protection checks must be completed item by item before going live.

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 construction 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 stuff all rules into one ultra-long prompt, two serious problems arise:

• Context overload: AI 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 in large language models. The context window is the maximum number of tokens the model can process in a single inference. Even though GPT-4 Turbo supports a 128K token context window, research shows that models exhibit a significant "Lost in the Middle" phenomenon when processing long texts — the model remembers information at the beginning and end of input text well, but attention to information in the middle drops noticeably. This means that 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, the more tokens used, the higher the inference cost (billed per token). 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
Overseas Independent Site	Special rules for international scenarios

The benefit: Each task only reads the modules it needs, saving context window space while effectively reducing AI hallucinations and style inconsistencies. AI hallucination has particular manifestations in code generation: the model might call API methods that don't exist, reference deprecated library versions, fabricate function parameters, or generate syntactically correct but logically nonsensical business code. For example, AI might confidently use a v3 API of an npm package when only v2 has actually been released, causing the project to fail compilation. In website-building scenarios, hallucinations can also manifest as generated route configurations pointing to non-existent pages, or database schemas that don't match frontend form fields. Modular prompts effectively narrow the model's "creative freedom" by limiting the scope of each task and the referenced tech stack, 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 accompanying blog posts. 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: No arbitrary deletion or modification of existing features
• Chinese communication: All interactions in Chinese
• README summaries: 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 frontend websites, apps, and UI projects enter an animation planning phase for 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 frontend animation.

AnimeJS is a lightweight JavaScript animation library developed by Julian Garnier. At only ~17KB compressed, it handles animations for CSS properties, SVG, DOM attributes, and JavaScript objects. It earned such high community recognition due to its clean API design and precise timeline control — developers can choreograph complex multi-step animation sequences using chainable 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 standards as a prompt module prevents AI from "inventing" incompatible or poorly performing animation implementations, ensuring generated effects 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 each time.

Layer 3: Design Style Reference Agent

This layer is also based on an open-source project with 70K+ stars. Its working method is interesting — it doesn't copy brand websites, but rather references the colors, fonts, layouts, and component language of mature websites, 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, original layouts) may constitute copyright or trademark infringement. But 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 overseas independent sites, dynamically loaded based on specific project needs. This flexible extension mechanism allows the entire Agent to adapt to different types of website-building requirements.

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

The author gives a very pragmatic positioning at the end:

Niu Ma Project Builder doesn't turn ordinary people into programmers overnight. Instead, it pre-organizes project analysis, engineering rules, UI animations, components, and delivery workflows to help programmers improve efficiency while serving as a stable project assistant for non-developers.

This positioning deserves consideration from all AI tool developers. The biggest problem with current AI website-building tools isn't insufficient capability, but expectation management spiraling out of control — users think AI can handle everything with one click, only to find 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 reviews and data protection — the critical checkpoints — remain under human control.

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

The core innovation of the "Niu Ma 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 frontend developers who need to quickly build landing pages, prototypes, or internal tools, this is an efficiency tool worth watching. But remember: AI-generated code always requires human review, especially in scenarios involving user data and security.