--- title: Accelerating UI Development with MetroStar's Comet and AI description: Accelerate UI development with MetroStar's Comet and Figma MCP, leveraging AI to transform designs into code swiftly and accurately. Discover the future of efficient web app creation. image: https://blog.metrostar.com/hubfs/Comet-Blog-Feature.jpg --- [![MetroStar Systems Logo](https://blog.metrostar.com/hs-fs/hubfs/raw_assets/public/MetroStar_Jan2021/images/Logo-2021.png?width=413&name=Logo-2021.png "MetroStar Systems Logo")](https://www.metrostar.com/) - Who We Are - [Meet MetroStar](https://metrostar.com/who-we-are/) - [Leadership](https://metrostar.com/leaders/) - [Partnerships](https://www.metrostar.com/partnerships/) - [Innovation Lab](https://www.metrostar.com/innovation-lab/) - [Contract Vehicles](https://www.metrostar.com/contract-vehicles/) - What We Do - [Artificial Intelligence](https://www.metrostar.com/ai-and-government/) - [Digital Experience](https://www.metrostar.com/digital-experience/) - [Application Modernization](https://www.metrostar.com/application-modernization/) - [Enterprise IT](https://www.metrostar.com/enterprise-it-services/) - [Products + Solutions](https://www.metrostar.com/federal-government-products-solutions/) - Who We Serve - [National Security](https://www.metrostar.com/national-security/) - [Defense](https://www.metrostar.com/defense-customers/) - Insights - [Blog](https://blog.metrostar.com/) - [Case Studies](https://www.metrostar.com/case-studies/) - [News + Events](https://metrostar.com/news-events/) - Join Us - [Careers](https://www.metrostar.com/join-us/) - [Open Roles](https://www.metrostar.com/jobs/) - [Cleared Jobs](https://www.metrostar.com/cleared-jobs/) - [Veterans](https://www.metrostar.com/veterans/) - [Internships](https://www.metrostar.com/internships/) - [Contact Us](https://metrostar.com/contact-us/) - Who We Are - [Meet MetroStar](https://metrostar.com/who-we-are/) - [Leadership](https://metrostar.com/leaders/) - [Culture](https://metrostar.com/culture/) - [Partnerships](https://www.metrostar.com/partnerships/) - [Innovation Lab](https://www.metrostar.com/innovation-lab/) - [Contract Vehicles](https://www.metrostar.com/contract-vehicles/) - What We Do - [Artificial Intelligence](https://www.metrostar.com/ai-and-government/) - [Digital Experience](https://www.metrostar.com/digital-experience/) - [Application Modernization](https://www.metrostar.com/application-modernization/) - [Enterprise IT](https://www.metrostar.com/enterprise-it-services/) - [Products + Solutions](https://www.metrostar.com/federal-government-products-solutions/) - Who We Serve - [National Security](https://www.metrostar.com/national-security/) - [Defense](https://www.metrostar.com/defense-customers/) - Insights - [Blog](https://blog.metrostar.com/) - [Case Studies](https://www.metrostar.com/case-studies/) - [News + Events](https://metrostar.com/news-events/) - Join Us - [Careers](https://www.metrostar.com/join-us/) - [Open Roles](https://www.metrostar.com/jobs/) - [Cleared Jobs](https://www.metrostar.com/cleared-jobs/) - [Veterans](https://www.metrostar.com/veterans/) - [Internships](https://www.metrostar.com/internships/) - [**Contact Us**](https://metrostar.com/contact-us/) [blogs](https://blog.metrostar.com/) > [AI/ML](https://blog.metrostar.com/tag/ai-ml) # Accelerating UI Development with MetroStar's Comet and AI 5 MIN READ 09/25/2025 | [AI/ML](https://blog.metrostar.com/tag/ai-ml) | [Human-Centered Design](https://blog.metrostar.com/tag/human-centered-design) | [Innovation Lab](https://blog.metrostar.com/tag/innovation-lab) ![green and blue blur background with white boxes for computer tabs and three hands on the boxes, in graphic design style](https://blog.metrostar.com/hubfs/Comet-Blog-Feature.jpg) A few months ago, Figma launched [Figma Dev Mode MCP](https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/) (Model Context Provider), which brings Figma directly into the developer workflow to help LLMs achieve design-informed code generation. Previously, AI tools could only ingest design context from images or API responses. With the Model Context Protocol (MCP), apps can now share structured context directly with LLMs, which means more time to focus on design!  Given all the hype around MCPs, I thought it would be fun to experiment and see if they live up to the hype. More specifically, I wanted to use Figma MCP with [Comet](https://www.metrostar.com/comet-design-tool/)—MetroStar’s USWDS-based Design System, to accelerate initial UI development. The experiment was a tremendous success. With these tools and a few others, I can generate code for Comet-based Figma designs with nearly 100% accuracy in minutes.  ## Why This Matters + How It Works  As someone who specializes in UI development, I can say that the process of bringing a design to life with code can be time consuming, especially if you're working with a well-defined design. Also, while I love building UIs, I do not love dealing with minor nuances like colors, spacing, font size, etc. Luckily, this is an area where AI shines.   Before seeing this in action, I would like to talk through the three major pieces: Comet, Figma, and [GitHub Copilot. ](https://github.com/features/copilot) Comet was built as an accelerator for developing government web apps, with a heavy focus on DevEx (Developer Experience). This means enhancing Comet to support more than just USWDS components. This also means providing a fully functional, production-ready [Comet Starter](https://github.com/MetroStar/comet-starter) application. All well documented, secure, and accessible.  We are taking the experience a bit further through integrations with Figma:  - Comet Design Kit: a Figma design kit which includes all Comet components.  - Figma Code Connect: additional files added to source which maps the coded components with the design kit components.  - Figma MCP: makes use of designs as well as the above tooling to support the coding agent.  Lastly, we are working with GitHub Copilot in VS Code to provide coding agents, the latest models (Claude Sonnet 4), and MCP integration. We are using Copilot instructions to provide contextual guardrails for the LLMs regarding coding standards, styling, testing, accessibility requires, etc. The developer environment we’ve created with Comet and Figma provides an AI-ready platform for building precise and efficient web applications which reduces development cycles from days to minutes.  ## Comet x Figma In Action  First, we pull up our design in the Figma Desktop App, right click the design, select "Copy as", and select" Copy link" to selection. The screenshot below shows our initial Figma design.  ![Screenshot 2025-08-19 at 11.47.15 AM](https://blog.metrostar.com/hs-fs/hubfs/Screenshot%202025-08-19%20at%2011.47.15%20AM.png?width=618&height=1171&name=Screenshot%202025-08-19%20at%2011.47.15%20AM.png) Next, we navigate to our app in VS Code and prompt Copilot to implement our design:  ![Screenshot 2025-08-19 at 12.01.39 PM](https://blog.metrostar.com/hs-fs/hubfs/Screenshot%202025-08-19%20at%2012.01.39%20PM.png?width=1029&height=597&name=Screenshot%202025-08-19%20at%2012.01.39%20PM.png) Click through a few confirmations to allow Copilot to work with Figma MCP and your designs:  ![Screenshot 2025-08-19 at 12.02.38 PM](https://blog.metrostar.com/hs-fs/hubfs/Screenshot%202025-08-19%20at%2012.02.38%20PM.png?width=1029&height=597&name=Screenshot%202025-08-19%20at%2012.02.38%20PM.png) And within a few minutes we have our code!  ![Screenshot 2025-08-19 at 12.16.38 PM](https://blog.metrostar.com/hs-fs/hubfs/Screenshot%202025-08-19%20at%2012.16.38%20PM.png?width=1029&height=597&name=Screenshot%202025-08-19%20at%2012.16.38%20PM.png) ... and our newly updated dashboard! As you can see, we now have metric cards at the top, data visualizations, and data tables just as we did in the design, indicating that this experiment was a wild success!  ![Screenshot 2025-08-19 at 12.19.30 PM](https://blog.metrostar.com/hs-fs/hubfs/Screenshot%202025-08-19%20at%2012.19.30%20PM.png?width=1029&height=519&name=Screenshot%202025-08-19%20at%2012.19.30%20PM.png) ![Screenshot 2025-08-19 at 12.19.43 PM](https://blog.metrostar.com/hs-fs/hubfs/Screenshot%202025-08-19%20at%2012.19.43%20PM.png?width=1029&height=499&name=Screenshot%202025-08-19%20at%2012.19.43%20PM.png) ![Screenshot 2025-08-19 at 12.19.52 PM](https://blog.metrostar.com/hs-fs/hubfs/Screenshot%202025-08-19%20at%2012.19.52%20PM.png?width=1029&height=506&name=Screenshot%202025-08-19%20at%2012.19.52%20PM.png) ## **What’s Next**   We are taking advantage of our AI-ready Design System as well as advancements in AI, such as LLM's and MCPs to supercharge the design-developer experience. For questions or next steps, reach out to [our Innovation Lab and Johnny Bouder](https://www.metrostar.com/innovation-lab/)!  ## About The Author [Johnny Bouder](https://www.linkedin.com/in/johnny-bouder/)is MetroStar’s Principal Software Engineer, driving innovation in Frontend, Open Source, and Developer Experience (DevEx). With a passion for building tools that empower developers, Johnny combines technical expertise with a creative edge—whether he’s shaping modern design systems or experimenting with cheesemaking, cocktails, and the occasional metal riff. His work bridges precision and play, helping reimagine how technology is built and experienced. ![Picture of Johnny Bouder](https://blog.metrostar.com/hs-fs/hubfs/Blurred_Johnny-B.png?width=150&name=Blurred_Johnny-B.png) Written By: [Johnny Bouder](https://blog.metrostar.com/author/johnny-bouder) Principal Software Engineer ### you might like these too ### [Why LLM Context Limits Undermine Mission Readiness and How to Fix Them](https://blog.metrostar.com/llm-context-limits-mission-readiness-how-to-fix) ##### Feature | AI/ML | Innovation Lab ### [Delivering Real-Time Insights for Faster DoD Mission Planning](https://blog.metrostar.com/merlin-dod-mission-planning) ##### MetroStar Culture | Human-Centered Design | Innovation Lab ### [Is AI Friend or Foe to Creatives? Five Design AI Tools Worth Exploring.](https://blog.metrostar.com/ai-creative-tools) ##### Feature | AI/ML [view more](https://blog.metrostar.com/tag/ai-ml) ## want to stay in the loop? Never miss a thing by signing up for our newsletter. We periodically send out important news, blogs, and other announcements. Don’t worry, we promise not to spam you. [![MetroStar Systems Logo](https://blog.metrostar.com/hs-fs/hubfs/raw_assets/public/MetroStar_Jan2021/images/MetroStar-Footer-Logo.png?name=MetroStar-Footer-Logo.png "MetroStar Systems Logo")](https://www.metrostar.com/) - [Services](https://www.metrostar.com/#digital-services) - [About Us](https://www.metrostar.com/company/) - [Jobs](https://www.metrostar.com/jobs/) - [Contract Vehicles](https://www.metrostar.com/contract-vehicles/) Creating dynamic digital solutions is kind of our thing - we've been transforming and accelerating government missions since 1999. [say hello](https://www.metrostar.com/contact-us/) [![MetroStar Systems Logo](https://blog.metrostar.com/hs-fs/hubfs/raw_assets/public/MetroStar_Jan2021/images/MetroStar-Footer-Logo.png?name=MetroStar-Footer-Logo.png "MetroStar Systems Logo")](https://www.metrostar.com/) [employee login](https://stargate.metrostarsystems.com/) © 2026 MetroStar Systems, LLC - All Rights Reserved | [Privacy Policy](https://www.metrostar.com/privacy-policy/) Go to Top