Skip to content
Marcus Gonzalez

Designer Enablement

Generating a prototype is easy now. Making it carry design intent is the work.

Code prototypes can preserve layout, behavior, responsiveness, and component decisions that static files leave open to interpretation. Most Copilot-licensed designers on the team now work in code, and I am coaching all four peer leads across the 30-person design team.

Fig. 00 · Illustrative reconstruction · A richer design medium

A code prototype carries the decisions a static design file leaves open.

Static design file — decisions left open
Design filehandoff
behavior described elsewhere
responsive rules inferred later
design intent · reinterpreted downstream
Illustrative reconstructionSanitized capture pending
Code prototype — decisions carried
Intent-rich code prototypecarries intent
✓ layout and component structure
✓ interaction and responsive behavior
✓ intent ready for the build specification
Illustrative reconstructionSanitized capture pending
Illustrative reconstruction · production UI and values differThe prototype carries decisions the build can consume
The same screen as a static design file and as an intent-rich code prototype: the static file leaves behavior, responsive rules, and design intent open to interpretation, while the code prototype carries its decisions forward, with design intent marked as the designer's own judgment.
Context01

AI agents made working prototypes easy to produce, but Chase had no approved way for designers to publish them. Working code stayed on the designer's machine.

I lead the Home Lending program that helps designers use code as a design medium. The work spans coaching, shared standards, and the tools designers need to make coded prototypes useful beyond their own machines.

Fig. 01 · Diagram · Prototype to build

Design decisions discovered in code become the input to the build.

Explore in code

The designer directs an AI agent, and layout, behavior, and responsive decisions emerge.

Make intent explicit

Skills extract the decisions discovered in the prototype into human- and machine-readable specifications.

Continue into the build
  • PRD records product intent
  • structured intent feeds the build specification
  • SDK checks establish readiness
Diagram · design through making, then preserve what the team learnsCobalt marks the designer's design judgment
A three-station flow: the designer explores in code, skills make the discovered decisions explicit, and the build continues from a PRD, a structured specification, and SDK readiness checks.
Problem02

A code prototype only creates value when others can use it and its decisions survive the handoff. Without sharing and durable standards, the work stops at the demo.

Designers could run prototypes locally, but partners and stakeholders could not open them. Designers had to present the work live, which prevented others from exploring the interaction on their own.

Sharing was only half the problem. Without structure and extraction, design intent remained trapped in the prototype, and engineering partners had to reconstruct it before they could build.

Fig. 02 · Diagram · Where intent dies

Running code can still lose intent.

Generated prototype
  • running interaction
  • implicit responsive and behavior decisions
  • improvised code structure
No extraction path1

The team can see the result but cannot reliably recover the decisions that produced it.

Engineering reconstructs the work
  • requirements rewritten from memory
  • behavior and layout reinterpreted
  • prototype remains a demonstration
1

Generating the prototype is no longer the hard part. The value lies in making its decisions clear enough for the next agent, engineer, and production stage to use.

Diagram · the missing step is extraction, not generationThe severed arrow marks where intent is lost
A flow where a generated prototype runs, but with no path to extract its decisions the connection to engineering is severed, so engineering rebuilds requirements, behavior, and layout from memory.
Decisions03

Coaching helped designers begin working in code, but it could not keep standards consistent across people, projects, and agent sessions. I moved those standards into the workflow.

Embed the standard in the workflow

A packaged set of agent instructions—the design skill—applies our shared coding guidance whenever a designer works, while ESLint and Agent UI SDK checks catch incomplete or inconsistent output. I am teaching the same workflow to all four peer leads, so the quality bar does not depend on my presence in every session.

Fig. 03 · Diagram · Coaching to persistent standards

Coaching hardens into standards that run without me in the room.

Coaching

Hands-on guidance helps designers start, but the standard fades between people, projects, and sessions.

Persistent mechanisms
  • The design skill applies the standard; linting and SDK contracts establish readiness.
  • Skills turn decisions discovered in code into explicit inputs for spec-driven development.
  • Reusable setup and publishing steps move projects into the approved design environment.
Diagram · guidance becomes skill, linting, contracts, and deploymentCobalt marks the human coaching the mechanisms preserve
A two-station flow: hands-on coaching, which fades between sessions, hardens into persistent mechanisms — a design skill, ESLint and SDK contracts, and deployment skills — that run as part of the workflow.

Make prototypes shareable and reusable

Sharing and reuse required two different fixes. I built intent-extraction skills so engineering received explicit decisions instead of reconstructing them. I then worked with engineering partners to establish an approved publishing path that let stakeholders explore prototypes directly.

Fig. 04 · Diagram · Exploration to durable artifacts

One design-through-making path produces two durable outputs.

Designer in code

Layout, behavior, responsiveness, and component decisions discovered through making.

Extract and validate
  • design skill + shared hygiene + ESLint
  • design intent → PRD and structured specification
  • SDK contracts → stories · tests · build · screenshots
Two durable outputs1
  • structured intent engineering can build from
  • a working link partners can explore now
1

One path serves two audiences. Partners can explore the working prototype now; engineering receives the design intent needed to build it later.

Diagram · apply the standard, extract the intent, deploy through skillsCobalt marks the designer's judgment the outputs carry
A three-station flow: the designer works in code, skills extract and validate the work, and the path yields two durable outputs — structured intent engineering can build from and a working link on the design-owned deployment path.

Make the practice portable

I packaged the coaching, embedded standards, extraction, and publishing model into a playbook so other teams could adopt the practice without rebuilding the infrastructure.

Fig. 05 · Ledger · Adoption

The practice is spreading beyond the people I coach directly.

MostCopilot-licensed designers on the team
Building with agents in code.1
4peer leads · 30-person design team
Receiving coaching on Claude Code, deployment, and operating practices.2
2Home Lending teams
Used coded prototypes and the publishing infrastructure to share work with the CEO of Chase Home Lending.3
Ledger · adoption receipts, each traced to an evidence noteIn-progress work stays in progress
An adoption ledger: most Copilot-licensed designers on the team now build with agents in code, four peer leads across the 30-person design team receive coaching, and two Home Lending teams have shared coded prototypes with the CEO of Chase Home Lending.
Status04

The practice now extends beyond my team. Designers can publish working prototypes, preserve the decisions inside them, and carry the same standards into the next project.

Scope
I run the Home Lending program for using code as a design medium. My team established what is, to my knowledge, Chase's first design-owned, Bitbucket-backed AWS deployment path, and I presented the operating model to Chase's Chief Technology, Design, and Product Officers.
In motion
Most Copilot-licensed designers on the team build with agents in code, and I coach all four peer leads.
Trajectory
Two Home Lending teams used coded prototypes and the publishing infrastructure to share work with the CEO of Chase Home Lending, and a replication playbook is reaching consumer Home Lending teams.
Measuring
The team will track designer and lead adoption, published prototypes, stakeholder engagement, and how much design intent reaches production without reconstruction.
Evidence and sources

1Most Copilot-licensed designers — I have helped most Copilot-licensed designers on the team adopt agent-assisted coding.

2Four peer leads — I coach all four peer leads across the 30-person design team on Claude Code, deployment, and operating practices.

3Two Home Lending teams — Two Home Lending teams used coded prototypes and the design-owned publishing infrastructure to share interactive work with the CEO of Chase Home Lending.

Contact

How do you keep a designer's intent intact once the prototype leaves their hands? If you're building the practice that makes that happen, let's talk.

marcus@marcusjg.comLinkedIn

Next case →

Prime — Pricing Platform

The threadThis case turns one designer's prototypes into a repeatable practice; Prime is the same leadership problem at project scale, where four designers replaced a business-critical pricing system.