Chris Wang

Designing at the intersection of human craft and AI capability.

Selected work

DraftPart 2

From human-computer interaction to human-AI interaction.

My design work moved from making artifacts in Figma to doing the work through agents.

Aa

01Instructing agents

Agents need context: the goal, the visual style, my taste.

For a project, I might make a mood board with reference images. It becomes the input context for my agents.

Giving agents the right context is what Andrej Karpathy calls context engineering.

In the Knowledge Work LoopTeach by demonstrating. Show agents how you work instead of writing every step as a chat instruction.

In AI researchThe alignment problem

See this group in the work index5

02Organizing agents

Orion is my personal chief of staff. A team of agents reports to it: project management, engineering, motion, visual design, interface design and design systems.

How you structure those agents, and the skills you give them, is what matters. It’s the new design craft.

The walls between roles like sales, marketing and design are breaking down too.

In the Knowledge Work LoopBuild and manage your team. Set up specialist agents and manage them like a director with direct reports.

See this group in the work index6

03Agents making software

In traditional software, you craft the interface. When agents can write software on demand, the interface is the agent itself, and what you design is how it behaves.

I think software will be grown, not built. You give agents context, guidance, guardrails and goals, and they make the interface.

It’s more like growing a plant than shaping it as a carpenter.

In the Knowledge Work LoopAssign work. Give agents goals, guardrails and context, and watch them do the work.

See this group in the work index5

v1v2v3123123

04Reviewing agent work

When agents create artifacts on your behalf, what matters is not the artifact itself. It’s how decisions are made. Artifacts exist for collaboration and communication.

So agents should present their work in a way a person can understand and act on, with clear versions and iterations.

I explored this a while ago in a project called Artifactory. It was ahead of its time.

In the Knowledge Work LoopReview and decide. Notes attach to the exact part of the work, and judgment calls come to you as one-click decisions.

In AI researchThe interpretability problem

See this group in the work index1

Selected work

01

Instructing agents

5
  1. 01 Director's MindsetOrion Presents AI-narrated presentation of 9 principles for working with Claude Code — Piper TTS voice, WebGL orb, inline demos. 2026Essay
  2. 02 Scaling Use Cases Interactive framework for how runtime learning patterns from design teach AI professional judgment across domains 2026Essay
  3. 03 Brand Studio AI brand identity design studio — brief builder, personality chips, gallery, and feedback loop 2026Tool
  4. 04 ChrisOS Studio Desktop companion for Claude Code — infinite sketch canvas, voice & vision, style previews, design sprints, and 14 MCP tools 2026Product
  5. 05 The Era of Computational Design How AI shifts human work from execution to direction — 11 ideas about computational design and human-AI collaboration 2026Essay
02

Organizing agents

6
  1. 06 OrionInteractive Showcase Static design specimen of the Orion AI assistant UI — procedural animations, constellation avatar, theme system, sidebar, task panel, all visual elements preserved without a backend. 2026Product
  2. 07 Functional AGI AI knowledge work studio — multi-domain workflow orchestration with mock generation demo across design, legal, sales, marketing, education, and more 2026Product
  3. 08 Swarm Design Collaborative canvas for multi-agent design workflows — real-time node editing, settings, and server-driven generation 2026Tool
  4. 09 CoIntelligenceChrisOS Case Study How a designer and Claude AI collaboratively built an operating system — a case study in human-AI partnership 2026Case study
  5. 10 ChrisTerminal Marketing site and DMG download for ChrisTerminal — the AI-native macOS project launcher for Claude Code sessions 2026Product
  6. 11 A New Way to Work Interactive essay on how AI changes the way we work — from tools to teammates 2026Essay
03

Agents making software

5
  1. 12 AI Design Patterns 12 interactive design patterns for human-AI interaction — each with runnable playgrounds, mock mode, and real Claude API integration 2026Tool
  2. 13 GUI Studio AI GUI library design studio — component generation, holistic feedback, and section-based design 2026Tool
  3. 14 DLS V4 Studio Design Language System V4 — AI-powered style generation, 26 visual tools, workbench + website preview 2026Tool
  4. 15 Design Library Comprehensive GUI + Conversation Design pattern library — 83 interactive patterns across 17 categories with 185 working demos covering interaction, layout, navigation, forms, feedback, motion, data viz, content, collaboration, accessibility, conversation structure, agents, input, output, feedback loops, trust & safety, and multimodal 2026Tool
  5. 16 Agentic Design 11 principles for designing with and for AI in the age of functional AGI 2026Essay
04

Reviewing agent work

1
  1. 17 Every Message, Twice Interactive essay on how AI translation layers preserve meaning while adapting communication to individual receivers 2026Essay
05

Other work

10
  1. 18 AI Design Sprints Three parallel design sprints exploring Google in AI era, AI agents, and synthetic reality 2026Case study
  2. 19 Creative Canvas Why the canvas is the natural home for creative work — interactive essay with live canvas demo 2026Essay
  3. 20 How AI Thinks Interactive visual guide to how AI works — 7 chapters from neurons to frontier models, with dozens of visualizations 2026Essay
  4. 21 Mind Meld Interactive tool exploring how four voices (Clark, Friedman, Roslansky, Wang) converge on AI transforming design. 2026Tool
  5. 22 Rendering the Impossible Visual essay on the birth of Pixar and computer animation — from Ed Catmull's 1972 wireframe hand to Toy Story 2026Essay
  6. 23 Procedural DesignStory Interactive essay on procedural design and AI — 16 demos across 4 chapters with continuous scroll 2026Essay
  7. 24 Rendering SoftwareProcedurally Lit Environment v2 Rendering Software — What happens when you apply the rendering pipeline to software interfaces? Experiment
  8. 25 ProceduralDemos Collection of 20 standalone procedural design experiments — generative art, simulation, WebGL fire, boid sparks, and parametric systems 2026Experiment
  9. 26 Motion Maker Interactive motion design studio — 50 MoGraph animations, 20 procedural presets, multi-instance canvas with drag/scale/delete 2026Tool
  10. 27 Buddy Maker Procedural Tamagotchi character creator for designing companion characters 2026Experiment

Before you go

Need a break? Take a walk in the wilderness.

The Wild Less Traveled is my other place: woodburnings, and a hand-built 3D wilderness to wander, with a lake, a trail and a fire going.

Teleport to The Wild Less Traveled