Agencies.

Pitching & demos

Scrape a site into Prismic

This skill reads a live site, infers a slice library from its recurring sections, generates the matching custom types, and migrates the copy and images into a Prismic repository. It is the fastest way we know to put a demo in front of a prospect using their own brand rather than placeholder content.

Use this on sites you have permission to reproduce. A prospect's own site is fine; a competitor's is not.

Before you start

You need an empty Prismic repository, Node 20 or later, and the Prismic CLI authenticated against your account. The skill writes directly into your local project, so run it on a fresh branch.

  • An empty repository with no custom types yet
  • A Next.js project with Slice Machine installed
  • The URL of the site you are reproducing
Scraped site to PrismicZIP · 13 KB
Download

Install the skill

Unzip the archive into the skills directory at the root of your project, then restart your agent so it picks up the new skill.

Terminal
unzip scraped-site-to-prismic.zip -d .claude/skills/

Run it

Point the skill at the site and let it work through the pages. It will report the slice library it inferred before writing anything, so you get a chance to correct the model first.

Prompt

Scrape https://example.com and build a Prismic slice library from its recurring sections. Show me the inferred custom types and slices before writing any files, and flag any section you could not classify.

image-test
The inferred slice library, before anything is written to disk.

Review the output

The skill errs toward more slices rather than fewer, so expect to merge a few by hand. A hero and a hero with a background image are usually one slice with two variations, not two slices.

Common corrections

  • Merge near-identical slices into variations
  • Replace repeated text fields with a group
  • Check that image fields carry sensible constraints
JSON
{
  "id": "hero",
  "type": "SharedSlice",
  "name": "Hero",
  "variations": [
    { "id": "default", "name": "Default" },
    { "id": "withBackground", "name": "With background" }
  ]
}

Push and publish

Once the models look right, push them to the repository and run the migration step. Content lands as drafts, so nothing goes live until you publish.

Terminal
npx prismic push
npm run migrate