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
- Onboarding Introduction —
/onboarding - Login Portal —
/login - Register Salon Account —
/register - Main Dashboard —
/dashboard - Calendar Dashboard —
/dashboard/calendar - Appointments Board —
/dashboard/appointments - Appointment Details —
/dashboard/appointments/details - Add Appointment Modal —
/dashboard/appointments/new - Clients Dashboard —
/dashboard/clients - Client Profile —
/dashboard/clients/profile - Client Medical Record —
/dashboard/clients/medical-record - Add Client Modal —
/dashboard/clients/new - Staff Dashboard —
/dashboard/staff - Staff Schedule —
/dashboard/staff/schedule - Employee Profile —
/dashboard/staff/profile - Services Board —
/dashboard/services - Service Details —
/dashboard/services/details - Inventory Dashboard —
/dashboard/inventory - Add Product Modal —
/dashboard/inventory/products/new - Orders Dashboard —
/dashboard/orders - Store Dashboard —
/dashboard/store - Reports Dashboard —
/dashboard/reports - Revenue Analytics —
/dashboard/reports/revenue - Marketing Dashboard —
/dashboard/marketing - Loyalty Program —
/dashboard/marketing/loyalty - Reviews Dashboard —
/dashboard/reviews - Notification Center —
/dashboard/notifications - Messages / Chat —
/dashboard/messages - Payments Dashboard —
/dashboard/payments - Subscription Plans —
/dashboard/billing/subscription - Settings Dashboard —
/dashboard/settings - User Profile —
/dashboard/profile - Edit Profile Modal —
/dashboard/profile/edit
Important product changes
- Removed the previous 15
Details & Buttonscompanion 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
/loginand/registeras 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
- Open Figma.
- Go to Menu -> Plugins -> Development -> Import plugin from manifest....
- Select
manifest.jsonfrom this folder. - Run BeautyHub Premium Web Interface Generator from the Development plugins menu.
- 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.
Description
Languages
JavaScript
91.5%
HTML
8.5%