Building sites and apps with AI
From "vibe coding" to engineering with agents. Which tools to use, how to describe what you want, how to publish, and the security rules never to skip.
Mattia PanattaUpdated 15 October 202612 minIntermediate
In short
- Today you can build a site or small app by describing it in words. For prototypes it’s revolutionary; for production it takes method.
- If you can’t code: Lovable or Replit. With some technical comfort: Claude Code, Codex, Google Antigravity.
- The secret is a clear written description before you start, and moving in small steps.
- Golden rule: never put secret keys in code that runs in the browser, and have security and data reviewed before going live.
From “vibe coding” to agentic engineering
In 2025 Andrej Karpathy coined vibe coding: building software by describing what you want and accepting the code the AI writes, without even reading it. It works surprisingly well for prototypes, personal pages, internal tools.
In 2026 the conversation moved on: coding agents work for hours on real projects, write tests, run them, fix errors. Karpathy himself now talks about agentic engineering: you no longer write code line by line, you design, instruct and verify. The craft changes; it doesn’t disappear.
According to Arena’s WebDev ranking (October 2026), where people vote for the better site generated from the same prompt, the strongest models are Claude Opus 5.5 (1,811 points), GPT-6 Astra (1,780), Claude Sonnet 5.5 (1,774) and GPT-6.1 Sol (1,760).
Which tool
| Profile | Tool | Pros | Cons |
|---|---|---|---|
| Can’t code, want a prototype | Lovable | From description to live app in an hour | Deep customisation is hard; code needs review |
| Can’t code, want an app with a database | Replit | All in the browser, database and hosting included | Deployment and database billed separately |
| Comfortable with a terminal | Claude Code | Most capable on whole projects, works on your files | Needs Git and some method |
| Already use ChatGPT | Codex | Built in, parallel tasks in the cloud | Limits tied to your plan |
| Google ecosystem | Antigravity | Agentic environment with Gemini 4 Argon | Limits tied to your Google AI plan |
This site is an example
Lumen was built with a coding agent (Claude Code): structure, design, interactive components, chatbot. But every choice went through a written description, checks in the browser and precise security rules, such as the chatbot’s key staying on the server.
The five-step method
1. Write what you want before opening the tool
A one-page document is worth hours of fixes. Who will use it, what they must be able to do, which pages or screens, what data it stores, how it should look, what it must NOT do.
I want to build [what] for [whom]. Goal: [the problem it solves in one sentence]. Must-have features (version 1): 1) … 2) … 3) … NOT now: [postponed features]. Pages or screens: [list]. Data to store: [which, and whether it’s personal]. Style: [visual references, colours, tone], must work well on mobile. Constraints: no secret keys in browser code; personal data only where needed. Before writing code, propose the project structure and technologies and ask me to confirm.
2. Start small
Build one feature at a time, test it, then move on. Asking for everything at once yields an app that “almost” works, and “almost” is the hard part.
3. Test like a real user
Click everything, on desktop and phone. Enter wrong data, empty fields, very long text. Describe problems to the agent precisely: what you did, what you expected, what happened, the error message.
4. Save versions
Use Git (or the tool’s version history). When the AI breaks something that worked, and it will, you roll back in a second.
5. Publish calmly
Services like Vercel, Netlify or Cloudflare publish a site in minutes, often free for small projects. Before sharing it, go through the list below.
Security: the checklist not to skip
- Secret keys only on the server. An API key written into browser code can be copied by anyone opening the page, and someone will use your credit. Keys go into the server’s environment variables.
- Spending limits. Set a monthly cap in the AI provider’s dashboard.
- Access and permissions. Who can see what? A user must not be able to read another user’s data by changing a number in the URL.
- Personal data. Collect only what’s needed, write a privacy notice, pick providers with suitable servers and contracts.
- Dependencies. AI sometimes installs packages that don’t exist or are abandoned. Check that the ones used are well-known and maintained.
- Review. For anything handling money, health data or customer data, have a developer review the code before production.
When you need a developer
Payments, health or financial data, many concurrent users, integrations with company systems: here AI speeds work up enormously, but you need someone who can assess it. The cost of a mistake far exceeds the savings.
What it costs
- Prototype: often zero. Lovable has a free plan with limited credits; Claude Code comes with Claude Pro, Codex with ChatGPT plans.
- Regular use: ~€20/month plans are enough for small projects; for intensive all-day sessions you need higher plans or API credits.
- Publishing: for a site like this, free or a few euros a month, plus any AI APIs used (Lumen’s chatbot costs a few cents per question).
In practice
Try this week: take an Excel sheet you use often (a quote calculator, a recurring calculation) and ask Lovable or Claude to turn it into a small web app. It’s the perfect exercise: real problem, simple data, verifiable result.
Sources
Informational content, current as of the date shown. Prices, models and rules change often: always check official sources. Written with the support of AI tools and reviewed by the author.
