Building a UI Engineering
resource hub using Figma Make
and Claude Code

Transforming Storytelling with

AI-Generated Content

Pixel Vault

Sharing AI assisted code prototypes is messy and fragmented, there are a lot of tools and a lot of things to share in an age of abundance of code.

Solution:

UI/UX Design, Code Prototype, TailwindCSS

Role:

Self-led Project

The Challenges

AI Assisted UI Engineering for teams is disjointed, deployed links here, Figma Make Templates there and an experimental component in another environment, maybe deployed somewhere maybe running locally. We live in an age where we can generate code with ease but how do we curate we share this all within teams.

To address the challenges identified in MediatorAI, my solution centered on creating anempathetic user interface that facilitated open dialogue. By prioritizing user comfort and accessibility, I designed an engaging platform that encouraged users to share their thoughts and feelings freely.

The Solutions

A resource base built for all things UI engineering within teams. Built for sharing work within teams and curating creative UI output From Prompts to Prototypes and everything in between.

UI Components

Prompt Input & Featured

Content

UI components page has this subtle stagger animation on all the cards and I built a coding sandbox to explore components in the actual material, complete with a comments section for collaborative work within the team.

DX in the Coding Sandbox

This screen was really interesting to design because I had to think with a lot of intention around developer experience, making sure it was good and polished, I was using Claude Sonnet initially the UI was just plain text no context with colour and I also added in AI hints, because whenever I'm in one of these online coding sandbox's I always miss IDE plugins that give you similar experiences.

Prototypes

The Spectra welcome screen features falling CDs against a vibrant backdrop, complemented by a captivating video loop. This design blends nostalgia with a forward-thinking approach to media, offering an engaging entry point for users.

Prompts & Templates

This animation was one of my favourite parts of the design of this project, I'm trying to get better at thinking through interfaces as interactive and exploring interaction patterns that aren't as conventional. Just trying to create moments of joy or interest in how we interact with computers as human.

Vibe Coded Design Tools

In the age of democratised software creation designers are creating their own tools, and I wanted this to be a place where designers could share and store their tools in teams.

Learnings & Outcomes

I learnt that while AI prototyping can help designers create and move faster, skills stack on top of each other, a lot of the technical skills I had could be amplified through the tool, but also using these tools means token management, and also being mindful about what you allow to load

Building a UI Engineering resource hub using Figma Make and Claude Code

Building a UI Engineering
resource hub using Figma Make
and Claude Code