How I vibe coded

@thisguyvibecodes

1.1K followers · usually 1.5K views a post

Views

6.3K

Likes

202

Comments

19

Shares

1

Selling · SaaS › Productivity

SuperEarseen in 2 videos →superear.co ↗

Why it worked

The video effectively combines aesthetic design choices with a practical demonstration of a useful, free tool, appealing to both designers and users looking for productivity enhancements. The "vibe coding" concept and the focus on a warm, hand-drawn feel create a unique and engaging narrative.

Summary

The creator details the design process for a Mac app called SuperEar, focusing on warm and hand-drawn aesthetics using specific color palettes, fonts, and icon sets. The video highlights SuperEar as a free voice dictation tool for Mac and encourages viewers to follow for future updates.

Structure

1Introduction to vibe coding a warm, hand-drawn design
2Showcasing color palettes and fonts used
3Introducing free doodle packs and icon sets
4Demonstrating the SuperEar app and its features
5Highlighting SuperEar's free availability and future plans
6

Original caption

How I vibe coded a warm, hand drawn design (SuperEar pt.2) 👨🏻‍💻✍🏻 #buildinpublic #vibecoding #claude

More from @thisguyvibecodes

Their other posts in the index, biggest breakout first.

Call to action to follow for more

Product placement

SuperEar: Acts - It is a voice dictation app for Mac that records and transcribes audio. Its interface is shown, and its functionality is described. Removing it would change the video's content. SuperEar.co: Appears - It is the URL for the product, displayed on screen. Removing it would not change the video's content.

Call to action

Follow for more!

On-screen text

How I vibe coded this mac app to feel warm & hand drawn A warm voice tool for your Mac. Terracotta Terracotta Deep #454C35 Button hover & pressed state. Terracotta Light #E17A60 Soft highlights & glows. Paper 2 #F1EFE2 Alternating sections & cards. Paper 3 #EEE6E0 Deeper card wells. Divider #E2D9C4 Borders & thin separators. Links in comment Hand Drawn Doodles Stickers for fun shapes for your next project. made in germany Handdrawn Icon set 60x essential user interface icons SOLID LINE Add to cart Think out loud. We'll handle the rest. Libre Baskerville - Headlines SuperEar Inter - SuperEar Name A voice dictation app that lives in your menu bar. Press a shortcut, speak naturally, and your words appear at your cursor. SuperEar runs 100% on your Mac - audio is transcribed by WhisperKit on Apple Silicon. Nothing touches the cloud. Plus Jakarta Sans - Body UI <Space macOS 14+ 100% LOCAL v1.0.0 JetBrains Mono - Lables/Metadata SuperEar.co Thanks for watching! Follow for more!

Transcript

Here's everything I used to make SuperEar have a warm hand-drawn vibe. First, I started with the warm terracotta color and a cream background, I'm calling paper as my light base. Then I paired it with the free doodle pack from Framer and a hand-drawn UI icon set and surrounded it all with four different fonts that I'm using for different purposes. I feel like overall this design process gave the app a level of warmth that makes the app a lot more pleasant to use. If you have a Mac, SuperEar.co is completely free to use. I have a lot of plans to upgrade the app, so follow if you're interested. Thanks for watching! Follow for more!