i vibe coded this typewriter

@designteamofone

42.5K followers · usually 7.5K views a post

Views

83.9K

Likes

5.7K

Comments

45

Shares

384

SoundTikTok sound · 3 Days

Promoted product

Figma Makehttps://www.figma.com/make/ ↗

Why it worked

The video leverages the 'vibecoding' trend to show a complex technical project being built with accessible AI tools, providing high-value, actionable 'how-to' content that encourages engagement.

Summary

The creator demonstrates how they used Figma Make and Claude to build an interactive digital typewriter experience. They explain their process of iterating through prompts and design adjustments to achieve a specific vision.

Structure

1Showcase the final interactive typewriter project
2Explain the collaborative process with Claude
3Demonstrate using Figma Make to build the interface
4Detail the iterative process of refining interactions
5Direct viewers to the prompts for them to try it

Product placement

Figma Make is the primary tool demonstrated for building the project, while Claude is mentioned and shown as the AI assistant used to generate the brief and prompts.

Call to action

link in my story highlights

Original caption

you can vibe vibe anything as long as you’re patient and have enough tokens @figma @Claude link for all the prompts in my story highlight #vibecoding #figmamake #claude

More from @designteamofone

On-screen text

i vibe coded this typewriter so here's my process ++ prompts i started by talking through my idea with claude i also added some figma mocks as reference images and that brief became my starting point in figma make it took me a while to get the typewriter movement right separate parts really helped from there i went prompt by prompt tweaking the layout the interactions because i had this very specific vision in mind if you wanna try it out i've compiled every single prompt on this page *link in my story highlights

Transcript

i vibe coded this typewriter two weeks ago and so many of you asked for a tutorial. so here is my process plus prompts. i started by talking through my idea with claude just like hey here is what i am thinking. i also added some figma mocks as reference images and had claude write me a brief. and that brief became my starting point in figma make. it took me a while to get the typewriter movement right and uploading it in separate parts really helped. from there i went prompt by prompt tweaking the layout the interactions because i had this very specific vision in mind. if you wanna try it out i have compiled every single prompt on this page.