Spectrum: An Exploration of Design Archetypes

"UX designer" climbed from near obscurity to one of the most searched design roles between 2012 and 2015. As demand grew, the title expanded to cover adjacent disciplines: research, interface design, content strategy, and product thinking. By 2020, analysis of job postings from Apple, Amazon, Google and Facebook found the same title describing entirely different roles. Product Designer, Interaction Designer, and UI Designer had followed the same path. A study of 83 practitioners who all held the same title found competencies ranging from leading full research programs to never having conducted a single user interview. The McKinsey Design Index found more than half of 300 companies studied had no objective method for measuring design output, with unclear role definitions as a root cause.

Spectrum starts from a different premise: that the discipline you practice defines you more accurately than the title you hold.

The Concept:

"Where Do You See Yourself on This Spectrum?"

It was these messy semantics that led to the original UXD Spectrum: a static visualization built as a practical tool for my own hiring process. When interviewing design candidates, I would share it and ask one open question: where do you see yourself on this spectrum? No right answer, no wrong answer. The value was in the conversation that followed. How a candidate navigated that question, whether confidently, hesitantly, or in ways that quietly revealed a gap between how they had presented their work and where they actually placed themselves, offered a layer of signal that portfolio reviews alone rarely surface. In an organization still early in its design maturity, the same diagram became a practical instrument for raising it: a training reference that got talent acquisition partners unfamiliar with the field up to speed quickly, and a shared reference adopted by Design Ops, product managers, and other teams working alongside the design function. Walking a recruiter through the difference between a Creative Director and a Product Designer is an easier conversation with something concrete to point at, and it reduced mismatched candidates reaching the review stage considerably.

"What If It Could Tell You the Archetype?"

The response was broader than expected: requests came in from designers, hiring managers, and recruiters across the field for screenshots, shareable links, and copies. That interest raised an obvious question: what if you could pick a few disciplines and it would tell you the archetype?

The Archetype Engine:

20 Roles, Rules-Based Matching

UXD Spectrum answers that question with a rules-based matching engine. Selecting 3 to 5 disciplines triggers a scoring system that evaluates each against a weighted set of rules: primary disciplines that define the archetype, supporting disciplines that reinforce it, and exclusion rules that eliminate poor matches. The closest result from a library of 20 archetypes is returned along with two secondary suggestions. The result card surfaces the archetype name and a description written to reflect how the role actually reads in practice, not how a job listing tends to describe it.

Before a line of code was written, all 20 archetypes were defined as a structured variable collection in Figma, each carrying its title and professional description alongside the full discipline taxonomy organized across three groups.

The Stack:

Designing with the Tools That Are Redefining the Field

When the coding agent connected to the file via Figma MCP, it read that variable collection directly and used it to build the matching logic without needing to manually transcribe content or work through the data structure iteratively. The file was well structured out of habit. That it gave the agent exactly what it needed wasn't part of the plan.

The approach was model-agnostic across a handful of setups: Codex IDE, Claude Code on desktop, and Cursor configured with Codex and Claude CLI. For design engineering work that references Figma heavily, Codex IDE stood out. The Figma MCP integration combined with a coding agent, terminal sessions, and browser access all within a single window eliminates the context-switching that comes with managing individual applications separately. On a large monitor it becomes a coherent working environment with a genuinely native macOS feel, and unlike Cursor, it requires no configuration to get there.

Claude Code and Cursor supported the build at specific points, not as autocomplete but as working collaborators in component decisions, debugging, and refinement across the stack.

The technical foundation: Next.js 16, React 19, TypeScript (strict), and Tailwind CSS v4, deployed to a self-hosted Ubuntu environment via SSH with HTTPS and process management in place. The result is live at uxd.t-u-d-o-r.com.

Stepping Back:

A Field Still Writing Its Own Semantics

The semantic confusion that prompted this project hasn't resolved. If anything it has accelerated. AI Designer, Design Engineer, Prompt Designer, and AI UX Researcher are already appearing in job postings with the same inconsistency that plagued Product Designer a decade ago. New practice areas emerging faster than the vocabulary to describe them, titles absorbing adjacent work until they stop meaning one thing. The pattern is identical.

What the build revealed wasn't planned. The Figma variable structure that gave the coding agent such a clean runway wasn't set up with agentic development in mind. It was habitual, the way a practitioner with years of Figma work naturally structures a design file. The discovery that it mapped almost perfectly onto what the agent needed was exactly that, a discovery. There are no established rules for this kind of workflow yet. That's what makes it worth documenting.

The archetype library itself grew from the original static visualization, a personal attempt to map the full breadth of disciplines that sit under the Experience Design umbrella. That map runs in two directions: toward the psychological and research end on one side, and toward brand and creative on the other. A third direction was deliberately left out: the engineering end. Design Systems touches it and UI Design gestures toward it, but the full reach of front-end engineering and design-adjacent technical practice was always outside the original scope.

That boundary is already dissolving. Building this project is itself the evidence. When a designer can move from a Figma file to a deployed product through AI-assisted tooling, the line between designing and engineering stops being a line. The spectrum will need a third axis, and the work that defines it is already being done. The field is still writing its own vocabulary, and this project is built to evolve alongside the field it maps.

The result is live at uxd.t-u-d-o-r.com

Design Engineering Stack

Environments
Figma Desktop, Codex Desktop, Cursor

Connection
Figma MCP

Models
Codex, Claude Opus, Cursor Composer