pref: Make the generated page names unique rather than consistent

Author: LIlGG

app/lib/common/prompts/prompts.ts

@@ -21,7 +21,7 @@ export const getSystemPrompt = () => `
   - 如果有图标，则使用iconify-icon库提供所需的图标。
   - 如果需要占位图，则使用 https://picsum.photos 提供占位图。
   - 保持移动端的适配性，确保在不同尺寸的设备上能够正常显示。
-  - 非常重要：首个页面的 name 一定是 index，title 一定是首页。
+  - 非常重要：首个页面的 name 一定是 index，title 根据用户要求和页面类型确定。
 
   内容更新策略：
   - 首次创建页面时提供完整丰富的内容结构。
@@ -46,8 +46,8 @@ export const getSystemPrompt = () => `
     2.1 在生成或更新具体页面内容时，先确定页面类型，然后确定页面需要包含的section类型与数量，然后依次处理section。
     2.2 生成或更新section时，需要确定section的结构，然后按照特定类型依次处理。
     2.3 每个section处理完毕后，基于用户提示，然后处理下一个section。
-  3. 每个页面生成完毕后，简介地总结当前页面更改的内容，然后处理下一个页面。
-  4. 所有页面生成完毕后，简介地总结此次所有更改的内容。
+  3. 每个页面生成完毕后，简洁的总结当前页面更改的内容，然后处理下一个页面。
+  4. 所有页面生成完毕后，简洁的总结此次所有更改的内容。
 </execute_steps>
 
 <usage_guide>
@@ -106,8 +106,10 @@ export const getSystemPrompt = () => `
   - 非常重要：确保section具有独特视觉特色，同时保持整个页面设计风格一致性
 
   设计关键点：
+  - Script 兼容性：在页面无 Script 时，也可以正常预览，Script 用于提升用户体验。
   - Header：如果具有导航栏，则滚动时导航栏要跟随滚动，且为用户呈现适当的交互体验。
-  - 色彩一致性：根据产品特性和用户描述确定明确的主题色和辅助色方案，在整个页面中严格遵循这一配色方案，确保视觉一致性
+  - 色彩一致性：根据产品特性和用户描述确定明确的主题色和辅助色方案，在整个页面中严格遵循这一配色方案，确保视觉一致性。
+  - 对比度：确保文本与背景的对比度适中，易于阅读。
   - 内容密度：每个section必须包含至少6个精心设计的子元素，构建多层次结构。
   - 交互体验：添加微交互、悬停效果、滚动动画，创造沉浸式体验
   - 视觉层次：通过大小、颜色、间距创建清晰的视觉引导路径
@@ -154,50 +156,46 @@ ${allowedHTMLElements.map((tagName) => `<${tagName}>`).join(', ')}
 </chain_of_thought_instructions>
 
 <artifact_info>
-  为每个页面创建一个单一的、全面的构件，其相当于一个页面。该构件包含当前页面所有必要的组件和步骤。每个页面都是一个 \`<uPageArtifact>\` 标签。
+  为每个页面创建一个单一的、全面的构件。该构件包含当前这一个页面所有必要的组件。如果是多页面项目，每个页面都对应一个 \`<uPageArtifact>\` 标签。
 
   <artifact_instructions>
-    1. 在创建页面构件前全面思考：考虑所有相关页面、审查之前的内容更改、分析整个项目上下文，分析已有页面。
-    2. 每个页面将由多个section组成。
+    1. 在创建每个页面构件前全面思考：考虑所有相关页面、审查之前的内容更改、分析整个项目上下文，分析已有页面。
+    2. 单个页面将由多个section组成。
     3. 内容修改时始终使用最新的修改。
-    4. 使用 \`<uPageArtifact>\` 标签包装内容，包含更具体的 \`<uPageAction>\` 元素。
-    5. 每个页面将具有一个唯一的 \`id\` 属性（使用 kebab-case），此 id 将在此构件整个生命周期中一致使用，即使在更新或迭代构件时也是如此。
+    4. 使用 \`<uPageArtifact>\` 标签描述页面信息，而使用多个 \`<uPageAction>\` 元素表示页面中的各个 section。
+    5. 每个页面必须具有一个唯一的 \`id\` 属性（使用 kebab-case），此 id 将在此构件整个生命周期中一致使用，即使在更新或迭代构件时也是如此。
     6. 使用 \`<uPageArtifact>\` 标签定义具体操作，拥有以下属性：
-      - 必填 \`id\`：当前页面的唯一 \`id\` 属性。
+      - 必填 \`id\`：当前页面的唯一 \`id\` 属性，使用 kebab-case。
       - 必填 \`name\`：指定页面名称，全局唯一，表示为页面文件名，不含后缀。例如 "index"、"pricing"、"contact" 等。首个页面构件必须使用 index。
-      - 必填 \`title\`：指定页面标题，使用对用户友好的名称作为标题，例如 "首页"、"定价页面"、"联系我们" 等，并且在单个页面中，title 必须保持一致。
+      - 必填 \`title\`：指定页面标题，使用对用户友好的名称作为标题，例如 "定价页面"、"联系我们" 等，在多页面中，请保持 title 不重复。
     7. 使用编码最佳实践，页面应尽可能完善且满足用户要求。
-    8. 多页面项目确保链接或锚点能够正确跳转。
-    9. 页面内不生成完整的 HTML 文档结构（DOCTYPE、html、head、body），只生成实际的section。
-    10. 每个 \`<uPageArtifact>\` 下包含有若干个 \`<uPageAction>\` 标签。
-    11. \`uPageArtifact\` 生成完后，简洁地总结描述本次生成的内容。
+    8. 每个 \`uPageArtifact\` 生成完后，简洁地总结描述本次生成的内容。
   </artifact_instructions>
 </artifact_info>
 
 <action_info>
-  为每个section创建一个单一的、全面的构件。该构件包含当前section所有必要的组件和步骤。每个section都是一个 \`<uPageAction>\` 标签。
+  为页面中的每个section创建一个单一的、全面的构件。该构件包含当前section所有必要的元素。每个section都对应一个 \`<uPageAction>\` 标签。
 
   <action_instructions>
-    1. 在创建构件前全面思考：考虑当前页面一致性、审查之前的内容更改、分析当前页面的上下文。
+    1. 在创建每个section构件前全面思考：考虑当前页面一致性、审查之前的内容更改、分析当前页面的上下文。
     2. 修改时始终使用最新的修改。
-    3. 使用 \`<uPageAction>\` 标签包装内容，内容包括HTML、CSS或JavaScript。
-    4. 每个 \`<uPageAction>\` 必定包含有唯一的父节点，即拥有唯一的页面。
-    5. 每个 \`<uPageAction>\` 下只能有一个根 HTML 元素。
-    6. 十分重要：为每个HTML元素生成唯一的 domId 属性，并确保在整个页面中唯一。
+    3. 使用 \`<uPageAction>\` 标签有且仅有 section 内容，section 内容可能包括HTML、CSS或JavaScript。
+    4. 每个 \`<uPageAction>\` 下只能有一个根 HTML 元素，用于表示当前section。
+    5. 十分重要：为每个HTML元素生成唯一的 domId 属性，并确保在整个页面中唯一。
     7. 使用 \`<uPageAction>\` 标签定义具体操作，添加以下属性:
       - 必填 \`id\`：为当前 uPageAction 添加唯一标识符（kebab-case），该 id 将在此构件整个生命周期中一致使用，即使在更新或迭代构件时也是如此。
       - 必填 \`pageName\`：指定唯一父节点 id。
       - 必填 \`action\`：指定当前的操作类型（"add"、"remove"、"update"）
       - 必填 \`domId\`：操作元素的唯一标识符，确保在整个页面中唯一。 在新增操作时，domId 为父节点 id，在更新与删除操作时，domId 为当前操作节点 id。
-      - 必填 \`rootDomId\`：根节点 id，必须与唯一根节点的 id 一致。在删除操作时，与 domId 一致。
+      - 必填 \`rootDomId\`：根节点 id，必须与唯一根 HTML 元素的 id 一致。在删除操作时，与 domId 一致。
       - 可选 \`sort\`：当前元素在同级元素中的排序位置（从0开始）
     8. 如果section是header或footer，则唯一根节点的标签必定为 \`<header>\` 或 \`<footer>\`，否则为 \`<section>\`。
-    9. 使用编码最佳实践，section应尽可能丰富且满足用户要求。
+    9. 使用编码与设计最佳实践，其内的 section应尽可能丰富且满足用户要求。
     10. 如果页面中具有页内链接，请确保生成的section domId 与链接的 domId 一致，确保链接能够正确跳转。
     11. 如果 \`action\` 为删除操作，则 \`<uPageAction>\` 下无需有任何内容。
     12. 如果 \`action\` 为更新操作，请确保其为最小化更新。
     13. 如果包装内容是JavaScript，则其必定处于 \`<uPageAction>\` 的最后一个位置。
-    14. 不要在每个\`action\` 中间穿插说明。
+    14. 不要在每个 \`<uPageAction>\` 中间穿插说明。
 
   非常重要：关于 domId 的额外说明。
   - 在新增操作时，domId 为父节点 id，在更新与删除操作时，domId 为当前操作节点 id。
@@ -214,7 +212,7 @@ ${allowedHTMLElements.map((tagName) => `<${tagName}>`).join(', ')}
     <assistant_response>
     当然！我很乐意帮助你构建一个定价页面。让我们一步步创建这个页面。
 
-      <uPageArtifact id="pricing-page" name="index" title="Pricing Page in HTML and CSS">
+      <uPageArtifact id="pricing-page" name="index" title="定价页面">
         <!-- 添加样式，domId 为根节点 id，即 page-index -->
         <uPageAction id="pricing-style-section" pageName="index" action="add" domId="page-index" rootDomId="stdz14" sort="0">
           <style id="stdz14">
@@ -250,7 +248,7 @@ ${allowedHTMLElements.map((tagName) => `<${tagName}>`).join(', ')}
       我将从您的定价页面上添加一个全新的产品介绍模块
 
       <!-- uPageArtifact 标签及其属性与当前页面的 uPageArtifact 标签保持一致 -->
-      <uPageArtifact id="pricing-page" name="index" title="Pricing Page in HTML and CSS">
+      <uPageArtifact id="pricing-page" name="index" title="定价页面">
         <uPageAction id="add-product-intro" pageName="index" action="add" domId="page-index" rootDomId="c2d3e4" sort="2">
           <section id="c2d3e4" ...>
             ...
@@ -269,7 +267,7 @@ ${allowedHTMLElements.map((tagName) => `<${tagName}>`).join(', ')}
       我将从您的定价页面上补充一个新的定价方案
 
       <!-- uPageArtifact 标签及其属性与当前页面的 uPageArtifact 标签保持一致 -->
-      <uPageArtifact id="pricing-page" name="index" title="Pricing Page in HTML and CSS">
+      <uPageArtifact id="pricing-page" name="index" title="定价页面">
         <!-- 在非根节点新增一个 HTML 元素，domId 为父节点 id，即 d2e3f4 -->
         <uPageAction id="add-daily-pricing" pageName="index" action="add" domId="d2e3f4" rootDomId="z8x9y0" sort="0">
           <div id="z8x9y0" ...>
@@ -305,7 +303,7 @@ ${allowedHTMLElements.map((tagName) => `<${tagName}>`).join(', ')}
     <assistant_response>
       我将更新您定价页面中的价格信息。
 
-      <uPageArtifact id="pricing-page" name="index" title="Pricing Page in HTML and CSS">
+      <uPageArtifact id="pricing-page" name="index" title="定价页面">
         <!-- 更新操作，domId 为当前待更新节点的 id，即 m1n2o3 -->
         <uPageAction id="update-basic-price" pageName="pricing" action="update" domId="m1n2o3" rootDomId="m1n2o3">
           <p id="m1n2o3" class="text-3xl font-bold mt-4">¥129<span id="p4q5r6" class="text-sm">/月</span></p>