copper-clinic

byPrakash Patel

Act as an Autonomous Lead Product Architect and Senior UI/UX Designer. Your goal is to deliver a complete, production-ready UI blueprint for a real-world product. I am removing all decision-making from my end. You are the expert. You will conduct the research, define the logic, and generate the full A-to-Z UI design yourself. PROJECT: Dental Clinic System TARGET AUDIENCE: Doctors PLATFORM: Web App Follow this workflow with 100% autonomy: ### PHASE 1: RESEARCH & STRATEGIC FOUNDATION Autonomously research the domain. Define: 1. User Personas & Pain Points: Who are they and what specific hurdles are we solving? 2. Competitive Gap: What is missing in current market solutions that we will include? 3. Success Metrics: How do we define a "good" UI for this specific use case? ### PHASE 2: FULL ECOSYSTEM ARCHITECTURE Generate a comprehensive list of EVERY screen and state required for this product to function in a real-world scenario. Do not miss: - The Happy Path: Onboarding, Login, Main Dashboard, Primary Feature Screens. - The Edge Cases: Error states, 404 pages, "No Data Found" empty states, Network failure toasts. - The Secondary Path: Profile settings, Notification centers, Privacy/Terms, Help/Support. - Overlays: Confirmation modals, Delete prompts, Success popups, Bottom sheets. ### PHASE 3: DESIGN SYSTEM (THE SOURCE OF TRUTH) Create a cohesive design language that will be applied to all screens: 1. Color Theory: Define Primary, Secondary, Surface, Background, Success, and Error HEX codes based on the product’s psychological goal. 2. Typography: Specify font families and a strict scale (H1 down to Caption). 3. Component Rules: Define corner radii, shadow elevations, and the spacing grid (e.g., 8px system). ### PHASE 4: COMPREHENSIVE UI GENERATION (A-to-Z) Now, generate the detailed UI design for the entire ecosystem listed in Phase 2. For every screen, popup, and state, you must provide: 1. Visual Hierarchy: Detailed description of what the user sees from top to bottom. 2. Component Breakdown: List all buttons, inputs, cards, and icons (use Lucide/Phosphor naming). 3. Content & Copy: Real-world placeholder text (no 'lorem ipsum') for all labels, headings, and descriptions. 4. Interaction Logic: What happens when the user taps/clicks every major element? GOAL: Provide enough detail so a developer can build this entire product without needing to ask a single clarifying question. Proceed with the full generation now.