A Storybook

Leave a reply

I built a public demo to master Storybook and vibe coding. Hands-on, I turned a raw html/css component into a WordPress Gutenberg block.

Peek under the hood, and see its Storybook reference designs.

To streamline work, the new UI features a visual editor (screenshot above). It allows for different combinations of images and text.

Since different layouts work for text and images on mobile, I built custom responsive designs for each type of content. Indeed, this UI is a live example of the component in action.

AI workflow

Storybook and vibe coding live in React code. By contrast, WordPress is mostly PHP. Yet you write its Gutenberg UI components in React.

While I could vibe code the transformation in two hours, reality hit soon after. It took another two days to learn the WordPress-Gutenberg mixed stack and to squash a stubborn mobile layout bug.

For the work, I used agentic coding, Cursor and Sonnet 4.6. I also dug into my memories of software design, and used MVC and Mode Flag design patterns to fix the bug.