Pagesmith
Start building

Templates

Start from a Pagesmith starter prompt or a pre-designed template, then make it yours with AI.

Pagesmith gives you two ways to start a new project:

  • Starter prompts — 13 one-click options on the homepage. Each is a single AI prompt that tells the AI what kind of site to build, and the AI generates the whole site from scratch.
  • Template gallery — browse pagesmith.ai/templates for 130+ pre-designed templates with live previews, organized by industry. Pick one and it seeds your new project with a fully designed starting point.

Either way, the result is just a starting point. To make the site actually yours, you customize with AI in the editor — see Make It Yours below.

Starter Prompts

The 13 starter prompts on the homepage cover the most common site types. Click one and the AI generates a fresh site that matches that style and industry:

  • Business — Professional landing page with hero, features, testimonials, and CTAs
  • Docs — Documentation site with sidebar navigation and a clean reading theme
  • Tech SaaS — Dark-mode SaaS landing page with glassmorphism and gradients
  • Fashion — Editorial layout with whitespace and a muted, luxurious palette
  • Company — Corporate site with services, team, and contact info
  • Restaurant — Menu, location, and reservations with warm inviting colors
  • Portfolio — Creative portfolio with project showcase grid
  • Blog — Featured posts, article grid with categories, newsletter signup
  • Healthcare — Services, doctor profiles, appointment booking
  • Education — Course catalog, instructor profiles, enrollment
  • Real Estate — Property listings, agent profiles, neighborhood guides
  • Fitness — Workout programs, trainer profiles, class schedules
  • Retro Burger — Vaporwave-inspired fast food site (a fun example of how stylized you can go)

Starter prompts are best when you want the AI to design from scratch and don’t have a specific layout in mind.

The template gallery at /templates has 130+ pre-designed templates you can browse. Each one is a fully designed site with:

  • A live preview you can open in a new tab
  • An industry category (SaaS, Real Estate, Restaurant, Agency, and more)
  • A list of included pages (Home, Features, Pricing, etc.)
  • A list of design features (e.g. “Glassmorphic Hero”, “Bento Grid”)
  • A thumbnail so you can see the look before clicking

Templates are filterable by industry — useful when you know what kind of business or use case you’re building for. Templates are best when you want a polished design as a starting point and would rather customize than generate from scratch.

Click Use this template on any template page to start a new project seeded with that design.

Make It Yours

A template or a starter prompt is a starting point — not the finished site. The customization step is where you make it yours. Open the AI editor and tell the AI what to change. The more specific you are, the better the result.

Things to tell the AI

Brand and identity:

Change the brand to "TaskFlow". Update all instances of the placeholder
business name. Use brand colors: primary #6366f1, accent #ec4899.

Content and copy:

Rewrite all the headlines for a B2B audience focused on productivity.
The tagline should be "Project management that works like your brain."
Replace the placeholder testimonials with these three real ones: [paste].

Tone and voice:

Make the copy more casual and conversational, less corporate.
Use "we" and "you" throughout. Cut the marketing buzzwords.

Images:

Replace stock images with neutral abstract gradients for now.
I'll upload real product screenshots later.

Structure:

Remove the "Team" section from the homepage. Add a pricing comparison
table with three tiers. Add a /changelog page.

You don’t have to do this all at once. Iterate — small changes, see how they land, keep going. Each AI message is a commit, so you can roll back anything that goes sideways.

Customization Workflow

A practical order that tends to work well:

  1. Start with structure — Add or remove sections so the layout matches your needs
  2. Update content — Replace placeholder text with your real headlines and copy
  3. Apply your brand — Colors, fonts, and image style
  4. Add real media — Upload your photos, logos, and screenshots
  5. Polish — Fine-tune spacing, hover states, mobile layout

Generated Site Structure

Whichever starting point you pick, the resulting site is a standard Astro project:

src/
├── pages/          # Page routes (index.astro, about.astro, ...)
├── components/     # Reusable UI components
├── layouts/        # Page wrappers (BaseLayout, etc.)
├── content/        # Content collections (blog posts, docs)
└── styles/         # Global Tailwind styles
public/             # Static assets (images, fonts)
astro.config.mjs    # Astro configuration

Knowing the structure helps when you want to direct the AI to specific files (“update the hero in src/pages/index.astro”) or when you export the site to GitHub for further development.

Tips

Preview before choosing

The template gallery has live previews and thumbnails. Click through and view the actual rendered site (desktop and mobile) before committing — the preview is the real thing, not a mockup.

Keep what works

Don’t redesign sections that are already good. Focus the AI on content and branding rather than redesigning a template’s strongest sections.

Use color variables

Templates use CSS custom properties for colors. Tell the AI to “update the primary color to #…” and it changes everywhere — no manual hunt-and-replace.