Vinyasa Demos - Real-World UI Examples

Ten hand-authored YAML documents show different product problems, not just different colors on the same screen. Each has named pages, explicit element ownership and linked actions. Preview one screen at a time, inspect the source and open an example in Vinyasa to adapt it. The previews are prototypes: displayed records and summaries are representative, not a connected database.

• Desktop application wireframe: STUDIO project explorer, document editor and preferences.
• Analytics dashboard: PULSE metrics, reports and team activity.
• Mobile travel app: FIELDNOTES discovery, booking and confirmation.
• Login and authentication flow: COMMON sign-in, account creation, recovery and welcome.
• Kanban project board: FORMA task columns and task details.
• E-commerce storefront: Product discovery, detail, cart and checkout.
• CRM contact management: Customer list, pipeline filter and contact details.
• Appointment scheduling: Calendar, time selection and booking summary.
• Mobile onboarding wizard: Profile, preferences and completion.
• Customer support dashboard: Ticket queue, conversation and reply draft.

For several platform previews in one article, see multi-screen apps.

Start with the workflow closest to your main user task. A CRM is useful for finding and inspecting a record. A Kanban board organizes work by stage. A dashboard supports comparison and monitoring. A wizard reduces a long form into deliberate steps. A booking flow makes dates, availability and confirmation visible.

These examples are intentionally small and use synthetic data. Adapt the CRM pattern for a membership directory, supplier list or recruitment pipeline. Adapt onboarding for a learning platform, employee setup or a short application form. Adapt booking for a consultation, class or service visit. Adapt support for an IT request queue or an internal approvals console.

For a healthcare, education or financial-services concept, use invented records and explicitly document privacy, permissions, consent and regulatory requirements. A wireframe does not certify compliance or implement safeguards. For content sites, portfolios or marketing pages, begin with layout and navigation elements rather than pretending a business dashboard is an appropriate template for every website.

Read the complete YAML alongside the preview. Keep stable IDs when changing an existing element, and preserve page ownership and navigation targets. Use a frame for a meaningful row or column; a nearby visual surface does not automatically own the elements drawn over it.

Make one focused revision, validate the draft and inspect the applied result. Ask AI for a bounded change rather than replacing an entire project. Keep .rvv for continued editing, YAML for structured review, and PNG/SVG for visual feedback. Read the document workflow, frame reference and AI review guide.

A complete implementation brief needs more than the populated screen. Include loading, no data, no search results, invalid input, permission denied, service failure and successful completion where they matter. Explain what happens when the user goes back, retries or cancels.

Use the UI states and wireframe review checklist to decide what to add. Fixed mockup dimensions are not responsive CSS; linked actions are not authentication, payment or persistence. Implement and test those behaviors separately.