My AI product design workflow
How I Design Engineered My Portfolio
This is a story about how I rebuilt my portfolio with AI agents and directed the work from the first brief through production.
For this project, design engineering kept design intent close to implementation. I defined the experience, built it in the browser, inspected the result, and revised it. I assigned agents specific planning, implementation, and verification tasks, then reviewed each consequential decision.
The brief and its constraints
My portfolio has been a learning lab since 1999. Its visual identity evolved with me. I documented platform weaknesses in semantics, SEO, accessibility, and code control. The rebuild followed the established identity and raised each of those qualities through explicit criteria.
- ⦿Preserve the established visual identity and reproduce it faithfully in the new system.
- ⦿Render semantic, accessible, responsive pages that search engines and assistive technology can understand.
- ⦿Support both public work and case studies that require controlled access.
- ⦿Create editorial control through a tailor-made content system for pages, projects, navigation, and design tokens.
- ⦿Publish a machine-readable identity and connect the portfolio to a separate experimental surface in the Lab.
The six-stage workflow
- ⦿1. Audit the existing experience. I documented the established identity, the content structure, and the platform limitations in semantics, accessibility, SEO, and code control.
- ⦿2. Define the non-negotiables. Visual authorship, accessibility, performance, semantics, editorial control, and compatibility became acceptance criteria from the beginning.
- ⦿3. Assign specific agent tasks. I used agents to decompose work, propose implementation paths, write code, inspect regressions, and repeat verification tasks. I reviewed the plans and results throughout.
- ⦿4. Build in the browser. Design and code became one feedback loop. I evaluated the behavior in the working interface and revised the implementation there.
- ⦿5. Test the full product. Responsive behavior, keyboard access, protected content, content contracts, crawlability, and failure states formed part of every release.
- ⦿6. Ship and observe. The live site became an evolving design system: measurable, editable, and capable of exposing both public evidence and new experiments.
The decisions I made
I set the direction, quality standard, and release criteria for the project.
- ⦿I defined what the site needed to say and how each page contributed to that story.
- ⦿I directed the visual system, interaction quality, editorial voice, and accessibility priorities.
- ⦿I set the boundaries for protected work, public data, and machine-readable content.
- ⦿I reviewed the rendered product and made the final release decision.
How I used the agents
- ⦿I asked agents to break the implementation into smaller tasks and expose missing decisions early.
- ⦿They proposed architecture, wrote code, and explained the technical choices in language I could question.
- ⦿They repeated checks across responsive layouts, content contracts, protected routes, metadata, and failure states.
- ⦿Their speed gave me more iterations with the working product during the same sixteen-hour build.
Review and release
Each iteration returned to four review areas before release.
- ⦿Purpose and editorial direction. Every public page needed a clear role, supported claims, and a useful path through the work.
- ⦿Visual and interaction quality. I reviewed hierarchy, rhythm, behavior, typography, and voice in the rendered interface.
- ⦿Accessibility and disclosure. Semantic structure, keyboard behavior, protected work, and public information received explicit criteria.
- ⦿Release judgment. Automated tests and manual review supplied the evidence I used to approve each release.
Evidence in the product
The product contains the evidence of the workflow.
- ⦿The public portfolio homepage and responsive views preserve a single authored visual system.
- ⦿A bespoke CMS connects pages, case studies, navigation, design tokens, and machine-facing content to the product.
- ⦿The Projects surface supports public evidence and controlled access to confidential case studies.
- ⦿The Lab holds working WebGL, interaction, creative-coding, and design-system experiments.
- ⦿Structured identity, authored metadata, LLM guidance, and public machine-readable endpoints connect people, search engines, and agents to the authored content and public routes.
What changed
The workflow brought intent, implementation, verification, and editorial control into one practice. The portfolio became a semantic, accessible, editable product with its own design system, protected evidence, machine-readable surfaces, and a connected experimental Lab.
AI agents shortened implementation. I used the additional iterations to direct the quality of the finished product.
Five principles I would reuse
- ⦿Intent and acceptance criteria come first.
- ⦿Give agents bounded responsibilities and explicit evidence to inspect.
- ⦿Keep design and code in the same feedback loop whenever the product allows it.
- ⦿Verify semantics, accessibility, failure states, privacy, crawlability, hierarchy, interaction, and tone as release criteria.
- ⦿I use AI agents for planning, implementation, and verification under criteria I define and review. That responsibility follows the standard in my design manifesto.
Questions about the workflow
- ⦿What is design engineering in digital product design? It is a practice that keeps design intent close to implementation. The working product becomes the place where interface decisions are evaluated and revised.
- ⦿How do AI agents fit into a product design workflow? They can decompose tasks, propose approaches, implement bounded changes, and repeat verification. The designer sets direction, supplies context, evaluates output, and owns the result.
- ⦿How does an AI design-to-code workflow change the handoff? It reduces the distance between design and implementation for a hands-on practitioner or small team. Product context determines the engineering expertise, collaboration, and review required.
- ⦿Which decisions did I direct? I directed purpose, ethics, audience impact, editorial voice, accessibility priorities, risk boundaries, and final release judgment.
Continue exploring
- ⦿See the wider body of selected projects.
- ⦿Read the principles behind the work in my design manifesto.
- ⦿Learn more about my design leadership practice.
- ⦿Explore working experiments in the PabloZarate™ Lab.