Nagisa Ikeda
Resume

Nara Labs · Design Engineering

Atlas

An interaction framework for AI-native software.

A reusable system for designing how humans and AI agents plan, act, communicate uncertainty, request approval, and collaborate.

Role

Product Designer · Design Engineer · Founder

Context

Nara Labs

Timeline

Ongoing

Stack

Figma · React · Next.js · TypeScript · Tailwind · Cursor · Claude Code

Why I built Atlas

“After building several AI-native products, I realized that traditional design systems stop at buttons, forms, and dialogs. They don't define how AI agents plan, ask for approval, stream responses, manage memory, or collaborate with humans. Atlas is my attempt to create a reusable interaction framework for AI-native software.”
AI productsrecurring interaction problemsreusable patternsAtlas

AI Interaction Patterns

Atlas defines interaction patterns for agent-native software—not generic UI primitives. Each pattern addresses a specific moment in how humans and agents collaborate.

Reporting Agent

Operations analyst

Executing

Assemble Q2 operational report

Retrieving revenue and fulfillment metrics from connected systems.

Report assembly58%

finance_data_api · running

Agent Status

experimental

Makes agent identity, objective, lifecycle state, and activity continuously visible.

idle · planning · executing · awaiting approval · blocked · completed · failed

Typed React component with 12 lifecycle states, live regions, and progress semantics.

Proposed plan

  1. ✓Extract contract terms
  2. ✓Compare against policy baseline
  3. 3Draft risk summary
  4. 4Request legal review

Plan Preview

draft

Surfaces intended steps before execution so users can evaluate agent intent.

Proposed plan → step completion → active step highlight

 

⚠

Approve contract amendment?

Agent wants to submit revised terms to the vendor portal.

POST /vendors/acme/contracts/amend
ApproveReject

Human Approval

draft

Pauses high-impact actions and requests explicit human authorization.

Review action → approve · reject · edit

 

Agent response

Based on Q2 revenue data, fulfillment variance is concentrated in the West region—

Streaming partial results…

Streaming Response

draft

Communicates progress and partial results during long-running agent work.

Partial output · progress indicator · activity updates

Currently expressed through Agent Status progress and activity surfaces; dedicated streaming component in development.

Retrieved context

Vendor policy
Net-30 required for Tier 1
Last review
Q1 2026 — approved with exceptions
Open issue
Liability cap unresolved

Memory

planned

Surfaces saved context, preferences, and prior decisions for review and control.

Retrieved context · key-value memory · last review

 

search_contractssuccess
{
  "vendor": "acme",
  "status": "active",
  "limit": 5
}

Tool Call

draft

Shows when an agent invokes an external service, what it is doing, and the outcome.

search_contracts → input payload → success · failure

 

Design principles

AI-readable

Documentation, naming, and APIs are structured so coding agents can implement patterns correctly.

Human-legible

Agent behavior remains understandable at a glance—never hidden behind generic loading states.

Explicit state

Lifecycle, intent, and accountability are visible through structured status surfaces.

Composable

Patterns combine into workflows rather than forcing one-off screen designs.

Code-aligned

Design decisions map directly to typed React components and documented behavior.

Safe by default

High-impact actions pause for approval; oversight scales with risk.

System architecture

  1. Design tokens
  2. UI primitives
  3. AI interaction components
  4. Product patterns
  5. Examples and templates
  6. Production interfaces

Atlas connects visual foundations, interaction behavior, documentation, and code so the same pattern can be understood by designers, engineers, and AI coding agents.

Built as a working system, not a concept

Atlas includes documented interaction patterns, typed React components, implementation guidance, examples, and a machine-readable registry.

Experimental

Agent Status

A structured status surface for enterprise workflows where agency, intent, and accountability must remain visible.

Reporting Agent

Executing

Retrieving revenue metrics from connected systems.

Component playground

Stateexecuting
Progress58%
Show toolson

Component registry

{
  "id": "agent-status",
  "status": "experimental",
  "states": [
    "idle", "planning",
    "executing", "failed"
  ]
}

Implementation

<AgentStatus
  data={{
    agent: { name: "Reporting Agent" },
    state: "executing",
    progress: { kind: "determinate", value: 58 },
  }}
/>

AI-native workflow

  1. 01Problem framing
  2. 02Interaction model
  3. 03Pattern selection
  4. 04Interface design
  5. 05React implementation
  6. 06Documentation and registry

The workflow moves from recurring product problems to documented, implementable patterns—keeping product judgment and interaction quality under human control.

Patterns emerged through practice

Across several AI product explorations, the same interaction challenges kept appearing: unclear agent state, invisible tool use, weak approval moments, and limited user control. Atlas turns those observations into reusable patterns.

ReadyLead

ProbeIQ

Local PM OS

FedEx AI Concierge

Outcome

  • A documented AI interaction framework
  • Typed React components with maturity stages
  • Reusable behavior and state models
  • An interactive component playground for Agent Status
  • A machine-readable component registry
  • A foundation for future AI-native products
Explore Atlas documentation →View source code →
← Back to work