AI Web Studio

Things we make

Organizations are gaining unprecedented technological power while losing clarity, trust and distinctiveness. HAAM helps them regain all three.

I wrote all the words on this page. You can too.

Imagination is the limit.

Someone arrives with a product, a campaign, or a strange half-built idea, and the screen is already carrying too much pressure.

I look for the moment where people stop trusting it: the confusing promise, the hidden decision, the small piece of interface that makes them feel alone.

Then we turn that moment into something visible, testable, and humane, because digital work is not only about shipping pages but about giving people more agency inside the system.

HAAM makes websites, products, tools, and stories that help people understand what is happening and feel capable enough to move.

Built projects

Launched work you can inspect

See proof from real projects: working websites, cultural platforms, sustainability initiatives, Taiwan-focused builds, and case studies with live context instead of abstract claims.

Chapter 4 · Build in context

Build human-guided AI work in Taiwan

Ship Taiwan collaborations that connect sustainability, product strategy, and digital storytelling into the active HAAM roadmap.

Ship from Taipei

Turn local insight into useful AI products

Use sustainability tooling and sharper product storytelling to move from research signals into live, testable experiences.

Green Filter Chrome Extension Ziran Taiwan

Learning lab

Build a web project step by step

Choose a path, answer quick questions, and unlock short lessons.

Full web design environment

Work with HAAM's real page templates, themes, responsive previews, and design tokens. Create as many designs as you like and save them in your browser or private account.

Open the design studio →

What do you want to build first?

How much coding experience do you have?

How should HAAM guide your learning?

Visionary stuff

Experiments worth trying

Play with prototypes, browser capabilities, and story-driven interfaces that reveal new ways visitors can learn, decide, and interact before a conventional build locks everything down.

Chapter 4 · Explore the storyworld

Play through the Signal Hatch

A hidden hatch has opened in the homepage surface. Enter HAAM's first RPG-style quest, choose a strategy, earn quest points, and collect loot relics from the studio universe.

Start the quest →Browse more games

Legacy Projects

Mostly human-made projects. With the advances in AI, I have now switched my focus to human oversight and consultancy.

Chapter 5 · Prove the outcome

Viirus Theatre

Viirus invested in a11y and performance to make their digital home more welcoming for every visitor. We improved semantic structure, keyboard navigation, contrast, and media loading strategy so the website became easier to use and faster to browse across devices.

Outcome: clearer journeys for audiences, stronger inclusivity, and noticeably faster page experience.

Explore the Viirus proof

Leadership content

Clear standards for teams

Explore the design-system and browser-capability material that helps teams make better decisions, keep handoffs consistent, and avoid rebuilding the same patterns from scratch.

Chapter 6 · Scale the system

One design system for every touchpoint

From homepage to conversion flows, every component is tuned for accessibility, consistency, and maintainable delivery across products.

Explore the design system and handoff foundation

Chapter 7 · Extend the platform

Unlock what modern browsers can do

The open web can already handle native-feeling file workflows, floating utility windows, machine-readable scanning, screen wake locks, and calmer state transitions. This new hub collects practical demos instead of treating browser power like trivia.

Open browser demos

Visual continuity