diff --git a/backend/src/build-system/node/ux_sitemap_document/prompt/prompt.ts b/backend/src/build-system/node/ux_sitemap_document/prompt/prompt.ts new file mode 100644 index 00000000..ccf8d7f6 --- /dev/null +++ b/backend/src/build-system/node/ux_sitemap_document/prompt/prompt.ts @@ -0,0 +1,44 @@ +// Define and export the system prompts object +export const prompts = { + generateUxsmdrompt: ( + projectName: string, + prdDocument: 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} + - product requirements document: ${prdDocument} + - Platform: ${platform} + + Follow these rules as a guide to ensure clarity and completeness in your UX Sitemap Document. + 1, Write you result in markdown + 2, Your reply should start with : "\`\`\`UXSitemap" and end with "\`\`\`", Use proper markdown syntax for headings, subheadings, and hierarchical lists. + 3. **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. + + 4. **Page and Navigation Structure**: Break down the sitemap into main sections, secondary sections, and individual screens. + - **Main Sections**: Identify primary sections (e.g., Home, User Account, Product Catalog) based on project requirements. + - **Secondary 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. + + 5. **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). + + 6. **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. + +7. 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? + +Remeber your result will be directly be use in the deveolpment. Make sure is 100% complete. + `; + }, +}; diff --git a/backend/src/build-system/node/ux_sitemap_document/uxsmd.ts b/backend/src/build-system/node/ux_sitemap_document/uxsmd.ts new file mode 100644 index 00000000..499f15e4 --- /dev/null +++ b/backend/src/build-system/node/ux_sitemap_document/uxsmd.ts @@ -0,0 +1,53 @@ +import { BuildHandler, BuildResult } from 'src/build-system/types'; +import { BuilderContext } from 'src/build-system/context'; +import { prompts } from './prompt/prompt'; +import { ModelProvider } from 'src/common/model-provider'; +import { Logger } from '@nestjs/common'; + +export class UXSMDHandler implements BuildHandler { + readonly id = 'op:UXSMD::STATE:GENERATE'; + readonly logger: Logger = new Logger('UXSMDHandler'); + + async run(context: BuilderContext, args: unknown): Promise { + this.logger.log('Generating UXSMD...'); + + // Extract project data from the context + const projectName = + context.getData('projectName') || 'Default Project Name'; + const platform = context.getData('platform') || 'Default Platform'; + + // Generate the prompt dynamically + const prompt = prompts.generateUxsmdrompt( + projectName, + args as string, + platform, + ); + + // Send the prompt to the LLM server and process the response + const uxsmdContent = await this.generateUXSMDFromLLM(prompt); + + // Store the generated document in the context + context.setData('uxsmdDocument', uxsmdContent); + + return { + success: true, + data: uxsmdContent, + }; + } + + private async generateUXSMDFromLLM(prompt: string): Promise { + const modelProvider = ModelProvider.getInstance(); + + const model = 'gpt-3.5-turbo'; + + const prdContent = modelProvider.chatSync( + { + content: prompt, + }, + model, + ); + + this.logger.log('Received full UXSMD content from LLM server.'); + return prdContent; + } +}