Elux Space · Internal Design Plan
Advocio — Figma Design Plan
Appointment system + Lawyer CRM + Marketplace · built on Shadcn Kit
V1 Appointment
V3 CRM
V4 Marketplace
Desktop only
Shadcn Kit
No V2 admin
No mobile
No prototype
~65
Screens to create
+ ~4 shared system pages
4
Core user flows
booking · onboarding · CRM · marketplace
2 wk
Timeline — Rasya solo
AI-native workflow
Question 1
How many pages we create
~65 desktop screens (V1 30 + V3 24 + V4 11), plus shared Foundations & Components pages.
V1 Appointment system & lawyer portal
| Cluster | Screens | # |
|---|
| Auth & onboarding | Sign up / login, onboarding wizard, accept invite | 3 |
| Lawyer portal | Dashboard, profile, booking branding, Stripe setup, billing settings | 5 |
| Calendar & availability | Month / week / day, availability config, date overrides, locations | 6 |
| Team & meetings | Assistants, invite, meetings list, meeting detail, cancel, notifications | 6 |
| Booking page (public) | Landing → type → location → slot → details → review → pay → confirm → failed → upgrade | 10 |
| V1 subtotal | ~30 |
V3 Lawyer CRM
| Cluster | Screens | # |
|---|
| Contacts | List, person detail, company detail, create/edit, relationships, dup-warning | 6 |
| Cases | List, detail + 5 tabs (overview/meetings/tasks/notes/docs/billing), create/edit | 8 |
| Tasks & notes | Task inbox, create task, notes list, create note | 4 |
| Documents | List, upload, storage-quota state | 3 |
| Billing | Manual entry, case billing summary, PDF invoice export | 3 |
| V3 subtotal | ~24 |
V4 Marketplace & client account
| Cluster | Screens | # |
|---|
| Marketplace | Search results, filters, empty state | 3 |
| Public profile | Lawyer profile, reviews section, review-manage (lawyer), book-now entry | 4 |
| Client account | Sign up/login, bookings list, booking detail/cancel, leave review | 4 |
| V4 subtotal | ~11 |
| GRAND TOTAL | 65 screens + ~4 shared system pages | ~69 |
Not counted: empty / loading / error / plan-gated states — built as component variants, not separate screens. Confirm with client: marketing website (Home / Pricing / About, 6+ pages) — in scope or separate quote?
Question 2
How many flows
4 core flows. V3 & V4 reuse V1's contact record, booking flow, and components.
V1 Client booking — the money flow
Booking link→
Type→
Location→
Date/time→
Details→
Review + policy→
Pay (Stripe)→
Confirmed
V1 Lawyer onboarding
Sign up→
Profile + slug→
Availability + locations→
Connect Stripe→
Invite team→
Go live
V3 Case management — the CRM spine
Contact→
Open case→
Link meetings / tasks / notes / docs→
Log billing→
Export invoice PDF
V4 Marketplace discovery
Search→
Filter→
Public profile→
Book Now (reuses V1 flow)→
Leave review
Why ~65 screens fit 2 weeks: V3 & V4 are mostly composition on top of V1's system, not net-new design. Week 1 builds the system; week 2 composes.
Question 3
The AI-native approach
Internal ≠ external. Move fast with AI internally, sell the system externally.
Internal — how we move fast
- Google Stitch — draft layouts for dense screens (calendar, CRM tables)
- Vibe-code + shadcn — build real shadcn screens in code, reverse into Figma
- AI for content/states — empty states, errors, copy, then humanize
- Reuse Elux system — start from our tokens, not zero
External — how we present it
- "Structured design process on the Shadcn Kit"
- "Foundations → components → hi-fi screens → handoff"
- Sell the system & judgment, not the generation
- Never name tools — legal client, confidentiality
The rule: Internally we AI-generate drafts, then design on top. Externally we sell the design system and the thinking — never the shortcut. "The AI did it" is indefensible in a revision call; a documented system isn't.
Workflow order
STEP 1
Stitch / vibe-code a fast draft per cluster
STEP 2
Pull good parts into the shadcn Figma kit
STEP 3
Refine by hand — hierarchy, edge cases
STEP 4
Hand off — no prototype
This is also Rasya's learning track — the jump from landing pages to product design (dense tables, calendar systems, multi-step flows). Draft-then-design is the timeline engine, not pixel-pushing 72 frames by hand.