75 lines
3.7 KiB
Markdown
75 lines
3.7 KiB
Markdown
# BeautyHub Premium Web Interface Generator
|
|
|
|
A Figma development plugin that automatically generates a premium luxury desktop web dashboard product for beauty salons, beauty centers, spas, and med-beauty operations.
|
|
|
|
## What it generates
|
|
|
|
The plugin now creates **33 real Figma interface frames** and **0 companion detail/spec frames**.
|
|
|
|
- **3 entry/auth interfaces**: onboarding, login, and register
|
|
- **30 product dashboard interfaces** covering dashboards, detail pages, modal states, notification center, chat, billing, settings, and profile flows
|
|
- Every generated frame is a real desktop web UI state, not a documentation-only frame
|
|
|
|
## Generated interfaces and routes
|
|
|
|
1. Onboarding Introduction — `/onboarding`
|
|
2. Login Portal — `/login`
|
|
3. Register Salon Account — `/register`
|
|
4. Main Dashboard — `/dashboard`
|
|
5. Calendar Dashboard — `/dashboard/calendar`
|
|
6. Appointments Board — `/dashboard/appointments`
|
|
7. Appointment Details — `/dashboard/appointments/details`
|
|
8. Add Appointment Modal — `/dashboard/appointments/new`
|
|
9. Clients Dashboard — `/dashboard/clients`
|
|
10. Client Profile — `/dashboard/clients/profile`
|
|
11. Client Medical Record — `/dashboard/clients/medical-record`
|
|
12. Add Client Modal — `/dashboard/clients/new`
|
|
13. Staff Dashboard — `/dashboard/staff`
|
|
14. Staff Schedule — `/dashboard/staff/schedule`
|
|
15. Employee Profile — `/dashboard/staff/profile`
|
|
16. Services Board — `/dashboard/services`
|
|
17. Service Details — `/dashboard/services/details`
|
|
18. Inventory Dashboard — `/dashboard/inventory`
|
|
19. Add Product Modal — `/dashboard/inventory/products/new`
|
|
20. Orders Dashboard — `/dashboard/orders`
|
|
21. Store Dashboard — `/dashboard/store`
|
|
22. Reports Dashboard — `/dashboard/reports`
|
|
23. Revenue Analytics — `/dashboard/reports/revenue`
|
|
24. Marketing Dashboard — `/dashboard/marketing`
|
|
25. Loyalty Program — `/dashboard/marketing/loyalty`
|
|
26. Reviews Dashboard — `/dashboard/reviews`
|
|
27. Notification Center — `/dashboard/notifications`
|
|
28. Messages / Chat — `/dashboard/messages`
|
|
29. Payments Dashboard — `/dashboard/payments`
|
|
30. Subscription Plans — `/dashboard/billing/subscription`
|
|
31. Settings Dashboard — `/dashboard/settings`
|
|
32. User Profile — `/dashboard/profile`
|
|
33. Edit Profile Modal — `/dashboard/profile/edit`
|
|
|
|
## Important product changes
|
|
|
|
- Removed the previous 15 `Details & Buttons` companion frames.
|
|
- Added real screens for detail states, modal states, notification bell output, chat/messages, subscription plans, user profile, and edit profile.
|
|
- Redesigned onboarding as an educational product introduction with luxury image-style panels and system benefit sections.
|
|
- Kept `/login` and `/register` as explicit web interfaces.
|
|
- The output is desktop web only. No mobile app screens are generated.
|
|
|
|
## Design direction
|
|
|
|
- Luxury beauty salon and beauty center style
|
|
- Deep burgundy, wine red, rose gold, champagne, cream, and gold palette
|
|
- Modern SaaS hierarchy inspired by premium dashboard products
|
|
- SF Pro Display / SF Pro Text target typography with safe fallback when a Figma environment does not provide SF Pro
|
|
- Rich cards, charts, tables, image-style panels, modals, notification states, chat states, and operational dashboard layouts
|
|
- English interface text only
|
|
|
|
## How to run in Figma
|
|
|
|
1. Open Figma.
|
|
2. Go to **Menu -> Plugins -> Development -> Import plugin from manifest...**.
|
|
3. Select `manifest.json` from this folder.
|
|
4. Run **BeautyHub Premium Web Interface Generator** from the Development plugins menu.
|
|
5. Click **Generate 33 Premium Web Interfaces**.
|
|
|
|
The plugin creates a new Figma page named `BeautyHub Premium Web Interface System` and places all generated desktop frames on that page in a grid.
|