Use references at distinct production stages
@nocodealex on Instagram
A reference helps only when it is the same kind of thing you are making. A website gallery, a motion snippet, a launch clip, and a pitch deck answer four different questions, and telling a model to match a whole screenshot answers the wrong one.
What to look at
The cover says Your app looks vibe coded and offers 4 sites. Card 01, Inspiration, shows godly.design in a browser and tells you to screenshot one site and tell Claude to match it. Card 02, Transitions, shows transitions.dev as four named motions: Card stack hover, Success check, Tabs sliding, and Notification badge. Card 03, Launch videos, shows animos.app as a player stopped at 0:04, labeled Made with Animos. Card 04, Pitch decks, shows deck.gallery with covers for OpenAI, Google Cloud, Reddit, and Perplexity, and says to steal a layout. The last card asks you to comment LINKS for the four addresses.
Why it works
These findings are about prototypes and design tools, which is the job the cards are selling, not about the Instagram post. Nielsen Norman Group says the fidelity of a sample splits into interactivity, visuals, and content, so a finished-looking picture can make people react to the polish before the idea is settled. The same group's note on copying famous companies says it is useful to look, and a mistake to copy because the company is successful: you are not that company, and the design may change. On the AI side, their 2025 evaluation found that attaching a picture makes the output follow the picture, and that by then much of the design work is already done. They also found the tools pattern-match toward common layouts, so the result can look "good from afar, but far from good."
Try it
- Name the object you are making this week: a page, one control's motion, a launch clip, or a deck.
- Open only the library for that object. Use a website gallery for the page, a named transition for the control, and a deck for the slides.
- Write the one decision you want from the reference, such as the order of the hero, instead of telling a model to match the whole site.
- If you do attach a picture, say which part to keep and which part is someone else's brand, photos, and words.
- Check the live page before you trust the card. On 2026-11-13, transitions.dev still lists those four motions, and Card stack hover is marked Pro only.
What it costs
A polished screenshot pulls attention to finish. Nielsen Norman Group found that high-fidelity work makes stakeholders want to ship it, and that an AI picture match still misses spacing, contrast, and the actual task. The card's line about stealing a Perplexity or OpenAI layout has the same problem: their deck was made for their company, and deck.gallery itself did not load, so the 200-deck claim is only the post's claim.
Words worth knowing
- Fidelity: How close a sample is to a finished product, in looks, motion, or content.
- Reference match: Using an example that is the same kind of object as the one you are making.
- Pattern matching: A model's habit of repeating a common layout instead of the case in front of it.
Sources
- UX Prototypes: Low Fidelity vs. High Fidelity Nielsen Norman Group
- The Risks of Imitating Designs (Even from Successful Companies) Nielsen Norman Group
- Good from Afar, But Far from Good: AI Prototyping in Real Design Contexts Nielsen Norman Group