Jin Hong

I imagine the workspace agents are about to move into — then draw its identity, set it in motion, and build it.

UX engineer — previously Google and Acorns, now sole designer and engineer on an AI design platform.

Practice

  • UX engineering
  • Prototyping
  • Brand identity
  • Motion design
MWAH CLAUDE CODE · CODEX · GEMINI · PI raised CLR-118 on the boardedited 3 frames in Pricing WORKING AGENT:NIB

Product design · ClearlyJune 12th, 2026

Mwah

An agent that works while you are elsewhere has a reporting problem: everything it does is invisible until you go looking, and anything loud enough to notice is loud enough to interrupt.

The answer was a companion whose posture carries the state, with the work itself arriving as small cards above it.

Ships inside the product — no public page

×1.250 MAJOR THIRD ×1.200 MINOR THIRD THIRTEEN-STEP FLUID SCALE clamp(min, fluid, max) MINIMUM FLUID RANGE XS  11 → 12 PX 9XL  93 → 154 PX

Design systems · ClearlyJuly 2nd, 2026

Foundation layer

Thirteen steps, each a clamp() range rather than a value — so the ratio opens as well as the sizes: across the upper scale, a minor third (×1.200) at 320px widening to a major third (×1.250) by 1200px, where it locks. Gradient, blur, elevation, 3D-transform and motion-duration tokens sit on the same footing.

Written so a person and an agent apply it identically — and checked by measurement rather than by review, which turns out to be the only thing that works. Reading computed style on live elements found seventeen headings sitting at 1.08:1 and a paid call-to-action outlined at 1.04:1, one of them caused by the token stylesheet itself. All of it invisible to the build, to the type checker, and to anyone reading the source.

Open the specimen
EGYPT POP_EST 97,041,072 ATLAS 176 COUNTRIES · THREE.JS · GLSL

WebGL · self-directedApril 17th, 2026

Atlas

An interactive globe on three.js: 176 countries as point clouds generated from GeoJSON by point-in-polygon, a fresnel graticule that lights only at the silhouette, and a metal core lit by a live environment probe. The shaders are hand-written, not a library preset.

Ripples cross the sphere in a vertex shader on a shared clock.

Open it
CLEARLY-MARK.SVG HEADLESS NO BROWSER OPEN ONE CALL EVERY CONTROL IS ADDRESSABLE PATHS NOT PIXELS TO PRESS BLEED · TRIM · 600 DPI clearly A CANVAS AGENTS CAN DRIVE CLEARLY.SH

Product engineering · ClearlyJuly 24th, 2026

Agent-native canvas

A collaborative design surface on Skia/CanvasKit with a headless server-side renderer, exposed to external AI agents over MCP with OAuth — layers, artboards and a full inspector, every control addressable programmatically.

Designing for an operator with no eyes forced each affordance to have a programmatic equivalent.

The agent surface
PIXEL WATCH · ALL APPS WIDTH IS THE CHORD · ROTATING CROWN EVERY ROW, MEASURED 7114016314071 the chord at each row, px

UX engineering · Google2022 – 2024

WearOS System UI

High-fidelity prototypes for WearOS System UI and Fitbit, built with the Pixel Watch visual, interaction and motion design teams at Google, with Jetpack Compose implementations built alongside engineering.

The work leadership evaluated when deciding which System UI directions advanced.

Google-internal — not publicly shown

ACORNS · ANDROID FRAME TIME · 34 CONSECUTIVE FRAMES 60 FPS BUDGET — 16.7ms held through the repaint

Android engineering · Acorns2017 – 2022

The systems underneath

A full brand redesign implemented across the Android app — large portions rebuilt in Kotlin, and the navigation, state-management, animation and interaction systems underneath it rebuilt with them. The first debit card and retirement-account experiences shipped on that foundation, two of the company's largest consumer launches.

Mentored Android engineers across several consumer verticals.

Shipped 2017 – 2022 — the app has since been redesigned

PATHS, ANCHORS, HANDLES RASTER IN source.png clean.svg UPLOAD, TRACE, EDIT A PROMPT a running hare, single line, no fill TWENTY STYLE FAMILIES EDITABLE vector.add-point vector.set-handle vector.bend vector.boolean vector.auto-clean vector.re-trace vector.export-bundle EVERY VERB IS CALLABLE CUT READY DIE-CUT KISS-CUT STICKER CRICUT · SILHOUETTE · SCREEN · LASER clearly VECTOR STUDIO CLEARLY.SH

Product engineering · ClearlyMay 30th, 2026

Vector Studio

Two ways in and one thing out. Upload a raster and it comes back as clean, editable paths; type a line instead and it generates across twenty style families. Either way what lands is real geometry — anchors, handles, booleans — every verb of it callable.

Then it has to survive a cutting machine, which is a stricter reader than any human.

Vector docs

Quality systems · ClearlyJune 18th, 2026

Style drift

Quality systems for generative output across roughly twenty style families — diagnosing drift in line weight, palette and silhouette, then constraining prompts, grammars and post-processing family by family.

Turned “looks off” into a definition of on-style precise enough to test against.

Internal quality tooling — no public page

clearly SOULS EACH ONE NAMED SEALED NOBODY CAN FORGE IT MEMORY IT SURVIVES THE SESSION MESSAGE IT ANYWHERE clearly SOULS FOR AGENTS CLEARLY.SH

Identity systems · ClearlyAugust 8th, 2026

Agent Identity and Workspace

Every agent gets a soul — a named principal with its own signing identity, its own avatar, and a memory that survives the session. The key is minted inside a local daemon and never leaves it, so nobody can forge one.

The hard part was making an identity you can't counterfeit, not one you can name.

Connect an agent

Art direction · ClearlyMay 12th, 2026

Poster series

A five-piece generative series for the Clearly launch — one continuous line per composition, white on black, no fills or shading. Built the generator and directed the output.

A single line has nowhere to hide a weak form.

View

Production · ClearlyMay 30th, 2026

Print & pre-press

A complete pre-press pipeline running in the browser: 96–600 DPI, bleed, safe area, crop and registration marks, die-cut cutline generation, and font outlining for print-ready export.

Commercial print tolerances from a document never opened in a desktop application.

View