Social Yoga London
A neighbourhood yoga studio, designed around its community.
A proposal for Social Yoga, a London yoga studio whose real strength is the community it gathers. A new visual identity and website, designed in Figma and built with AI, sent to the studio through a cold email.
- Year
- 2026
- Role
- Brand & UX/UI Designer
- Platform
- Responsive website
- Type
- Proposal, sent via cold outreach
Toolbox
Figma
Brand identity, UI kit and high fidelity page
Claude
Generated the site copy
Claude Code + Figma MCP
Built the site directly from the Figma design
GitHub
Hosted the repository
Vercel
Deployed the site
v0
Refined the final details
Designing first, building with AI second.
This was the second project in the AI-assisted workflow I was building for myself. After SKŌN, where the focus was on making the tools work together, here I wanted to test a hybrid approach: classic research and design in Figma first, then AI to turn the design into a working site. As with SKŌN, I redesigned the studio on my own initiative and then proposed the work through a cold email.
- 01
Audit
I started from their existing website. The information was poorly organised, and several visual elements felt dated and ready to be refreshed.
- 02
What the studio stands for
Social Yoga is built entirely around its neighbourhood. It wants to be a place where people meet, not just a place where they take a class. Every design decision that followed had to support that.
- 03
A new visual concept
The studio didn't have a strong brand identity, so I reinvented it: a new palette and a set of shapes that captured the warmth and openness of the place. I then turned them into a brand identity and a UI kit.
Moodboard, a collection of references from other designers
Brand identity and UI kit
- 04
Structure and copy
Starting from their original page, I decided how the information should be organised. With a precise prompt built on that architecture and on the studio's original content, I generated the copy for the whole site.
The full site copy, generated from the original content and my information architecture
- 05
From Figma to code
I designed the high fidelity page and its components in Figma, then connected Claude Code to Figma through MCP to build the site directly from the design. The repository lives on GitHub, the site is deployed on Vercel, and I refined the last details in v0. The result was surprisingly accurate from the very first prompt.
High fidelity page and components in Figma
What I learned
This approach works best when a project needs a tailored design and the components have to be built exactly as they were designed. Connecting Claude Code to Figma through MCP kept the build remarkably close to the design, and it was faster than any CMS workflow I had used before. I also learned how much the setup matters. Claude was excellent at reworking information and brainstorming, and once I installed specific skills in Claude Code, such as an anti-slop skill and design methods I found online, its critical thinking became noticeably sharper.