Level Up Your AI Project
Stage 2: Features, Design & Databases
You've got a live website—congratulations! Now let's make it actually useful. In this guide, you'll learn how to add features, customize the design, connect a database, and start new projects from scratch. Same approach as before: just tell AI what you want in plain English.
Let's keep building.
Add New Features
Your site works, but it could do more. The great thing about AI is that adding features is as simple as describing what you want.
Think About What's Missing
Open your site and use it like a visitor would. What's missing? A contact form? A pricing page? A photo gallery? Write down 1–2 things you want to add.
Describe It to AI
Go back to Antigravity, open the AI chat, and describe what you want. Be specific about what it should do, not how to code it.
Example prompts:
Review What AI Built
After the AI generates code, look at the preview. Does it look right? Does it work when you click around? If something's off, just tell the AI:
- •“Make the form wider”
- •“Change the button color to blue”
- •“Add a phone number field too”
Pro Tip: You can go back and forth with AI as many times as you need. Each change usually takes seconds. Don't settle—keep refining until it looks exactly how you want.
Push Your Changes Live
Once you're happy, tell AI: “Push these changes to GitHub.” Your site on Vercel will automatically update within a minute or two.
Change Design & Branding
Your site works, but maybe it doesn't look like your brand yet. Let's fix that.
Know What You Want
Before talking to AI, think about your brand:
- •What colors represent your brand? (e.g., “navy blue and gold”)
- •Do you have a logo? (you can drag it into Antigravity)
- •What feeling should your site give? (e.g., “professional and trustworthy” or “fun and playful”)
Tell AI Your Brand Style
Example prompts:
Use Screenshots as References
If you see a website you love, take a screenshot and drag it into Antigravity's chat. Then say:
- •“Make my site look similar to this style”
- •“I like the header layout from this screenshot. Can you make mine similar?”
Pro Tip: This is one of the most powerful tricks. AI can understand screenshots and recreate design patterns. Found a site you love? Screenshot it and use it as a reference.
Fine-Tune the Details
Once the big changes look right, dial in the details:
- •“Make the heading font bigger”
- •“Add more space between sections”
- •“Make the buttons more rounded”
- •“The text is hard to read—increase the contrast”
Connect a Database
Right now your site is like a digital brochure—it shows information but can't remember anything. A database changes that.
What's a Database? (Plain English)
A database is just a place to store information. Think of it like a spreadsheet that your website can read and write to automatically.
When someone fills out your contact form, the database saves their info. When you want to see all submissions, the database gives them back. It's storage for your site's data.
Sign Up for Neon
Neon gives you a free database in the cloud.
- Go to neon.tech and sign up (free tier is plenty)
- Click “Create Project” and give it a name (same as your website name works)
- You'll get a “connection string”—it looks like a long URL. Copy it.
Pro Tip: Your connection string is like a password for your database. Don't share it publicly or put it in your code directly.
Tell AI to Add the Database
Go back to Antigravity and tell the AI:
The AI will set everything up—creating tables, connecting your forms to the database, and making it all work together.
Add Your Connection String to Vercel
For your live site to use the database:
- Go to your project on vercel.com
- Click Settings → Environment Variables
- Add a variable called
DATABASE_URLwith your connection string as the value - Redeploy your site (Vercel will prompt you, or tell AI to push again)
Test It
Fill out a form on your live site. Then ask AI: “Show me a way to view the data in my database.” It can create a simple admin page or you can use Neon's dashboard directly.
Build Something Different
You've learned the process. Now apply it to anything.
Start Fresh
Create a new folder in your Development directory. Open it in Antigravity. You already know the drill.
Pick a Project
Not sure what to build? Here are some ideas:
Portfolio site
Showcase your work, projects, or resume
Landing page
Promote a product, service, or event
Blog
Share your thoughts with a built-in post editor
Dashboard
Track metrics, display data, manage information
Online store
Sell products with a catalog and cart
Booking page
Let clients schedule appointments
Apply What You've Learned
Every project follows the same pattern:
- Describe what you want to AI
- Review and refine until it looks right
- Push to GitHub
- Deploy on Vercel
- Add a database if you need to store data
That's it. That's the whole process. Whether you're building a simple landing page or a full web app, these are the same steps.
Keep Learning
The best way to learn is to build. Here are some tips to keep growing:
- •Build something every week, even if it's small
- •When you see a website you like, try to recreate it
- •Read the code AI writes—you'll start recognizing patterns
- •Join communities where people are building with AI
The more you build, the better you get. There are no shortcuts—just reps.
If you went through this guide and found yourself genuinely hooked—if you're already thinking about what to build next—we'd love to have you.
Built with AI is a community of people who are building with these tools 5–10 hours a day. We share what's working, debug together, and push each other to ship. It's not a casual interest group—it's for people who can't stop building.