AI action stacks (how the method becomes a pipeline)
Methodology first. Tools in service of the pipeline. An AI design workflow earns its keep when stacked actions follow Sense → Frame → Explore → Decide → Ship — not when a page becomes a shrine of product logos. The AI product design stack I run turns each classic stage into automated or semi-automated moves, with human judgment kept at the places that matter: which story is real, which bet to take, what to kill, what evidence means stop / revise / scale.
The map: stage → stacked actions → judgment
| Stage | Stacked AI actions | Human judgment kept |
|---|---|---|
| Research / Sense | Cluster interview notes, support tickets, NOC calls, and session transcripts into opportunity themes with quotes attached. Brand audit: sample live assets and score against pillars and voice. | Which stories are real versus loud; who to talk to next |
| Frame / Define | Draft the outcome, opportunity tree, and riskiest-assumption map from the clusters. Draft positioning one-liner, messaging pillars, tone-by-context. Tree-test / card-sort synthesis into an IA draft when the context is institutional. | Choose the bet; write the decision rule (stop / revise / scale) |
| Explore / Develop | Text outline (sitemap, section briefs, state list, agent-turn script) → generative wireframes → keep two or three. World and casting boards; motion tests; copy variants inside voice rules. | Edit hard: kill most of it; keep what answers the brief |
| Iterate / Critique | Rebuild the survivor as a coded prototype on real components and tokens. Scripted agent evals (failure scripts, voice rubric). Heuristic pre-pass, then task tests; same-day synthesis when possible. Replay real incidents or data through prototypes. | Severity, trade-offs, accessibility, taste |
| Decide / Ship / Learn | Token PRs with contrast checks. Visual regression. Ship behind flags with instrumentation. The bet sits next to the ticket. CMS / DAM / templates publish from one source. Next bet brief drafted from results. | What moved, what didn’t, what to bet next |
That’s the agentic UX workflow in one table: machines accelerate drafts and checks; people own judgment, ethics, and the quality bar.
Text → layout → code (and the code-first path)
Exploration often starts as text. I write the flow as an agent-turn script, a state list, or a section outline with a one-line brief per block. Generative wireframing turns that outline into rough layouts — structure and messaging get argued about before anyone polishes a pixel. I keep two or three survivors and rebuild them in Cursor against production components. Through Figma’s MCP server and Code Connect, the agent writes with real components and tokens instead of guessing. That’s Figma to code AI done as a loop, not a one-way export.
Sometimes the stronger path is code-first. When the question is behavior — streamed plans, chunk-by-chunk diffs, stop and interrupt, a missing-constraint ask, human handoff — I sketch the interaction in the real React components first, then sync back into Figma through the MCP so the file stays the lasting record for documentation, posterity, and any round-trip with Figma-first work. Cognichip runs that path today as the first designer owning product and brand end to end: Artificial Chip Intelligence work where agentic moments of failure and uncertainty are the design, not an afterthought. On older projects I describe the same pipeline as “today I’d…” — modern bridge, not invented history.
Layout first
- Agent-turn script, state list, or section outline
- Generative layouts, then keep two or three
- Rebuild the survivor in Cursor
Code first
- When the question is behavior
- Sketch in the real React components
- Sync back through the MCP for posterity
Figma stays the lasting record. Tokens in JSON feed CSS and Figma variables. Storybook and Chromatic, then a flagged ship, then the next bet.
Agentic UX specifics
Agentic products need interaction models for uncertainty, not only for the happy path. The moments that matter: the agent shows its plan before it acts; RTL and constraint changes land as a diff you accept or reject chunk by chunk; a “show its work” trace collapses to one line; stop is always one key away; when a constraint is missing, the copilot asks one specific question instead of inventing a default; it hands off to a human when it’s out of its depth. Critique is automated before it’s personal — scripted failure cases and a voice-and-honesty rubric, then engineers. Handle follows the same idea on email-to-task: suggestion chip, one-motion accept, edit in place, undo, quiet below a confidence threshold. Agentic UX only works when the suggestion is right often enough to trust and easy to correct when it isn’t.
Tokens and governance
A design tokens pipeline keeps brand and product from forking. JSON is the source of truth (reference → semantic → component), then Style Dictionary into CSS and Figma variables. Spacing and color changes ship as reviewable diffs. Contrast checks in CI, Storybook for empty/error/loading/low-confidence states, Chromatic for visual regression, feature flags and product analytics for the learn half of ship. For brand systems, DAM and CMS inheritance mean a campaign and a product empty state can pull from the same pillars and tokens.
Brand as a generation system
When brand leads, the same stack thinking applies: positioning and evidence hub → voice-guided copy variants → tokenized kits → generative casting and stills → motion and campaign kits → CMS and email inheritance → audit against pillars. Prompt libraries and graded motion stay under human direction and review thresholds. The AI brand generation system is governance with speed, not autopilot.
Per-page proof (index, not full stacks)
| Move | Cases that demonstrate it |
|---|---|
| Clusters → opportunity → bet | Cognichip, Plume dashboards, Boxbee, UI/UF |
| Outline → generative layouts → coded survivor | Cognichip, Handle, Meow, Solution-Soft, UCSF |
| Code-first → Figma sync | Cognichip (present); elsewhere as “today I’d…” |
| Agent evals / honesty rubric | Cognichip, Handle |
| Incident / telemetry replay | Plume dashboards |
| Tokens + Storybook / Chromatic | Cognichip, Handle, Plume product |
| Brand OS → generation + DAM | Plume brand, Full Node, G-Technology / Touro |
Case pages carry the full stacks. This page is the map of how the method becomes a pipeline.