@ceciliakimdesign: DAY 9/14 ✶ My app worked, but it looked like every other vibe-coded app😭 It took 10 design directions and 5 different title fonts to give it some real character, so here's everything I did in order! I started in Codex, but Claude is so much better at design and anything creative. My setup for this part is Claude Code with Opus 5.5 and the Paper and Mobbin MCPs (not sponsored btw! I've partnered with Paper and Mobbin before, but this is just my real setup). Before any of this, pick your vibe. A Pinterest mood board of aesthetic pictures is perfect for that. ✶ Have Claude design directions in Paper using Paper’s Shaders, which are ready-made effects like water and grain ✶ Combine your favorites ✶ Add a film grain texture to make it more moody ✶ Make the background move with a Metal shader, which is Apple's graphics code ✶ If it looks tacky, look up apps for inspiration on Mobbin. My inspo was Partiful. ✶ Use 1 font that's easy to read and 1 with personality. I used Inter for everything you read and EB Garamond italic for titles, and both are free on Google Fonts ✶ Simplify your UI and UX so things are intuitive and not clunky If you want to try the moving water yourself, the Metal shader runs in SwiftUI with colorEffect, and a TimelineView redraws it 30 times a second. Only the lit water at the top moves, and it stops completely with Reduce Motion or Low Power Mode on. The cards and buttons are Apple's Liquid Glass on iOS 26. For titles, I also tried 2 typewriter fonts, Inter Display, and Instrument Serif, but Instrument Serif was just too thin. Another thing I learned is that clean and generic can look really similar on a phone, so if your design feels generic, go back to your vibe board. Next up is the logo and all the tiny details that make an app feel more premium. Stay tuned for the next one!

ceciliakimdesign

Open In TikTok:

Region: US

Thursday 01 October 2026 23:11:45 GMT