3 weeks

@thisguyvibecodes

1.2K followers · usually 1.5K views a post

Views

5.0K

Likes

311

Comments

5

Shares

18

SoundTikTok sound · last sip

Promoted product

Paper MCP

Why it worked

The video offers a practical, step-by-step guide to a complex topic (AI app design) using readily available tools, making it highly valuable for aspiring developers and designers. The use of visual aids and a clear structure breaks down the process into manageable steps, increasing its shareability.

Summary

This video provides a three-step guide to designing AI apps, focusing on building a foundation with brand guidelines, gathering inspiration from platforms like Pinterest and Mobbin, and finally building the app using tools like Paper MCP and Claude Code. The creator emphasizes the importance of a thorough design process to ensure the app is well-built.

Structure

1Introduction to AI app design workflow
2Step 1: Establish the foundation (brand guidelines)
3Step 2: Gather inspiration (Pinterest, Mobbin)
4Step 3: Start building (Paper MCP, Claude Code, Mobbin MCP, Reporia)

Original caption

A step by step guide on how to design ai apps with craft & taste #vibecoding #claude #buildinpublic #devlog

More from @thisguyvibecodes

Product placement

Claude (AI agent): acts - generates a spec sheet. Removing it would change what happens in the video. Pinterest (social media platform): acts - used for inspiration and creating a mood board. Removing it would change what happens in the video. Mobbin (design inspiration website): acts - used to find screenshots of apps and their workflows. Removing it would change what happens in the video. Mymind (app): acts - shown as an example of an app within a niche. Removing it would change what happens in the video. Cosmos (app): acts - shown as an example of an app within a niche. Removing it would change what happens in the video. Paper MCP (design tool): acts - used to lay out wireframes. Removing it would change what happens in the video. Claude Code (AI tool): acts - used to generate code. Removing it would change what happens in the video. Mobbin MCP (design tool): acts - used to check designs against reputable apps. Removing it would change what happens in the video. Reporia (design tool): acts - used to craft every single screen. Removing it would change what happens in the video.

On-screen text

3 weeks nostalgic AI design workflow AI design workflow step by step guide AI design tools can design your ai apps (with craft & taste) > design me a polished app || plan mode on (shift+tab to cycle) Step 1 the foundation aka Brand Design Guideline Colors Typography Spacing Corner Radius Buttons Nav Header Profile Circles Pro tip Why is this so important? building blocks normalized ai slop foundations components nav & structure content cards Step 2 Inspiration I Pinterest Mobbin mymind cosmos Mobbin Mobbin Step 3 Start building tools made Reporia

Transcript

3 weeks nostalgic AI design workflow AI design workflow step by step guide AI design tools can design your ai apps (with craft & taste) > design me a polished app || plan mode on (shift+tab to cycle) Step 1 the foundation aka Brand Design Guideline Colors Typography Spacing Corner Radius Buttons Nav Header Profile Circles Pro tip Why is this so important? building blocks normalized ai slop foundations components nav & structure content cards Step 2 Inspiration I Pinterest Mobbin mymind cosmos Mobbin Mobbin Step 3 Start building tools made Reporia