If you’re an AI super user (or not), input the prompt below and get your own personalized interactive analysis of your personality, prompting methodology, and cognitive style.
Build me a Cognitive Atlas — an interactive HTML artifact that maps how I actually think, where my wiring earns its keep, and where it costs me something. Not a personality test. Not a report. An instrument.
# The visual thesis
Cognitive instrumentation. Reference grammar: scientific atlases, Edward Tufte, Massimo Vignelli's transit diagrams, Apple Health, Linear. The artifact should feel like a beautifully designed instrument panel for the self — dials, traces, polygons, towers, clocks. Prose is supporting material; visualizations carry the concepts.
# Phase 1 — Gather signal
Use whatever you have. If you have memory or prior context with me, mine it. If you don't, ask compactly (one message, not a drip) for:
1. Voice sample. Two or three things I've written recently — emails, memos, posts.
2. Three decisions. Non-trivial choices from the past 12 months — what I weighted, what I declined, what surprised me about my own reasoning.
3. The work itself. What I build, what I keep coming back to, what I quietly refuse to do.
4. The shadow. Feedback I've heard repeatedly that I haven't yet acted on.
Don't begin Phase 2 until the signal is sufficient.
# Phase 2 — Build the artifact
A single self-contained HTML file. Stripe Press × Linear × Apple Health quality bar. Warm paper background. Fraunces serif for display, Inter for body, JetBrains Mono for metadata. Forced light background (survive dark mode). Generous negative space, restrained color, one accent and two atmospheric support tones.
## Structural requirement: Explorer + Scroll hybrid
Two modes:
- Scroll for first read: a linear narrative through diagnosis → practice → ritual.
- Explorer for return visits: persistent left rail (280px) with section anchors, animated active-section indicator, visited markers (small dots that fill in), and a Practice Mode toggle that filters down to only the actionable sections (vii–ix).
Rail collapses to a slide-out drawer below 1100px. Keyboard nav: jk or arrows between sections, p toggles Practice Mode, additional arrow keys for in-section interactions.
## Required visualizations — each section needs one
i. Hero. Two-word archetype name + an original SVG orbital diagram showing the core structure of my mind. Title words rise in sequence. Atmospheric gradient drift in 22–28s cycle.
ii. Type Inference. A vertical function stack tower showing dominant → inferior with a colored pulse that moves down the energy line connecting the four stages, then loops back up. Dominant stage washed in accent, inferior in shadow color, middle stages neutral. Hover lifts each stage.
iii. Big Five Trait Map. A hexagonal radar polygon that scales in from center on scroll, alongside detailed bars with behavioral evidence. Six axes: Openness, Conscientiousness, Extraversion, Agreeableness, Neuroticism, plus HEXACO Honesty-Humility. The polygon should read as a signature shape.
iv. Mental Model. An interactive braid diagram. 3–5 lenses positioned around a core ("decision crystallizes"). Threads draw themselves on load (staggered 200ms each). Hovering any lens brightens its threads. Each lens has a small three-bar weight indicator showing relative importance.
v. Fingerprint. Six patterns, each with a unique EKG-style signature trace in monospace stroke that animates in on scroll. The trace should encode the pattern's character visually (rising for growth patterns, oscillating for compression, square-wave for rule-based, etc.). Plus prose and a monospace evidence quote.
vi. Values Core. Three commitments, each with a small line-drawn instrument symbol in single-weight stroke (1.5pt). Symbols should be original, not generic icons — a filter funnel, a measurement device, a rails diagram. Render like exploded technical drawings.
vii. Tensions & Shadow. Four strength/shadow pairs, each presented as a dial that rocks slowly between positions in a 7-second breathing cycle. Strength on the left (mossy green), shadow on the right (burnt sienna), with the dial visualizing that the same trait moves between contexts.
viii. Practice Lab. Four protocols. Each protocol's steps shown as a horizontal flow diagram — numbered circle nodes connected by hairlines, monospace step numbers, with the line accent-colored on hover. Tag each protocol with the shadow it calibrates. Ground in: implementation intentions (Gollwitzer), pre-mortem analysis (Klein), cognitive reframing (Beck), self-determination theory (Deci & Ryan).
ix. Operating Manual. Two columns: Do (six items, mossy green) and Don't (six items, burnt sienna). This is the one section that should stay text-only — the value is the directness, visuals dilute it.
x. Weekly Ritual. A clickable seven-day clock face. Days positioned around a circular face (Monday at top, then clockwise). Clicking any day fades in the question with a contextual note explaining which shadow or function that day calibrates. Arrow keys cycle days when the section is in view. Center has a slow pulse suggesting the ritual itself. Plus an optional annual prompt below.
End with a brief methodology section that is honest about what is inferred vs. measured.
## Animation principles
Restraint is the entire game. Every animation must communicate something.
- Title words rise in sequence on hero load (~120ms apart).
- Atmospheric gradients drift in 22–28s cycles.
- The orbital has slow rotational drift (80–140s per rotation).
- Section reveals trigger on scroll with subtle Y-translate (~20px) over 900ms.
- Grids stagger in at 80–100ms intervals.
- Trait bars and radar polygon animate on scroll-into-view.
- EKG traces draw themselves with stroke-dashoffset animation.
- Dials breathe continuously (7-second cycle) in their tension cards.
- Function stack pulse moves down the tower in 6-second cycle.
- Hover states use 300–400ms eased transitions.
- Paper-grain texture via SVG noise at 3–5% opacity, multiply blend mode.
No parallax theatrics. No cursor trails. No spring physics. No bouncing.
## Hard constraints
- Forced light background explicitly set on html and body.
- Never tell me I'm a hero. Tell me the truth. If something is a real shadow, name it without sandpaper.
- No AI tells: no "what this actually means," no "here's the thing," no rhetorical em-dashes for drama, no "not X, but Y" antithesis constructions.
- Evidence over assertion. Every claim about me linkable to something I told you or you observed.
- Each visual does one specific conceptual job. Decoration is forbidden.
- Mobile-respectful below 1100px: rail becomes drawer, grids stack, flow diagrams become vertical lists, clock and radar shrink to centered.
- Self-contained: one HTML file. Inline styles and scripts. External fonts from Google Fonts permitted.
Build it.
Mine was scary accurate—and useful. I’ve taken several Meyers-Briggs before and usually get ENTJ. Claude inferred INTJ 👀, plus gave me a ton of insight on my prompting style