Skip to content

Real code

A real website, not a page-builder file.

Every Starjay site is an Astro project styled with Tailwind CSS: pages, components, and styles written the way a developer would write them. You, Starjay’s AI, and any AI tool you connect all work on the same code.

Astro and Tailwind CSS, on every plan.

src/components/sections/Hero.astroAstro · Tailwind CSS
---interface Props {  eyebrow: string;  title: string;  summary: string;  ctaLabel: string;}const { eyebrow, title, summary, ctaLabel } = Astro.props;---<section data-component="Hero" class="mx-auto max-w-6xl px-8 py-24">  <p class="text-xs uppercase tracking-widest text-muted">{eyebrow}</p>  <h1 class="mt-4 max-w-2xl font-heading text-6xl text-ink">    {title}  </h1>  <p class="mt-6 max-w-md text-lg text-muted">{summary}</p>  <a href="/contact" class="mt-10 inline-block rounded-full bg-ink px-6 py-3 text-white">    {ctaLabel}  </a></section>

Better results from AI

AI does its best work in code it already knows.

Astro and Tailwind are among the most widely used tools for building websites, so AI models have learned from a huge amount of both. Whatever model you use, it’s working in familiar territory, not learning a format only one company uses.

Visual edits

Every visual edit is a code edit.

Make a headline bigger in the editor and Starjay swaps the Tailwind class in the source file. Nothing is translated or stored somewhere else, so what you design is exactly what your developer and your AI tools see in the code.

src/components/sections/Hero.astro
<section data-component="Hero" class="mx-auto max-w-6xl px-8 py-24">  <p class="text-xs uppercase tracking-widest text-muted">{eyebrow}</p>  <h1 class="mt-4 max-w-2xl font-heading text-5xl text-ink">  <h1 class="mt-4 max-w-2xl font-heading text-6xl text-ink">    {title}  </h1>

See the code

Look at the code behind anything.

Select a heading, a section, or a whole page and open the Code panel to read its source. Check what the AI wrote, or show a developer exactly how something is built.

Any AI tool

Work on it with the AI tools you already use.

Claude Code, Codex, and other tools that speak MCP read and edit the same files directly, and you review what they changed in the Starjay editor.

How it’s organised

Organised the way a developer would organise it.

Pages, reusable components, brand colours and fonts, and page text each have their own place, so a person or an AI can find what they need quickly.

A Starjay siteAstro, with Tailwind CSS for styling
src/pages/
One .astro file for each page. The folders match your site’s addresses.src/pages/about.astro → /about
src/components/
Reusable pieces: the navbar and footer in layout/, page sections in sections/, small parts in ui/.src/components/sections/Hero.astro
content/
The words on your pages, kept apart from the layout, so changing text never disturbs the design.content/pages/index.json
brand/tokens.ts
Your brand colours and fonts. Each one becomes a Tailwind class you can use anywhere.accent → bg-accent, text-accent
brand/brand-guide.md
How your brand should look and sound, in plain language for people and AI.
astro.config.mjs, package.json, platform/, system/Maintained by Starjay
The build setup and the settings for publishing, forms, and redirects.

What’s yours

Your pages are yours to change. Starjay keeps the plumbing.

You and your AI write the pages and components. Starjay looks after the build setup and the files that hold every page together, so we can keep the platform up to date without touching your work.

The details

Easy to look after.

  • Every change is saved

    Each edit, whether it’s yours, Starjay’s AI, or another AI tool’s, is recorded automatically.

  • Checkpoints you can restore

    Save a checkpoint before a big change and roll the whole site back to it. Starjay also saves one before AI makes changes and before each publish.

  • See which files changed

    Open a checkpoint to see which files were added, changed, or removed.

  • Your brand as Tailwind classes

    Brand colours and fonts become Tailwind classes like bg-accent, so one change updates every page.

  • Static pages on Cloudflare

    Astro builds every page ahead of time, and Cloudflare’s network serves them to your visitors.

  • No server to look after

    No hosting account, server updates, or patches for you to manage.

Build on code you can read.

Describe your site and Starjay builds it in Astro and Tailwind. Then shape it visually, with AI, or both.

Start building

Astro and Tailwind CSS underneath.