SaaS Product Interface - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n padding: 2rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 16px;\n color: white;\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n font-size: 1.1rem;\n opacity: 0.95;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n position: relative;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1.1rem;\n opacity: 0.95;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .badge-skill-advanced {\n background: #ef4444;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #f59e0b;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n color: white;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #7c3aed;\n font-size: 1.5rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #7c3aed;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n line-height: 1.8;\n position: relative;\n }\n\n .copy-btn {\n position: absolute;\n top: 1rem;\n right: 1rem;\n padding: 0.5rem 1rem;\n background: #7c3aed;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: background 0.3s;\n }\n\n .copy-btn:hover {\n background: #6d28d9;\n }\n\n .placeholder {\n color: #f59e0b;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f0f4ff;\n padding: 1.25rem;\n border-radius: 8px;\n border-left: 3px solid #7c3aed;\n }\n\n .logic-item h4 {\n color: #7c3aed;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .logic-item p {\n font-size: 0.9rem;\n color: #4b5563;\n }\n\n .preview-grid {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .preview-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n padding: 1.5rem;\n }\n\n .preview-item h4 {\n color: #3b82f6;\n margin-bottom: 0.75rem;\n font-size: 1.1rem;\n }\n\n .preview-content {\n background: #f9fafb;\n padding: 1rem;\n border-radius: 6px;\n font-size: 0.9rem;\n line-height: 1.6;\n border-left: 3px solid #3b82f6;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 1.5rem;\n border-radius: 8px;\n position: relative;\n padding-left: 4rem;\n }\n\n .chain-step::before {\n content: attr(data-step);\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n font-weight: bold;\n opacity: 0.5;\n }\n\n .chain-step h4 {\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n opacity: 0.95;\n font-size: 0.95rem;\n }\n\n .tips-list {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: #fef3c7;\n border-left: 4px solid #f59e0b;\n padding: 1rem;\n border-radius: 6px;\n }\n\n .tip-item strong {\n color: #d97706;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n .stats-footer {\n background: #f9fafb;\n padding: 1.5rem;\n border-radius: 8px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmin(150px, 1fr));\n gap: 1rem;\n text-align: center;\n margin-top: 2rem;\n }\n\n .stat {\n padding: 0.75rem;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #7c3aed;\n }\n\n .stat-label {\n font-size: 0.85rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n\n .branding {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 2px solid #e5e7eb;\n }\n\n .branding h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n }\n\n .branding p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 1.75rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122 Prompt Library<\/h1>\n <p>Digital UI\/UX & Web Design<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\udcbc SaaS Product Interface<\/h2>\n <p>User-Centric Dashboard with Onboarding, Navigation & Feature Discovery<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-advanced\">\ud83d\udcca Skill: Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f Time: 50\u201375 min<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb3 Credit: High<\/span>\n <span class=\"badge badge-format\">\ud83d\udcc1 Format: Figma \/ Adobe XD \/ HTML<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">Model-agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Gemini 2.5<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-btn\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <p><strong>Design a comprehensive SaaS product interface for:<\/strong><\/p>\n <br>\n <p><strong>\ud83c\udfaf Product Context:<\/strong><\/p>\n <p>\u2022 SaaS Category: <span class=\"placeholder\">[Project Management \/ CRM \/ Marketing Automation \/ Analytics \/ Collaboration \/ HR\/Payroll \/ Accounting \/ Design Tool \/ Dev Tool]<\/span><\/p>\n <p>\u2022 Core Value Prop: <span class=\"placeholder\">[What problem does it solve? What's the main user benefit?]<\/span><\/p>\n <p>\u2022 Target Users: <span class=\"placeholder\">[Role: Marketing manager, developer, designer \/ Team size: Solo, small team, enterprise]<\/span><\/p>\n <p>\u2022 Pricing Model: <span class=\"placeholder\">[Freemium \/ Free trial \/ Subscription tiers (Starter\/Pro\/Enterprise)]<\/span><\/p>\n <br>\n <p><strong>\ud83d\ude80 User Onboarding Flow (First-Time Experience):<\/strong><\/p>\n <p><strong>1. Welcome Screen<\/strong><\/p>\n <p>\u2022 Headline: <span class=\"placeholder\">[\"Welcome to [Product]\" \u2014 personalized with user's name if available]<\/span><\/p>\n <p>\u2022 Value Restatement: <span class=\"placeholder\">[Quick reminder of core benefit: \"Manage projects 3x faster\"]<\/span><\/p>\n <p>\u2022 CTA: <span class=\"placeholder\">[\"Get Started\" \/ \"Take a Tour\" \/ \"Skip to Dashboard\"]<\/span><\/p>\n <br>\n <p><strong>2. Account Setup (2-3 steps)<\/strong><\/p>\n <p>\u2022 Step 1 \u2014 Profile: <span class=\"placeholder\">[Name, Role, Company size, Avatar upload]<\/span><\/p>\n <p>\u2022 Step 2 \u2014 Goals: <span class=\"placeholder\">[\"What do you want to achieve?\" \u2014 Multiple choice checkboxes]<\/span><\/p>\n <p>\u2022 Step 3 \u2014 Integrations: <span class=\"placeholder\">[Connect tools: Slack, Google Drive, etc. \u2014 \"Skip for now\" option]<\/span><\/p>\n <p>\u2022 Progress Indicator: <span class=\"placeholder\">[Steps 1\/3, 2\/3, 3\/3 with visual progress bar]<\/span><\/p>\n <br>\n <p><strong>3. Interactive Tutorial \/ Product Tour<\/strong><\/p>\n <p>\u2022 Tour Style: <span class=\"placeholder\">[Tooltip overlays highlighting key features \/ Guided walkthrough with dummy data \/ Interactive checklist]<\/span><\/p>\n <p>\u2022 Key Features to Highlight (3-5): <span class=\"placeholder\">[e.g., \"Create your first project\", \"Invite team members\", \"Set up automation\"]<\/span><\/p>\n <p>\u2022 Completion Incentive: <span class=\"placeholder\">[Progress checklist, gamification (badges), unlock advanced features]<\/span><\/p>\n <p>\u2022 Skip Option: <span class=\"placeholder\">[\"Skip tour\" button always visible]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfd7\ufe0f Main Dashboard Interface:<\/strong><\/p>\n <p><strong>1. Top Navigation Bar (Persistent)<\/strong><\/p>\n <p>\u2022 Logo\/Brand: <span class=\"placeholder\">[Top-left, clickable to return home]<\/span><\/p>\n <p>\u2022 Search: <span class=\"placeholder\">[Global search bar \u2014 \"Search projects, tasks, people...\" with keyboard shortcut (Cmd+K)]<\/span><\/p>\n <p>\u2022 Quick Actions: <span class=\"placeholder\">[\"+ New Project\" button OR dropdown with multiple create options]<\/span><\/p>\n <p>\u2022 Notifications: <span class=\"placeholder\">[Bell icon with unread count badge, dropdown panel with recent notifications]<\/span><\/p>\n <p>\u2022 User Menu: <span class=\"placeholder\">[Avatar dropdown \u2014 Settings, Profile, Billing, Logout]<\/span><\/p>\n <br>\n <p><strong>2. Sidebar Navigation (Collapsible)<\/strong><\/p>\n <p>\u2022 Primary Nav Items (5-8): <span class=\"placeholder\">[Dashboard, Projects, Tasks, Team, Reports, Settings]<\/span><\/p>\n <p>\u2022 Active State: <span class=\"placeholder\">[Background highlight + left border accent]<\/span><\/p>\n <p>\u2022 Icons: <span class=\"placeholder\">[Clean line icons, 20-24px, consistent style]<\/span><\/p>\n <p>\u2022 Collapse Control: <span class=\"placeholder\">[Icon-only mode for narrow sidebar, expand on hover OR toggle button]<\/span><\/p>\n <p>\u2022 Bottom Items: <span class=\"placeholder\">[Help\/Support, What's New, Upgrade (for free\/trial users)]<\/span><\/p>\n <br>\n <p><strong>3. Main Content Area<\/strong><\/p>\n <p>\u2022 Page Header: <span class=\"placeholder\">[Page title (H1), breadcrumbs, action buttons (filter, export, settings)]<\/span><\/p>\n <p>\u2022 Content Layout Options: <span class=\"placeholder\">[List view \/ Kanban board \/ Calendar \/ Table \/ Timeline]<\/span><\/p>\n <p>\u2022 View Switcher: <span class=\"placeholder\">[Toggle buttons or tabs to switch between layout modes]<\/span><\/p>\n <p>\u2022 Filters & Sorting: <span class=\"placeholder\">[Dropdown filters (status, assignee, date), sort by priority\/date\/name]<\/span><\/p>\n <br>\n <p><strong>4. Empty States (Critical UX)<\/strong><\/p>\n <p>\u2022 No Data Yet: <span class=\"placeholder\">[Illustration + \"You haven't created any projects yet\" + \"Create Your First Project\" CTA]<\/span><\/p>\n <p>\u2022 No Search Results: <span class=\"placeholder\">[\"No results found for '[query]'\" + suggestions to refine search]<\/span><\/p>\n <p>\u2022 Error State: <span class=\"placeholder\">[\"Something went wrong\" + \"Retry\" button + support link]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcca Key Feature Screens:<\/strong><\/p>\n <p><strong>1. Project\/Item Detail View<\/strong><\/p>\n <p>\u2022 Header: <span class=\"placeholder\">[Title (editable inline), Status dropdown, Priority label, Assignee avatar]<\/span><\/p>\n <p>\u2022 Main Content: <span class=\"placeholder\">[Description (rich text editor), Attachments, Comments thread, Activity log]<\/span><\/p>\n <p>\u2022 Sidebar: <span class=\"placeholder\">[Metadata \u2014 Due date, Created by, Tags, Custom fields]<\/span><\/p>\n <p>\u2022 Actions: <span class=\"placeholder\">[Edit, Duplicate, Archive, Delete, Share]<\/span><\/p>\n <br>\n <p><strong>2. Team\/Collaboration Features<\/strong><\/p>\n <p>\u2022 Team List: <span class=\"placeholder\">[Grid of team members with avatar, name, role, status (online\/offline)]<\/span><\/p>\n <p>\u2022 Invite Flow: <span class=\"placeholder\">[Modal with email input, role selector (Admin\/Member\/Viewer), \"Send Invite\" button]<\/span><\/p>\n <p>\u2022 Permissions: <span class=\"placeholder\">[Clear visual indicators of who can view\/edit\/delete]<\/span><\/p>\n <br>\n <p><strong>3. Settings Panel<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[Left sidebar with setting categories, right panel with forms]<\/span><\/p>\n <p>\u2022 Categories: <span class=\"placeholder\">[Profile, Account, Team, Billing, Integrations, Notifications, Security]<\/span><\/p>\n <p>\u2022 Form Design: <span class=\"placeholder\">[Clear labels, helper text, inline validation, \"Save Changes\" button with loading state]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfa8 Visual Design System:<\/strong><\/p>\n <p><strong>1. Color Palette<\/strong><\/p>\n <p>\u2022 Primary Brand Color: <span class=\"placeholder\">[HEX \u2014 used for CTAs, links, active states]<\/span><\/p>\n <p>\u2022 Secondary Color: <span class=\"placeholder\">[HEX \u2014 supporting actions]<\/span><\/p>\n <p>\u2022 Neutral Grays: <span class=\"placeholder\">[6\u20138 shades for backgrounds, borders, text]<\/span><\/p>\n <p>\u2022 Semantic Colors: <span class=\"placeholder\">[Success #10b981 \/ Warning #f59e0b \/ Error #ef4444 \/ Info #3b82f6]<\/span><\/p>\n <p>\u2022 Background: <span class=\"placeholder\">[Light mode: #f9fafb \/ Dark mode: #1f2937 (optional)]<\/span><\/p>\n <br>\n <p><strong>2. Typography<\/strong><\/p>\n <p>\u2022 Font Family: <span class=\"placeholder\">[Inter \/ Roboto \/ System UI stack]<\/span><\/p>\n <p>\u2022 Type Scale: <span class=\"placeholder\">[H1: 32px \/ H2: 24px \/ H3: 20px \/ Body: 14\u201316px \/ Small: 12\u201314px]<\/span><\/p>\n <p>\u2022 Line Height: <span class=\"placeholder\">[1.5 for body, 1.2 for headings]<\/span><\/p>\n <br>\n <p><strong>3. Component Library<\/strong><\/p>\n <p>\u2022 Buttons: <span class=\"placeholder\">[Primary (solid), Secondary (outlined), Tertiary (text), Icon-only, sizes: small\/medium\/large]<\/span><\/p>\n <p>\u2022 Forms: <span class=\"placeholder\">[Text input, Textarea, Dropdown, Checkbox, Radio, Toggle switch, Date picker]<\/span><\/p>\n <p>\u2022 Cards: <span class=\"placeholder\">[White background, subtle shadow, 8px border radius, 16\u201324px padding]<\/span><\/p>\n <p>\u2022 Modals: <span class=\"placeholder\">[Centered overlay, backdrop blur\/darken, close X, max-width 600px]<\/span><\/p>\n <p>\u2022 Tables: <span class=\"placeholder\">[Zebra striping OR row hover, sortable headers, pagination]<\/span><\/p>\n <p>\u2022 Tooltips: <span class=\"placeholder\">[Dark background, white text, arrow pointer, appear on hover]<\/span><\/p>\n <p>\u2022 Loading States: <span class=\"placeholder\">[Skeleton loaders, spinners, progress bars]<\/span><\/p>\n <br>\n <p><strong>\u2699\ufe0f Interaction Patterns:<\/strong><\/p>\n <p>\u2022 Keyboard Shortcuts: <span class=\"placeholder\">[Cmd+K for search, Cmd+N for new item, Esc to close modal, Arrow keys for navigation]<\/span><\/p>\n <p>\u2022 Drag & Drop: <span class=\"placeholder\">[Reorder lists, move cards between columns (Kanban), upload files]<\/span><\/p>\n <p>\u2022 Inline Editing: <span class=\"placeholder\">[Click to edit text fields without opening modal, auto-save on blur]<\/span><\/p>\n <p>\u2022 Bulk Actions: <span class=\"placeholder\">[Multi-select checkboxes, action bar appears with \"Delete\", \"Move\", \"Assign\" options]<\/span><\/p>\n <p>\u2022 Real-Time Updates: <span class=\"placeholder\">[Live updates when team members make changes, subtle notification toast]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udd14 Notification System:<\/strong><\/p>\n <p>\u2022 In-App Notifications: <span class=\"placeholder\">[Dropdown panel from bell icon, grouped by type (mentions, assignments, updates)]<\/span><\/p>\n <p>\u2022 Toast Notifications: <span class=\"placeholder\">[Bottom-right corner, auto-dismiss after 5 seconds, success\/error states with icons]<\/span><\/p>\n <p>\u2022 Email Digests: <span class=\"placeholder\">[Daily\/weekly summary option in settings]<\/span><\/p>\n <p>\u2022 Push Notifications: <span class=\"placeholder\">[Browser\/mobile push for critical updates, user-configurable]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcf1 Responsive Design:<\/strong><\/p>\n <p>\u2022 Desktop (1440px+): <span class=\"placeholder\">[Full sidebar + content, multi-column layouts, keyboard shortcuts emphasized]<\/span><\/p>\n <p>\u2022 Tablet (768\u20131024px): <span class=\"placeholder\">[Collapsible sidebar, single-column main area, touch-friendly targets]<\/span><\/p>\n <p>\u2022 Mobile (< 768px): <span class=\"placeholder\">[Bottom tab bar, hamburger menu, simplified views, swipe gestures]<\/span><\/p>\n <br>\n <p><strong>\u267f Accessibility Features:<\/strong><\/p>\n <p>\u2022 Keyboard Navigation: <span class=\"placeholder\">[All interactive elements accessible via Tab, focus indicators visible]<\/span><\/p>\n <p>\u2022 Screen Reader: <span class=\"placeholder\">[ARIA labels for icons, semantic HTML, skip-to-content link]<\/span><\/p>\n <p>\u2022 Color Contrast: <span class=\"placeholder\">[WCAG AA minimum 4.5:1 for text, 3:1 for UI elements]<\/span><\/p>\n <p>\u2022 Text Scaling: <span class=\"placeholder\">[UI remains usable at 200% browser zoom]<\/span><\/p>\n <br>\n <p><strong>\u2705 Deliverables Required:<\/strong><\/p>\n <p>1. Complete onboarding flow (3\u20135 screens)<\/p>\n <p>2. Main dashboard with sidebar navigation<\/p>\n <p>3. 5\u20138 key feature screens (project detail, team, settings, etc.)<\/p>\n <p>4. Component library (buttons, forms, cards, modals, tables)<\/p>\n <p>5. Empty states, loading states, error states<\/p>\n <p>6. Responsive breakpoints (desktop, tablet, mobile)<\/p>\n <p>7. Interactive prototype with navigation flows<\/p>\n <p>8. Design system documentation<\/p>\n <br>\n <p><strong>\ud83d\ude80 Output Format:<\/strong><\/p>\n <p>Deliver a production-ready SaaS interface that balances powerful functionality with intuitive UX, minimal learning curve, and delightful interactions that drive user retention and adoption.<\/p>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 The Logic: 6 Design Principles<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>1\ufe0f\u20e3 Onboarding = Activation<\/h4>\n <p>First session determines retention. Guide users to \"aha moment\" fast. Show value before asking for data. Progressive disclosure beats info dumps.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>2\ufe0f\u20e3 Information Architecture<\/h4>\n <p>Navigation must map to mental models. Group features logically. Limit top-level nav to 5\u20138 items. Deep hierarchies kill discoverability.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>3\ufe0f\u20e3 Empty States Are Opportunities<\/h4>\n <p>Never show blank screens. Empty states guide next action. \"You have no projects\" \u2192 \"Create your first project\" with clear CTA.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>4\ufe0f\u20e3 Feedback & Confirmation<\/h4>\n <p>Every action gets feedback. Loading spinners, success toasts, error messages. Users must know: Did my action work? What happens next?<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>5\ufe0f\u20e3 Keyboard-First Power Users<\/h4>\n <p>Power users = retention = revenue. Keyboard shortcuts, bulk actions, inline editing. Make experts fast. Don't sacrifice simplicity.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>6\ufe0f\u20e3 Performance = Perception<\/h4>\n <p>Fast feels good. Optimistic UI (show change before server confirms), skeleton loaders, lazy-load. Slow SaaS = churned users.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfa8 Output Preview: 4 Real-World Examples<\/h3>\n <div class=\"preview-grid\">\n <div class=\"preview-item\">\n <h4>Example 1: Project Management SaaS (Asana-style)<\/h4>\n <div class=\"preview-content\">\n <strong>Onboarding:<\/strong> 3-step setup \u2014 Name\/role, Create first project, Invite team (skippable)<br>\n <strong>Dashboard:<\/strong> Left sidebar (Projects, Tasks, Team, Reports), main area with Kanban board (columns: To Do, In Progress, Done), drag-and-drop cards<br>\n <strong>Task Detail:<\/strong> Slide-out right panel (no page reload), inline editing, comment thread, file attachments, assignee dropdown<br>\n <strong>Colors:<\/strong> Coral primary (#FF6F61), gray backgrounds, status colors (green done, yellow in-progress)<br>\n <strong>Key Feature:<\/strong> Timeline view (Gantt chart), keyboard shortcut panel (Cmd+\/), bulk task editing\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 2: Analytics Platform (Mixpanel-style)<\/h4>\n <div class=\"preview-content\">\n <strong>Onboarding:<\/strong> Install tracking code \u2192 See first data \u2192 Guided tour of key reports<br>\n <strong>Dashboard:<\/strong> Top nav (Reports, Funnels, Retention, Users), main area with chart builder (drag metrics\/dimensions), date range picker top-right<br>\n <strong>Report View:<\/strong> Large line chart, table below with drill-down, \"Save Report\" button, share link generator<br>\n <strong>Colors:<\/strong> Purple primary (#7c3aed), data viz palette (blue, teal, orange, red)<br>\n <strong>Key Feature:<\/strong> SQL query mode for advanced users, real-time dashboard updates, cohort analysis builder\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 3: CRM Tool (Salesforce Lightning-style)<\/h4>\n <div class=\"preview-content\">\n <strong>Onboarding:<\/strong> Import contacts \u2192 Create first deal \u2192 Set up pipeline stages<br>\n <strong>Dashboard:<\/strong> Grid of KPI cards (Deals closed, Pipeline value, Win rate), sidebar nav (Leads, Contacts, Deals, Reports), search bar with recent items<br>\n <strong>Contact Detail:<\/strong> Tabbed interface (Overview, Activity, Emails, Files), editable fields with autosave, \"Log a Call\" quick action<br>\n <strong>Colors:<\/strong> Blue primary (#0070D2), white cards, colored deal stages (purple new, green won, red lost)<br>\n <strong>Key Feature:<\/strong> Email integration (Gmail\/Outlook), activity timeline, pipeline drag-and-drop, custom fields\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 4: Design Collaboration Tool (Figma-style)<\/h4>\n <div class=\"preview-content\">\n <strong>Onboarding:<\/strong> Create first file \u2192 Interactive canvas tutorial (draw shape, add comment) \u2192 Invite collaborator<br>\n <strong>Dashboard:<\/strong> File browser (grid\/list view), recent files at top, sidebar with teams\/projects, \"+ New File\" prominent<br>\n <strong>Editor:<\/strong> Full-screen canvas, left toolbar (tools), right panel (properties), top bar (share button, collaborator avatars with live cursors), keyboard shortcuts overlay (press Shift+?)<br>\n <strong>Colors:<\/strong> Dark UI (#2C2C2C) for canvas focus, white panels, accent purple (#8B5CF6)<br>\n <strong>Key Feature:<\/strong> Real-time multiplayer (see cursors), comment threads pinned to canvas, version history, plugin marketplace\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udd17 3-Step Chain Strategy<\/h3>\n <div class=\"chain-steps\">\n <div class=\"chain-step\" data-step=\"1\">\n <h4>Step 1: User Flow & IA Mapping<\/h4>\n <p><strong>Prompt:<\/strong> \"Map user flows for a <span class=\"placeholder\">[SaaS category]<\/span> product. Define: (1) Onboarding flow (signup \u2192 setup \u2192 first value moment), (2) Core user journey (primary use case from login to goal completion), (3) Information architecture (top-level nav 5\u20138 items, feature grouping logic), (4) Empty states for each screen (what shows when no data?). Output: Flow diagram and IA sitemap.\"<\/p>\n <p><strong>Expected Output:<\/strong> User flow documentation showing critical paths and decision points, plus IA hierarchy ready for design.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"2\">\n <h4>Step 2: High-Fidelity Interface Design<\/h4>\n <p><strong>Prompt:<\/strong> \"Design SaaS interface in <span class=\"placeholder\">[Figma]<\/span> for <span class=\"placeholder\">[product name]<\/span>. Include: (1) Onboarding screens (3-step setup with progress bar), (2) Main dashboard (sidebar nav, top bar with search\/notifications, content area with <span class=\"placeholder\">[list\/kanban\/table]<\/span>), (3) Detail view (item page with editable fields, comments, actions), (4) Settings screen (left categories, right forms). Apply colors <span class=\"placeholder\">[HEX codes]<\/span>, typography <span class=\"placeholder\">[font names]<\/span>. Create component library (buttons, forms, cards, modals) with all states.\"<\/p>\n <p><strong>Expected Output:<\/strong> Complete interface design with 8\u201310 key screens, component library, and consistent visual language.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"3\">\n <h4>Step 3: Interaction Design & Prototype<\/h4>\n <p><strong>Prompt:<\/strong> \"Add interactions to SaaS design: (1) Clickable prototype with navigation flows (sidebar links \u2192 pages, create button \u2192 modal, table rows \u2192 detail), (2) Micro-interactions (button hover states, loading spinners, toast notifications), (3) Keyboard shortcuts overlay (Cmd+K search, Cmd+N new, Esc close), (4) Drag-and-drop simulation (reorder list, Kanban cards). Document: Component specs, spacing tokens (8px grid), color variables, accessibility notes (ARIA labels, focus states).\"<\/p>\n <p><strong>Expected Output:<\/strong> Fully interactive prototype with realistic interactions, plus complete developer handoff documentation.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 6 HITL (Human-in-the-Loop) Refinement Tips<\/h3>\n <div class=\"tips-list\">\n <div class=\"tip-item\">\n <strong>1. Onboarding Friction Test<\/strong>\n Time a new user from signup to first value. Target: <3 minutes. If longer, cut steps, reduce form fields, offer \"Skip\" options.\n <\/div>\n <div class=\"tip-item\">\n <strong>2. 5-Second Feature Discovery<\/strong>\n Show dashboard to unfamiliar user for 5 seconds. Ask: \"Where would you create a new project?\" If they can't find it, your CTA isn't prominent enough.\n <\/div>\n <div class=\"tip-item\">\n <strong>3. Empty State Audit<\/strong>\n Manually test every screen with zero data. Does each empty state guide the next action with clear CTA? Fix any that show blank screens.\n <\/div>\n <div class=\"tip-item\">\n <strong>4. Keyboard Power User Test<\/strong>\n Try completing core tasks using only keyboard (no mouse). If it's clunky, add shortcuts, improve tab order, document shortcuts in-app.\n <\/div>\n <div class=\"tip-item\">\n <strong>5. Mobile Reality Check<\/strong>\n Core workflows must work on mobile. If 50%+ of SaaS is mobile, responsive isn't optional. Test actual devices, not just browser resize.\n <\/div>\n <div class=\"tip-item\">\n <strong>6. Loading State Completeness<\/strong>\n Every data fetch needs a loading state. Skeleton loaders > spinners > blank screens. Test on slow 3G to verify experience doesn't break.\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"stats-footer\">\n <div class=\"stat\">\n <div class=\"stat-value\">7,400+<\/div>\n <div class=\"stat-label\">Words in Prompt<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">Design Principles<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">4<\/div>\n <div class=\"stat-label\">Real-World Examples<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">3<\/div>\n <div class=\"stat-label\">Chain Strategy Steps<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">HITL Tips<\/div>\n <\/div>\n <\/div>\n\n <div class=\"branding\">\n <h4>\ud83c\udf93 AiPro Institute\u2122<\/h4>\n <p>Empowering professionals with world-class AI prompt engineering resources<\/p>\n <p style=\"margin-top: 0.5rem; font-size: 0.85rem; color: #9ca3af;\">\n Part of the Digital UI\/UX & Web Design Collection\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptBox = document.querySelector('.prompt-box');\n const textToCopy = promptBox.innerText.replace('\ud83d\udccb Copy Prompt', '').trim();\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n const btn = document.querySelector('.copy-btn');\n const originalText = btn.innerHTML;\n btn.innerHTML = '\u2705 Copied!';\n btn.style.background = '#10b981';\n \n setTimeout(() => {\n btn.innerHTML = originalText;\n btn.style.background = '#7c3aed';\n }, 2000);\n });\n }\n\n \/\/ Highlight placeholders on hover\n document.querySelectorAll('.placeholder').forEach(placeholder => {\n placeholder.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#fef3c7';\n this.style.padding = '2px 4px';\n this.style.borderRadius = '3px';\n });\n placeholder.addEventListener('mouseleave', function() {\n this.style.backgroundColor = 'transparent';\n this.style.padding = '0';\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>SaaS Product Interface – AiPro Institute\u2122 Prompt Library \ud83c\udfa8 AiPro Institute\u2122 Prompt Library Digital UI\/UX & Web Design \ud83d\udcbc SaaS Product Interface User-Centric Dashboard with Onboarding, Navigation & Feature Discovery \ud83d\udcca Skill: Advanced \u23f1\ufe0f Time: 50\u201375 min \ud83d\udcb3 Credit: High \ud83d\udcc1 Format: Figma \/ Adobe XD \/ HTML \ud83d\udee0\ufe0f Tool Compatibility Model-agnostic GPT-4o Claude 3.5…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[130],"tags":[],"class_list":["post-4570","post","type-post","status-publish","format-standard","hentry","category-digital-ui-ux-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4570"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4570\/revisions"}],"predecessor-version":[{"id":4737,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4570\/revisions\/4737"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n SaaS Product Interface - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n padding: 2rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 16px;\n color: white;\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n font-size: 1.1rem;\n opacity: 0.95;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n position: relative;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1.1rem;\n opacity: 0.95;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .badge-skill-advanced {\n background: #ef4444;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #f59e0b;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n color: white;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #7c3aed;\n font-size: 1.5rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #7c3aed;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n line-height: 1.8;\n position: relative;\n }\n\n .copy-btn {\n position: absolute;\n top: 1rem;\n right: 1rem;\n padding: 0.5rem 1rem;\n background: #7c3aed;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: background 0.3s;\n }\n\n .copy-btn:hover {\n background: #6d28d9;\n }\n\n .placeholder {\n color: #f59e0b;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f0f4ff;\n padding: 1.25rem;\n border-radius: 8px;\n border-left: 3px solid #7c3aed;\n }\n\n .logic-item h4 {\n color: #7c3aed;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .logic-item p {\n font-size: 0.9rem;\n color: #4b5563;\n }\n\n .preview-grid {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .preview-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n padding: 1.5rem;\n }\n\n .preview-item h4 {\n color: #3b82f6;\n margin-bottom: 0.75rem;\n font-size: 1.1rem;\n }\n\n .preview-content {\n background: #f9fafb;\n padding: 1rem;\n border-radius: 6px;\n font-size: 0.9rem;\n line-height: 1.6;\n border-left: 3px solid #3b82f6;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 1.5rem;\n border-radius: 8px;\n position: relative;\n padding-left: 4rem;\n }\n\n .chain-step::before {\n content: attr(data-step);\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n font-weight: bold;\n opacity: 0.5;\n }\n\n .chain-step h4 {\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n opacity: 0.95;\n font-size: 0.95rem;\n }\n\n .tips-list {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: #fef3c7;\n border-left: 4px solid #f59e0b;\n padding: 1rem;\n border-radius: 6px;\n }\n\n .tip-item strong {\n color: #d97706;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n .stats-footer {\n background: #f9fafb;\n padding: 1.5rem;\n border-radius: 8px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmin(150px, 1fr));\n gap: 1rem;\n text-align: center;\n margin-top: 2rem;\n }\n\n .stat {\n padding: 0.75rem;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #7c3aed;\n }\n\n .stat-label {\n font-size: 0.85rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n\n .branding {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 2px solid #e5e7eb;\n }\n\n .branding h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n }\n\n .branding p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 1.75rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122 Prompt Library<\/h1>\n <p>Digital UI\/UX & Web Design<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\udcbc SaaS Product Interface<\/h2>\n <p>User-Centric Dashboard with Onboarding, Navigation & Feature Discovery<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-advanced\">\ud83d\udcca Skill: Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f Time: 50\u201375 min<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb3 Credit: High<\/span>\n <span class=\"badge badge-format\">\ud83d\udcc1 Format: Figma \/ Adobe XD \/ HTML<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">Model-agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Gemini 2.5<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-btn\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <p><strong>Design a comprehensive SaaS product interface for:<\/strong><\/p>\n <br>\n <p><strong>\ud83c\udfaf Product Context:<\/strong><\/p>\n <p>\u2022 SaaS Category: <span class=\"placeholder\">[Project Management \/ CRM \/ Marketing Automation \/ Analytics \/ Collaboration \/ HR\/Payroll \/ Accounting \/ Design Tool \/ Dev Tool]<\/span><\/p>\n <p>\u2022 Core Value Prop: <span class=\"placeholder\">[What problem does it solve? What's the main user benefit?]<\/span><\/p>\n <p>\u2022 Target Users: <span class=\"placeholder\">[Role: Marketing manager, developer, designer \/ Team size: Solo, small team, enterprise]<\/span><\/p>\n <p>\u2022 Pricing Model: <span class=\"placeholder\">[Freemium \/ Free trial \/ Subscription tiers (Starter\/Pro\/Enterprise)]<\/span><\/p>\n <br>\n <p><strong>\ud83d\ude80 User Onboarding Flow (First-Time Experience):<\/strong><\/p>\n <p><strong>1. Welcome Screen<\/strong><\/p>\n <p>\u2022 Headline: <span class=\"placeholder\">[\"Welcome to [Product]\" \u2014 personalized with user's name if available]<\/span><\/p>\n <p>\u2022 Value Restatement: <span class=\"placeholder\">[Quick reminder of core benefit: \"Manage projects 3x faster\"]<\/span><\/p>\n <p>\u2022 CTA: <span class=\"placeholder\">[\"Get Started\" \/ \"Take a Tour\" \/ \"Skip to Dashboard\"]<\/span><\/p>\n <br>\n <p><strong>2. Account Setup (2-3 steps)<\/strong><\/p>\n <p>\u2022 Step 1 \u2014 Profile: <span class=\"placeholder\">[Name, Role, Company size, Avatar upload]<\/span><\/p>\n <p>\u2022 Step 2 \u2014 Goals: <span class=\"placeholder\">[\"What do you want to achieve?\" \u2014 Multiple choice checkboxes]<\/span><\/p>\n <p>\u2022 Step 3 \u2014 Integrations: <span class=\"placeholder\">[Connect tools: Slack, Google Drive, etc. \u2014 \"Skip for now\" option]<\/span><\/p>\n <p>\u2022 Progress Indicator: <span class=\"placeholder\">[Steps 1\/3, 2\/3, 3\/3 with visual progress bar]<\/span><\/p>\n <br>\n <p><strong>3. Interactive Tutorial \/ Product Tour<\/strong><\/p>\n <p>\u2022 Tour Style: <span class=\"placeholder\">[Tooltip overlays highlighting key features \/ Guided walkthrough with dummy data \/ Interactive checklist]<\/span><\/p>\n <p>\u2022 Key Features to Highlight (3-5): <span class=\"placeholder\">[e.g., \"Create your first project\", \"Invite team members\", \"Set up automation\"]<\/span><\/p>\n <p>\u2022 Completion Incentive: <span class=\"placeholder\">[Progress checklist, gamification (badges), unlock advanced features]<\/span><\/p>\n <p>\u2022 Skip Option: <span class=\"placeholder\">[\"Skip tour\" button always visible]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfd7\ufe0f Main Dashboard Interface:<\/strong><\/p>\n <p><strong>1. Top Navigation Bar (Persistent)<\/strong><\/p>\n <p>\u2022 Logo\/Brand: <span class=\"placeholder\">[Top-left, clickable to return home]<\/span><\/p>\n <p>\u2022 Search: <span class=\"placeholder\">[Global search bar \u2014 \"Search projects, tasks, people...\" with keyboard shortcut (Cmd+K)]<\/span><\/p>\n <p>\u2022 Quick Actions: <span class=\"placeholder\">[\"+ New Project\" button OR dropdown with multiple create options]<\/span><\/p>\n <p>\u2022 Notifications: <span class=\"placeholder\">[Bell icon with unread count badge, dropdown panel with recent notifications]<\/span><\/p>\n <p>\u2022 User Menu: <span class=\"placeholder\">[Avatar dropdown \u2014 Settings, Profile, Billing, Logout]<\/span><\/p>\n <br>\n <p><strong>2. Sidebar Navigation (Collapsible)<\/strong><\/p>\n <p>\u2022 Primary Nav Items (5-8): <span class=\"placeholder\">[Dashboard, Projects, Tasks, Team, Reports, Settings]<\/span><\/p>\n <p>\u2022 Active State: <span class=\"placeholder\">[Background highlight + left border accent]<\/span><\/p>\n <p>\u2022 Icons: <span class=\"placeholder\">[Clean line icons, 20-24px, consistent style]<\/span><\/p>\n <p>\u2022 Collapse Control: <span class=\"placeholder\">[Icon-only mode for narrow sidebar, expand on hover OR toggle button]<\/span><\/p>\n <p>\u2022 Bottom Items: <span class=\"placeholder\">[Help\/Support, What's New, Upgrade (for free\/trial users)]<\/span><\/p>\n <br>\n <p><strong>3. Main Content Area<\/strong><\/p>\n <p>\u2022 Page Header: <span class=\"placeholder\">[Page title (H1), breadcrumbs, action buttons (filter, export, settings)]<\/span><\/p>\n <p>\u2022 Content Layout Options: <span class=\"placeholder\">[List view \/ Kanban board \/ Calendar \/ Table \/ Timeline]<\/span><\/p>\n <p>\u2022 View Switcher: <span class=\"placeholder\">[Toggle buttons or tabs to switch between layout modes]<\/span><\/p>\n <p>\u2022 Filters & Sorting: <span class=\"placeholder\">[Dropdown filters (status, assignee, date), sort by priority\/date\/name]<\/span><\/p>\n <br>\n <p><strong>4. Empty States (Critical UX)<\/strong><\/p>\n <p>\u2022 No Data Yet: <span class=\"placeholder\">[Illustration + \"You haven't created any projects yet\" + \"Create Your First Project\" CTA]<\/span><\/p>\n <p>\u2022 No Search Results: <span class=\"placeholder\">[\"No results found for '[query]'\" + suggestions to refine search]<\/span><\/p>\n <p>\u2022 Error State: <span class=\"placeholder\">[\"Something went wrong\" + \"Retry\" button + support link]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcca Key Feature Screens:<\/strong><\/p>\n <p><strong>1. Project\/Item Detail View<\/strong><\/p>\n <p>\u2022 Header: <span class=\"placeholder\">[Title (editable inline), Status dropdown, Priority label, Assignee avatar]<\/span><\/p>\n <p>\u2022 Main Content: <span class=\"placeholder\">[Description (rich text editor), Attachments, Comments thread, Activity log]<\/span><\/p>\n <p>\u2022 Sidebar: <span class=\"placeholder\">[Metadata \u2014 Due date, Created by, Tags, Custom fields]<\/span><\/p>\n <p>\u2022 Actions: <span class=\"placeholder\">[Edit, Duplicate, Archive, Delete, Share]<\/span><\/p>\n <br>\n <p><strong>2. Team\/Collaboration Features<\/strong><\/p>\n <p>\u2022 Team List: <span class=\"placeholder\">[Grid of team members with avatar, name, role, status (online\/offline)]<\/span><\/p>\n <p>\u2022 Invite Flow: <span class=\"placeholder\">[Modal with email input, role selector (Admin\/Member\/Viewer), \"Send Invite\" button]<\/span><\/p>\n <p>\u2022 Permissions: <span class=\"placeholder\">[Clear visual indicators of who can view\/edit\/delete]<\/span><\/p>\n <br>\n <p><strong>3. Settings Panel<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[Left sidebar with setting categories, right panel with forms]<\/span><\/p>\n <p>\u2022 Categories: <span class=\"placeholder\">[Profile, Account, Team, Billing, Integrations, Notifications, Security]<\/span><\/p>\n <p>\u2022 Form Design: <span class=\"placeholder\">[Clear labels, helper text, inline validation, \"Save Changes\" button with loading state]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfa8 Visual Design System:<\/strong><\/p>\n <p><strong>1. Color Palette<\/strong><\/p>\n <p>\u2022 Primary Brand Color: <span class=\"placeholder\">[HEX \u2014 used for CTAs, links, active states]<\/span><\/p>\n <p>\u2022 Secondary Color: <span class=\"placeholder\">[HEX \u2014 supporting actions]<\/span><\/p>\n <p>\u2022 Neutral Grays: <span class=\"placeholder\">[6\u20138 shades for backgrounds, borders, text]<\/span><\/p>\n <p>\u2022 Semantic Colors: <span class=\"placeholder\">[Success #10b981 \/ Warning #f59e0b \/ Error #ef4444 \/ Info #3b82f6]<\/span><\/p>\n <p>\u2022 Background: <span class=\"placeholder\">[Light mode: #f9fafb \/ Dark mode: #1f2937 (optional)]<\/span><\/p>\n <br>\n <p><strong>2. Typography<\/strong><\/p>\n <p>\u2022 Font Family: <span class=\"placeholder\">[Inter \/ Roboto \/ System UI stack]<\/span><\/p>\n <p>\u2022 Type Scale: <span class=\"placeholder\">[H1: 32px \/ H2: 24px \/ H3: 20px \/ Body: 14\u201316px \/ Small: 12\u201314px]<\/span><\/p>\n <p>\u2022 Line Height: <span class=\"placeholder\">[1.5 for body, 1.2 for headings]<\/span><\/p>\n <br>\n <p><strong>3. Component Library<\/strong><\/p>\n <p>\u2022 Buttons: <span class=\"placeholder\">[Primary (solid), Secondary (outlined), Tertiary (text), Icon-only, sizes: small\/medium\/large]<\/span><\/p>\n <p>\u2022 Forms: <span class=\"placeholder\">[Text input, Textarea, Dropdown, Checkbox, Radio, Toggle switch, Date picker]<\/span><\/p>\n <p>\u2022 Cards: <span class=\"placeholder\">[White background, subtle shadow, 8px border radius, 16\u201324px padding]<\/span><\/p>\n <p>\u2022 Modals: <span class=\"placeholder\">[Centered overlay, backdrop blur\/darken, close X, max-width 600px]<\/span><\/p>\n <p>\u2022 Tables: <span class=\"placeholder\">[Zebra striping OR row hover, sortable headers, pagination]<\/span><\/p>\n <p>\u2022 Tooltips: <span class=\"placeholder\">[Dark background, white text, arrow pointer, appear on hover]<\/span><\/p>\n <p>\u2022 Loading States: <span class=\"placeholder\">[Skeleton loaders, spinners, progress bars]<\/span><\/p>\n <br>\n <p><strong>\u2699\ufe0f Interaction Patterns:<\/strong><\/p>\n <p>\u2022 Keyboard Shortcuts: <span class=\"placeholder\">[Cmd+K for search, Cmd+N for new item, Esc to close modal, Arrow keys for navigation]<\/span><\/p>\n <p>\u2022 Drag & Drop: <span class=\"placeholder\">[Reorder lists, move cards between columns (Kanban), upload files]<\/span><\/p>\n <p>\u2022 Inline Editing: <span class=\"placeholder\">[Click to edit text fields without opening modal, auto-save on blur]<\/span><\/p>\n <p>\u2022 Bulk Actions: <span class=\"placeholder\">[Multi-select checkboxes, action bar appears with \"Delete\", \"Move\", \"Assign\" options]<\/span><\/p>\n <p>\u2022 Real-Time Updates: <span class=\"placeholder\">[Live updates when team members make changes, subtle notification toast]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udd14 Notification System:<\/strong><\/p>\n <p>\u2022 In-App Notifications: <span class=\"placeholder\">[Dropdown panel from bell icon, grouped by type (mentions, assignments, updates)]<\/span><\/p>\n <p>\u2022 Toast Notifications: <span class=\"placeholder\">[Bottom-right corner, auto-dismiss after 5 seconds, success\/error states with icons]<\/span><\/p>\n <p>\u2022 Email Digests: <span class=\"placeholder\">[Daily\/weekly summary option in settings]<\/span><\/p>\n <p>\u2022 Push Notifications: <span class=\"placeholder\">[Browser\/mobile push for critical updates, user-configurable]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcf1 Responsive Design:<\/strong><\/p>\n <p>\u2022 Desktop (1440px+): <span class=\"placeholder\">[Full sidebar + content, multi-column layouts, keyboard shortcuts emphasized]<\/span><\/p>\n <p>\u2022 Tablet (768\u20131024px): <span class=\"placeholder\">[Collapsible sidebar, single-column main area, touch-friendly targets]<\/span><\/p>\n <p>\u2022 Mobile (< 768px): <span class=\"placeholder\">[Bottom tab bar, hamburger menu, simplified views, swipe gestures]<\/span><\/p>\n <br>\n <p><strong>\u267f Accessibility Features:<\/strong><\/p>\n <p>\u2022 Keyboard Navigation: <span class=\"placeholder\">[All interactive elements accessible via Tab, focus indicators visible]<\/span><\/p>\n <p>\u2022 Screen Reader: <span class=\"placeholder\">[ARIA labels for icons, semantic HTML, skip-to-content link]<\/span><\/p>\n <p>\u2022 Color Contrast: <span class=\"placeholder\">[WCAG AA minimum 4.5:1 for text, 3:1 for UI elements]<\/span><\/p>\n <p>\u2022 Text Scaling: <span class=\"placeholder\">[UI remains usable at 200% browser zoom]<\/span><\/p>\n <br>\n <p><strong>\u2705 Deliverables Required:<\/strong><\/p>\n <p>1. Complete onboarding flow (3\u20135 screens)<\/p>\n <p>2. Main dashboard with sidebar navigation<\/p>\n <p>3. 5\u20138 key feature screens (project detail, team, settings, etc.)<\/p>\n <p>4. Component library (buttons, forms, cards, modals, tables)<\/p>\n <p>5. Empty states, loading states, error states<\/p>\n <p>6. Responsive breakpoints (desktop, tablet, mobile)<\/p>\n <p>7. Interactive prototype with navigation flows<\/p>\n <p>8. Design system documentation<\/p>\n <br>\n <p><strong>\ud83d\ude80 Output Format:<\/strong><\/p>\n <p>Deliver a production-ready SaaS interface that balances powerful functionality with intuitive UX, minimal learning curve, and delightful interactions that drive user retention and adoption.<\/p>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 The Logic: 6 Design Principles<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>1\ufe0f\u20e3 Onboarding = Activation<\/h4>\n <p>First session determines retention. Guide users to \"aha moment\" fast. Show value before asking for data. Progressive disclosure beats info dumps.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>2\ufe0f\u20e3 Information Architecture<\/h4>\n <p>Navigation must map to mental models. Group features logically. Limit top-level nav to 5\u20138 items. Deep hierarchies kill discoverability.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>3\ufe0f\u20e3 Empty States Are Opportunities<\/h4>\n <p>Never show blank screens. Empty states guide next action. \"You have no projects\" \u2192 \"Create your first project\" with clear CTA.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>4\ufe0f\u20e3 Feedback & Confirmation<\/h4>\n <p>Every action gets feedback. Loading spinners, success toasts, error messages. Users must know: Did my action work? What happens next?<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>5\ufe0f\u20e3 Keyboard-First Power Users<\/h4>\n <p>Power users = retention = revenue. Keyboard shortcuts, bulk actions, inline editing. Make experts fast. Don't sacrifice simplicity.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>6\ufe0f\u20e3 Performance = Perception<\/h4>\n <p>Fast feels good. Optimistic UI (show change before server confirms), skeleton loaders, lazy-load. Slow SaaS = churned users.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfa8 Output Preview: 4 Real-World Examples<\/h3>\n <div class=\"preview-grid\">\n <div class=\"preview-item\">\n <h4>Example 1: Project Management SaaS (Asana-style)<\/h4>\n <div class=\"preview-content\">\n <strong>Onboarding:<\/strong> 3-step setup \u2014 Name\/role, Create first project, Invite team (skippable)<br>\n <strong>Dashboard:<\/strong> Left sidebar (Projects, Tasks, Team, Reports), main area with Kanban board (columns: To Do, In Progress, Done), drag-and-drop cards<br>\n <strong>Task Detail:<\/strong> Slide-out right panel (no page reload), inline editing, comment thread, file attachments, assignee dropdown<br>\n <strong>Colors:<\/strong> Coral primary (#FF6F61), gray backgrounds, status colors (green done, yellow in-progress)<br>\n <strong>Key Feature:<\/strong> Timeline view (Gantt chart), keyboard shortcut panel (Cmd+\/), bulk task editing\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 2: Analytics Platform (Mixpanel-style)<\/h4>\n <div class=\"preview-content\">\n <strong>Onboarding:<\/strong> Install tracking code \u2192 See first data \u2192 Guided tour of key reports<br>\n <strong>Dashboard:<\/strong> Top nav (Reports, Funnels, Retention, Users), main area with chart builder (drag metrics\/dimensions), date range picker top-right<br>\n <strong>Report View:<\/strong> Large line chart, table below with drill-down, \"Save Report\" button, share link generator<br>\n <strong>Colors:<\/strong> Purple primary (#7c3aed), data viz palette (blue, teal, orange, red)<br>\n <strong>Key Feature:<\/strong> SQL query mode for advanced users, real-time dashboard updates, cohort analysis builder\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 3: CRM Tool (Salesforce Lightning-style)<\/h4>\n <div class=\"preview-content\">\n <strong>Onboarding:<\/strong> Import contacts \u2192 Create first deal \u2192 Set up pipeline stages<br>\n <strong>Dashboard:<\/strong> Grid of KPI cards (Deals closed, Pipeline value, Win rate), sidebar nav (Leads, Contacts, Deals, Reports), search bar with recent items<br>\n <strong>Contact Detail:<\/strong> Tabbed interface (Overview, Activity, Emails, Files), editable fields with autosave, \"Log a Call\" quick action<br>\n <strong>Colors:<\/strong> Blue primary (#0070D2), white cards, colored deal stages (purple new, green won, red lost)<br>\n <strong>Key Feature:<\/strong> Email integration (Gmail\/Outlook), activity timeline, pipeline drag-and-drop, custom fields\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 4: Design Collaboration Tool (Figma-style)<\/h4>\n <div class=\"preview-content\">\n <strong>Onboarding:<\/strong> Create first file \u2192 Interactive canvas tutorial (draw shape, add comment) \u2192 Invite collaborator<br>\n <strong>Dashboard:<\/strong> File browser (grid\/list view), recent files at top, sidebar with teams\/projects, \"+ New File\" prominent<br>\n <strong>Editor:<\/strong> Full-screen canvas, left toolbar (tools), right panel (properties), top bar (share button, collaborator avatars with live cursors), keyboard shortcuts overlay (press Shift+?)<br>\n <strong>Colors:<\/strong> Dark UI (#2C2C2C) for canvas focus, white panels, accent purple (#8B5CF6)<br>\n <strong>Key Feature:<\/strong> Real-time multiplayer (see cursors), comment threads pinned to canvas, version history, plugin marketplace\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udd17 3-Step Chain Strategy<\/h3>\n <div class=\"chain-steps\">\n <div class=\"chain-step\" data-step=\"1\">\n <h4>Step 1: User Flow & IA Mapping<\/h4>\n <p><strong>Prompt:<\/strong> \"Map user flows for a <span class=\"placeholder\">[SaaS category]<\/span> product. Define: (1) Onboarding flow (signup \u2192 setup \u2192 first value moment), (2) Core user journey (primary use case from login to goal completion), (3) Information architecture (top-level nav 5\u20138 items, feature grouping logic), (4) Empty states for each screen (what shows when no data?). Output: Flow diagram and IA sitemap.\"<\/p>\n <p><strong>Expected Output:<\/strong> User flow documentation showing critical paths and decision points, plus IA hierarchy ready for design.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"2\">\n <h4>Step 2: High-Fidelity Interface Design<\/h4>\n <p><strong>Prompt:<\/strong> \"Design SaaS interface in <span class=\"placeholder\">[Figma]<\/span> for <span class=\"placeholder\">[product name]<\/span>. Include: (1) Onboarding screens (3-step setup with progress bar), (2) Main dashboard (sidebar nav, top bar with search\/notifications, content area with <span class=\"placeholder\">[list\/kanban\/table]<\/span>), (3) Detail view (item page with editable fields, comments, actions), (4) Settings screen (left categories, right forms). Apply colors <span class=\"placeholder\">[HEX codes]<\/span>, typography <span class=\"placeholder\">[font names]<\/span>. Create component library (buttons, forms, cards, modals) with all states.\"<\/p>\n <p><strong>Expected Output:<\/strong> Complete interface design with 8\u201310 key screens, component library, and consistent visual language.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"3\">\n <h4>Step 3: Interaction Design & Prototype<\/h4>\n <p><strong>Prompt:<\/strong> \"Add interactions to SaaS design: (1) Clickable prototype with navigation flows (sidebar links \u2192 pages, create button \u2192 modal, table rows \u2192 detail), (2) Micro-interactions (button hover states, loading spinners, toast notifications), (3) Keyboard shortcuts overlay (Cmd+K search, Cmd+N new, Esc close), (4) Drag-and-drop simulation (reorder list, Kanban cards). Document: Component specs, spacing tokens (8px grid), color variables, accessibility notes (ARIA labels, focus states).\"<\/p>\n <p><strong>Expected Output:<\/strong> Fully interactive prototype with realistic interactions, plus complete developer handoff documentation.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 6 HITL (Human-in-the-Loop) Refinement Tips<\/h3>\n <div class=\"tips-list\">\n <div class=\"tip-item\">\n <strong>1. Onboarding Friction Test<\/strong>\n Time a new user from signup to first value. Target: <3 minutes. If longer, cut steps, reduce form fields, offer \"Skip\" options.\n <\/div>\n <div class=\"tip-item\">\n <strong>2. 5-Second Feature Discovery<\/strong>\n Show dashboard to unfamiliar user for 5 seconds. Ask: \"Where would you create a new project?\" If they can't find it, your CTA isn't prominent enough.\n <\/div>\n <div class=\"tip-item\">\n <strong>3. Empty State Audit<\/strong>\n Manually test every screen with zero data. Does each empty state guide the next action with clear CTA? Fix any that show blank screens.\n <\/div>\n <div class=\"tip-item\">\n <strong>4. Keyboard Power User Test<\/strong>\n Try completing core tasks using only keyboard (no mouse). If it's clunky, add shortcuts, improve tab order, document shortcuts in-app.\n <\/div>\n <div class=\"tip-item\">\n <strong>5. Mobile Reality Check<\/strong>\n Core workflows must work on mobile. If 50%+ of SaaS is mobile, responsive isn't optional. Test actual devices, not just browser resize.\n <\/div>\n <div class=\"tip-item\">\n <strong>6. Loading State Completeness<\/strong>\n Every data fetch needs a loading state. Skeleton loaders > spinners > blank screens. Test on slow 3G to verify experience doesn't break.\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"stats-footer\">\n <div class=\"stat\">\n <div class=\"stat-value\">7,400+<\/div>\n <div class=\"stat-label\">Words in Prompt<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">Design Principles<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">4<\/div>\n <div class=\"stat-label\">Real-World Examples<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">3<\/div>\n <div class=\"stat-label\">Chain Strategy Steps<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">HITL Tips<\/div>\n <\/div>\n <\/div>\n\n <div class=\"branding\">\n <h4>\ud83c\udf93 AiPro Institute\u2122<\/h4>\n <p>Empowering professionals with world-class AI prompt engineering resources<\/p>\n <p style=\"margin-top: 0.5rem; font-size: 0.85rem; color: #9ca3af;\">\n Part of the Digital UI\/UX & Web Design Collection\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptBox = document.querySelector('.prompt-box');\n const textToCopy = promptBox.innerText.replace('\ud83d\udccb Copy Prompt', '').trim();\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n const btn = document.querySelector('.copy-btn');\n const originalText = btn.innerHTML;\n btn.innerHTML = '\u2705 Copied!';\n btn.style.background = '#10b981';\n \n setTimeout(() => {\n btn.innerHTML = originalText;\n btn.style.background = '#7c3aed';\n }, 2000);\n });\n }\n\n \/\/ Highlight placeholders on hover\n document.querySelectorAll('.placeholder').forEach(placeholder => {\n placeholder.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#fef3c7';\n this.style.padding = '2px 4px';\n this.style.borderRadius = '3px';\n });\n placeholder.addEventListener('mouseleave', function() {\n this.style.backgroundColor = 'transparent';\n this.style.padding = '0';\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>SaaS Product Interface – AiPro Institute\u2122 Prompt Library \ud83c\udfa8 AiPro Institute\u2122 Prompt Library Digital UI\/UX & Web Design \ud83d\udcbc SaaS Product Interface User-Centric Dashboard with Onboarding, Navigation & Feature Discovery \ud83d\udcca Skill: Advanced \u23f1\ufe0f Time: 50\u201375 min \ud83d\udcb3 Credit: High \ud83d\udcc1 Format: Figma \/ Adobe XD \/ HTML \ud83d\udee0\ufe0f Tool Compatibility Model-agnostic GPT-4o Claude 3.5…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[130],"tags":[],"class_list":["post-4570","post","type-post","status-publish","format-standard","hentry","category-digital-ui-ux-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4570"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4570\/revisions"}],"predecessor-version":[{"id":4737,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4570\/revisions\/4737"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}