Skip to content

Commit faabb88

Browse files
ZHallen122ZHallen122
committed
update sitemap prompt
1 parent 01bfedf commit faabb88

File tree

2 files changed

+159
-110
lines changed

2 files changed

+159
-110
lines changed

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

Lines changed: 45 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -4,77 +4,61 @@ export const prompts = {
44
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:
55
- Project name: ${projectName}
66
- Platform: ${platform}
7-
- Product Requirements Document: (Provided by the user next)
8-
- Goal: MVP (Minimum Viable Product)
7+
- product requirements document: (Provided by the user next)
98
109
Follow these rules as a guide to ensure clarity and completeness in your UX Sitemap Document.
11-
Output Requirements:
12-
Use plain text (no Markdown).
13-
Begin with <UXSitemap> and end with </UXSitemap>.
14-
Within <UXSitemap>, generate multiple <gen_page> blocks, one for each page.
15-
Each <gen_page> must follow this structure exactly:
10+
1. Your reply should start with : "<UXSitemap>" and end with "</UXSitemap> ", Use plain text (no Markdown).
11+
2. Use <page_gen> tags for each main page or section within the sitemap.
12+
3. Use <user_journeys_gen> tags for whole User Journeys
13+
4. **Comprehensive Analysis**: Thoroughly parse the PRD to identify all core features, functionalities, and user stories.
14+
- Focus on creating a hierarchical sitemap that covers each major section, with relevant sub-sections, pages, and key interactions.
15+
- Ensure all primary and secondary user journeys identified in the PRD are clearly reflected.
1616
17-
<gen_page>
18-
P#. [Page Name]
19-
URL Path: /[path]
20-
Description: [Brief description of page purpose]
21-
Parent Page: [Parent page if nested, or "None" if top-level]
22-
Access Level: [e.g., Public/Private/Admin]
2317
24-
#### Core Components
25-
C#.1. [Component Name]
26-
- Definition: Core Components are **distinct UI elements** or **functional blocks** on the page that have a clear, identifiable role. Each component must include:
27-
1. **Type** (Layout, Interactive, Display, Input, etc.)
28-
2. **Purpose** (What does it do for the user or the interface?)
29-
3. **States** (Possible UI states: Default, Hover, Clicked, Expanded, Loading, etc.)
30-
4. **Interactions** (User actions or system responses: clicking, hovering, dragging, scrolling, etc.)
18+
5. **Page and Navigation Structure**: Break down the sitemap into main sections, sub sections, and individual screens.
19+
- Identify all main and nested pages.
20+
- **Main Sections**: Identify primary sections (e.g., Home, User Account, Product Catalog) based on project requirements.
21+
- **Sub Sections**: Include sub-sections under each main section (e.g., "Profile" and "Order History" under "User Account").
22+
- **Screens and Interactions**: List specific screens and interactions that users encounter within each flow.
3123
32-
#### Features & Functionality
33-
- Focus on how these features tie back to user stories, and which **Core Components** are used to achieve them
34-
F#.1. [Feature Name]
35-
Description: [Brief feature description]
36-
User Stories: [Related user stories from PRD]
37-
Components Used: [Which components implement this feature?]
24+
6. **Detailed User Journeys**:
25+
- For every user story described in the PRD, map out the step-by-step navigation path.
26+
- Highlight sequences (e.g., 1. Home > 1.1. Explore > 1.1.1. Product Details).
3827
39-
#### Page-Specific User Flows
40-
Step-by-step sequences describing user interactions and system responses
41-
Flow #. [Flow Name]
42-
[Step 1]
43-
[Step 2]
44-
</gen_page>
28+
7. **Thorough Coverage**:
29+
- 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.
30+
- Consider the target audience and validate that all expected navigation flows and screens meet user needs.
4531
46-
4. **Number** pages sequentially (P1., P2., etc.).
47-
5. **Number** each component and feature sequentially within that page (C1.1, C1.2, F1.1, F1.2, etc.).
48-
6. Thoroughly parse the PRD to include:
49-
- **All** pages.
50-
- **All** features, functionalities, user stories, and flows.
51-
- **All** major/minor navigation and user journeys.
32+
8. Ask Your self:
33+
- Am I cover all the product requirement document?
34+
- Am I Cover all the gloabal UI?
35+
- Am I Cover all unique UI?
36+
- Am I cover all the view that expect by user?
37+
- what is all the details about UI?
38+
- Am I cover all the cases? Is the final result 100% complete?
5239
40+
9. Example output:
41+
<UXSitemap>
42+
<page_gen>
43+
N. [Main Section Title]
44+
N.1. [Sub-section Title]
45+
N.1.1. [Further Detail]
46+
N.1.2. [Further Detail]
47+
N.2. [Another Sub-section Title]
48+
</page_gen>
5349
54-
Sitemap Coverage
50+
<page_gen>
51+
2. [Another Main Section]
52+
2.1 [Sub-section Title]
53+
...
54+
</page_gen>
5555
56-
Comprehensive Analysis:
57-
Capture all features, functionalities, and user stories.
58-
Represent all primary and secondary user flows.
56+
<user_journeys_gen>
57+
Highlight sequences for user journey
58+
</user_journeys_gen>
5959
60-
Page & Navigation Structure:
61-
Identify all main and nested pages.
62-
Ensure clear parent-child relationships.
63-
64-
Detailed User Journeys:
65-
Provide step-by-step navigational flows unique to each page.
66-
67-
Thorough Coverage:
68-
Verify every requirement, global UI element, unique UI, and user expectation from the PRD is addressed.
69-
No user flow or screen should be missing.
70-
71-
Self-Check Before Submitting
72-
73-
Have you accounted for all PRD details?
74-
Have you included all major and minor pages/screens?
75-
Have you detailed each page's components, features, and flows completely?
76-
77-
Deliver a single XML-like document that strictly follows the structure above. Start with <UXSitemap> and close with </UXSitemap>, containing one <gen_page> block per page.
78-
`;
60+
</UXSitemap>
61+
62+
Remeber your result will be directly be use in the deveolpment. Make sure is 100% complete.`;
7963
},
8064
};

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

Lines changed: 114 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,122 @@
11
export const prompts = {
22
generateUXSiteMapStructrePrompt: (
33
projectName: string,
4-
sitemapDoc: string,
54
platform: string,
65
): string => {
7-
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:
8-
9-
- Project name: ${projectName}
10-
- Sitemap Documentation: ${sitemapDoc}
11-
- Platform: ${platform}
12-
13-
Follow these guidelines to analyze requirements from a UX perspective:
14-
15-
### Instructions and Rules:
16-
17-
1, Your job is to analyzing how the ui element should be layed out and distributed on the page based on the Sitemap Documentation.
18-
2, You need to ensure all features from the sitemap documentation are addressed.
19-
3, You need to identify and define every page/screen required for the application.
20-
4, Detailed Breakdown for Each Page/Screen:
21-
Page name: ## {index}. Name page
22-
Page Purpose: Clearly state the user goal for the page.
23-
Core Elements:
24-
List all components (e.g., headers, buttons, sidebars) and explain their role on the page.
25-
Include specific interactions and behaviors for each element.
26-
Content Display:
27-
Identify the information that needs to be visible on the page and why it's essential for the user.
28-
Navigation and Routes:
29-
Specify all frontend routes required to navigate to this page.
30-
Include links or actions that lead to other pages or states.
31-
Restrictions:
32-
Note any restrictions or conditions for accessing the page (e.g., login required, specific user roles).
6+
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:
7+
- Project name: ${projectName}
8+
- Platform: ${platform}
9+
- Product Requirements Document: (Provided by the user next)
10+
- Goal: MVP (Minimum Viable Product)
3311
34-
5, Focus on Detail:
35-
Provide a component-level breakdown for each page, including layouts.
36-
Explain how the design supports user goals and aligns with their journey.
12+
Follow these rules as a guide to ensure clarity and completeness in your UX Sitemap Document.
13+
Output Requirements:
14+
Use plain text (no Markdown).
15+
Begin with <UXSitemap> and end with </UXSitemap>.
16+
Within <UXSitemap>, generate multiple <gen_page> blocks, one for each page.
17+
Each <gen_page> must follow this structure exactly:
3718
38-
6. For each page/screen in the sitemap:
39-
- How the block should be place on the view?
40-
- What information does the user need to see?
41-
- What elements should be on the page?
42-
- What are all the routes require for the frontend?
43-
- What dynamic content needs to be displayed?
44-
- What are the restriction for the page?
45-
46-
7. Consider:
47-
- User goals on each page
48-
- User journy
49-
- Element purposes
50-
- Content that needs to be displayed
19+
<gen_page>
20+
P#. [Page Name]
21+
URL Path: /[path]
22+
Description: [Brief description of page purpose]
23+
Parent Page: [Parent page if nested, or "None" if top-level]
24+
Access Level: [e.g., Public/Private/Admin]
5125
52-
Your reply must start with: "\`\`\`UXStructureMap" and end with "\`\`\`".
26+
#### Core Components
27+
C#.1. [Component Name]
28+
- Definition: Core Components are **distinct UI elements** or **functional blocks** on the page that have a clear, identifiable role. Each component must include:
29+
1. **Type** (Layout, Interactive, Display, Input, etc.)
30+
2. **Purpose** (What does it do for the user or the interface?)
31+
3. **States** (Possible UI states: Default, Hover, Clicked, Expanded, Loading, etc.)
32+
4. **Interactions** (User actions or system responses: clicking, hovering, dragging, scrolling, etc.)
5333
54-
Focus on describing the UX Structure from a user experience perspective. For each page:
55-
1. What element appear on each page and why
56-
2. What information needs to be displayed and why
57-
3. How the element supports user goals
34+
#### Features & Functionality
35+
- Focus on how these features tie back to user stories, and which **Core Components** are used to achieve them
36+
F#.1. [Feature Name]
37+
Description: [Brief feature description]
38+
User Stories: [Related user stories from PRD]
39+
Components Used: [Which components implement this feature?]
40+
41+
#### Page-Specific User Flows
42+
Step-by-step sequences describing user interactions and system responses
43+
Flow #. [Flow Name]
44+
[Step 1]
45+
[Step 2]
46+
</gen_page>
47+
48+
1. **Goal**: Produce a complete UX Structure Map describing how each page/screen is laid out, including which global components are reused across pages.
49+
50+
2. **Global Components**:
51+
- Mark all reusable or site-wide elements with \`<global_comp>\` tags and end tag </global_comp>.
52+
- Provide a short but clear definition for each global component (e.g., Navigation Bar, Footer, etc.).
53+
- Explain how/why these components appear on multiple pages (if applicable).
54+
55+
3. **Page Definitions**:
56+
- Use \`<page_gen>\` tags to define each individual page or screen from the Sitemap Documentation.
57+
- For each \`<page_gen>\`, provide:
58+
- **Page name** (P#).
59+
- **URL Path**: The route or path used to access this page.
60+
- **Description**: Explain the purpose of the page, the users goal, and how it supports the user journey.
61+
- **Core Elements**: List and describe the UI elements on this page (headers, buttons, sidebars, etc.).
62+
- Explain their states and interactions.
63+
- Reference **global components** (if used) plus any page-specific components.
64+
- **Content Display**: What information is shown, and why is it essential?
65+
- **Navigation and Routes**: Which routes lead here? Which links or buttons lead out?
66+
- **Restrictions**: Note if login is required, or if only certain user roles can access.
67+
68+
4. **Focus on Detail**:
69+
- Provide a component-level breakdown for each pages layout and user interactions.
70+
- Address all features from the Sitemap Documentation; confirm no item is missed.
71+
- Make sure each pages structure is thorough enough for front-end implementation.
72+
73+
5. **Consider**:
74+
- User goals on each page.
75+
- The user journey and how each page supports it.
76+
- The purpose of each element (why it exists, how it helps the user).
77+
- The presence of dynamic or personalized content.
78+
79+
6. **Output Format**:
80+
- Your reply must begin with: <UXSitemapStructre> and end with </UXSitemapStructre> (plain text, no Markdown headings).
81+
- Inside, you must include:
82+
1. One or more \`<global_comp>\` blocks (if relevant).
83+
2. Multiple \`<page_gen>\` blocks (one per page).
84+
- Each \`<global_comp>\` or \`<page_gen>\` should include all relevant fields as stated above.
85+
**Number** pages sequentially (P1., P2., etc.).
86+
**Number** each component and feature sequentially within that page (C1.1, C1.2, F1.1, F1.2, etc.).
87+
Thoroughly parse the PRD to include:
88+
- **All** pages.
89+
- **All** features, functionalities, user stories, and flows.
90+
- **All** major/minor navigation and user journeys.
91+
92+
Sitemap Coverage
93+
94+
Comprehensive Analysis:
95+
Capture all features, functionalities, and user stories.
96+
Represent all primary and secondary user flows.
97+
98+
Page & Navigation Structure:
99+
Identify all main and nested pages.
100+
Ensure clear parent-child relationships.
101+
102+
Detailed User Journeys:
103+
Provide step-by-step navigational flows unique to each page.
104+
105+
Thorough Coverage:
106+
Verify every requirement, global UI element, unique UI, and user expectation from the PRD is addressed.
107+
No user flow or screen should be missing.
108+
109+
Self-Check Before Submitting
110+
111+
Have you accounted for all sitemap details?
112+
Have you included all major and minor pages/screens?
113+
Have you detailed each page's components, features, and flows completely?
114+
Is every page from the Sitemap Documentation represented in a \`<page_gen>\` block?
115+
Are all global components defined in \`<global_comp>\` blocks?
116+
Are user flows, interactions, and relevant content needs included?
117+
118+
Deliver a single XML-like document that strictly follows the structure above. Start with <UXSitemap> and close with </UXSitemap>, containing one <gen_page> block per page.
58119
59-
Make sure is 100% completed. It will be directly be use in development.
60120
`;
61121
},
62122
generateLevel2UXSiteMapStructrePrompt: (
@@ -100,6 +160,11 @@ export const prompts = {
100160
Restrictions:
101161
Note any restrictions or conditions for accessing the page (e.g., login required, specific user roles).
102162
163+
2. **Global Components**:
164+
- Mark all reusable or site-wide elements with \`<global_comp>\` tags.
165+
- Provide a short but clear definition for each global component (e.g., Navigation Bar, Footer, etc.).
166+
- Explain how/why these components appear on multiple pages (if applicable).
167+
103168
5, Focus on Detail:
104169
Provide a component-level breakdown for each page, including layouts.
105170
Explain how the design supports user goals and aligns with their journey.

0 commit comments

Comments
 (0)