May 22, 2026·4 min read

How to Build a Prismic Website with an AI Agent in 2026

127

Building a website with Prismic looks different than it did a year ago. As AI models get smarter, tooling is adapting to work hand-in-hand with them. Prismic is now AI-native thanks to the Prismic CLI and skills. Building a CMS-backed website is just a prompt or two away.

This guide shows you how to build Prismic websites using everything available in 2026. Here’s what you’ll be doing:

Creating a new website project with customized Prismic content models.
Styling your components and layout (spoiler alert: we recommend doing this by hand).
Deploying to a website host.

There isn’t a lot of hand-waving going on here. It really is that simple now.

Customize the guide

The prompt and code examples in this guide use Next.js, but the same flow works for Nuxt or SvelteKit. Just adapt the syntax to your framework of choice.

Stuff you’ll need

This guide is AI-heavy and assumes you have the following:

An AI tool, like Claude Code, Codex, or Cursor. We recommend using the latest Claude or GPT model.
Website designs. You can have whole-page designs or individual website sections. If you just want to test Prismic, download our demo designs.
A Prismic account. Run the following command to log in or sign up: npx prismic login

Before you start building, you'll want to get your AI agent up to speed.

Install the Prismic skill

Skills teach your AI agent how to think and use programs. The Prismic skill specifically teaches your agent how to read the Prismic documentation and use the Prismic CLI.

Run this command to install the skill into whichever AI tool you use:

npx skills add --global prismicio/skills

Your agent now knows how to build with Prismic: which CLI commands to reach for, which docs to read, and the latest best practices.

Start building

With the skill installed, you now only need to tell your agent your high-level goals; your agent will figure out how to get there on its own. Here’s what your prompt should cover:

Build a Next.js, Nuxt, or SvelteKit website using Prismic.
Use the Prismic documentation to guide the work.
Use your designs to model and build the website.

The last bullet point is worth calling out: you no longer need to plan and build content models by hand. Instead, give your AI agent a set of designs and it models slices, page types, and custom types for you.

Here’s a full prompt to send to your agent:

Build me a Next.js website using Prismic. Use the Prismic docs to
guide you:

npx prismic docs view nextjs
npx prismic docs view content-modeling
npx prismic docs view slices

Before starting, ask me for website designs.

Then, determine the best set of content models to create based on
the designs.

For each slice you model, edit its component file with the HTML
structure needed to render the design. Do not style it. Instead,
leave empty class attributes so I can style it myself.

Finally, update the website's layout component with the HTML
structure to render it. Like the slices, don't style it, and
include empty class names so I can style it myself.

The agent will pause and ask for designs, so have them ready. For the best results, provide a set of images: header, footer, and one for each website section. Note that the prompt tells the agent not to style the website; we’ll handle that in the next step.

Here are some guidelines to keep in mind as you work with your agent:

Let the AI do everything it’s good at: generating framework files, modeling content, wiring infrastructure.
Rely on the Prismic CLI and documentation to handle most of the work. The agent will teach itself how to use Prismic via the documentation, so you can focus on your own requirements.
Don't rely on AI to style your website. AI often gets it wrong, and fixing its work can take longer than doing it yourself.

By the time the agent finishes, you should have the following:

A Next.js, Nuxt, or SvelteKit website connected to Prismic.
A Prismic repository.
A set of page types and slice models.
A bootstrapped set of components ready to be styled.

To check the agent's modeling work, open the Type Builder in your Prismic repository:

npx prismic repo view --web

If something seems off, like a misnamed field or a design detail the agent missed, tell your agent what you expected. You’ll see the agent use the Prismic CLI to adjust the code and models.

Style your components

Once the foundation of your website is complete, it’s time to style. We recommend styling your website by hand. We find that if you rely on AI to implement a design in code, you’ll end up with something inspired by the design, not the design itself. In most cases, you want something true to the design.

The agent should have generated slice and layout components similar to this. Note the empty className="" props:

import { Content, isFilled } from "@prismicio/client";
import {
  SliceComponentProps,
  PrismicRichText,
} from "@prismicio/react";
import { PrismicNextImage, PrismicNextLink } from "@prismicio/next";

export type HeroProps = SliceComponentProps<Content.HeroSlice>;

export default function Hero({ slice }: HeroProps) {
  return (
    <section className="">
      <div>
        {isFilled.keyText(slice.primary.tagline) && (
          <p className="">{slice.primary.tagline}</p>
        )}
        {isFilled.richText(slice.primary.headline) && (
          <div className="">
            <PrismicRichText field={slice.primary.headline} />
          </div>
        )}
        {isFilled.richText(slice.primary.description) && (
          <div className="">
            <PrismicRichText field={slice.primary.description} />
          </div>
        )}
        {isFilled.repeatable(slice.primary.buttons) && (
          <div className="">
            {slice.primary.buttons.map((button) => (
              <PrismicNextLink
                key={button.text}
                field={button}
                className=""
              />
            ))}
          </div>
        )}
      </div>
      <PrismicNextImage field={slice.primary.image} className="" />
    </section>
  );
}

Your job now is to add styling to turn the structure into your design. Here are some guidelines to help you style your website:

Use Prismic’s slice simulator to style slices in isolation alongside mocked content. Learn how to use the simulator.
Use libraries for complex UI elements, like dropdowns and drawers. Base UI, Radix Primitives, and shadcn/ui are good options.
Use Tailwind CSS to write styles. It balances flexibility and conventions better than alternatives, and AI agents know it well.
Use a <Bounded> component to standardize max-width and spacing on slices. Get it here.

In the future when models are more capable, AI will be able to handle styling, too. Today, your expertise and taste as a developer are what get the design right.

By the time you are done styling your website, your components should look something like this:

import { Content, isFilled } from "@prismicio/client";
import {
  SliceComponentProps,
  PrismicRichText,
} from "@prismicio/react";
import { PrismicNextImage, PrismicNextLink } from "@prismicio/next";
import { Bounded } from "@/components/Bounded";

export type HeroProps = SliceComponentProps<Content.HeroSlice>;

export default function Hero({ slice }: HeroProps) {
  return (
    <Bounded className="bg-white">
      <Bounded.Content className="grid gap-12 md:grid-cols-2 items-center">
        <div>
          {isFilled.keyText(slice.primary.tagline) && (
            <p className="text-sm font-semibold uppercase tracking-widest text-zinc-500">
              {slice.primary.tagline}
            </p>
          )}
          {isFilled.richText(slice.primary.headline) && (
            <div className="text-5xl font-bold tracking-tight leading-tight md:text-7xl text-zinc-900 text-balance mt-2">
              <PrismicRichText field={slice.primary.headline} />
            </div>
          )}
          {isFilled.richText(slice.primary.description) && (
            <div className="max-w-md mt-6 text-lg text-zinc-500 leading-relaxed">
              <PrismicRichText field={slice.primary.description} />
            </div>
          )}
          {isFilled.repeatable(slice.primary.buttons) && (
            <div className="flex flex-wrap gap-4 mt-8">
              {slice.primary.buttons.map((button) => (
                <PrismicNextLink
                  key={button.text}
                  field={button}
                  className="inline-flex items-center justify-center rounded-full bg-zinc-900 px-7 py-3 text-sm font-medium text-white hover:bg-zinc-700"
                />
              ))}
            </div>
          )}
        </div>
        <PrismicNextImage
          field={slice.primary.image}
          sizes="(min-width: 768px) 576px, 100vw"
          className="relative aspect-square overflow-hidden rounded-2xl bg-zinc-900 border border-zinc-200 shadow-sm object-cover"
        />
      </Bounded.Content>
    </Bounded>
  );
}

Deploy to production

Once everything is styled, it’s time to make your Prismic project live. Luckily, we’re back in territory that AI handles well. You’ll need to do three things:

Create a Git repository and push your project to a host like GitHub.
Deploy it to a hosting provider like Vercel, Netlify, or Cloudflare.
Configure Prismic with your production domains and set up webhooks to handle content changes. For details, see the previews and webhooks docs.

All of that can fit into a single prompt. Adjust it if you'd prefer a different Git host or deploy target.

Take this project to production:

1. Create a GitHub repo with `gh` and push.
2. Deploy to Vercel with `npx vercel --prod` (tell me to run
   `npx vercel login` if I'm not authenticated).
3. Connect the deployed URL to Prismic by following
   `npx prismic docs view <framework>` — `nextjs`, `nuxt`, or
   `sveltekit`, whichever this project uses.

Pro tip

Install skills for the services you are using. For example, install the Vercel skill with npx skills add vercel-labs/agent-skills. Find them here: https://www.skills.sh.

Once your website is deployed, visit your Prismic repository and start writing content. As a reminder, you can use the CLI to open your repository:

npx prismic repo view --web

Wrap up

Here's what you did:

Scaffolded a Prismic-connected website with your AI agent.
Modeled content with page types and slices.
Styled your components by hand.
Deployed to production.

With your website live, content writers can start publishing pages in your Prismic repository. And as your site grows, the same loop applies: prompt the agent to add a new page type or slice, style it by hand, and deploy. In the future with more capable AI, you'll probably hand styling off to your agent, too.

To learn more about Prismic and understand what your agent is doing for you behind the scenes, see the Prismic documentation. If you have any Prismic tips for other developers, leave a comment!