AI Agent Workflow
A Claude Code–based VS Code workflow that lets PayPal.com designers prototype with real React components using natural language, without needing to write React.
| Prop | Value |
|---|---|
| role | Design Lead |
| year | 2026 |
| team | 1 designer · 1 engineer |
| status | beta |
| version | 1.0.0 |
Designers on the PayPal.com team needed to validate ideas at production fidelity without waiting on engineering bandwidth or learning React. The brief was a workflow — actual components from the live library, composed by designers using natural language.
The constraint was safety. The repo had to guard against designers shipping untested code to production. Outputs were prototyping-only by default — read-only access to the component library, and nothing reached production without an engineer.
- iReal components, not mocks. The agent pulls from the same React library production uses. The fidelity is structural, not visual — actual behavior, props, and constraints.TradeoffReal components surface real edge cases early. Designers sometimes hit component limitations that a Figma mock would have papered over. That friction is a feature.
- iiNatural language as the interface. Designers describe what they need; the agent handles prop configuration, component selection, and composition. They don't need to know JSX.TradeoffOutput quality is proportional to prompt quality. Workshops spent a lot of time on prompt literacy before the workflow delivered consistent results.
- iiiCustom skills as guardrails. A skill layer encodes PayPal.com DS conventions — the agent knows which components are stable, how to compose them, and what to avoid. Designers can't accidentally break the system's rules.TradeoffThe skills layer requires ongoing maintenance. As the component library evolves, the skills evolve with it — it's not a one-time setup.
- ivWorkshops as the adoption path. The workflow shipped with a structured training program. Access without onboarding produced inconsistent results; access after a workshop produced designers who iterated independently.TradeoffWorkshop-gated rollout is slower than open access. The adoption curve was steeper at the start but much more durable once designers got through it.
The workflow is still early. We're expanding it deliberately: increasing component coverage, tightening guardrails, and learning where designers need more support.
The goal is a dependable path from a designer-built prototype to production-ready component work, with engineering validation preserved where it matters. Higher fidelity only helps if the system remains safe to scale.