liam@goldfinch ~/blog · main
Back to posts · ~/blog/posts/how-i-used-claude-code-to-redesign-my-kentico-sustainability-module.md

How I Used Claude Code to Redesign My Kentico Sustainability Module

Discover how I used Claude Code, Anthropic’s AI coding assistant, to refactor and redesign the UI of my Kentico Sustainability module - replacing third-party components with native ones and creating a cleaner, more integrated experience.

One thing I’ve really wanted from Kentico is a public Storybook to help with custom development inside the admin interface, using their out of the box components.

This isn’t a thing (yet) unfortunately...

But that’s not the end of the world. 🤔

Earlier this year, I released XperienceCommunity.Sustainability, a community package for testing the carbon impact of your website pages, inspired by the amazing work from the Umbraco Community Sustainability Team. 🌱

The first design was a bit... how do I say it... boring?

I used shadcn/ui React components because I couldn’t easily see which Kentico components were available or how to use them.

Then I thought - why not let my agentic colleague, Claude Code, figure it out for me? 💡

The Original Design

The first design was a bit... how do I say it... boring?

I used shadcn/ui React components because I couldn’t easily see which Kentico components were available or how to use them.

Enter Claude Code 💡

Then I thought - why not let my agentic colleague, Claude Code, figure it out for me?

So, I wrote a prompt, gave it a few hints about what I wanted to achieve... and it did the rest.

It discovered which Kentico components existed and replaced everything like-for-like. 👏

Giving AI Creative Freedom 🎨

That alone was a huge win - but the design was still, well, dull.

So I gave Claude a bit more creative freedom to redesign the module UI entirely.

And wow. The results speak for themselves. 🔥

Here’s the before (v2.1.0) and after (v2.2.0) UI comparison ⬇️

Screenshot of the Kentico Sustainability module before the redesign (v2.1.0), showing a simple layout with basic text and shadcn/ui components.
Screenshot of the Kentico Sustainability module after the redesign (v2.2.0), showing a refined layout using native Kentico components and improved visuals.

See It for Yourself

You can check out the full PR Claude created here.

This experiment showed me how powerful AI can be as a development partner, not replacing creativity, but accelerating it.

It’s also a reminder that even without a public Storybook, there’s always a way to explore and build on what Kentico provides.

// related

Keep reading

from-design-system-to-deployed-code-a-weekend-with-claude-design.md
#post

From design system to deployed code: a weekend with Claude Design

A practical experiment in using Claude Design to infer a design system from an existing site, explore a redesign within real constraints, and move straight into implementation without the usual design handoff.

from-spec-to-stripe-building-a-payment-provider-for-xperience-by-kentico.md
#post

From Spec to Stripe: Building a Payment Provider for Xperience by Kentico

How a Markdown spec and AI tools like ChatGPT and Claude Code helped me build a Stripe payment provider for Xperience by Kentico - faster, cleaner, and spec-driven from the start.

taking-stripe-payments-in-umbraco-commerce.md
#post

Taking Stripe Payments in Umbraco Commerce

Step-by-step guide to adding Stripe to the Umbraco Commerce Demo Store (Umbraco 16, .NET 9) with screenshots, commands, and notes on webhooks and going live.

adding-smoke-testing-to-my-blog-with-claude-code.md
#post

Adding Smoke Testing to My Blog with Claude Code

Using AI to automate smoke testing and boost confidence in deployments for my Xperience by Kentico blog.