AI slice creation

Write better slice code, faster — with AI support tailored to your project setup.

Hi everyone,

Creating a slice in Prismic starts from a design — but turning that design into a structured model and coded component has, until now, involved a few manual steps. We’re working to reduce that effort.

Earlier this year, we launched image to slice, making it possible to generate a slice model from a design screenshot in seconds. It gave developers a faster way to go from design to structure without having to define every field from scratch.

Now we’re building on that with AI-assisted coding — the next step in the flow. With the help of Prismic MCP, your code editor now understands your slice model, project framework, styling, and conventions. That means your AI assistant can generate code that’s tailored to your setup — saving time and reducing the chance of mismatches or boilerplate-heavy starts.

Together, these features form what we’re calling AI slice creation — a complete, developer-first experience that helps you go from design to implementation faster and with more confidence.

This is just the beginning. We’re continuing to evolve this flow with better field detection, support for more complex structures, and eventually, visual-aware coding.

You can try AI slice creation today in Slice Machine. And if you're curious about what’s next or want to share feedback, we’d love to hear from you.

Best,Benjamin MartinProduct Designer

Benjamin Martin

May 19, 2025

Benjamin Martin

May 19, 2025

🚀 Code your slices faster — with AI that knows your project

Also related to:Prismic MCP

We’ve expanded our slice creation flow to support developers not only in generating a slice model from a design — but now also in coding the slice directly in their editor, with AI support tailored to their project.

The flow starts with what you know: upload a design screenshot, and Prismic detects the visual elements to generate a structured slice model. But this is where it gets smarter. Developers can now jump into their code editor and get context-aware coding help, powered by a new tool called Prismic MCP (Model Context Provider).

Prismic MCP inspects your project setup and shares essential details with your AI code assistant — like the framework you’re using (e.g. Next.js), styling conventions (e.g. Tailwind CSS), existing slice models, and how Prismic SDKs are configured in your codebase. It also incorporates Prismic best practices to help the AI generate more accurate, consistent code that reflects how your project is actually built — and how slices are meant to be implemented.

The goal isn't just to save time — it’s to give developers a better starting point, reduce the guesswork of repetitive setup, and ensure output that’s aligned with best practices. Whether you're just getting started or building slices at scale, AI slice creation helps you go from design to production-ready code faster, with more confidence and less friction.