Docs · How-tos
How-tos
Short paths from an interface that works to one that feels like it belongs.
3 min read
Outcome and prerequisites
How-tos are intentionally narrow. Choose the friction closest to the result you need, complete that task, then return to the broader guide when the component needs another kind of work.
- Use an authorized Tenor account and one focused component at a time.
- Create a first component from a screenshot when the reference carries the direction.
- Snip a region when one visible part of a working component needs attention.
- Make a useful variant when comparison will clarify the stronger direction.
- Move the selected component into a coding-agent workflow when it is ready for real application context.
Use a how-to
- 01
Choose the current point of friction
Pick the task that matches where the interface is getting stuck now.
- 02
Complete one narrow workflow
Keep the source, request, and expected outcome small enough to judge.
- 03
Continue from the useful result
Refine again, compare a variant, or move the selected version into code.
Expected result
Each how-to should leave you with one working result and an obvious next step. Begin with the screenshot recipe if you are creating; begin with Snip a component region if the component already works and one part feels off.
Choose a task
How-tos
Create a first component from a screenshot
Turn the useful direction in a focused screenshot into structured React that can adapt to your product.
How-tos
Snip a component region
Point to one visible part of a working component, describe the change, and keep the rest of the interface stable.
How-tos
Make a useful variant without redesigning everything
Create one distinct alternative while protecting the content, behavior, and structure that already belong.
How-tos
Move a component into a coding-agent workflow
Give Codex or Claude the selected component and the implementation context it needs to finish the work safely.