I recently took the opportunity to explore AI-assisted development in my work. Seeing how my colleagues have leveraged AI to speed up coding inspired me to try it firsthand.

In this post, I’ll walk through my first experience using Claude Code to add a new KPI donut chart to our dashboards, showing how quickly AI can help produce functional results while maintaining consistency with existing chart types.

Getting started

My process began by opening my project and launching Claude Code in the terminal. I directed it to the dashboard micro frontend folder, allowing it to analyze the existing codebase. I then asked Claude Code to propose an implementation for the new donut chart option, specifically noting its need to account for theme selections, similar to other KPI charts. I intentionally omitted mentioning the optional horizontal and vertical legends to see if it would infer this from the existing code.

The implementation process

Within roughly a minute, Claude presented a satisfactory plan, so I instructed it to proceed with development. In a few minutes, Claude Code presented a series of file additions and modifications for my individual approval. After approving all changes, I manually added the “Donut” option to a different section of the codebase, as it wasn’t within the specified folder and was a straightforward, one-line addition.

Testing the results

Upon launching the application, I added a KPI with the new donut chart option to a dashboard, and it appeared correctly, including functional theme options. However, it didn’t include the optional key legend found in other chart examples. I simply prompted Claude Code to add the missing horizontal and vertical theme options, which it successfully did. However, there were some minor positioning issues with the horizontal key that couldn’t be resolved with further iterations.

Additionally, all KPI charts display a line indicating the actual value. This feature also wasn’t automatically incorporated based on the sample code. But after a few prompts, Claude Code successfully positioned this line within the donut chart.

The outcome

Ultimately, Claude Code enabled me to achieve approximately 90 percent of a fully functional solution in about 20 minutes, a significantly faster outcome than if I had undertaken the coding manually.

Learnings

This experiment highlighted a few key lessons about working with AI-assisted coding tools:

• Speed with oversight — Claude Code quickly generated a large portion of the feature, but human review and small manual edits were still essential.
• Prompting matters — The level of detail I gave in my instructions directly influenced the quality and completeness of the output. Omitting details was a good way to test how well the AI inferred patterns from existing code.
• AI as a collaborator — Rather than replacing development work, Claude Code acted like a junior developer: fast at producing drafts and responsive to feedback, but still needing guidance.
• Time savings compound — Even if the output required adjustments, getting 90 percent of the way there in minutes created a huge productivity boost compared to starting from scratch.

Conclusion

This experience confirmed for me that AI can be a practical and reliable partner in development. With the right prompts and a willingness to iterate, tools like Claude Code can take on repetitive or boilerplate work and free developers to focus on design, refinement, and problem-solving.

For me, adding a KPI donut chart went from a potentially time-consuming task to a quick, almost collaborative process. And as these tools continue to evolve, I see AI becoming a standard part of how we build and ship features efficiently.

Explore related topics