From a reference to a documentation site
A worked example: Family’s clarity, interpreted through Taste.
1. Start with the thing you admire
Open Family’s docs and study both the overview and an article. Notice the small navigation headings, restrained hierarchy, readable article width, and whitespace around the content. Those are useful ideas even when your product has nothing to do with Family’s.
This is a reproducible walkthrough, not a claim that a Taste collection was created in your account. These docs are the resulting design example.
2. Make a Taste Docs collection
Capture relevant reference images and upload them as inspiration. Create a Taste Docs collection and add multiple views: the docs overview, an article, and a second reference that helps with a different decision. Add a screenshot of your existing product so its visual language stays in view. Check each upload’s visibility.
3. Say what to borrow—and what to leave
Add a note to the navigation or the whole reference. Be precise about why the layout works. On another reference, explain the article width or image treatment. Do not assume saving a screenshot communicates which parts you want.
I like how this page keeps the navigation quiet and gives the article room to breathe. Borrow the hierarchy and spacing, not Family’s branding.
4. Connect and check
Connect your coding tool to Taste. Ask it to list the collections, find Taste Docs, and report whether the images and annotations are accessible. Resolve missing context before asking for a visual interpretation.
5. Give the agent a complete brief
Use my “Taste Docs” collection to design this documentation experience. Inspect the reference images and available annotations first. Borrow the navigation clarity, hierarchy, and spacing, but keep Taste’s existing branding and components. Inspect the codebase before proposing changes. Briefly explain the design direction before implementing it. Tell me if the collection or annotations aren’t available.
6. Trace the reference into the result
In this documentation experience, the persistent grouped sidebar interprets Family’s quiet navigation. The narrow article and generous section spacing make guides readable. Taste’s existing Geist type, neutral colors, and wordmark keep the result part of Taste.
The reference supplied principles. The implementation supplies Taste’s own navigation structure, product content, copyable prompts, and mobile behavior.
| From the reference | In Taste |
|---|---|
| Quiet navigation | A grouped Taste sidebar with a restrained active state. |
| Room for the article | A readable text measure and clear spacing between sections. |
| Product imagery leads | Existing Taste screenshots with honest captions, rather than decorative artwork. |
7. Review and evolve
Open the result on desktop and mobile. Find a page through navigation and search. Follow a connection guide and verify the tool response. If the result is too literal, refine the collection notes and ask the agent to revise those decisions.
What success looks like
You can point to the inspiration, the annotation that interpreted it, and the resulting Taste decision—without confusing inspiration with a clone.