STRUCTURED

de

Contributed by jd5293214@gmail.com

Improved by Laravel Company · 2026-09-07

ROLE: You are an expert Mobile Application Architect and Senior UX/UI Designer specializing in Material Design principles. Your task is to perform a complete, high-fidelity redesign and reconstruction of a mobile application prototype based solely on provided source code and project documentation.

OBJECTIVE: Redesign the existing prototype (assumed to be inaccurate) into a completely new, professional, modern, and logically sound application design that perfectly reflects the implemented features and intended functionality of the actual project.

INPUT RESOURCES (Mandatory Analysis):

  1. Source Code Analysis: Analyze the entire structure, features, and logic of the application by thoroughly examining the provided GitHub repository: https://github.com/kadarkadikadey/CITIZEN-107. This is the single source of truth for all features.
  2. Contextual Data: Analyze the project report and supplementary documents from the Google Drive folder: https://drive.google.com/drive/folders/1pYP_QEiu2Wd7KucZYoOcJWQ07qnCCgn_. Use these documents to understand the project goals, scope, and intended user experience.
  3. Existing Prototype: Ignore the existing manual prototype entirely. It serves only as a starting point to be discarded.

DESIGN METHODOLOGY & CONSTRAINTS (Strict Adherence Required):

  1. Feature Fidelity: Every screen, feature, and interaction in the final design must be directly derived from the implemented features in the GitHub source code. Do not introduce any features that are not present or implied by the code.
  2. User Flow Mapping: Develop a comprehensive, logical, and seamless user flow that accurately mirrors the operational path of the actual application.
  3. Screen Inventory: Design and detail every necessary screen required for the application, including but not limited to: Authentication flows, Dashboard, Emergency Features, Help Directory, Medical Resources access, User Profile, Settings, and all navigational states.
  4. Navigation Logic: Ensure the navigation structure is clean, intuitive, highly logical, and user-friendly. Transitions between screens must be smooth and contextually appropriate.
  5. UI/UX Style: Implement the design strictly following modern Material Design UI principles. Establish a consistent, professional color scheme, typography, and component library throughout the entire design.
  6. Interaction Detail: Specify all user interactions, including button states, form inputs, dialogs, modal presentations, and precise navigation paths between every screen.

OUTPUT SPECIFICATION:
Generate a comprehensive design specification that can be directly imported and recreated by a design tool (e.g., Figma). The output must be structured as follows:

  1. Application Overview: A summary of the application's core purpose and target user.
  2. Data-Driven User Flow Map: A step-by-step textual map detailing the primary and secondary user journeys.
  3. Screen-by-Screen Specification: Detailed descriptions for every required screen, including:
    • Screen Name (e.g., Login Screen, Dashboard)
    • Purpose
    • Key Elements (Components, Text Fields, Images)
    • Interaction Details (How elements respond to taps/inputs)
    • Navigation Paths (Which screen leads to which)
  4. Component Library Definition: Define the consistent Material Design components used (Buttons, Cards, Navigation Bars, etc.) and the defined color palette.

FINAL MANDATE: Your response must be a comprehensive, actionable blueprint for a complete application prototype, built exclusively upon the factual implementation found in the GitHub repository and project documents. Do not make assumptions.

Original prompt (before our improvements)

Analyze the uploaded project report: ${"D:\de\Document from jd.pdf"} Analyze the existing prototype: ${"D:\de\canvas"} Use the additional project documents: ${"D:\de\Document from jd"} Redesign the complete prototype based on these documents. I need a prompt for Claude to redesign the prototype (canvas/screens) of my mobile application. The existing prototype was created manually and does not accurately represent my final project. I want to create a completely new, professional, modern, and logical prototype based on my actual application. My project resources: - Google Drive (Project Report, Canvas, Documents, APK, etc.): https://drive.google.com/drive/folders/1pYP_QEiu2Wd7KucZYoOcJWQ07qnCCgn_ - GitHub Repository (Complete Source Code): https://github.com/kadarkadikadey/CITIZEN-107 Generate a detailed Claude prompt that instructs Claude to: 1. Analyze my GitHub repository to understand the complete application. 2. Use the project report and other documents from Google Drive for additional context. 3. Ignore the existing manual prototype and redesign it from scratch according to the actual implemented features. 4. Create a user flow that matches the real application. 5. Design every screen required in the application, including authentication, dashboard, emergency features, help directory, medical resources, profile, settings, and any other necessary screens found in the project. 6. Ensure the navigation flow is logical, clean, and user-friendly. 7. Use modern Material Design UI principles with a professional color scheme and consistent components. 8. Include all user interactions, screen transitions, buttons, forms, dialogs, and navigation between screens. 9. Generate a complete prototype/canvas that can be directly recreated in design tools like Figma or Canva. 10. Do not assume features that are not present in the project. Base every screen and flow only on the actual implementation in the GitHub repository and project documents. The final output should be a comprehensive prototype redesign prompt that I can directly use in Claude to generate an accurate application prototype.