# 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.