In a recent LinkedIn post, Melissa Perri discusses the critical question of selecting the right tools and processes to foster effective collaboration between design and engineering teams, particularly in the context of rebuilding their website using Claude Code.
Melissa Perri highlights that beyond enhancing customer utility, a primary goal was to optimize the workflow between design and development. She notes the common challenge teams face: minimizing cycle times, reducing back-and-forth communication, and ensuring designs are delivered in a format that is straightforward for developers to implement.
“Our designer would spend hours in Figma and with development making trade-offs, quietly simplifying things so we could build them in a reasonable time. This back and forth meant a lot of manual rework, and lots of meetings.”
Evaluating Design and Development Tooling
Melissa Perri details their team’s process of testing various tools to find the optimal solution. Initially, they explored Lovable, finding it intuitive for design tweaks but encountering difficulties in passing prototypes back into functional code. The tool also introduced a significant stack of new frameworks and pattern libraries, which the team ultimately decided against in favor of plain HTML and CSS augmented by their existing design system.
Figma Make and the Challenge of System Integration
Next, the team experimented with Figma Make. Melissa Perri explains their initial excitement, given that their design system was already established within Figma. However, the integration proved problematic.
“We fought for days to get it to use that system. Our designer watched countless videos and it still would not produce what we wanted. We even MCP’ed it to Claude Code for the build. That worked better, but not seamlessly. We still tweaked everything in Claude Code after.”
According to Melissa Perri, despite efforts to align Figma Make with their design system, significant manual adjustments were still required post-build, indicating a lack of seamless integration.
The Efficacy of Plain Claude Code with Refinements
The team’s experimentation eventually led them to plain Claude Code. Melissa Perri admits that out of the box, Claude Code was not adept at design tasks. However, through strategic guidance, the addition of specific plugins, and leveraging tools from Vercel, the platform became highly steerable.
“We would spin up HTML and CSS pages from the content spec, land on something close, and refine from there. We told it to use vanilla JS and plain HTML and CSS, and as we built our guidelines and design library, it got smarter every week.”
As Melissa Perri points out, this iterative process of providing clear instructions and building out guidelines allowed Claude Code to become increasingly effective. A crucial element of their success was maintaining flexibility within their design system. They ensured it was consistent enough to create a unified site experience but loose enough to allow for pattern deviations when beneficial for the user.
Measuring the Impact on Efficiency
The tangible result of adopting this refined Claude Code workflow was a dramatic reduction in production time. Melissa Perri notes that a page that previously took a week to mock up could now be completed in a matter of hours. This efficiency gain allowed the designer to rapidly create new pages, confident in their development compatibility and ready for feedback and deployment.
Expertise as the Guiding Force
Crucially, Melissa Perri emphasizes that the tool did not replace the team’s expertise; rather, it amplified it. The ability to rapidly iterate and achieve desired outcomes was contingent upon their pre-existing knowledge of good user experience (UX).
“The tool did not replace our expertise. It rewarded it.”
In Melissa Perri’s view, the foundational understanding of UX principles was what enabled them to effectively guide Claude Code. Once these principles were encoded into the guidelines, the team could significantly accelerate their development process. This insight underscores the importance of human expertise in harnessing the power of AI tools for design and development.
Melissa Perri’s post concludes by previewing a forthcoming discussion on the distinction between UI and UX in the context of Claude’s capabilities.
📝 About This Content
This article is based on insights shared by Melissa Perri on LinkedIn.
📅 Originally posted on July 28, 2026 | View original post on LinkedIn →