Now Institute.
Two websites for Morphosis Architects’ urban research wing
- Vibe Coding
- AI Tools
- Prototyping
- Internship
What is the Now Institute?
The NOW Institute is Morphosis Architects’ urban research wing, led by Thom Mayne and Eui-Sung Yi. It develops planning and recovery strategies with cities from Haiti to Los Angeles.
As an intern, I designed two separate websites for it.
Outdated content, broken pages and two disconnected sites hid the institute’s work.
One rebuilt, responsive site for the institute, and a separate bilingual site for Noto Now.
Two live sites with a simple shared design system, launched in three months.
Process: designing and vibe coding
I designed in Figma, then built both sites myself by vibe coding with Claude Code, which read my Figma files through MCP.
- 01BenchmarkSimilar institutions, Figma Make
- 02DesignFigma layouts & design system
- 03BuildClaude Code + Figma MCP
- 04DeployGitHub & Vercel
- 05IterateLayout, type, copy, content
Design in the real medium
I tuned type, spacing and interactions on live pages, not static mockups.
Faster loops with stakeholders
Every change went live on Vercel as a shareable link for feedback.
From designer to builder
Owning code and deploys let me ship two sites in three months.
Two sites, two design systems
Now Institute
Geometric sans-serif
- Structured layouts
- Translucency
- Hover interactions
Noto Now
Serif, upscale tone
能登 Noto
- Narrative structure
- Japanese / English
- Regional heritage imagery
Website 1 of 2 · notonow.org ↗
Noto Now
A Japanese and English site for the Noto Peninsula recovery project, made with the City of Wajima and university partners.
Design thinking: tell it as a story
Most visitors know little about Noto, so every page builds context before showing a proposal.
- 01ImpactThe 2024 earthquake
- 02PlaceCulture worth rebuilding
- 03ResponseRecovery strategies
- 04EvidenceSite photos and credits
Zoom in, scale by scale
The Design page moves from region, to city, to building.
Bilingual by default
Japanese and English side by side, for local and global readers.
A tone that respects the subject
Serif type and muted colors let a disaster story read with care.
Information architecture
Home page, scroll inside the window
Pages
Website 2 of 2 · nowinstitute.org ↗
Now Institute
A redesign of the institute’s own site, bringing scattered work into one identity.
Research: getting to know every project
Before designing, I studied each architectural project, publication and research theme: its place, problem, partners and outcome.
- 13Projects researched
- 13Publications
- 3Research themes
- 2001Year the work began
- Compton Now: Art by WASH
- Building Forward: Regulatory Reform
- Culture Now
- Haiti Now / Cap-Haitien Now
- Hsinta Ecological Powerplant
- Irwindale Now
- L.A. Now
- Madrid Now
- New Orleans Now
- Noto Now
- South Sea Pearl Artificial Island
- Unhoused Housing
- Urban Hydroponics in South LA
Before → after
Design thinking: an archive you can browse
With over twenty years of work, this site lets visitors find their own way in.
Organize by what people look for
Five clear sections, one consistent card layout.
Home page as a table of contents
One scroll previews every section.
Let the work lead
Black, white and a geometric sans-serif keep the focus on the projects.
Home page, scroll inside the window
Main pages
View all 34 more pages
People
Projects
Publications
Research
Contact
Key takeaways
Working in an architecture office taught me as much about people as about interfaces.
Balance stakeholder needs
Leadership, partners and the public wanted different things. I learned to weigh them in one design.
Present, listen, iterate
I presented my work often and turned feedback into concrete changes.
Coordinate to get what you need
I delegated requests and followed up to collect the content and approvals I needed.
Research before design
Studying every project first made the content accurate and the structure clear.
Narrative is part of the UX
Content order shapes understanding: a story for Noto Now, an archive for the institute.
Vibe coding makes designers builders
Claude Code let me test ideas in the real medium and ship two sites myself.