Vinyasa CRM Contact Management Wireframe
Explore a CRM wireframe with searchable contacts, pipeline filters, linked contact details and editable notes. Inspect and adapt the complete YAML prototype.
Customer list to contact detail
Prototype a customer relationship management workspace before implementing your CRM. RELAY uses synthetic companies and contacts, a search field, a pipeline-stage filter and a linked detail screen. All contact rows intentionally open the same representative record; this demonstrates navigation, not a database lookup.
Use this structure for a sales CRM, customer directory, account-management tool or internal operations dashboard. Compare it with the analytics dashboard and Kanban board when deciding whether your primary workflow is finding a record, reading metrics or moving work through stages.
Inspect the editable screen structure
The contact list is a column frame with stable row IDs. The detail screen separates identity, pipeline stage and conversation notes. Inspect crm-list, crm-stage and crm-notes in the YAML. Top-level coordinates belong to the document workspace; children inside a frame use local layout coordinates.
Try changing a label, increasing row spacing or adding a fourth synthetic customer. Validate the draft before applying it. A production record list may need a real table, pagination and sorting; these rows deliberately keep the example small and readable.
Plan search, permissions and empty states
Create separate pages for no contacts yet, no search results, a loading list, a read-only contact and an unavailable record. Give each state a clear next action. Review keyboard navigation, visible labels, contrast and focus behavior in the eventual application. The prototype alone does not establish accessibility compliance.
Search, filtering and Save are interface representations. Vinyasa does not persist CRM records, enforce permissions or connect this example to a customer database.
Adapt it with a focused AI request
Add an empty-state page for the contacts screen with a short explanation and an Add contact button. Preserve all existing IDs, pages and links. Propose a validated diff; do not replace the current contact list.
Review the proposed IDs and page ownership before applying. Export an editable .rvv project for another Vinyasa session, or share PNG/SVG with the team. See reviewed AI editing and the hosted MCP tool contract.