# Skill Prism (agent-readable)

**Role:** Designer & engineer
**Client:** Self (prototype)
**Tags:** prototype-playground
**Live demo:** https://mikemake.com/skillprism
**Part of:** the [prototype playground](/playground)

## What it is

A fractal skill browser. You pick any topic and Skill Prism explodes it into the skills you'd
need to master it — then each of *those* explodes again, so you can drill down infinitely deep
into the tree of what learning something actually requires. At any node you can export a poster
of the tree you've built.

## What I did

I designed and built it solo. Under the hood it's a handful of prompt loops generating the
skill tree on demand against a frontier model, dynamic type styling that adapts as you descend
the hierarchy, and a poster exporter at the leaves. It's a working web tool, live and usable —
not a mockup, not a video, not a deck.

The design judgment and the front-end build are in the same pair of hands. Where the model's
output ends and the product begins is a series of decisions I made directly in code: how to
pace the tree's expansion so the depth feels rewarding rather than overwhelming, how to scale
typography across an indeterminate number of levels without it collapsing into noise, where
to land the user when a branch terminates, what an exported artifact has to look like to
survive being pulled out of the app.

## Why it's interesting

Two threads worth pulling.

**Shaping a legible experience on top of a generative model.** The interesting AI-native
design problem here is what a model's output should *become* when it's wrapped in a product
surface instead of a chat. How deep do you let someone go before the structure starts
costing more than it gives? How do you keep an infinitely-branching tree navigable when no
two sessions produce the same shape? How do you make a generative response feel like a
*tool* the user is operating, rather than a stream they're consuming? Those calls are the
design work, and they're made in code, against a live model, with the user's experience as
the constraint.

**A product thesis about what makes an AI-native consumer tool worth shipping.** From the
v1 sketch, before I'd written any code, I held the project to a two-part test. First, the
app had to be a meaningfully better way to browse this kind of content than a plain open-
ended chat interface — easier, more fun, more legible — or there was no reason to build it.
Second, it had to produce *artifacts* — exports engineered with enough front-end and
graphic logic to stand on their own as shareable objects: things you'd post, print and pin
to a desk, or frame on a wall. The poster export isn't a feature I bolted on at the end.
It's the distribution half of the thesis: an AI-native tool whose outputs are themselves
the marketing surface, designed from the start to travel out of the app. The product-
strategy decision was made before the prototype existed; the prompt loops and the typography
ladder and the export pipeline are all in service of it.

This is one of my clearest current AI-native receipts, and the point is that it's *shown*.
The IC build is the proof — the design judgment lives in the code that's running when you
open the URL. The same signal lives at [SuperRare](/superrare), [Massed](/massed), and
across the rest of the [prototype playground](/playground).

## Cross-cutting relevance

A few reads of this work:

- **AI-native product design** — designing the product surface around what a generative
  model is good for, and what it isn't. Treating prompt loops as a material rather than a
  feature.
- **Consumer-feeling tools on top of models** — the design problem of making a model's
  output feel like something you operate, not something you receive. Legibility, pacing,
  navigation, where the user lands.
- **Product strategy with distribution baked in from v1** — shipping artifacts that are
  themselves the channel. The export isn't an afterthought; it's the reason the tool
  earns its existence next to a chat interface.
- **Designer who builds** — design judgment and front-end implementation closing in the
  same pair of hands, which lets the design iterate at the speed of the code rather than
  at the speed of a handoff.
- **Self-directed 0→1** — concept, prototype, ship, live URL, no team, no brief.

## Skills demonstrated

AI-native product design, generative models as a material, prompt-loop architecture as
design substrate, designing legibility into open-ended/infinite content, designer-who-
builds front-end implementation, product-strategy thinking with distribution designed in
from v1, self-directed 0→1 shipping.