Skip to content

The design system built forAI-Human collaboration

While modern teams explore how they might build AI-enabled design systems, I built something more.

DesignerPunk is an ecosystem that pairs a production-ready design system with built-in intelligence layers that guide AI agents to deliver craft at scale.

1
Human
217Primitive tokens
193Semantic tokens
9Component families
34Foundation components
210Contracts
8AI Agents
3MCP servers
-82%Context load
300+Test suites
8k+Governance tests

Why build this system?

When I first tried to build something serious with AI, it became clear: the only way to build something sustainable is to build on something sustainable: a design system.

Challenge

AI enables creation at hilarious speed, but the outcomes of each prompt can be wildly unpredictable — and an agent's motivation to deliver results at any cost can fracture a healthy design and code environment at any time.

On websites, we call this "not ideal"; in Slack channels, we use more four-letter words.

Insight & Thesis

Design systems are shared working agreements between Humans and AI Agents.

  1. Institutionalized context must persist across sessions
  2. Every decision must be queryable
  3. Every decision must be validatable

Goals

  1. Build a production-grade design system fully optimized for agent-driven development.
  2. Design for plug-and-play development in a 0-1 product environment — enable small teams to work big.
  3. Automate workflows for AI-centric collaboration and development processes with humans.
$space-1
--ds-pad-sm
@color-blue-1
%radius-pill
--dp-space-min
$clr-primary
_fontSize_h1
--icon-lg
$color-dp-yellow5
@media-break-1
%btn-radius
--dp-rad-lg
$lh-body
@gutter-default
--ds-shadow-1
_motion_fast

What is this ecosystem?

A mathematical token system that generates native code for iOS, Android, and Web from a single unitless source.

  • Tokens carry their own mathematical formulas, validated at build time
  • Platform units applied only at final generation — one source, three native outputs

Governance infrastructure of MCP servers and specialized agents for accurate documentation and consistent implementation.

  • Rules served via MCP at the point of decision — 82% context reduction
  • 8 domain-specialized agents with explicit boundaries and escalation paths

A component architecture that governs cross-platform development through behavioral contracts and a shared API.

  • Structured behavioral contracts — inheritable, queryable, with explicit exclusions
  • True native implementations per platform, governed by shared contracts

How was this system built?

Every feature starts as a spec. Every spec has requirements, design, and tasks that are formalized and reviewed before a line of code is written. This is how one person maintains consistency in agent-driven development environments.

Beyond the system itself, the most valuable outcome was developing a workflow that makes agent output predictable through the inferable architecture and collaborative systems I architected.

Once the foundations of tokens, components, and frameworks were established, I expanded the scope to explore how I might train agents to build with the system. These explorations included the addition of Google's A2UI specification for agents to build UI for their own native widgets.

Most big-box design systems drive a specific aesthetic. DesignerPunk is built to power yours.

Who is this system built for?

Headcount isn't destiny.

DesignerPunk gives small teams the infrastructure to compete with their largest competition. By making Human-AI collaboration the architecture itself, your team ships quality and scale at the start of the product development journey.

Accessibility from Day One

WCAG 2.1 AA built into every component. Minimize risk and enable +20% of customers you would otherwise exclude.

Three platforms, one source

Web, iOS, and Android tokens and components generated from a single architecture as you need them. Scales to new platforms at your own demand.

Consistency without the overhead

Mathematical token foundations and behavioral contracts maintain quality across every surface, optimized for AI agent development.

Governance that enforces itself

Rules served via MCP at the point of decision. Process without overhead, documentation without hunting.

AI that ships quality

Agents guided by queryable architecture and validatable contracts — structured knowledge, not guesswork.

Code-Design sync

Tokens flow from code to canvas-based tools like Figma, and back to code. One change propagates everywhere.

A small team builds great things. DesignerPunk makes sure they scale.

Humans + Agents of this system

Human

Peter Michaels Allen

Product UX & Systems Architect + Design Engineer

Notable employers and clients

Reddit Venmo + PayPal eHealth Redfin Expensify Electronic Arts Federal Deposit Insurance Corporation Comcast Raymond James
Career timeline data
EmployerPeriodDesign %Engineering %
Electronic ArtsAug – Oct 201050%50%
Magi.comFeb 2011 – Mar 2012100%0%
eHealthApr 2013 – Mar 201599%1%
FanTalkMay 2015 – Feb 201692%8%
RedditFeb 2017 – Jun 2019100%0%
Venmo / PayPalJul 2019 – Apr 2024100%0%
DesignerPunk2025 – Present45%55%
Design
Engineering

Agents

Design system agents

  • Ada

    Rosetta System

    Token creation, management, and documentation

  • Lina

    Stemma System

    Component and contract creation, management, and documentation

  • Thurgood

    Civitas System

    Auditing, governance, and spec management

Product system agents

  • Leonardo

    Product planning and tech coordinator

  • Stacy

    Product governance, quality assurance, and applied learnings

Product implementation agents

  • Sparky

    Web implementation lead

  • Kenya

    iOS implementation lead

  • Data

    Android implementation lead

Special thanks to:

  • Donnie D'Amato
  • Amy Lam
  • John Marshall
  • Dimitri Otero
  • Nicole Fu
  • Lauren LoPrete
  • Paul Bakaus & Impeccable.style
  • TJ Pitre & Console MCP
  • Joshua Butner
  • Design System Wednesday!
  • Tracy Weiss
  • The haters and nonbelievers
  • Margaret Allen
  • Virginia Johnstone (Hi, mom!)
  • Kinsley & Colton Kirwan
  • Lindsay MacKenzie

Let's build together

For half my career, I've built and managed design systems leveraging my experience in design, research, product management, and front-end development to deliver solutions for Humans — and now AI Agents.

I built this design system with AI agents as my engineering team and primary consumer to meet the needs of this new AI era.

While DesignerPunk's tooling and architecture was built for the purposes of 0-1 to scaffold new products, many of the principles, strategies, and methods are entirely transferable. Imagine what we could build with yours.

If you're interested in discussing more, please reach out to me via LinkedIn.