The systems behind AI-assisted prototyping at Adobe

What vibe coding needs to shift from a novelty to a genuine design practice

Illustration by Jia-yi Liu

A colorful, abstract illustration composed of layered geometric shapes and translucent panels. Curved ribbon‑like forms in red, orange, yellow, and blue flow vertically through the center. Rectangles, lines, and interface‑like frames overlap in soft gradients of purple, pink, and blue, creating a sense of depth, motion, and digital structure.

At Adobe, our design organization has embraced AI-assisted prototyping as part of our design process—exploring new behaviors and designing dynamic, generative-AI-centered systems all in the medium of code.

As part of this shift, we've tested many of the designer-friendly vibe coding tools on the market, but our designers repeatedly gravitate toward the same AI-assisted programming tools our engineering teams use: Cursor and Claude Code. The reasons are practical and rooted in our enterprise reality. Our designers need robust support for Spectrum, Adobe's design system. They also need integration with internal services and APIs, the ability to deploy safely within our corporate network, and access to the same AI tooling their engineering partners have already built.

But engineering-focused programming environments and command-line tools are difficult to set up and tune for design workflows. As our designers started getting into vibe coding, they stumbled through unfamiliar tools like GitHub, wrestled with API key configurations, jumped through hoops installing MCP servers, and, at the end of it, found themselves staring down empty code repositories. Even when they had working prototypes, they still had no easy way to deploy or share what they'd built.

In short, the path from idea to a working prototype—one that connects to real services, uses real components, and can be shared securely with colleagues—wasn’t paved. So we paved it. And we found that AI-assisted prototyping is most transformative when it's backed by sensible defaults, strong infrastructure, and a robust, AI-forward design system.

Vibe coding is not just a capability to be enabled; it's a tool to be adopted

As our Design Technology team started building tooling to solve these problems, we focused on a simple guiding principle: Build where we must, lean on third-party tools where we can.

The result is Protopack, an internal desktop application that handles what Cursor and Claude Code don't: preparing a local development environment, configuring authentication, wiring up connections to internal services, and pulling in design system components and guidance. Instead of spending hours on setup, designers can open Protopack, launch their coding agent, and start prompting. In the end, designers get prototypes that work and behave like real Adobe experiences.

And because Protopack's foundational elements and project starters are available to everyone, remixing is easy. Designers can begin with community-contributed templates that reflect real products like Adobe Photoshop or Adobe Acrobat. Engineers can contribute integrations that extend beyond the UI. A growing library of starter templates and a portfolio of projects, built by designers and engineers, mean almost any Adobe experience is a viable starting point.

Protopack’s community starter packs allow anyone to contribute and make it easy for designers to prototype new experiences for existing products.

An application window showing the Community section of Protopack. A left sidebar lists navigation items including Projects, Deployments, API Playground, Community, Guide, Support, and Settings with a blue "Create project" button above them. The Community window has tabs for All community posts, Featured (this is selected), Likes, Favorites, and Your posts. To the right of these tabs is a search field and a black "Create post" button. Beneath the tabs is a grid of thumbnail previews with titles, author names, dates, and like counts (those include Acrobat PDF Space Large Screen, Protoshop, Premiere Desktop, and Baby Express).

None of this output feels coherent without a solid design system. Spectrum ensures that whatever designers create through AI still feels like Adobe. As design systems become increasingly machine-readable—through tokens, components, documentation, and rules that AI models can parse—they play a critical role in making AI-generated output feel intentional rather than generic. Protopack includes rules and guidance that help models use Spectrum correctly from the start, so even early prototypes look and feel recognizably Adobe.

Finally, building prototypes is only half of the work. Designers also need a way to share them. Using Awesome, our internal hosting service, designers publish prototypes with a single click and share them as links. Prototypes no longer sit isolated on personal machines or circulate only as screen recordings. Instead, they become durable artifacts teams can revisit, reuse, and evolve.

What happens when teams invest in surrounding systems

A few weeks after we shipped Protopack, one of our designers posted in Slack: "I've been going off the deep end vibe coding various concepts. This is going to save us SO much time when we get into development because we should be able to answer just about all of the 'what if' questions ahead of time."

That quote captures something important. Prototyping outside of production is just the beginning. Design has always been about communicating intent, and higher-fidelity prototypes let designers communicate in more detail, more clearly. But as the systems around vibe coding mature, designers aren't limited to communicating change—they can participate more directly in making it.

We're now exploring how Protopack can support designers working safely alongside engineers in production codebases. That might mean contributing stylistic or front-of-the-front-end updates in shared component libraries or working in the same repositories with guardrails that make their contributions clear, reviewable, and reversible.

We're not trying to turn designers into engineers. Our goal is to remove unnecessary barriers so designers can contribute where their expertise matters most.

From demos that impress to a transformative design practice

AI-assisted prototyping is already changing how designers work. But that change only goes as far as the foundations beneath it.

For Adobe, building those foundations meant making our design system legible to AI models, keeping prototypes secure behind our firewall while still exposing real internal services, and making sharing simple enough that prototypes evolve rather than expire. Most critically, it meant removing the setup hurdles that would stop many designers before they'd even started prompting.

When vibe coding is treated as a capability to be enabled rather than just a tool to be adopted, it stops being a novelty. That's when it shifts from a source of impressive one-off demos into a genuine design practice.