update UXSMD and S

Author: ZHallen122

backend/src/build-system/handlers/ux/sitemap-document/index.ts

@@ -20,7 +20,7 @@ export class UXSMDHandler implements BuildHandler<string> {
     const prdContent = context.getNodeData('op:PRD');
 
     // Generate the prompt dynamically
-    const prompt = prompts.generateUxsmdrompt(projectName, platform);
+    const prompt = prompts.generateUxsmdPrompt(projectName, platform);
 
     // Send the prompt to the LLM server and process the response
     const uxsmdContent = await this.generateUXSMDFromLLM(prompt, prdContent);
@@ -47,26 +47,34 @@ export class UXSMDHandler implements BuildHandler<string> {
       {
         role: 'user',
         content: `
-          Here is the Product Requirements Document (PRD):
+          Here is the **Product Requirements Document (PRD)**:
 
           ${prdContent}
 
           Please generate the Full UX Sitemap Document now, focusing on MVP features but ensuring each page has enough detail to be functional.`,
       },
       {
         role: 'user',
-        content: `Check if you meet all PRD details, add more pages, and details if needed. Focus on MVP (Minimum Viable Product).`,
+        content: `**Validation Step:**  
+      - **Review your output** to ensure **100% coverage** of the PRD.
+      - Make sure you covered all global_view_* and page_view_* in UX Sitemap Document, If any of them is missing add them based on the system prompt.
+      - If any critical pages, features, or flows are **missing**, **add them**.  
+      - Adjust for **navigation completeness**, making sure all interactions and workflows are **correctly linked**.`,
       },
       {
         role: 'user',
-        content: `Please add more detail about the Sub-section in each <gen_page>. 
-      Focus on step-by-step actions the user takes, and any alternative paths mentioned in the PRD. 
-      Also, expand on how these components interrelate to the page's primary features.`,
+        content: `**Final Refinement:**  
+        - **Expand the Unique UI Pages **, adding page_view_* if needed:
+        - **Expand the page_views **, adding more details on:
+        - **Step-by-step user actions** within each page.
+        - **Alternative user paths** (e.g., different ways a user might complete an action).  
+        - **How components within the page interact** with each other and primary features.
+      - **Ensure clarity** so developers can implement the structure **without assumptions**.`,
       },
     ];
 
     const modelProvider = ModelProvider.getInstance();
-    const model = 'gpt-4o-mini';
+    const model = 'gpt-4o';
 
     const uxsmdContent = await modelProvider.chatSync({
       model,

backend/src/build-system/handlers/ux/sitemap-document/prompt.ts

@@ -1,66 +1,82 @@
 // Define and export the system prompts object
 export const prompts = {
-  generateUxsmdrompt: (projectName: string, platform: string): string => {
+  generateUxsmdPrompt: (projectName: string, platform: string): string => {
     return `You are an expert frontend develper and ux designer. Your job is to analyze and expand upon the details provided, generating a Full UX Sitemap Document based on the following inputs:  
        - Project name: ${projectName}
        - Platform: ${platform}
-       - product requirements document: (Provided by the user next)
+       - product requirements document
 
-    Follow these rules as a guide to ensure clarity and completeness in your UX Sitemap Document.
-    1. Your reply should start with : "<UXSitemap>" and end with "</UXSitemap> ", Use plain text (no Markdown).
-    2. Use <page_gen> tags for each main page or section within the sitemap.
-    3. Use <user_journeys_gen> tags for whole User Journeys
-    4. **Comprehensive Analysis**: Thoroughly parse the PRD to identify all core features, functionalities, and user stories.
-    - Focus on creating a hierarchical sitemap that covers each major section, with relevant sub-sections, pages, and key interactions.
-    - Ensure all primary and secondary user journeys identified in the PRD are clearly reflected.
+    Your primary goal is to create a fully comprehensive, development-ready UX Sitemap Document that will be directly transferred to the development team for implementation.
+    This document will be used for an application expected to serve thousands of users, and it must cover all use cases, ensuring a complete and detailed roadmap of all UI components and navigation.
 
+    Formatting & Output Guidelines:
+    1, Use Markdown for structuring the document.
+    2, Your reply should start with : "\`\`\`UXSitemap" and end with "\`\`\`", Use proper markdown syntax for headings, subheadings, and hierarchical lists.
+    3, Ensure proper markdown syntax for headings, subheadings, and hierarchical lists.
+    4, Strict Naming Conventions:
+        Global Shared UI Views → Prefix with global_view_* .
+        Unique UI Pages → Prefix with page_view_* .
+        No "Container" Views → Do not create abstract container views .
+        global_view_* and page_view_* must be independent → page_view_* does not embed global_view_*, but they share screen space.
 
-    5. **Page and Navigation Structure**: Break down the sitemap into main sections, sub sections, and individual screens.
-    - Identify all main and nested pages.
-    - **Main Sections**: Identify primary sections (e.g., Home, User Account, Product Catalog) based on project requirements.
-    - **Sub Sections**: Include sub-sections under each main section (e.g., "Profile" and "Order History" under "User Account").
-    - **Screens and Interactions**: List specific screens and interactions that users encounter within each flow.
+    UX Sitemap Requirements:
+    Your UX Sitemap Document should include detailed breakdowns of:
 
-    6. **Detailed User Journeys**:
-    - For every user story described in the PRD, map out the step-by-step navigation path.
-    - Highlight sequences (e.g., 1. Home > 1.1. Explore > 1.1.1. Product Details).
+    1, Global Shared UI Views (global_view_*)
+        Definition: Shared UI components (e.g., navigation, footers, side menus) used across multiple pages.
+        Structure:
+        Each must have a unique ID (global_view_*).
+        Clearly describe authentication conditions:
+            Logged-in users (full access, personalized elements).
+            Logged-out users (restricted access, call-to-actions).
+        Document all shared elements and their variations:
+            Example: global_view_top_nav (changes based on authentication state).
 
-    7. **Thorough Coverage**:
-    - Ensure the sitemap is fully comprehensive. If any feature from the PRD is not covered or any user journey is missing, add it to the sitemap.
-    - Consider the target audience and validate that all expected navigation flows and screens meet user needs.
+    2, Unique UI Pages (page_view_*)
+        Definition: Individual, standalone pages (e.g., page_view_home, page_view_settings).
+        Structure:
+        Path (URL Route): Clearly define the URL structure of the page.
+            Example: /home
+        Covers all unique screens (e.g., page_view_home, page_view_onboarding, page_view_settings).
+        Describe authentication conditions, permissions, and state dependencies:
+            What features are available to guest vs. logged-in users?
+            Are any actions restricted based on user type (e.g., admin, regular user)?
+        Ensure no duplicate inclusion of global_view_* views (they only share screen space).
+        Components:
+            List all UI components that appear on this page.
+            Describe their functionality and interaction behavior.
+        Provide detailed descriptions of features, interactions, and user flows.
 
-    8. Ask Your self:
-        - Am I cover all the product requirement document?
-        - Am I Cover all the gloabal UI?
-        - Am I Cover all unique UI?
-        - Am I cover all the view that expect by user?
-        - what is all the details about UI?
-        - Am I cover all the cases? Is the final result 100% complete?
+    3, Functional & Feature Analysis
+        Break down each UI page before detailing its components.
+        Clearly map features to UI views.
+        Ensure that:
+            Every feature described in the PRD has a corresponding page (page_view_*).
+            Features are not missing any expected UI elements.
 
-    9. Example output:
-        <UXSitemap>
-        <page_gen>
-        N. [Main Section Title]
-            Description: (Brief description of page purpose)
-            N.1. [Sub-section Title]
-                N.1.1. [Further Detail]
-                N.1.2. [Further Detail]
-            N.2. [Another Sub-section Title]
-        </page_gen>
+    4, Navigation & User Journey Mapping
+        Map each user journey from the PRD into a step-by-step navigation path.
+        Example format:
 
-        <page_gen>
-        2. [Another Main Section]
-            Description: (Brief description of page purpose)
-            2.1 [Sub-section Title]
-            ...
-        </page_gen>
+        1. page_view_home → page_view_explore → page_view_product_details → ....
 
-        <user_journeys_gen>
-            Highlight sequences for user journey
-        </user_journeys_gen>
+        Cover both static and dynamic navigation flows.
 
-        </UXSitemap>
- 
-Remeber your result will be directly be use in the deveolpment. Make sure is 100% complete.`;
+    Final Instructions:
+        Self Check Before finalizing, ask yourself:
+            Did I cover all global shared UI views (global_view_*) separately?
+            Did I assign unique and expressive IDs (global_view_* for shared views, page_view_* for unique pages)?
+            Did I avoid embedding global_view_* inside page_view_*?
+            Did I ensure authentication-based conditions (logged-in vs. guest)?
+            Did I extensively describe every UI element, interaction, and user flow?
+            Did I include URL paths for all pages?
+            Did I include 100% of views required by all features?
+            Did I avoid unnecessary secondary/tertiary features?
+            Did I describe inter-app linking and navigation comprehensively?
+        Strictly follow the naming and formatting conventions.
+        No extra comments or surrounding text—your reply will be directly used as the final UX Sitemap Analysis Document.
+        Your response should only contain the markdown-formatted UX Sitemap Document.
+        Your final document must be exhaustive and 100% complete for development use.
+        `;
   },
 };

backend/src/build-system/handlers/ux/sitemap-structure/index.ts

@@ -70,7 +70,7 @@ export class UXSitemapStructureHandler implements BuildHandler<string> {
     ];
 
     const uxStructureContent = await context.model.chatSync({
-      model: 'gpt-4o-mini',
+      model: 'gpt-4o',
       messages,
     });