Click
Instagram
/

AI-Native Design Engineering Lab

AI-Native Design Engineering Lab Static brand blue cover artwork with a white pixel cat and the title AI-Native Design Engineering Lab.

Everyone is a builder now.

Insight

With AI as a technical backstop, I can focus more deeply on product design.

For me, AI is like having a dedicated technical advisor. From the idea stage, I no longer need to overthink questions like “will this work well?” or “can this actually be built?” With less time spent on technical uncertainty, I can focus on the core product design decisions: understanding users, shaping the experience, and testing ideas.

I can validate ideas as working experiences.

In a traditional product design workflow, a designer's output often centers on static screens and prototypes. Turning the intended experience into a product still requires detailed explanations and handoff notes before development.

Using AI agents changed my design process. I can go beyond drawing screens and turn interaction ideas and detailed design intent into working demos during the design phase.

As a result, my role now extends beyond screen design into validation through implementation. Testing is faster, handoff is clearer, and the gap between design intent and the final experience is narrower.

* Visuals on this page were generated with Codex image skills

Before and after workflow illustration comparing traditional product design handoff with AI-assisted working demo creation.

Approach

How I build with AI

This website is my first AI-native build project. Starting with vibe coding, I approached the project with a product design mindset, giving the AI agent clear goals and constraints as I shaped the direction of the site.

Workflow 01

Getting Started with the What, Who, Why framework

Before building from scratch, I first shared the project context with the AI agent: what I was building, who it was for, what value it should provide, and why it needed to exist. Clarifying the product purpose gave me a clear basis for the decisions that followed.

  • What → What does the product do? Collect industry updates I care about, record new ideas, and reflect on previous work.
  • Who → Who is the product for? Myself, and people who are interested in this field.
  • Why → Why is it important? To keep myself learning and exploring, and to create more opportunities to exchange ideas with peers.

Workflow 02

Using AI to Turn a Rough Figma Draft into a Build-Ready Design System

Traditionally, I would need to prepare detailed screens, components, design system documentation, and design tokens before development.

Using Claude through Figma MCP, I started from a rough but intentional Figma draft. Together with Claude, I organized reusable components and layout rules, then quickly translated the visual direction into a first-pass design system with development-aligned tokens.

Hand-drawn workflow showing the What, Who, Why framework flowing into Claude CLI reasoning and a site blueprint.

Infrastructure

Designing the AI development harness

To make Claude CLI execute development tasks more accurately, I redesigned the markdown system around the agent.

Instead of relying on one large instruction file, I split the working context into focused documents for task scope, engineering rules, design standards, motion guidance, collaboration state, and handoff.

This reduced context noise and made each task easier to control. Claude could start from the current task, reference only the relevant rules, and follow clearer boundaries, stop conditions, and verification steps.

Diagram showing one mixed instruction file split through harness design into a focused context system with markdown files for tasks, rules, design standards, motion, handoff, and Claude operating protocol.

Outcome

What this workflow delivered

In roughly two weeks of spare-time work, I went from concept to a fully deployed website — responsive layouts, polished interactions, and motion design throughout. Not a mockup. Not a prototype. A live product.

I didn't just use AI to generate. I co-developed with it — applying design thinking to direct each task more efficiently and accurately: structuring context, defining scope, and making quality judgments throughout.

  • Build and test complex interactions during the design phase, not after development.
  • Keep visual system, interaction detail, and implementation quality aligned — because the designer stays in the process throughout.
  • The workflow, once built, is repeatable. This site is one case — a practical exploration of what AI-native development can deliver.
Hand-drawn outcome illustration showing a human designer and an orange Claude character high-fiving, with labels for faster validation, aligned details, and reusable workflow.