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

My XperienceCommunity.Sustainability package measures website carbon impact but leaned on shadcn/ui because Kentico's native components were hard to find. I had Claude Code discover the built-in components and swap them in, redesigning the UI from v2.1.0 to v2.2.0 in pull request #35.

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 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

kentico-management-mcp-server-ai-that-builds-inside-your-cms.md 7 min
#post

Kentico's Management MCP server: AI that builds inside your CMS, and keeps every change reviewable

How I built four brand sites through Xperience by Kentico's Management MCP server — and why reviewability, not speed, is what really matters.

#Kentico #AI tooling #.NET
how-ai-changed-the-shape-of-delivery-on-a-real-kentico-project.md 6 min
#post

How AI Changed the Shape of Delivery on a Real Kentico Project

A real‑world case study exploring how AI‑assisted workflows changed decision‑making, reduced uncertainty, and accelerated delivery during an Xperience by Kentico rebuild.

#Kentico #AI tooling
from-design-system-to-deployed-code-a-weekend-with-claude-design.md 6 min
#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.

#AI tooling
from-spec-to-stripe-building-a-payment-provider-for-xperience-by-kentico.md 5 min
#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.

#Kentico #Commerce #AI tooling