From 8438e04fd2438a1da3cda19c7a6ec913bc558cef Mon Sep 17 00:00:00 2001 From: ZHallen122 Date: Sat, 16 Nov 2024 22:44:43 -0500 Subject: [PATCH 1/4] ux sitemap generation --- .../node/ux_sitemap_document/prompt/prompt.ts | 44 ++++++++++++++++ .../node/ux_sitemap_document/uxsmd.ts | 51 +++++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 backend/src/build-system/node/ux_sitemap_document/prompt/prompt.ts create mode 100644 backend/src/build-system/node/ux_sitemap_document/uxsmd.ts 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 0000000..ccf8d7f --- /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 0000000..ab9ee84 --- /dev/null +++ b/backend/src/build-system/node/ux_sitemap_document/uxsmd.ts @@ -0,0 +1,51 @@ +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): Promise { + this.logger.log('Generating UXSMD...'); + + // Extract project data from the context + const projectName = + context.getData('projectName') || 'Default Project Name'; + const prdDocument = context.getData('prdDocument') || 'Default prdDocument'; + const platform = context.getData('platform') || 'Default Platform'; + + // Generate the prompt dynamically + const prompt = prompts.generateUxsmdrompt( + projectName, + prdDocument, + platform, + ); + + // Send the prompt to the LLM server and process the response + const uxsmdContent = await this.generateUXSMDFromLLM(prompt); + + 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; + } +} From 9dca6c5330473b897026b644e17a920b10e2dfa6 Mon Sep 17 00:00:00 2001 From: ZHallen122 Date: Sat, 16 Nov 2024 22:54:43 -0500 Subject: [PATCH 2/4] update fix error --- .../src/build-system/node/ux_sitemap_document/uxsmd.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/backend/src/build-system/node/ux_sitemap_document/uxsmd.ts b/backend/src/build-system/node/ux_sitemap_document/uxsmd.ts index ab9ee84..499f15e 100644 --- a/backend/src/build-system/node/ux_sitemap_document/uxsmd.ts +++ b/backend/src/build-system/node/ux_sitemap_document/uxsmd.ts @@ -8,25 +8,27 @@ export class UXSMDHandler implements BuildHandler { readonly id = 'op:UXSMD::STATE:GENERATE'; readonly logger: Logger = new Logger('UXSMDHandler'); - async run(context: BuilderContext): Promise { + 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 prdDocument = context.getData('prdDocument') || 'Default prdDocument'; const platform = context.getData('platform') || 'Default Platform'; // Generate the prompt dynamically const prompt = prompts.generateUxsmdrompt( projectName, - prdDocument, + 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, From 43325d2bf1cd01b99b0d6d921a1922a0e3e06a98 Mon Sep 17 00:00:00 2001 From: ZHallen122 Date: Sun, 17 Nov 2024 20:24:29 -0500 Subject: [PATCH 3/4] init ux strucute --- .../node/ux-sitemap-structure/index.ts | 34 ++++++++++++++++ .../node/ux-sitemap-structure/prompt.ts | 39 +++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 backend/src/build-system/node/ux-sitemap-structure/index.ts create mode 100644 backend/src/build-system/node/ux-sitemap-structure/prompt.ts diff --git a/backend/src/build-system/node/ux-sitemap-structure/index.ts b/backend/src/build-system/node/ux-sitemap-structure/index.ts new file mode 100644 index 0000000..b761b3f --- /dev/null +++ b/backend/src/build-system/node/ux-sitemap-structure/index.ts @@ -0,0 +1,34 @@ +import { BuildHandler, BuildResult } from 'src/build-system/types'; +import { BuilderContext } from 'src/build-system/context'; +import { ModelProvider } from 'src/common/model-provider'; +import { prompts } from './prompt'; + +export class UXStructureHandler implements BuildHandler { + readonly id = 'op:UX_Structure::STATE:GENERATE'; + + async run(context: BuilderContext, args: unknown): Promise { + console.log('Generating UX Structure Document...'); + + // extract relevant data from the context + const projectName = + context.getData('projectName') || 'Default Project Name'; + + const prompt = prompts.generateUXDataMapPrompt( + projectName, + args as string, + // TODO: change later + 'web', + ); + + const uxStructureContent = await context.model.chatSync( + { + content: prompt, + }, + 'gpt-4o-mini', + ); + return { + success: true, + data: uxStructureContent, + }; + } +} diff --git a/backend/src/build-system/node/ux-sitemap-structure/prompt.ts b/backend/src/build-system/node/ux-sitemap-structure/prompt.ts new file mode 100644 index 0000000..29dfcf5 --- /dev/null +++ b/backend/src/build-system/node/ux-sitemap-structure/prompt.ts @@ -0,0 +1,39 @@ +export const prompts = { + generateUXDataMapPrompt: ( + projectName: string, + sitemapDoc: string, + platform: string, + ): string => { + return `You are an expert UX Designer and frountend developer. Your task is to analyze the provided sitemap documentation and identify ux structure needed to support the user experience, based on the following inputs: + + - Project name: ${projectName} + - Sitemap Documentation: ${sitemapDoc} + - Platform: ${platform} + + Follow these guidelines to analyze data requirements from a UX perspective: + + ### Instructions and Rules: + + 1. For each page/screen in the sitemap: + - What information does the user need to see? + - What elements should be on the page? + - What are all the routes require for the frontend? + - What dynamic content needs to be displayed? + - What are the restriction for the page? + + 2. Consider: + - User goals on each page + - User journy + - Element purposes + - Content that needs to be displayed + - Error states and messages + + Your reply must start with: "\`\`\`UXStructureMap" and end with "\`\`\`". + + Focus on describing the UX Structure from a user experience perspective. For each page: + 1. What element appear on each page and why + 2. What information needs to be displayed and why + 3. How the element supports user goals + `; + }, +}; From b6f8ba6d7ec8ba2e636f2f82c19bbe5f6f541666 Mon Sep 17 00:00:00 2001 From: ZHallen122 Date: Tue, 19 Nov 2024 11:17:10 -0500 Subject: [PATCH 4/4] update prompt --- .../node/ux-sitemap-structure/prompt.ts | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/backend/src/build-system/node/ux-sitemap-structure/prompt.ts b/backend/src/build-system/node/ux-sitemap-structure/prompt.ts index 29dfcf5..f57017f 100644 --- a/backend/src/build-system/node/ux-sitemap-structure/prompt.ts +++ b/backend/src/build-system/node/ux-sitemap-structure/prompt.ts @@ -4,36 +4,58 @@ export const prompts = { sitemapDoc: string, platform: string, ): string => { - return `You are an expert UX Designer and frountend developer. Your task is to analyze the provided sitemap documentation and identify ux structure needed to support the user experience, based on the following inputs: + return `You are an expert UX Designer. Your task is to analyze the provided sitemap documentation and generate a Detailed UX Structure Map to support the user experience and frontend implementation. The output should address all aspects of user interaction, content layout, based on the following inputs: - Project name: ${projectName} - Sitemap Documentation: ${sitemapDoc} - Platform: ${platform} - Follow these guidelines to analyze data requirements from a UX perspective: + Follow these guidelines to analyze requirements from a UX perspective: ### Instructions and Rules: - 1. For each page/screen in the sitemap: + 1, Your job is to analyzing how the ui element should be layed out and distributed on the page based on the Sitemap Documentation. + 2, You need to ensure all features from the sitemap documentation are addressed. + 3, You need to identify and define every page/screen required for the application. + 4, Detailed Breakdown for Each Page/Screen: + Page Purpose: Clearly state the user goal for the page. + Core Elements: + List all components (e.g., headers, buttons, sidebars) and explain their role on the page. + Include specific interactions and behaviors for each element. + Content Display: + Identify the information that needs to be visible on the page and why it’s essential for the user. + Navigation and Routes: + Specify all frontend routes required to navigate to this page. + Include links or actions that lead to other pages or states. + Restrictions: + Note any restrictions or conditions for accessing the page (e.g., login required, specific user roles). + + 5, Focus on Detail: + Provide a component-level breakdown for each page, including layouts. + Explain how the design supports user goals and aligns with their journey. + + 6. For each page/screen in the sitemap: + - How the block should be place on the view? - What information does the user need to see? - What elements should be on the page? - What are all the routes require for the frontend? - What dynamic content needs to be displayed? - What are the restriction for the page? - 2. Consider: + 7. Consider: - User goals on each page - User journy - Element purposes - Content that needs to be displayed - - Error states and messages Your reply must start with: "\`\`\`UXStructureMap" and end with "\`\`\`". - + Focus on describing the UX Structure from a user experience perspective. For each page: 1. What element appear on each page and why 2. What information needs to be displayed and why 3. How the element supports user goals + + Make sure is 100% completed. It will be directly be use in development. `; }, };