Wen Yu 🚀

Product Designer. Prev design @Meta @Airbnb @Affirm | Design + Technology + Innovation

[Andreas Storm @avstorm]

Superhuman’s logo explanation is a masterclass

[Shishir @shishirmehrotra]

I’m really proud of the work our team did with @Smith_Diction to create the new @SuperhumanHQ brand - especially our logo, which embodies the AI assistance we provide while staying grounded in a foundation that’s human and trustworthy. 🧵

[Shishir @shishirmehrotra]

Huge news: We’re changing our company name from @Grammarly to Superhuman and launching a new product!

The Grammarly brand isn’t going anywhere, but we’re evolving into a multi-product company that includes Grammarly, Coda, Superhuman Mail, and a new AI assistant called Superhuman Go. 🧵

[Wen Yu 🚀 @whyinteraction]

@brendanodris and @seanlee879429 from @figma reached out after seeing my post. And the issue has been fixed. Super impressed by their user-centered approach and lightning fast execution! Kudos to you! #figma

[Wen Yu 🚀 @whyinteraction]

Which tool do designers use for portfolio presentation nowadays? I recently switched to Figma Slides, and it's been a disappointment. #figma #figmaslides #designtools

[Wen Yu 🚀 @whyinteraction]

I’m done with my 1st experimental project in Figma Make! It’s not made for mobile so can’t mimic native mobile experiences precisely. Still great for rapid prototyping early ideas on web imo.

[Wen Yu 🚀 @whyinteraction]

Vibe Coding Day 6 Recap

Tool: Figma Make
Task: Implement a track list feature for the album, allowing users to see tracks for each album and navigate them easily.

Impressed to see how easily the model understood the ask and got the function working. But getting those micro-interactions to feel right definitely took time!

#vibecoding #figmamake #dailychallenge

[Wen Yu 🚀 @whyinteraction]

Vibe Coding Day 6 Recap

Tool: Figma Make
Task: Implement a track list feature for the album, allowing users to see tracks for each album and navigate them easily.

Impressed to see how easily the model understood the ask and got the function working. But getting those micro-interactions to feel right definitely took time!

#vibecoding #figmamake #dailychallenge

[Wen Yu 🚀 @whyinteraction]

😭 #vibecoding #failuremode

[Wen Yu 🚀 @whyinteraction]

Vibe Coding Day 5 Recap

Tool: Figma Make
Task: Implement a Profile page that can show insights based on users' listening behaviors by leveraging Supabase.

Observations:
🤩Model can generate pretty good chart animations easily with one prompt!
😅Code generation could take a long time. I’ve developed the habit of writing, watching TV, or just killing time on X while waiting.
😢The most annoying part of vibe coding is: implementing one thing could break something else, which seems to be completely unrelated. Debugging these little things could be extremely time-consuming.

#vibecoding #figmamake #dailychallenge

[Wen Yu 🚀 @whyinteraction]

Made a good progress on Figma Make!

[Wen Yu 🚀 @whyinteraction]

Vibe Coding Day 5 Recap

Tool: Figma Make
Task: Implement a Profile page that can show insights based on users' listening behaviors by leveraging Supabase.

Observations:
🤩Model can get chart animations correct pretty easily!
😅Code generation could take a long time. I’ve developed the habit of writing, watching TV, or just killing time on X while waiting.
😢The most annoying part of vibe coding is: implementing one thing could break something else, which seems to be completely unrelated. Debugging these little things could be extremely time-consuming.

#vibecoding #figmamake #dailychallenge

[Wen Yu 🚀 @whyinteraction]

Oh no! 😱A simple prompt of "make status bar background transparent" just ruined everything. So sad. Guess I need to take a break from vibe coding now. #vibecoding #failuremode

[Wen Yu 🚀 @whyinteraction]

Vibe Coding Day 4 Recap

Tool: Figma Make
Task: Refactor to ensure quality, including a few key screens and a design library with typography, color palette, and basic components.

Observations:
🤩My favorite thing is to take a screenshot of a design I saw and ask AI if it can implement something similar. It has surprised me several times how easy it was!
🤔Adding a library is helpful! But the tool couldn't get the font size right, even with the library attached. I had to rely on the "point to edit" tool to fix a lot of them.
😔The tool clearly doesn’t understand what “iOS push transition” means and is bad at handling screen transitions in general. I ended up just using slide animation.

I’ll play with Supabase for listening history and behavior features tmr!

#vibecoding #figmamake #dailychallenge

[Wen Yu 🚀 @whyinteraction]

@yupp_ai The careers page looks great! 👏

[Wen Yu 🚀 @whyinteraction]

@tomjohndesign Totally agree. These vibe coding tools make you feel nice at the beginning, then the ROI drastically drops when you get into the details and add complexity. They are great for quickly prototyping rough concepts, but not suitable for highly polished stuff.

[Wen Yu 🚀 @whyinteraction]

@damienghader @lovable Electric

[Wen Yu 🚀 @whyinteraction]

Vibe Coding Day 3 Recap

No visual to share today, just tinkering around Library and Supabase in Figma Make.

Takeaways:
🤩Loved the Library feature! Well, I love everything to keep the design consistent.
🤩First time prompting to create and use a database. It's mind-blowing to me.
💡Sometimes it even suggests new features based on the action, which could be inspiring! Well, my roadmap also kept changing because of it, which caused some thrashes lol.
🫤Generating multiple screens without a way to see and manage them in Figma Make is quite painful. Things could get messy if there’s a major change in flow or logic.
Hopefully it’s on their roadmap to fix soon.

#vibecoding #figmamake #dailychallenge

[Wen Yu 🚀 @whyinteraction]

@joulee @shishirmehrotra @rahulvohra Indeed. Meta founded Superintelligence Lab a while back. And now, Grammarly is considering to take Superhuman name!

[Wen Yu 🚀 @whyinteraction]

@shishirmehrotra @rahulvohra Yes! Could help with hiring. Who doesn't want superhuman on their resume? ;)