Skip to content

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

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
Code prototype — decisions carried
Intent-rich code prototypecarries intent
layout and component structure
interaction and responsive behavior
intent ready for the build specification
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

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
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

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.

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

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.
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

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.

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

The practice is spreading beyond the people I coach directly.

MostCopilot-licensed designers on the team
Building with agents in code.
4peer leads, 30-person design team
Receiving coaching on Claude Code, deployment, and operating practices.
2Home Lending teams
Used coded prototypes and the publishing infrastructure to share work with the CEO of Chase Home Lending.
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.
Looking back04

The practice extends beyond my team now. Most Copilot-licensed designers build with agents in code, I coach all four peer leads, and two Home Lending teams have used coded prototypes and the design-owned publishing path to share work with the CEO of Chase Home Lending. A replication playbook is reaching the consumer Home Lending teams.

What I would do differently: build the deployment path before teaching the tools. Designers adopted agent-assisted coding quickly; what slowed them was having nowhere to put the result. The infrastructure was the enablement, and I would lead with it.