How to |

@lauraaad0

2.6K followers · usually 1.2K views a post

Views

3.8K

Likes

214

Comments

8

Shares

18

Selling · SaaS › Developer Tool

Figmaseen in 8 videos →

Why it worked

The video taps into the desire for accessible tech skills, showing a tangible result (a professional portfolio) achieved quickly with AI tools, making it aspirational and achievable for a non-technical audience.

Summary

The creator demonstrates how to build a professional-looking portfolio website in under an hour using Figma and Claude AI, even with zero prior coding experience. She explains the process of using Figma to design, Claude AI to generate code from the design, and then deploying it on GitHub and Vercel.

Structure

1Introduction to the series and the creator's lack of coding experience.
2Showcasing the old, uninspired portfolio and the desire for something better.
3Demonstrating the use of Figma and a Figma-to-code plugin.
4Explaining the integration with Claude AI for code generation.
5Showing the process of uploading to GitHub and deploying on Vercel.
6Concluding with the final portfolio and a call to action for part 2.

Original caption

zero coding experience but my portfolio lowkey looks like a senior dev made it 👩‍💻✨ Used Figma + Claude Code to go from basic AI-generated site → actually having taste. Took 1 hour. This is episode 1 of my new series breaking down tech tools for non-technical people in startups 🏗️ Full breakdown in the video ⬆️ #claudeai #figma #portfoliotips #learntocode #techgirlies

More from @lauraaad0

Their other posts in the index, biggest breakout first.

Product placement

Figma: ACTS - used to design and rebuild a portfolio website. Removing it would change the video. Claude AI: ACTS - used to read a Figma design and generate code for a portfolio website. Removing it would change the video. Vercel: ACTS - used to deploy a portfolio website. Removing it would change the video. GitHub: ACTS - used to upload code for a portfolio website. Removing it would change the video.

Call to action

Follow along for part 2

On-screen text

How to | code. like a pro. pt 1 i have zero coding experience a series to code like because it's honestly so easy so wrong to get keyed so this is my old portfolio lovable honestly it looks like everyone else's ai generated portfolio to make something like it had here's what I i use Figma there's this plug in called html to design website that you and when it it actually lays and you can move things around as well i connected to cloud code using mcp figma design directly prompt the claude design if I didn't keep re prompting back and forth then I dropped my old portfolio my projects my new design how it came Tell me this look like a real developer made this on a Sunday afternoon this could literally I uploaded the code to git hub nd deployed on Vercel as well you actually know AI perfect way to you those two weeks I wasted not knowing how come follow along for part 2 down how to touched code in

Transcript

zero coding experience but my portfolio lowkey looks like a senior dev made it 👩‍💻✨ I used Figma + Claude Code to go from basic AI-generated site → actually having taste. Took 1 hour. This is episode 1 of my new series breaking down tech tools for non-technical people in startups 🏗️ Full breakdown in the video ⬆️ #claudeai #figma #portfoliotips #learntocode #techgirlies How to code. like a pro. pt 1 i have zero coding experience a series to code like because it's honestly so easy so wrong to get keyed so this is my old portfolio lovable honestly it looks like everyone else's ai generated portfolio to make something like it had here's what I i use Figma there's this plug in called html to design website that you and when it it actually lays and you can move things around as well i connected to cloud code using mcp figma design directly prompt the claude design if I didn't keep re prompting back and forth then I dropped my old portfolio my projects my new design how it came Tell me this look like a real developer made this on a Sunday afternoon this could literally I uploaded the code to git hub nd deployed on Vercel as well you actually know AI perfect way to you those two weeks I wasted not knowing how come follow along for part 2 down how to touched code in