I built the new Accelerate Showcase app without writing a single line of code myself. I didn’t need to pull our designer, who was already on their current project; no engineer’s sprint was disrupted. Instead, I used Claude Code, Google Stitch, DevTools, and the Parcel MCP server to go from idea to a shippable application.
This post explores how the app came into existence, how the process worked, and what it means for developers building with Avalonia today.
Why a Showcase App?
Our existing Accelerate samples are fantastic for digging into features, but they’re intended to help developers integrate the components, with little care about how they look (they’re very much designed by developers). I wanted something more polished. Something that showed off what these components could do in a real, well-designed application.
My first instinct was to ask our talented designer, Dalton, to pause his current work and knock up a design. But not wanting to step on toes, distract him, or risk existing project deadlines, I opted to try something new.
I’ve been using Google Stitch for a while to generate designs for views in our customer portal. None of the resulting code has gone into production, but it’s become a tool I lean on much like I sometimes use Dribbble: for inspiration. With Stitch, I can give it a prompt for what I’m looking for, and it produces designs that help me refine my idea. Good design is an iterative process, and Stitch hugely helps with that. Get something that’s acceptable, keep iterating until it’s perfect.
So I knew I wanted to use Stitch to design the prototype. But also, as much as it pains me, my role in the company means coding is an indulgent use of my time. It’s something I love doing, but I seldom can carve out time for it unless it’s in the evenings and on weekends. The idea for the showcase app popped into my head on a Monday morning, when I had a huge amount of emails and admin tasks to work through. I knew I couldn’t spend time building a sample. So I needed a different approach.
Enter Claude Code and DevTools MCP
I decided to use Claude Code along with our new DevTools MCP server. The goal was to use both the Avalonia DevTools MCP server and the Stitch MCP server to design and then implement the app. To ensure that Claude had everything it needed, I had Claude create a skill for each Accelerate component that described its features in detail and its API, generated from our documentation. I then did a quick once-over of the skills to ensure they covered everything I thought was important.
With the skills ready, I gave Claude Code the following prompt:
“You need to create a beautifully designed sample application for Avalonia UI that showcases the functionality and value of the Accelerate components. You should use the latest version of Avalonia and target .NET 10. We only care about desktop platforms (Windows, macOS and Linux). The application should implement the MVVM architecture using the Community Toolkit. It must be maintainable. You already have skills that will help you understand each and every Accelerate component’s available features and API. You should use the Stitch MCP server to design the application using the Avalonia brand styles. Ensure the app looks on-brand in both light and dark mode. Once you have a design, use the Avalonia DevTools MCP server to iterate on it during development. Compare DevTools screenshots with the target design from Stitch and verify they match exactly. If they’re not identical, you must continue to develop the project. Only stop once you have successfully implemented the Stitch design, with all components’ functionality working. Once you’re finished and believe the work to be high quality, maintainable and a faithful implementation of the design, you should run the app.”
I hit enter on the prompt and got back to tasks far less exciting.
A little while later, an app popped up. Claude had ‘one-shotted’ a working app. All the functionality I wanted was there, and the design looked pretty great as a starting point. I was incredibly impressed that Claude Code had successfully used a handful of custom skills, Stitch and DevTools MCP servers to create a project that likely would have taken the best part of a week if I’d asked the team. That isn’t to say the team are slow, but rather that having our designer create a design and then an engineer implement it is a time-consuming process, sequential process. The demo app that Claude created obviously lacked the ‘flair’ that Dalton brings to his designs, but it was still 10x better than what I’d have designed and 20x better than our existing samples. It was a great starting point, which inspired me to tweak elements and add polish, elevating it from good to great. So I got prompting.
After a handful of additional prompts, we landed on an app that we can be proud to ship. One of the things I was keen to add was a little motion. I asked Claude to update the banner to include some of our 3D marks and subtly move them.
But shipping means packaging, and packaging (especially for macOS) can be a day of pain.
Packaging Made Simple
Not wanting to waste a day messing with Apple's signing complexity, I asked Max to take care of it (a fine example of effective delegation as a leader 🫣). Max then reminded me that I could use the Parcel MCP server and prompt my way to success.
The Parcel MCP server lets AI assistants interact directly with Parcel’s packaging tools. Rather than manually configuring build settings, code signing certificates, and notarisation, I could describe what I wanted in plain English: “Package my app for macOS as a DMG with code signing and notarisation enabled, and for Windows as an MSIX.” Claude handled the rest, configuring the Parcel configuration file, setting up the Apple notary credentials, and running the builds.
What would normally involve hunting through documentation, remembering CLI flags, and debugging certificate issues became a conversation. The entire packaging process across both platforms was done while handling emails.
Where AI Actually Helps
We’ve been exploring how to better utilise AI at Avalonia in meaningful ways. Ways that help us achieve more. The reality is that for many of the things we’re building, AI simply hasn’t encountered enough examples of it to be useful. For example, there aren’t a whole lot of XAML parsers for it to learn from, or it can’t yet deliver huge performance improvements in the foundations of Avalonia.
But where AI is incredibly useful isn't building Avalonia; it's building with Avalonia. The Accelerate showcase app is a great example of the speed and power available to developers today.
The tools I used to build this app are the same tools available to you. If you're an Accelerate customer, you already have access to DevTools MCP and Parcel MCP. Combine them with Claude Code and Stitch, and you've got a workflow that can turn ideas into polished applications remarkably quickly. I'm genuinely curious to see what you build with it.
Want to learn more about DevTools MCP? Check out the recent blog post.
Want to try the Accelerate Showcase? We'll be releasing it soon, just after we've completed QA to ensure Claude didn't add any gremlins!
I built the new Accelerate Showcase app without writing a single line of code myself. I didn’t need to pull our designer, who was already on their current project; no engineer’s sprint was disrupted. Instead, I used Claude Code, Google Stitch, DevTools, and the Parcel MCP server to go from idea to a shippable application.
This post explores how the app came into existence, how the process worked, and what it means for developers building with Avalonia today.
Why a Showcase App?
Our existing Accelerate samples are fantastic for digging into features, but they’re intended to help developers integrate the components, with little care about how they look (they’re very much designed by developers). I wanted something more polished. Something that showed off what these components could do in a real, well-designed application.
My first instinct was to ask our talented designer, Dalton, to pause his current work and knock up a design. But not wanting to step on toes, distract him, or risk existing project deadlines, I opted to try something new.
I’ve been using Google Stitch for a while to generate designs for views in our customer portal. None of the resulting code has gone into production, but it’s become a tool I lean on much like I sometimes use Dribbble: for inspiration. With Stitch, I can give it a prompt for what I’m looking for, and it produces designs that help me refine my idea. Good design is an iterative process, and Stitch hugely helps with that. Get something that’s acceptable, keep iterating until it’s perfect.
So I knew I wanted to use Stitch to design the prototype. But also, as much as it pains me, my role in the company means coding is an indulgent use of my time. It’s something I love doing, but I seldom can carve out time for it unless it’s in the evenings and on weekends. The idea for the showcase app popped into my head on a Monday morning, when I had a huge amount of emails and admin tasks to work through. I knew I couldn’t spend time building a sample. So I needed a different approach.
Enter Claude Code and DevTools MCP
I decided to use Claude Code along with our new DevTools MCP server. The goal was to use both the Avalonia DevTools MCP server and the Stitch MCP server to design and then implement the app. To ensure that Claude had everything it needed, I had Claude create a skill for each Accelerate component that described its features in detail and its API, generated from our documentation. I then did a quick once-over of the skills to ensure they covered everything I thought was important.
With the skills ready, I gave Claude Code the following prompt:
“You need to create a beautifully designed sample application for Avalonia UI that showcases the functionality and value of the Accelerate components. You should use the latest version of Avalonia and target .NET 10. We only care about desktop platforms (Windows, macOS and Linux). The application should implement the MVVM architecture using the Community Toolkit. It must be maintainable. You already have skills that will help you understand each and every Accelerate component’s available features and API. You should use the Stitch MCP server to design the application using the Avalonia brand styles. Ensure the app looks on-brand in both light and dark mode. Once you have a design, use the Avalonia DevTools MCP server to iterate on it during development. Compare DevTools screenshots with the target design from Stitch and verify they match exactly. If they’re not identical, you must continue to develop the project. Only stop once you have successfully implemented the Stitch design, with all components’ functionality working. Once you’re finished and believe the work to be high quality, maintainable and a faithful implementation of the design, you should run the app.”
I hit enter on the prompt and got back to tasks far less exciting.
A little while later, an app popped up. Claude had ‘one-shotted’ a working app. All the functionality I wanted was there, and the design looked pretty great as a starting point. I was incredibly impressed that Claude Code had successfully used a handful of custom skills, Stitch and DevTools MCP servers to create a project that likely would have taken the best part of a week if I’d asked the team. That isn’t to say the team are slow, but rather that having our designer create a design and then an engineer implement it is a time-consuming process, sequential process. The demo app that Claude created obviously lacked the ‘flair’ that Dalton brings to his designs, but it was still 10x better than what I’d have designed and 20x better than our existing samples. It was a great starting point, which inspired me to tweak elements and add polish, elevating it from good to great. So I got prompting.
After a handful of additional prompts, we landed on an app that we can be proud to ship. One of the things I was keen to add was a little motion. I asked Claude to update the banner to include some of our 3D marks and subtly move them.
But shipping means packaging, and packaging (especially for macOS) can be a day of pain.
Packaging Made Simple
Not wanting to waste a day messing with Apple's signing complexity, I asked Max to take care of it (a fine example of effective delegation as a leader 🫣). Max then reminded me that I could use the Parcel MCP server and prompt my way to success.
The Parcel MCP server lets AI assistants interact directly with Parcel’s packaging tools. Rather than manually configuring build settings, code signing certificates, and notarisation, I could describe what I wanted in plain English: “Package my app for macOS as a DMG with code signing and notarisation enabled, and for Windows as an MSIX.” Claude handled the rest, configuring the Parcel configuration file, setting up the Apple notary credentials, and running the builds.
What would normally involve hunting through documentation, remembering CLI flags, and debugging certificate issues became a conversation. The entire packaging process across both platforms was done while handling emails.
Where AI Actually Helps
We’ve been exploring how to better utilise AI at Avalonia in meaningful ways. Ways that help us achieve more. The reality is that for many of the things we’re building, AI simply hasn’t encountered enough examples of it to be useful. For example, there aren’t a whole lot of XAML parsers for it to learn from, or it can’t yet deliver huge performance improvements in the foundations of Avalonia.
But where AI is incredibly useful isn't building Avalonia; it's building with Avalonia. The Accelerate showcase app is a great example of the speed and power available to developers today.
The tools I used to build this app are the same tools available to you. If you're an Accelerate customer, you already have access to DevTools MCP and Parcel MCP. Combine them with Claude Code and Stitch, and you've got a workflow that can turn ideas into polished applications remarkably quickly. I'm genuinely curious to see what you build with it.
Want to learn more about DevTools MCP? Check out the recent blog post.
Want to try the Accelerate Showcase? We'll be releasing it soon, just after we've completed QA to ensure Claude didn't add any gremlins!
I built the new Accelerate Showcase app without writing a single line of code myself. I didn’t need to pull our designer, who was already on their current project; no engineer’s sprint was disrupted. Instead, I used Claude Code, Google Stitch, DevTools, and the Parcel MCP server to go from idea to a shippable application.
This post explores how the app came into existence, how the process worked, and what it means for developers building with Avalonia today.
Why a Showcase App?
Our existing Accelerate samples are fantastic for digging into features, but they’re intended to help developers integrate the components, with little care about how they look (they’re very much designed by developers). I wanted something more polished. Something that showed off what these components could do in a real, well-designed application.
My first instinct was to ask our talented designer, Dalton, to pause his current work and knock up a design. But not wanting to step on toes, distract him, or risk existing project deadlines, I opted to try something new.
I’ve been using Google Stitch for a while to generate designs for views in our customer portal. None of the resulting code has gone into production, but it’s become a tool I lean on much like I sometimes use Dribbble: for inspiration. With Stitch, I can give it a prompt for what I’m looking for, and it produces designs that help me refine my idea. Good design is an iterative process, and Stitch hugely helps with that. Get something that’s acceptable, keep iterating until it’s perfect.
So I knew I wanted to use Stitch to design the prototype. But also, as much as it pains me, my role in the company means coding is an indulgent use of my time. It’s something I love doing, but I seldom can carve out time for it unless it’s in the evenings and on weekends. The idea for the showcase app popped into my head on a Monday morning, when I had a huge amount of emails and admin tasks to work through. I knew I couldn’t spend time building a sample. So I needed a different approach.
Enter Claude Code and DevTools MCP
I decided to use Claude Code along with our new DevTools MCP server. The goal was to use both the Avalonia DevTools MCP server and the Stitch MCP server to design and then implement the app. To ensure that Claude had everything it needed, I had Claude create a skill for each Accelerate component that described its features in detail and its API, generated from our documentation. I then did a quick once-over of the skills to ensure they covered everything I thought was important.
With the skills ready, I gave Claude Code the following prompt:
“You need to create a beautifully designed sample application for Avalonia UI that showcases the functionality and value of the Accelerate components. You should use the latest version of Avalonia and target .NET 10. We only care about desktop platforms (Windows, macOS and Linux). The application should implement the MVVM architecture using the Community Toolkit. It must be maintainable. You already have skills that will help you understand each and every Accelerate component’s available features and API. You should use the Stitch MCP server to design the application using the Avalonia brand styles. Ensure the app looks on-brand in both light and dark mode. Once you have a design, use the Avalonia DevTools MCP server to iterate on it during development. Compare DevTools screenshots with the target design from Stitch and verify they match exactly. If they’re not identical, you must continue to develop the project. Only stop once you have successfully implemented the Stitch design, with all components’ functionality working. Once you’re finished and believe the work to be high quality, maintainable and a faithful implementation of the design, you should run the app.”
I hit enter on the prompt and got back to tasks far less exciting.
A little while later, an app popped up. Claude had ‘one-shotted’ a working app. All the functionality I wanted was there, and the design looked pretty great as a starting point. I was incredibly impressed that Claude Code had successfully used a handful of custom skills, Stitch and DevTools MCP servers to create a project that likely would have taken the best part of a week if I’d asked the team. That isn’t to say the team are slow, but rather that having our designer create a design and then an engineer implement it is a time-consuming process, sequential process. The demo app that Claude created obviously lacked the ‘flair’ that Dalton brings to his designs, but it was still 10x better than what I’d have designed and 20x better than our existing samples. It was a great starting point, which inspired me to tweak elements and add polish, elevating it from good to great. So I got prompting.
After a handful of additional prompts, we landed on an app that we can be proud to ship. One of the things I was keen to add was a little motion. I asked Claude to update the banner to include some of our 3D marks and subtly move them.
But shipping means packaging, and packaging (especially for macOS) can be a day of pain.
Packaging Made Simple
Not wanting to waste a day messing with Apple's signing complexity, I asked Max to take care of it (a fine example of effective delegation as a leader 🫣). Max then reminded me that I could use the Parcel MCP server and prompt my way to success.
The Parcel MCP server lets AI assistants interact directly with Parcel’s packaging tools. Rather than manually configuring build settings, code signing certificates, and notarisation, I could describe what I wanted in plain English: “Package my app for macOS as a DMG with code signing and notarisation enabled, and for Windows as an MSIX.” Claude handled the rest, configuring the Parcel configuration file, setting up the Apple notary credentials, and running the builds.
What would normally involve hunting through documentation, remembering CLI flags, and debugging certificate issues became a conversation. The entire packaging process across both platforms was done while handling emails.
Where AI Actually Helps
We’ve been exploring how to better utilise AI at Avalonia in meaningful ways. Ways that help us achieve more. The reality is that for many of the things we’re building, AI simply hasn’t encountered enough examples of it to be useful. For example, there aren’t a whole lot of XAML parsers for it to learn from, or it can’t yet deliver huge performance improvements in the foundations of Avalonia.
But where AI is incredibly useful isn't building Avalonia; it's building with Avalonia. The Accelerate showcase app is a great example of the speed and power available to developers today.
The tools I used to build this app are the same tools available to you. If you're an Accelerate customer, you already have access to DevTools MCP and Parcel MCP. Combine them with Claude Code and Stitch, and you've got a workflow that can turn ideas into polished applications remarkably quickly. I'm genuinely curious to see what you build with it.
Want to learn more about DevTools MCP? Check out the recent blog post.
Want to try the Accelerate Showcase? We'll be releasing it soon, just after we've completed QA to ensure Claude didn't add any gremlins!
