AI Design Workflow

"With great power comes great responsibility." The line first appeared in the final panel of Marvel's Amazing Fantasy #15 (1962), written by Stan Lee. Later comics and films attributed it to Uncle Ben. I keep coming back to it when I think about AI in design. The tools got powerful fast, and someone still has to be accountable for what ships.

I did not set out to write a case study about three products. I set out to document how my design workflow changed while I was working on them: a multi-agent refactoring workflow for code assessment and version upgrades, a storage tiering experience for automated reclaim and analytics-driven policy tuning, and a platform information architecture revamp that reshaped legacy navigation and content, not just a rebrand.

Different agentic tools per project, but the same split throughout: I shaped Figma and the markdown foundations; agents wrote the shipped UI in the two build-and-verify prototypes. What follows is that ownership model (direction, context, judgment, acceptance), not captured UI implementations. Wayfinding and orchestration: I shape the loop. Agents execute inside it.

I was on parental leave for a month when we welcomed a newborn designer into the family. There was no backfill designer. While I was away, one of my teams started using AI in their development lifecycle and handled UX projects on their own. They built the multi-agent refactoring workflow without me and landed an MVP before I got back.

The shock was not about being replaced. I never thought anyone would treat AI as a UX designer substitute or push me out. It was the velocity. They had shipped something real in a month, and I regretted missing the start. That mix of excitement and regret is what pushed me to dig into AI in my own design workflow and figure out how to contribute directly in a product team's GitHub repository.

Engineers were prototyping in Claude. Specs lived in GitHub repos as markdown, not in Google Docs or Jira tickets. Coded prototypes were showing up in the early stages of design conversations, not just at the end as a handoff surprise. Final deliverables now included running prototypes alongside Figma artboards and Zeplin exports.

Design ownership was never a solo activity. PMs and engineers were always in the room. AI did not invent collaboration. It densified it. More intersections across responsibilities. More shared tools. Specs, DOM paths, Figma URLs, snapshot matrices, CSV handoffs from spec agents: a new common language we could all read and steer.

Classic design thinking is not dead. I still reference it. What changed is where execution happens and who can reach for it.

I describe my role now as wayfinding and orchestration, not task execution.

Agents execute. I set direction: which layout semantics to keep, which anti-patterns to reject, when a coded prototype is good enough to communicate intent, when Figma is still canonical. I treat agents and skills like digitized design peers with a vast capability surface. I still orchestrate the loop the same way we talk about human-in-the-loop for AI products. The human stays in the loop on purpose.

There is no org-wide design.md or machine-readable design guidance for LLMs at my organization yet. Until that exists, designer presence in the process is load-bearing. When it does exist, responsibilities will shift again. That is a future state. Today I am still the one connecting dots.

Sometimes I push refined designs to agents and let them implement. Sometimes work flows the other way. It is a human-machine collaborative activity. We shape artifacts and documentation together, but it should always be done in a human-first way.

Across the three projects, three patterns emerged. Same human steering. Different AI surface per job.

The platform work split across two tracks on purpose. Spec-agent work supported IA unification across three legacy product surfaces. Coding-agent work supported a separate storage tiering monitoring feature (charts, fixtures, layout exploration). The IA revamp did not feed the tiering PRD. Same product world, unrelated initiatives.

Shared habits across all three:

• I wrote foundations before build: PRDs, journey docs, v1/v2 plans, BUILD-PLAN phases, stream scripts
• Zero hand-written code in the coded prototypes; agents generated the UI from the design system repo and documentation
• I pushed back when outputs were wrong
• I used browser-inspector DOM paths to point agents at specific UI elements, plus screenshots and Figma URLs, as steering input in build-and-verify loops
• I asked an agent to document prototype decisions in markdown (Prototype-design-decision.md): interactions, logic, design decisions, information architecture refinements, not only layout semantics

I would not outsource every piece of the design process. These stay with me:

Judgment calls. I am the defender and supervisor, catching slop and hallucinations before they ship. In the IA revamp I rejected a dev-suggested waterfall chart for discrete operational events and pushed for a vertical expandable table stream. I challenged an AI proposal for code snippets and steered toward table plus accordion instead.

Scope and semantics. In the tiering feature I corrected an agent that did not fully hide drawer controls for layout 2. I renamed layout options ("Split cards," "Dedicated page"), swapped a dropdown for a Segmented control, and changed default URL semantics. In the refactoring workflow I fixed tooltip and properties layout issues by feeding browser-inspector DOM paths and screenshots back into the coding agent.

Human QA. Visual, interaction, and logic audit stays human until the interfaces we build are for humans to use. Spec agents ran V1→V2 mockup audits and caught KPI count mismatches and wrong telemetry values. In build-and-verify projects I accepted designs through live prototypes. In the tiering feature I built a Playwright snapshot matrix to capture layout and drawer combinations systematically.

Patterns, UX laws, and user needs. Proximity, anti-patterns, empathy with pain points: I still see these as designer guardianship. Agents suggest. I decide what fits.

Design process (all projects): Designed from the ground up in Figma. Wrote foundations myself: PRDs, research synthesis, wireframes, journey docs, phased build plans. Co-wrote implementation plans with coding agents; I locked scope and v1/v2 boundaries.

Code authorship (build projects): Zero hand-written lines. Agents generated all shipped prototype UI. I verified through running localhost builds, DOM-path steering, screenshots, and (in the tiering feature) automated snapshot captures.

Design system: Reused team components when they existed (team ui-library in the refactoring workflow, Ant Design plus Figma tokens in the tiering feature). Built local composites for gaps. Ran consistency audits in both Figma (spec agents: iconography, Highlights KPI pattern) and live prototypes (coding agents: Properties standardisation).

AI in the loop: Coding agents for build-and-verify and data-viz prototyping. Spec agents with deep research for think-and-spec work on the IA revamp. I had ups and downs. Sometimes I was not super-critical about every output. The fix was not nitpicking harder. It was giving the right context.

My biggest learning across these projects: front-load everything the agent needs to connect dots.

At project setup I gather Jira tickets, existing design artifacts, dropped or omitted past ideas, related PRDs, past research, and synthesized knowledge. Those are the pillars. When the foundations are in the repo and the agent has read them, I saw less slop and fewer hallucinations during execution.

AI also pushed my workflow toward something more PM-ish and engineer-ish: defining milestones, cutting scope, managing the design work like a real product development artifact. Plan-first became default (BUILD-PLAN phases, v1/v2 locks, stream scripts), not ad hoc prompts in a chat thread.

One regret: I wish I had known Playwright earlier. I came across it late in the tiering feature. It would have made the evolution of my designs more transparent and given me a written, visual log of each layout and drawer combination alongside the decision docs I started asking agents to maintain.

These are not three mini case studies. They are evidence for the workflow above.

Refactoring workflow tested whether I could go from Figma frames to a running React prototype against an existing design system without writing code. Journey doc, v1/v2 plans, stream script, DS gap audit: mine. Implementation: agent, steered by Figma links and live QA.

Storage tiering tested data-heavy prototyping: ECharts trends, fixture-driven edge cases, layout exploration across split cards and a dedicated observability page. I wrote the design PRD and BUILD-PLAN. The agent built Ant Design plus ECharts. I corrected scope misses and maintained Prototype-design-decision.md for interactions, logic, design decisions, information architecture refinements, and layout semantics as the prototype evolved.

Platform IA revamp tested AI as strategic design partner, not code generator: domain translation from raw API schemas into a structured event taxonomy, design system governance across three micro-frontends, V1→V2 visual QA, and CSV specs for engineering handoff.