Vidio

Vidio began as a UI kit for generative AI products, with a scope that included complete workflows rather than only the primary showcase screens.

I defined four operational areas: editing long prompts, handling waiting and error states, showing credit costs, and managing generated files for reuse or archiving.

These were not independent screens. A generation had to preserve its state from the prompt and processing queue through to the result, Recreate flow, and library.

Components were therefore designed within connected product flows first, then documented as reusable variants and states for the kit.

System scope

• Image to Video, Text to Video, Subject Reference, and Image Generation are brought together into one consistent creation experience.
• The prompt is treated as a core product surface, not a simple input. It supports long-form editing, character counts, and Recreate flows that let users build on a previous result instead of starting over.
• Credit costs appear at the moment they matter. Create actions show their price, the balance stays visible, and the referral loop that earns more credits lives inside the main product experience rather than being buried in settings.
• The waiting states most kits skip are fully designed. Processing indicators, percentage-based progress, and in-grid placeholders keep a generation visible while it is still being created.
• The library works as a complete management system rather than a simple gallery. Creations and Folders, content filters, multi-select, add-to-folder flows, and item-level controls all belong to the same system.
• The social layer is designed around generative behavior. Profiles surface Recreate counts alongside likes, while follower lists, comment threads, and effect shelves such as Trending and AI Dance work as both discovery surfaces and starting points for new prompts.
• Everything is held together by a single dark visual system. Near-black surfaces, a purple–magenta gradient reserved for creation actions, and AI-generated media acting as the primary source of color.

Outcome: four generation methods, the credit model, processing states, content library, and social layer were documented in one component system.