Ant Design System meets Gutenberg: an End-to-End Workflow

Chronicling our journey from building monoliths to decoupled, and how we built a better page builder experience in the process by incorporating the ant design system.

When we started the journey from monoliths1 to decoupled2, we didn’t realize what a complete change it would be. Two years later, we’re more excited than ever and more certain as well: the future is headless. The reasons we feel that way align with our initial research: faster, more secure, increased flexibility. However, as we’ve come to learn, it also opens up a whole new world of possibilities with regard to frameworks we can integrate with.

The most exciting of those being the Ant Design System. This open source design system, when integrated with Figma, a token workflow, and Storybook on the frontend, and likewise integrated with WordPress, Gutenberg, and Graph QL on the backend, solves a problem that has been around as long as websites have been being built: how do we ensure that what is designed in a design program, can be built pixel for pixel on the front end?

But that’s only the beginning. Here’s a peek at some of the other problems it solves:

  • Unique styles per break point, managed in the Gutenberg Editor
  • A completely component based management experience, allowing your content creators to experiment with new strategies for presenting their content, without requiring developer assistance.
  • True guardrails for your brand. Content editors are no longer editing frontend code, they’re editing content and display instructions sent through an API that are rendered perfectly and in a higly performant and secure manner into the front end via Next JS and React. Behold, the perfect page building experience!
  • A true library of design components, no more templates.

This is the beginning of a new era in web design and web development. Throw away your clunky WordPress page builders and embrace the only way sites will be built a few years from now, or perish and turn to dust, these are your only options.


  1. Monoliths – refers to sites built with your front end and back end in a single code base. For instance, a site built completely on WordPress or Shopify.
  2. Decoupled – refers to a site built with a separate application for front end and backend. We use React with Next JS for our front end application. For the back end, we use WordPress or Drupal, with Gutenberg as the editor for both.

“From providing support when needed to project leadership when asked, the Entermedia team has always come through for us. We’ve been counting on Entermedia for five years to maintain several high-traffic websites in a competitive space, and have also engaged them for custom design/development projects. This crew does not disappoint. Not only have they enhanced our users’ frontend experience, improving engagement and search performance, they’ve also simplified and streamlined our backend experience, making all of our jobs easier. And we know Entermedia has our back and will reply within minutes via slack or email if we need them. Where would we be without them? Don’t want to know.”

John W.

Englewood Health

Tell us about your project!

We’ve said a lot about what we can do. Now tell us about your goals and upcoming projects.

Always a free, no-obligation consultation. If you have a time-sensitive need, please let us know.

Join our newsletter

We’re always on the lookout for emerging trends and best practices for modern web development. Sign up to receive timely and important updates.

By clicking the Signup button you agree with our Privacy Policy.