Skip to content
Trivosite / Guide

From inspiration to implementation

A few simple steps from discovering a work to making it your own.

Prepare a project briefImprove an existing site

How it works

  1. Discover work

    Search by name, category or tag and combine format, prompt availability and sorting filters. Featured follows editorial order; Recent follows the date added.

    Explore work
  2. Preview the experience

    Visible cards begin short previews as soon as they can play, with up to six visible previews playing at once on desktop and phones. Open a work for the full recording. A recording is not interactive; live-demo links appear only when provided. Closing the details restores your browsing position.

    Explore an example
  3. Copy the full prompt

    Sign in with an active membership to read and copy available prompts. Each work provides one complete selected version. Copying does not start a generation task. Manual copying is available when clipboard access fails. Reviewed does not mean generated and tested.

    Explore a prompt example

Prepare your project

Turn your goal and references into a brief for your coding tool.

Your inputs stay on this page. Copy or download the brief to keep it.

Describe its audience, main pages and the action visitors should complete.
Describe the mood, typography, colors and details you want to preserve.
One http(s) link per line, up to five. Attach reference images or recordings to your coding tool separately.

Target devices

This prepares instructions; it does not generate, test or publish a website.

Improve a site you already have

Free task briefs for your coding tool. Add your project and the issue to inspect.

Make it load faster

Find what delays the first useful screen, images and video playback.

View task brief
Work in my existing project. First inspect its structure and the relevant page. Preserve its approved visual identity, working interactions and content. Ask for the page URL, screenshots or device information only when needed to reproduce the problem. Explain findings with evidence before changing code. Make focused changes, then report what changed, what you tested and what remains unverified.

Task: Diagnose loading speed. Separate document response, JavaScript, fonts, hero imagery, card images and video first-frame waits. Measure cold and repeat visits at the actual target viewport. Check real request sizes, caching headers, duplicate requests and resource priorities. Preserve the initial background and avoid layout shifts. Use appropriately sized images, defer offscreen media and pause videos when hidden. Do not reduce image quality or remove interactions without showing the tradeoff. Compare before and after under the same conditions; distinguish local observations from real mobile-network measurements.

Fix the phone layout

Trace wrapping, clipped controls and overflow on the affected device.

View task brief
Work in my existing project. First inspect its structure and the relevant page. Preserve its approved visual identity, working interactions and content. Ask for the page URL, screenshots or device information only when needed to reproduce the problem. Explain findings with evidence before changing code. Make focused changes, then report what changed, what you tested and what remains unverified.

Task: Reproduce the responsive defect. Start with the reported device, browser and screenshot. Check viewport metadata, browser text scaling, font loading, fixed widths, flex/grid minimum sizes, safe areas and long text. Verify 320, 390, 430, 768 and desktop widths, plus large text and landscape where relevant. Keep important actions readable and reachable, preserve complete media and avoid horizontal document scrolling. Do not hide content or shrink all text to make a screenshot fit. Explain which checks used a resized browser and which used an actual device.

Make every action usable

Check the complete journey with a keyboard and reduced motion.

View task brief
Work in my existing project. First inspect its structure and the relevant page. Preserve its approved visual identity, working interactions and content. Ask for the page URL, screenshots or device information only when needed to reproduce the problem. Explain findings with evidence before changing code. Make focused changes, then report what changed, what you tested and what remains unverified.

Task: Audit keyboard and accessible interaction. Follow the main journey with Tab, Shift+Tab, Enter, Space and Escape. Check meaningful control names, visible focus, dialog focus containment and restoration, form labels, error messages and announced state changes. Ensure each action has one clear purpose and that touch users have an alternative to hover. Check reduced-motion behavior without removing essential feedback. Fix observed issues, document the steps to verify them and keep screen-reader testing distinct from inspecting ARIA attributes.

Check before publishing

Verify the real result and prepare a recoverable, focused release.

View task brief
Work in my existing project. First inspect its structure and the relevant page. Preserve its approved visual identity, working interactions and content. Ask for the page URL, screenshots or device information only when needed to reproduce the problem. Explain findings with evidence before changing code. Make focused changes, then report what changed, what you tested and what remains unverified.

Task: Review release readiness. Compare the result with its reference at matching dimensions. Exercise real controls, empty/error states, direct URLs and browser Back. Check phone layout, missing media, console errors, public output and content delivery. Confirm the actual build command succeeds and report the relevant behavioral checks. Keep credentials and protected content out of public output. Identify external services that are not connected instead of presenting them as working. Prepare a focused release and recovery plan that preserves existing user data; publish only within the authorization already given.

These are starting instructions, not an automated audit or a promise of a tested result. Review the changes in your own project.

A few things to know

The details that make exploring easier.

Saved locally

Your collection is stored in this browser. Download a JSON backup from Saved to restore it in another browser. The file contains saved references, not media. Clearing site data removes the local collection; if storage is unavailable, saves last for the current session only.

Open saved collections

Access and availability

Prompts require a verified account and an active membership. Missing prompts are marked as pending. Account verification depends on a connected email service. Purchases depend on connected payment services. Check availability before getting started.

Check memberships and availability

Interaction examples

These platform examples demonstrate interactions, not client projects: Mask Reveal and Text Switch. Existing example links and saved work remain available.

Creators and assets

The library uses supplied project material. Design images are visual references. Creator names appear only when provided. Work details explain the available preview and verification scope.

Prepare your build

Give your coding tool the full prompt, the reference image or recording, and your existing project when you have one. State your framework, target devices and required interactions. Check which images, fonts and models you are licensed to use; a preview does not include those source assets. Ask the tool to identify missing materials before it substitutes them.

Check the result before publishing

Compare the result with the reference at the same screen size. Try a narrow phone layout, keyboard navigation and reduced motion. Check that images load, videos pause offscreen, and buttons complete their stated action. If something differs, share the screenshot, device and exact steps with your coding tool. A successful build alone does not verify the design or behavior.