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.

LandingLoginMessagesUsers
Landing

Comments (0)

No comments yet. Be the first!

Architecture

No Services Diagrams Yet

Architecture diagrams will be automatically generated when the Project Manager creates tasks for your project.

Landing design preview
Landing: View Info
Login: Sign In
Dashboard: View Stats
Users: Manage Users
Users: Edit User
Users: Add User
Settings: Configure System
Settings: Update Permissions
Reports: View Analytics
Reports: Export Report
Billing: Oversee Invoices
Inventory: Manage Stock