3 Tools Vibe Coding

@nasha.vibes

7.9K followers · usually 2.0K views a post

Views

148.3K

Likes

13.6K

Comments

15

Shares

1.5K

SoundTikTok sound · Cherry

Promoted product

Claudehttps://claude.ai ↗

Why it worked

The video provides a high-value, actionable 'how-to' guide for a trending topic (Vibe Coding), making the product mentions feel like helpful instructions rather than an advertisement.

Summary

The creator demonstrates a four-step process for building a website without coding knowledge using AI tools. She highlights using Claude, Figma, and Netlify to design and deploy a site.

Structure

1Introduction to Vibe Coding
2Step 1: Ideation with Claude
3Step 2: UI design with Figma
4Step 3: Implementation with Claude Code
5Step 4: Deployment with Netlify

Product placement

Claude, Figma, and Netlify are all shown and mentioned as the core tools for the workflow.

On-screen text

3 Tools Vibe Coding Create your own website without any knowledge of the code Step 1 Chat Your Idea with Claude Step 2 Design the UI in Figma Step 3 Vibe Code it with Claude Code Step 4 Deploy with Netlify

Original caption

3 Tools for Vibe Coding 💻✨ สร้างเว็บไซต์เองได้ โดยที่ไม่มีความรู้เรื่อง Code 🙌 แค่มีไอเดีย + 3 เครื่องมือนี้ Claude · Figma · Netlify #vibecoding #uxuidesigner #aitools #webdesign #claudeai

More from @nasha.vibes

More breakout videos from this creator.

Transcript

3 Tools Vibe Coding. สร้างเว็บไซต์เองได้ โดยที่ไม่มีความรู้เรื่อง Code ด้วย 3 เครื่องมือนี้. Step 1, chat your idea with Claude. The extra trick is that if you don't want to waste tokens, use another AI to talk ideas, chat GPT, Gimini or whatever you want. Step 2, I use the figma to design the interface or UI face that I want it to be and then I use the figma make for prototype. Step 3, is to use the claude code to actually run the code to make it happen. The last step, I use Netlify for Deploying, hoping that everyone will be enjoyed with the Vibe Coding.