That's it. Your development server is running and you can start creating pages.
Project Structure
The project follows a simple, flat file structure. No complex frameworks or build systems.
Project Structure
LandingPages/
pages/← Your landing pages live here
home/
index.html← Homepage (served at /)
product/
index.html← Served at /product
my-page/
index.html← Served at /my-page
public/← Static assets
styles.css← Compiled Tailwind CSS
src/
input.css← Tailwind CSS input
server.ts← Bun HTTP server
tailwind.config.js← Tailwind config
package.json
Key Concept
Each page is a self-contained directory under pages/. The folder name becomes the URL path. No configuration needed.
Your First Page
The fastest way to create your first page is to ask the AI agent. Open the project in Cursor (or any AI-powered editor) and start the dev server:
Step 1: Start the dev server
Terminal
$bunrun dev
Server running at http://localhost:3000
Step 2: Prompt the AI agent
In your editor's AI chat, try this starter prompt:
Suggested starter prompt
"Create a landing page for my startup called [Your Product Name]. It's a [brief description]. Use a dark theme with [color] accents. Include a hero section with headline and CTA, a features grid with 6 cards, customer testimonials, and a pricing table with free and pro tiers."
The agent will create pages/your-product/index.html, build the CSS, and give you a preview URL. From there, iterate — ask for color changes, new sections, copy updates, or layout tweaks.
Alternative: Create manually
You can also create pages by hand. Create a directory under pages/ and add an index.html:
Terminal
$mkdirpages/my-startup
# Create pages/my-startup/index.html with your HTML
$bunrun build:css
# Visit http://localhost:3000/my-startup
Tip
The dev server uses --watch mode, so it restarts automatically when you change server.ts. For HTML and CSS changes, just refresh your browser.
AI Designer
Agent Workflow
This is how LandingPages is meant to be used
LandingPages is designed to work with an AI agent as your designer. Instead of manually writing HTML and CSS, you describe what you want in plain English and the agent creates professional, high-converting landing pages for you.
Getting Set Up
Open the project in an AI-powered IDE that supports agent mode. Any of these will work:
The project includes a CLAUDE.md file that instructs the AI agent to act as a professional web designer. When the agent reads this file, it automatically understands your project's design system, section patterns, build commands, and routing — so you don't have to explain any of it.
How It Works
1
You describe what you want
In your IDE's agent chat, describe the landing page you need — the product, style, sections, and any specifics.
2
The agent builds it
The agent creates the HTML page with proper structure, Tailwind styling, accessibility, and responsive design.
3
Preview & iterate
The agent compiles CSS, starts the dev server, and gives you a preview URL. Review in the browser, then ask for changes.
The Typical Flow
Your conversation with the agent
YOU
"Create a landing page for our SaaS product TaskFlow"
AGENT
Creates pages/taskflow/index.html with full structure
Runs bun run build:css
Starts server → preview at localhost:3000/taskflow
YOU
"Change the color scheme to blue and add a pricing section"
AGENT
Updates color classes across the page
Adds a 3-tier pricing table section
Rebuilds CSS and restarts preview
Screenshot-Based Editing
One of the most powerful patterns is using screenshots to make targeted edits. Take a screenshot of the section you want to change, paste it into the agent chat, and describe what you want:
Screenshot + prompt pattern
YOU
screenshot.png attached
"See this pricing section? Make the Pro tier visually highlighted as the recommended plan, and add a 'Most Popular' badge to it"
AGENT
Identifies the pricing section from your screenshot
Adds a "Most Popular" badge to the Pro tier
Scales up the Pro card with a highlighted border
Rebuilds CSS → preview updated
Pro tip: Screenshot workflow
Screenshots work great for pointing at a specific section and saying "change this." You can also use browser screenshots to show the agent exactly what looks off, paste a design mockup for it to match, or screenshot a competitor's page as inspiration.
The agent handles all the HTML, Tailwind classes, accessibility, responsive design, and build steps. You just describe what you want — in text, screenshots, or both.
Prompt Examples
Here are real-world examples of prompts you can use. Copy them, modify them, or use them as inspiration.
Creating New Pages
"Create a new landing page for our SaaS product called TaskFlow — a project management tool for remote teams. Include sections for features, pricing (free, pro at $12/mo, enterprise), and testimonials."
"Add a landing page for our mobile app FitTrack. It's a fitness tracking app. Use an energetic color scheme with oranges and dark backgrounds. Include app store download buttons."
"Create a coming soon landing page for our new product launch. Include an email signup form and a countdown-style teaser."
Editing Existing Pages
"Update the hero section on the product page with this new headline: 'Ship Faster, Sleep Better' and subheadline: 'The deployment platform that just works.'"
"Change the color scheme on the merch page from green/emerald to blue/indigo tones while keeping the same layout."
"Add a new testimonial from 'Sarah Chen, CTO at DataCorp' saying 'Reduced our deployment time by 80%'"
Adding Sections
"Add an FAQ section with 5 common questions about our product's security and data handling."
"Add a 'How it works' section with 3 steps, placed between the hero and features sections."
"Add a logo cloud section showing our integration partners: Slack, GitHub, Jira, and Notion."
"Add a comparison table showing our product vs competitors on key features."
Styling & Design Changes
"Make the CTA buttons larger and more prominent. Add a subtle animation on hover."
"Add a gradient background to the hero section, going from dark blue to purple."
"Improve the mobile layout — the features grid looks cramped on smaller screens."
"Redesign the page with a minimalist aesthetic — lots of whitespace, simple typography, muted colors."
Content Updates
"Rewrite all the feature descriptions to be more benefit-focused rather than feature-focused."
"Update the footer on all pages to include links to our blog, careers page, and status page."
"Replace the pricing section with a simpler two-tier model: Free and Pro ($19/month)."
Tips for Better Results
Get the most out of your AI designer with these prompting strategies:
Be Specific
Include details about colors, layout preferences, and content. The more specific you are, the closer the result matches your vision.
Vague: "Make it look better"Specific: "Use blue tones, add more whitespace between sections"
Provide Context
Explain what your product does, who it's for, and the tone you want. This helps the agent write better copy and choose appropriate design patterns.
"It's a B2B analytics tool for marketing teams""Target audience is freelance designers"
Reference Examples
Mention existing designs or brands you like as inspiration. The agent can match styles without copying.
"Similar to Stripe's landing page style""Clean like Linear's website"
Include Your Copy
Provide the specific text, headlines, feature names, and pricing you want. The agent generates placeholder copy when needed, but your real content always works better.
Mention Constraints
Let the agent know about any requirements or limitations up front.
"Keep it above the fold""Mobile-first""No images, use gradients only"
What the Agent Does After Changes
After each request, the agent automatically:
Makes the requested changes to HTML files
Runs bun run build:css if new Tailwind classes were added
Starts the local server with bun run dev
Provides a summary of changes and a preview URL
You can then review the page in your browser at http://localhost:3000/your-page and ask for further adjustments. It's an iterative process — refine until it's perfect.
Core Concepts
Routing
LandingPages supports two types of routing out of the box. No configuration files or route definitions needed.
Path-Based Routing
The folder name under pages/ becomes the URL path:
Directory
URL
pages/home/
yourdomain.com/
pages/product/
yourdomain.com/product
pages/pricing/
yourdomain.com/pricing
Subdomain Routing
For multi-tenant or multi-brand setups, pages can be served via subdomains:
Directory
Subdomain URL
pages/product/
product.yourdomain.com
pages/merch/
merch.yourdomain.com
Note
Subdomain routing requires DNS configuration. You'll need a wildcard DNS record (*.yourdomain.com) pointing to your server. For local development, you can test using the Host header with curl.
Tailwind CSS
This project uses Tailwind CSS v4 for styling. All pages share a single compiled stylesheet.
How It Works
Write Tailwind utility classes in your HTML files under pages/
Run bun run build:css to compile
The output goes to public/styles.css
All pages reference /styles.css via a <link> tag
Recommended Classes
Here are some commonly used Tailwind patterns for landing pages:
Always run bun run build:css after adding new Tailwind classes. The CSS is compiled once and shared across all pages.
Deployment
Commands
All available commands are defined in package.json:
bun run dev
Starts the development server with --watch mode. The server auto-restarts when server.ts changes. Runs at http://localhost:3000.
bun run build:css
Compiles Tailwind CSS from src/input.css to public/styles.css. Run this after adding new Tailwind classes to any HTML file.
bun run start
Starts the production server without watch mode. Use this in production or in Docker containers.
Deploy to Production
LandingPages can be deployed in multiple ways. Here are the recommended options:
Deploy on Railway
Recommended
Railway is the recommended deployment method because it supports wildcard subdomain routing out of the box.
Railway preserves the Host header, so the existing server.ts subdomain logic works automatically. Add *.yourdomain.com as a wildcard custom domain in the Railway dashboard, and each subdomain (e.g., product.yourdomain.com) routes to the corresponding page directory.
1
Push to GitHub
Push your LandingPages repo to GitHub.
2
Create Project on Railway
Go to railway.app, create a new project → Deploy from GitHub repo. Railway auto-detects Bun.
3
Add Custom Domain
In project settings → Networking → Custom Domain, add *.yourdomain.com (wildcard counts as 1 domain).
4
Configure DNS
Add two CNAME records at your DNS provider: * → Railway's provided CNAME value, and _acme-challenge → authorize.railwaydns.net (for SSL).
Terminal
# Install Railway CLI
$npmi -g @railway/cli
# Login and deploy
$railwaylogin
$railwayup
Why Railway?
Railway runs your Bun server directly with full wildcard subdomain support. The built-in server.ts handles routing automatically — product.yourdomain.com serves pages/product/, saas.yourdomain.com serves pages/saas/, etc. Auto-deploys on every push, with automatic SSL for all subdomains.
Deploy on Vercel
Vercel is a great option for path-based routing (e.g., yourdomain.com/product, yourdomain.com/saas). Click the button below to deploy instantly:
One-click deploy — no configuration needed
Or deploy manually via the Vercel CLI:
Terminal
# Install Vercel CLI
$npmi -g vercel
# Deploy from project root
$vercel
Why Vercel?
Vercel provides automatic SSL, global CDN, instant rollbacks, and preview deployments for every push. Ideal for path-based routing without subdomain requirements.
Ready to Build?
Check out the example pages for inspiration, then create your own landing page in minutes.
