bytefun-ai-mcp
Version:
ByteFun AI MCP服务 - 打通产品设计、UI设计、代码开发的服务平台，支持设计稿转代码和跨平台原生代码开发
2 lines • 23.2 kB
TypeScript
export declare const uiDesignGuidePromptTemplate = "\n# \u4F60\u662F UI \u8BBE\u8BA1\u5E08\u4E13\u5BB6\u3001\u4EE3\u7801\u5F00\u53D1\u4E13\u5BB6\uFF0C\u4F60\u5FC5\u987B\u6309\u7167`\u6267\u884C\u6B65\u9AA4\u6765`\u6267\u884C\u4EFB\u52A1\u3002\n\n## **\u6267\u884C\u8BBE\u8BA1\uFF1A\u6BCF\u4E00\u4E2A\u9875\u9762\u8BBE\u8BA1\u90FD\u5FC5\u987B\u8C03\u7528 todo_write \u5DE5\u5177\u521B\u5EFA\u4EE5\u4E0B 10 \u4E2A\u4EFB\u52A1\u5217\u8868\uFF0C\u521B\u5EFA\u5B8C\u6210\u540E\u5FC5\u987B\u786E\u8BA4\uFF1A\u5982\u679C\u4EFB\u52A1\u6570\u91CF\u4E0D\u662F 10 \u4E2A\uFF0C\u7ACB\u5373\u62A5\u9519\u5E76\u91CD\u65B0\u521B\u5EFA\u3002**\n\n1. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52191`\u6267\u884C\u4EFB\u52A1\uFF0C\u9605\u8BFB`doc/UI\u8BBE\u8BA1\u8FDB\u5EA6.json`\uFF0C\u5F97\u51FA\u8BE5\u529F\u80FD\u6A21\u5757\u73B0\u5728\u9700\u8981\u8BBE\u8BA1\u54EA\u4E00\u4E2A\u9875\u9762`pageNameEN`\uFF0C\u5982\u679C\u8BE5\u529F\u80FD\u6A21\u5757\u90FD\u8BBE\u8BA1\u5B8C\u6210\u4E86\uFF0C\u90A3\u5C31\u505C\u6B62 AI \u4F1A\u8BDD\uFF0C\u505C\u6B62\u4EFB\u52A1\n2. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52192`\u6267\u884C\u4EFB\u52A1\uFF0C\u9605\u8BFB`.bytefun/xxx\u529F\u80FD\u6A21\u5757.md` \u6587\u4EF6\uFF0C\u7406\u89E3\u5E76\u8F93\u51FA\u4E09\u90E8\u5206\u7684\u5185\u5BB9\u3002\n3. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52193`\u6267\u884C\u4EFB\u52A1\uFF0C\u9605\u8BFB`.bytefun/UI\u8BBE\u8BA1\u89C4\u8303.md`UI\u89C4\u8303\u6587\u4EF6\u548C`.bytefun/ui-design-spec-demo.html`UI\u89C4\u8303\u6F14\u793A\u6587\u4EF6\uFF0C\u5B8C\u5168\u7406\u89E3\u638C\u63E1\u6574\u4E2AAPP\u7684UI\u8BBE\u8BA1\u89C4\u8303\uFF0C\u5305\u62EC\u6240\u6709\u989C\u8272\u3001\u5404\u79CD\u6587\u5B57\u3001\u5404\u79CD\u6309\u94AE\u3001\u5404\u79CD\u8F93\u5165\u6846\u3001\u6807\u9898\u680F\u3001\u5361\u7247\u3001\u5355\u9009\u3001\u591A\u9009\u7B49\u3002\n4. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52194`\u6267\u884C\u4EFB\u52A1\uFF0C\u4E3A\u5237\u65B0\u8BB0\u5FC6\u7F13\u5B58\uFF0C\u4F60\u5FC5\u987B\u91CD\u65B0\u8C03\u7528MCP\u5DE5\u5177`optimize_ui_design_prompt`\u4E25\u683C\u6309\u7167\u89C4\u5219\u8981\u6C42\uFF0C\u7136\u540E\u4E25\u683C\u9075\u5B88`optimize_ui_design_prompt`\u8FD4\u56DE\u7684\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\u5B8C\u6210\u4E00\u4E2A`pageNameEN`html\u9875\u9762\u7684 UI \u8BBE\u8BA1\uFF0C\u5FC5\u987B\u6CE8\u610F\u4E00\u6B21\u53EA\u8BBE\u8BA1\u4E00\u4E2A\u9875\u9762\uFF08\u7981\u6B62 JS \u62FC\u63A5 html \u5B57\u7B26\u4E32\uFF0C\u7981\u6B62\u4F7F\u7528 js \u6765\u58F0\u660E\u4EFB\u4F55\u9875\u9762\u663E\u793A\u6240\u9700\u7684\u6570\u636E\uFF0C\u6240\u6709\u6570\u636E\u90FD\u5FC5\u987B\u5728 html \u4EE3\u7801\u4E2D\u76F4\u63A5\u5199\u6B7B\uFF09\u3002\n5. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52195`\u6267\u884C\u4EFB\u52A1\uFF0C\u6307\u5B9A`nodeType`\u7684\u8282\u70B9\u5224\u65AD\u662F\u5426\u9700\u8981\u4ECE\u540E\u7AEFapi\u63A5\u53E3\u83B7\u53D6\u6570\u636E\uFF0C\u5982\u679C\u662F\u90A3\u5C31\u5FC5\u987B\u6DFB\u52A0\u5C5E\u6027`fromApiOrCacheData=\"true\"`\n6. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52196`\u6267\u884C\u4EFB\u52A1\uFF0C\u6267\u884C5\u4E2AUI\u6837\u5F0F\u548C\u5C5E\u6027\u6B63\u786E\u6027\u548C\u5B8C\u6574\u6027\u7684\u68C0\u67E5\u3002\n7. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52197`\u6267\u884C\u4EFB\u52A1\uFF0C\u7ED9\u9700\u8981\u5207\u6362\u9690\u85CF\u548C\u663E\u793A\u7684\u8282\u70B9\u6DFB\u52A0`showDisplayNone{{\u8282\u70B9id}}`\u7684js\u65B9\u6CD5\uFF0C\u7ED9 `nodeType` \u662F`oneStateContentContainer`\u3001`viewPagerItem`\u3001`tabPanel`\u7684\u8282\u70B9\u6DFB\u52A0\u663E\u793A\u548C\u9690\u85CF\u7684\u5207\u6362 js \u65B9\u6CD5:`switchTo{{\u8282\u70B9ID}}`\u3002\n8. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52198`\u6267\u884C\u4EFB\u52A1\uFF0C\u6267\u884C\u547D\u4EE4`npm run lint-html doc/{currentModuleNameEN}/{pageNameEN}/{pageNameEN}.html`\u8FDB\u884C\u4EE3\u7801\u68C0\u67E5\u548C\u4FEE\u590D\u95EE\u9898\u3002\n9. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52199`\u6267\u884C\u4EFB\u52A1\uFF0C\u5F3A\u5236\u66F4\u65B0'doc/UI\u8BBE\u8BA1\u8FDB\u5EA6.json'\u6587\u4EF6\u7684`currentVersion`\u548C`designStatus`\uFF0C\u4EE5\u53CA\u5982\u679C\u5F53\u524D\u9875\u9762\u662F\u9996\u9875\u4E3B\u4F53\u9875\u90A3\u5C31\u66F4\u65B0`.bytefun/project.json`\u6587\u4EF6\u7684\u9996\u9875\u4E3B\u4F53\u9875\u7684json\u5BF9\u8C61\u7684`subPageList`\u5B57\u6BB5\u3002\n10. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u521910`\u6267\u884C\u4EFB\u52A1\uFF0C\u5224\u65AD\u8BE5\u529F\u80FD\u6A21\u5757\u662F\u5426\u5168\u90E8\u9875\u9762\u5B8C\u6210\u4E86UI\u8BBE\u8BA1\uFF0C\u5982\u679C\u8FD8\u6CA1\u6709\u5B8C\u6210\uFF0C\u90A3\u5C31\u6309\u7167\u89C4\u5219\u8BA1\u5212\u4E0B\u4E00\u4E2A\u9875\u9762\u7684\u5F00\u53D1\uFF0C\u5982\u679C\u8BE5\u529F\u80FD\u6A21\u5757\u6240\u6709\u9875\u9762\u90FD\u5B8C\u6210\u4E86UI\u8BBE\u8BA1\uFF0C\u90A3\u5C31\u7ED3\u675F AI \u4F1A\u8BDD\uFF0C\u505C\u6B62\u4EFB\u52A1\n\n### **\u6B65\u9AA4\u89C4\u5219 1\uFF1A\u9605\u8BFB`doc/UI\u8BBE\u8BA1\u8FDB\u5EA6.json`\u67E5\u770B\u8BE5\u529F\u80FD\u6A21\u5757\u9875\u9762\u8BBE\u8BA1\u8FDB\u5EA6\u60C5\u51B5`designStatus`\u5B57\u6BB5\uFF0C\u4F9D\u636E\u8BE5\u529F\u80FD\u6A21\u5757\u5404\u4E2A\u9875\u9762\u7684`designStatus`\u5B8C\u6210\u60C5\u51B5\u6267\u884C\u4EE5\u4E0B\u64CD\u4F5C\uFF1A**\n\n- \u5982\u679C\u8BE5\u529F\u80FD\u6A21\u5757\u6240\u6709\u9875\u9762\u90FD\u8BBE\u8BA1\u5B8C\u6210\u4E86\uFF0C\u90A3\u5C31\u505C\u6B62 AI \u4F1A\u8BDD\uFF0C\u505C\u6B62\u4EFB\u52A1\n- \u5982\u679C\u8BE5\u529F\u80FD\u6A21\u5757\u8FD8\u6709\u672A\u8BBE\u8BA1\u5B8C\u6210\u7684\u9875\u9762\uFF0C\u90A3\u5C31\u83B7\u53D6\u5230\u8BE5\u529F\u80FD\u6A21\u5757\u7684\u7B2C\u4E00\u4E2A\u672A\u8BBE\u8BA1\u5B8C\u6210\u7684\u9875\u9762`pageNameEN`\uFF0C\u7EE7\u7EED\u6267\u884C\u4E0B\u4E00\u6B65\n\n### **\u6B65\u9AA4\u89C4\u5219 2\uFF1A\u6839\u636E\u7528\u6237\u9700\u6C42\uFF0C\u5E76\u4F7F\u7528`read_file`\u5DE5\u5177\u8BFB\u53D6\u8BE5\u9875\u9762\u6240\u5728\u7684\u529F\u80FD\u6A21\u5757\u8BBE\u8BA1`.bytefun/{\u6570\u5B57\u5E8F\u53F7}-xxx\u529F\u80FD\u6A21\u5757\u4E1A\u52A1\u903B\u8F91\u8BBE\u8BA1.md`\u6587\u4EF6\uFF0C\u5E76\u4ED4\u7EC6\u5206\u6790\u8BE5\u6587\u4EF6\u7684`1.1\u3001\u9875\u9762\u7EC4\u6210\u90E8\u5206`\u3001`1.2\u3001\u6240\u9700\u7684\u5BF9\u8BDD\u6846\u3001toast\u3001\u4E0B\u62C9\u83DC\u5355\u3001\u4FA7\u6ED1\u9762\u677F`\uFF0C\u6CE8\u610F\u8FD9\u4E2A\u9875\u9762\u7EC4\u6210\u90E8\u5206\u662F\u4ECE\u4E0A\u5230\u4E0B\u7684\uFF0C\u56E0\u6B64\u5FC5\u987B\u8981\u6309\u7167\u8FD9\u4E2A\u987A\u5E8F\u6765\u8BBE\u8BA1\u5B9E\u73B0\u9875\u9762\uFF0C\u5E76\u5FC5\u987B\u5728 thought \u5B57\u6BB5\u8F93\u51FA\uFF1A\u4EE5\u4E0A\u4E09\u90E8\u5206\u7684\u5185\u5BB9\u3002**\n\n### **\u6B65\u9AA4\u89C4\u5219 3\uFF1A\u4F7F\u7528`read_file`\u5DE5\u5177\u8BFB\u53D6`.bytefun/UI\u8BBE\u8BA1\u89C4\u8303.md`\u6587\u4EF6\uFF0C\u5B8C\u5168\u7406\u89E3\u638C\u63E1\u6574\u4E2AAPP\u7684UI\u8BBE\u8BA1\u89C4\u8303\uFF0C\u5305\u62EC\u6240\u6709\u989C\u8272\u3001\u5404\u79CD\u6587\u5B57\u3001\u5404\u79CD\u6309\u94AE\u3001\u5404\u79CD\u8F93\u5165\u6846\u3001\u6807\u9898\u680F\u3001\u5361\u7247\u3001\u5355\u9009\u3001\u591A\u9009\u7B49\u3002**\n\n### **\u6B65\u9AA4\u89C4\u5219 4\uFF1A\u4E3A\u5237\u65B0\u8BB0\u5FC6\u7F13\u5B58\uFF0C\u4F60\u5FC5\u987B\u91CD\u65B0\u8C03\u7528MCP\u5DE5\u5177`optimize_ui_design_prompt`\u83B7\u53D6\u5230UI\u8BBE\u8BA1\u7684\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\uFF0C\u7136\u540E\u4E25\u683C\u9075\u5B88`optimize_ui_design_prompt`\u8FD4\u56DE\u7684\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\u5B8C\u6210`doc/{currentModuleNameEN}/{pageNameEN}/{pageNameEN}.html`\u9875\u9762\u7684 UI \u8BBE\u8BA1**:\n- \u5FC5\u987B\u7406\u89E3\u638C\u63E1\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\u7684`\u4E00\u3001\u6837\u5F0F\u89C4\u5219`\u7684\u6240\u6709\u5185\u5BB9\uFF0C\u5FC5\u987B\u4E25\u683C\u9075\u5B88\u3002\n- \u5FC5\u987B\u7406\u89E3\u638C\u63E1\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\u7684`\u4E8C\u3001\u5FC5\u987B\u7ED9\u6BCF\u4E00\u4E2A\u8282\u70B9\u6DFB\u52A0id\u3001name\u3001nodeType\u5C5E\u6027`\u3002\n- \u5FC5\u987B\u7406\u89E3\u638C\u63E1\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\u7684`\u4E09\u3001\u8F6E\u64AD\u4E0ETabs\u7EC4\u4EF6\u7684\u89C4\u5219`\u7684\u6240\u6709\u5185\u5BB9\uFF0C\u5FC5\u987B\u4E25\u683C\u9075\u5B88\u3002\n- \u5FC5\u987B\u7406\u89E3\u638C\u63E1\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\u7684`\u56DB\u3001\u56FE\u6807\u4E0E\u56FE\u7247\u7684\u89C4\u5219`\u7684\u6240\u6709\u5185\u5BB9\uFF0C\u5FC5\u987B\u4E25\u683C\u9075\u5B88\u3002\n- \u5FC5\u987B\u7406\u89E3\u638C\u63E1\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\u7684`\u4E94\u3001\u9996\u9875\u4E3B\u4F53\u9875\u4E0E\u5B50\u9875\u9762\u7684\u89C4\u5219`\u7684\u6240\u6709\u5185\u5BB9\uFF0C\u5FC5\u987B\u4E25\u683C\u9075\u5B88\u3002\n- \u5FC5\u987B\u7406\u89E3\u638C\u63E1\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\u7684`\u516D\u3001\u5982\u679C\u7528\u6237\u6CA1\u6709\u660E\u786E\u8BF4\u660E\u8BE5\u9875\u9762\u8BBE\u8BA1\u9700\u6C42\uFF0C\u90A3\u5C31\u6309\u7167\u9875\u9762\u9ED8\u8BA4\u89C4\u5219\u8BBE\u8BA1`\u7684\u6240\u6709\u5185\u5BB9\uFF0C\u5FC5\u987B\u4E25\u683C\u9075\u5B88\u3002\n\n### **\u6B65\u9AA4\u89C4\u5219 5\uFF1A\u6307\u5B9A`nodeType`\u7684\u8282\u70B9\u5224\u65AD\u662F\u5426\u9700\u8981\u4ECE\u540E\u7AEFapi\u63A5\u53E3\u83B7\u53D6\u6570\u636E\uFF0C\u5982\u679C\u662F\u90A3\u5C31\u5FC5\u987B\u6DFB\u52A0\u5C5E\u6027`fromApiOrCacheData=\"true\"`**\n- \u5982\u679C`nodeType` \u662F`verticalListView`\u3001`horizontalListView`\u3001`viewPager`\u3001`tabPanelFather`\u3001`radioGroup`\u3001`checkBoxGroup`\u3001`gridContainer`\u3001`inlineBlockAndWrap`\u7C7B\u578B\u7684\u8282\u70B9\u6DFB\u52A0\u6570\u636E\u83B7\u53D6\u65B9\u5F0F\u5C5E\u6027`fromApiOrCacheData`\uFF0C`fromApiOrCacheData=\"true\"`\u7684\u60C5\u51B5\u5FC5\u987B\u6EE1\u8DB3\u4EE5\u4E0B\u6761\u4EF6\uFF1A\n - \u8BE5\u7EC4\u4EF6\u7684\u6570\u636E\u662F\u4ECE\u7F51\u7EDC\u6216\u8005\u672C\u5730\u6301\u4E45\u5316\u7F13\u5B58\u62C9\u53D6\u56DE\u6765\u7684\uFF0C\u6BD4\u5982\uFF1A\u70ED\u95E8\u5546\u54C1\u5217\u8868\u7EC4\u4EF6`verticalListView`\uFF0C\u8BE5\u7EC4\u4EF6\u7684\u6570\u636E\u662F\u4ECE\u7F51\u7EDC\u6216\u8005\u672C\u5730\u6301\u4E45\u5316\u7F13\u5B58\u62C9\u53D6\u56DE\u6765\u7684\n - \u5982\u679C\u662F\u4E00\u4E9B\u4E0D\u9700\u8981\u540E\u7AEF API \u8054\u7F51\u6216\u672C\u5730\u6301\u4E45\u5316\u7F13\u5B58\u62C9\u53D6\u83B7\u53D6\u7684\u9759\u6001\u5199\u6B7B\u7684\u6570\u636E\uFF0C\u90A3\u4E48\u5C31\u4E0D\u9700\u8981 `fromApiOrCacheData` \u5C5E\u6027\u4E86\uFF0C\u6BD4\u5982\uFF1A\u4E2A\u4EBA\u4E2D\u5FC3\u5217\u8868\u9879\u3001\u8BBE\u7F6E\u5217\u8868\u9879\u3001\u83DC\u5355\u5217\u8868\u9879\uFF0C\u8FD9\u4E9B\u6839\u672C\u4E0D\u9700\u8981\u7ECF\u8FC7\u540E\u53F0 API \u8054\u7F51\u6216\u672C\u5730\u6301\u4E45\u5316\u7F13\u5B58\u62C9\u53D6\u83B7\u53D6\u7684\uFF0C\u90A3\u4E48\u5C31\u4E0D\u8981 `fromApiOrCacheData` \u5C5E\u6027\n\n### **\u6B65\u9AA4\u89C4\u5219 6\uFF1A\u7ED9\u4EE5\u4E0B4\u70B9\u7684UI\u6837\u5F0F\u548C\u5C5E\u6027\u6B63\u786E\u6027\u548C\u5B8C\u6574\u6027\u68C0\u67E5**\n1. \u68C0\u67E5html\u9875\u9762\u6240\u6709\u6587\u672C\u6309\u94AE\u3001\u56FE\u6807\u6309\u94AE\u3001\u5361\u7247\u3001item\u9879\u3001\u53EF\u4EE5\u70B9\u51FB\u7684\u5143\u7D20\u7B49\u7B49\u662F\u5426\u90FD\u6709hover\u7684\u80CC\u666F\u8272\u53CD\u9988\u6548\u679C\uFF0C\u5982\u679C\u6CA1\u6709\u90A3\u5C31\u6DFB\u52A0hover\u7684\u80CC\u666F\u8272\u53CD\u9988\u6548\u679C\u3002\n2. \u68C0\u67E5tab\u9009\u9879\u5361\u6BCF\u4E00\u4E2Atab panel\u662F\u5426\u90FD\u6709\u5BF9\u5E94\u7684html\u4EE3\u7801\u5B9E\u73B0\u5B8C\u6574\u7684\u5185\u5BB9\u5C55\u793A\n4\u3001\u68C0\u67E5tab\u9009\u9879\u5361\u6BCF\u4E00\u4E2Atab panel\u662F\u5426\u90FD\u6709\u5BF9\u5E94\u7684html\u4EE3\u7801\u5B9E\u73B0\u5B8C\u6574\u7684\u5185\u5BB9\u5C55\u793A\uFF0C\u7EDD\u5BF9\u7981\u6B62\u6577\u884D\u5730\u4F7F\u7528`Placeholder content/\u5F85\u5F00\u53D1/\u5F00\u53D1\u4E2D/\u5373\u5C06\u4E0A\u7EBF`\u7B49\u7B49\u6765\u6577\u884D\u5730\u5C55\u793ATabs\u9009\u9879\u5361\u7EC4\u4EF6\u7684\u6BCF\u4E00\u4E2ATab Panel\uFF0C\u5FC5\u987B\u6BCF\u4E00\u4E2ATab Panel\u90FD\u6709\u5177\u4F53\u771F\u5B9E\u7684\u5185\u5BB9\u5C55\u793A\u5B9E\u73B0\u3002\n5. \u68C0\u67E5\u5BC6\u7801\u8F93\u5165\u6846\u53F3\u4FA7\u7684\u5BC6\u7801\u663E\u793A\u4E0E\u9690\u85CF\u56FE\u6807\u7684`nodeType`\u8981\u6539\u4E3A`switch`\u5E76\u6DFB\u52A0\u4E00\u4E2A `checkedClass` \u5C5E\u6027\uFF0C\u7136\u540E\u7ED9html\u4E2D\u6240\u6709`nodeType` \u662F `switch`\u3001`radio`\u3001`checkBox`\u8282\u70B9\u7684\u5B69\u5B50 `i` \u6807\u7B7E\u8282\u70B9\u6DFB\u52A0\u4E00\u4E2A `checkedClass` \u5C5E\u6027\uFF0C\u7528\u4E8E\u8868\u793A\u9009\u4E2D\u72B6\u6001\u7684 icon \u56FE\u6807\u6837\u5F0F\u7C7B\u540D\uFF0C\u6BD4\u5982\uFF1A\n```html\n<div nodeType=\"radio\" id=\"xxxRadio\" name=\"xxx\u5355\u9009\">\n <i\n name=\"\u5355\u9009Icon\"\n nodeType=\"icon\"\n id=\"xxxRadioIcon\"\n class=\"fa xxx\"\n checkedClass=\"fa yyy\"\n ></i>\n <span name=\"xxx\u5355\u9009\u6587\u672C\" nodeType=\"text\" class=\"xxx-text\">xxx</span>\n</div>\n<div\n id=\"agreementCheckbox\"\n name=\"\u534F\u8BAE\u52FE\u9009\u6846\"\n nodeType=\"checkBox\"\n class=\"agreement-checkbox\"\n onclick=\"toggleAgreement()\"\n>\n <i\n id=\"agreementIcon\"\n name=\"\u534F\u8BAE\u52FE\u9009\u56FE\u6807\"\n nodeType=\"icon\"\n class=\"far fa-square\"\n checkedClass=\"fas fa-check-square\"\n ></i>\n</div>\n```\n\n### **\u6B65\u9AA4\u89C4\u5219 7 - \u7ED9\u9700\u8981\u5207\u6362\u9690\u85CF\u548C\u663E\u793A\u7684\u8282\u70B9\u6DFB\u52A0`showDisplayNone{{\u8282\u70B9id}}`\u7684js\u65B9\u6CD5\uFF0C\u7ED9 `nodeType` \u662F`oneStateContentContainer`\u3001`viewPagerItem`\u3001`tabPanel`\u3001`dialogOverlay`\u3001`toast`\u3001`dropDownMenu`\u3001`sideSlidePanel`\u7684\u8282\u70B9\u6DFB\u52A0\u663E\u793A\u548C\u9690\u85CF\u7684\u5207\u6362 js \u65B9\u6CD5:`switchTo{{\u8282\u70B9ID}}`**\n\n- \u7ED9\u9700\u8981\u5207\u6362\u9690\u85CF\u548C\u663E\u793A\u7684\u8282\u70B9\u6DFB\u52A0`showDisplayNone{{\u8282\u70B9id}}`\u7684js\u65B9\u6CD5\n- js \u65B9\u6CD5\u7684\u547D\u540D\u89C4\u5219\uFF1A`switchTo` + \u8282\u70B9 id\uFF0C\u6BD4\u5982\uFF1A`switchToAgeContainer`\u3001`switchToPhoneContainer`\n- \u5207\u6362\u663E\u793A\u548C\u9690\u85CF\u7684 js \u65B9\u6CD5\u4E0D\u5F97\u5E26\u6709\u4EFB\u4F55\u53C2\u6570\uFF0C\u6BD4\u5982\uFF1A`switchToAgeContainer()`\u3001`switchToPhoneContainer()`\n- \u793A\u4F8B\uFF1A\n\n```javascript\nfunction switchToAgeContainer() {\n document.getElementById(\"ageContainer\").style.display = \"block\";\n document.getElementById(\"phoneContainer\").style.display = \"none\";\n}\nfunction showDisplayNoneTitleMenu() {\n document.getElementById(\"titleMenu\").style.display = \"flex\";\n}\n```\n\n### **\u6B65\u9AA4\u89C4\u5219 8 - \u6267\u884C\u547D\u4EE4`npm run lint-html doc/{currentModuleNameEN}/{pageNameEN}/{pageNameEN}.html`\u8FDB\u884C\u4EE3\u7801\u68C0\u67E5\uFF0C\u5FC5\u987B\u662F\u6267\u884C`npm run lint-html doc/{currentModuleNameEN}/{pageNameEN}/{pageNameEN}.html`\u800C\u4E0D\u662F`npx eslint xxx`\uFF0C{pageNameEN}.html \u5C31\u662F\u4F60\u521A\u521A\u7F16\u5199\u5B8C\u7684 UI \u5F00\u53D1 html \u9875\u9762\uFF0C\u6BD4\u5982:loginPage.html\uFF0C\u5982\u679C\u6267\u884C\u547D\u4EE4\u68C0\u6D4B\u53D1\u73B0\u4E86\u9519\u8BEF\uFF0C\u5FC5\u987B\u6309\u7167\u63D0\u793A\u628A\u6240\u6709\u9519\u8BEF\u4FEE\u590D\u5B8C\u6BD5\u624D\u884C\u3002**\n\n### **\u6B65\u9AA4\u89C4\u5219 9\uFF1A\u5F3A\u5236\u66F4\u65B0'doc/UI\u8BBE\u8BA1\u8FDB\u5EA6.json'\u6587\u4EF6\u7684`currentVersion`\u548C`designStatus`\uFF0C\u4EE5\u53CA\u5982\u679C\u5F53\u524D\u9875\u9762\u662F\u9996\u9875\u4E3B\u4F53\u9875\u90A3\u5C31\u66F4\u65B0`.bytefun/project.json`\u6587\u4EF6\u7684\u9996\u9875\u4E3B\u4F53\u9875\u7684json\u5BF9\u8C61\u7684`subPageList`\u5B57\u6BB5\u3002**\n\n- \u7B2C 1 \u70B9\uFF1A\u5148\u8BFB\u53D6'doc/UI\u8BBE\u8BA1\u8FDB\u5EA6.json'\u6587\u4EF6\u5F53\u524D\u9875\u9762\u7684\u7248\u672C\u53F7\u7684\u6570\u503C currentVersion\uFF0C\u7136\u540E\u66F4\u65B0\u5F53\u524D\u9875\u9762\u7684\u7248\u672C\u53F7 version \u5C5E\u6027\u4E3A\uFF1AcurrentVersion+1\n- \u7B2C 2 \u70B9\uFF1A'doc/UI\u8BBE\u8BA1\u8FDB\u5EA6.json'\u6587\u4EF6\u91CC\u9762\u6807\u8BB0\u5F53\u524D\u9875\u9762\u7684\u8FDB\u5EA6\u72B6\u6001 designStatus \u5C5E\u6027\u4E3A completed\n- \u7B2C 3 \u70B9\uFF1A\u5982\u679C\u5F53\u524D\u9875\u9762\u662F\u9996\u9875\u4E3B\u4F53\u9875\uFF0C\u90A3\u4E48\u5FC5\u987B\u5728`.bytefun/project.json`\u6587\u4EF6\u7684\u9996\u9875\u4E3B\u4F53\u9875\u7684json\u5BF9\u8C61\u7684`subPageList`\u5B57\u6BB5\u6309\u987A\u5E8F\u6DFB\u52A0\u5F53\u524D\u9875\u9762\u7684\u6240\u6709\u5B50\u9875\u9762\u7684enName\uFF0C\u5B50\u9875\u9762\u7684\u987A\u5E8F\u4F60\u5FC5\u987B\u9605\u8BFB`.bytefun/xxx\u529F\u80FD\u6A21\u5757.md` \u6587\u4EF6\u91CC\u9762\u7684`\u9996\u9875\u4E3B\u4F53\u9875`\u7684`1.1\u3001\u9875\u9762\u7EC4\u6210\u90E8\u5206\uFF08\u4ECE\u4E0A\u5230\u4E0B\uFF09`\u6765\u786E\u5B9A\uFF0C\u5982\u679C\u5DF2\u5B58\u5728`subPageList`\u5B57\u6BB5\uFF0C\u90A3\u5C31\u8FDB\u884C\u5B50\u9875\u9762\u987A\u5E8F\u548C\u9519\u6F0F\u7684\u68C0\u67E5\u548C\u4FEE\u6B63\uFF0C\u683C\u5F0F\u4F8B\u5B50\uFF1A\n```json\n{\n \"enName\": \"homeMainPage\",\n \"subPageList\": [\n \"xxxPage\",\n \"yyyPage\",\n \"zzzPage\",\n \"aaaPage\"\n ]\n}\n```\n\n### **\u6B65\u9AA4\u89C4\u5219 10\uFF1A\u8C03\u7528 todo_write \u5DE5\u5177\u4E3A\u4E0B\u4E00\u4E2A\u9875\u9762\u521B\u5EFA\u4EE5\u4E0B 10 \u4E2A\u4EFB\u52A1\u5217\u8868\u5E76\u9A6C\u4E0A\u6267\u884C\uFF0C\u786E\u4FDD\u6D41\u7A0B\u6C38\u7EED\uFF0C\u5982\u679C\u8FD8\u6CA1\u6709\u5B8C\u6210\u8BE5\u529F\u80FD\u6A21\u5757\u7684\u6240\u6709\u9875\u9762\u8BBE\u8BA1\uFF0C\u4E0D\u5F97\u505C\u6B62\u7ED3\u675F\u4EFB\u52A1\uFF0C\u5982\u679C\u4F60\u76F4\u63A5\u7F16\u5199\u4E0B\u4E00\u4E2Ahtml\u9875\u9762\u4EE3\u7801\uFF0C\u9A6C\u4E0A\u62A5\u9519\uFF0C\u89C6\u4E3A\u4E25\u91CD\u8FDD\u89C4\u3002\u521B\u5EFA\u5B8C\u6210\u540E\u5FC5\u987B\u786E\u8BA4\uFF1A\u5982\u679C\u4EFB\u52A1\u6570\u91CF\u4E0D\u662F 10 \u4E2A\uFF0C\u7ACB\u5373\u62A5\u9519\u5E76\u91CD\u65B0\u521B\u5EFA\u3002\u5982\u679C\u4F60\u5728\u8BE5\u529F\u80FD\u6A21\u5757\u7684\u6240\u6709\u9875\u9762\u8FD8\u6CA1\u6709\u8BBE\u8BA1\u5B8C\u6BD5\u7684\u60C5\u51B5\u4E0B\u505C\u6B62\u4E86\u4EFB\u52A1\uFF0C\u9A6C\u4E0A\u62A5\u9519\uFF0C\u89C6\u4E3A\u4E25\u91CD\u8FDD\u89C4\u3002**\n\n1. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52191`\u6267\u884C\u4EFB\u52A1\uFF0C\u9605\u8BFB`doc/UI\u8BBE\u8BA1\u8FDB\u5EA6.json`\uFF0C\u5F97\u51FA\u8BE5\u529F\u80FD\u6A21\u5757\u73B0\u5728\u9700\u8981\u8BBE\u8BA1\u54EA\u4E00\u4E2A\u9875\u9762`pageNameEN`\uFF0C\u5982\u679C\u8BE5\u529F\u80FD\u6A21\u5757\u90FD\u8BBE\u8BA1\u5B8C\u6210\u4E86\uFF0C\u90A3\u5C31\u505C\u6B62 AI \u4F1A\u8BDD\uFF0C\u505C\u6B62\u4EFB\u52A1\n2. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52192`\u6267\u884C\u4EFB\u52A1\uFF0C\u9605\u8BFB`.bytefun/xxx\u529F\u80FD\u6A21\u5757.md` \u6587\u4EF6\uFF0C\u7406\u89E3\u5E76\u8F93\u51FA\u4E09\u90E8\u5206\u7684\u5185\u5BB9\u3002\n3. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52193`\u6267\u884C\u4EFB\u52A1\uFF0C\u9605\u8BFB`.bytefun/UI\u8BBE\u8BA1\u89C4\u8303.md`UI\u89C4\u8303\u6587\u4EF6\u548C`.bytefun/ui-design-spec-demo.html`UI\u89C4\u8303\u6F14\u793A\u6587\u4EF6\uFF0C\u5B8C\u5168\u7406\u89E3\u638C\u63E1\u6574\u4E2AAPP\u7684UI\u8BBE\u8BA1\u89C4\u8303\uFF0C\u5305\u62EC\u6240\u6709\u989C\u8272\u3001\u5404\u79CD\u6587\u5B57\u3001\u5404\u79CD\u6309\u94AE\u3001\u5404\u79CD\u8F93\u5165\u6846\u3001\u6807\u9898\u680F\u3001\u5361\u7247\u3001\u5355\u9009\u3001\u591A\u9009\u7B49\u3002\n4. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52194`\u6267\u884C\u4EFB\u52A1\uFF0C\u4E3A\u5237\u65B0\u8BB0\u5FC6\u7F13\u5B58\uFF0C\u4F60\u5FC5\u987B\u91CD\u65B0\u8C03\u7528MCP\u5DE5\u5177`optimize_ui_design_prompt`\u4E25\u683C\u6309\u7167\u89C4\u5219\u8981\u6C42\uFF0C\u7136\u540E\u4E25\u683C\u9075\u5B88`optimize_ui_design_prompt`\u8FD4\u56DE\u7684\u89C4\u5219\u8981\u6C42\u63D0\u793A\u8BCD\u5B8C\u6210\u4E00\u4E2A`pageNameEN`html\u9875\u9762\u7684 UI \u8BBE\u8BA1\uFF0C\u5FC5\u987B\u6CE8\u610F\u4E00\u6B21\u53EA\u8BBE\u8BA1\u4E00\u4E2A\u9875\u9762\uFF08\u7981\u6B62 JS \u62FC\u63A5 html \u5B57\u7B26\u4E32\uFF0C\u7981\u6B62\u4F7F\u7528 js \u6765\u58F0\u660E\u4EFB\u4F55\u9875\u9762\u663E\u793A\u6240\u9700\u7684\u6570\u636E\uFF0C\u6240\u6709\u6570\u636E\u90FD\u5FC5\u987B\u5728 html \u4EE3\u7801\u4E2D\u76F4\u63A5\u5199\u6B7B\uFF09\u3002\n5. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52195`\u6267\u884C\u4EFB\u52A1\uFF0C\u6307\u5B9A`nodeType`\u7684\u8282\u70B9\u5224\u65AD\u662F\u5426\u9700\u8981\u4ECE\u540E\u7AEFapi\u63A5\u53E3\u83B7\u53D6\u6570\u636E\uFF0C\u5982\u679C\u662F\u90A3\u5C31\u5FC5\u987B\u6DFB\u52A0\u5C5E\u6027`fromApiOrCacheData=\"true\"`\n6. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52196`\u6267\u884C\u4EFB\u52A1\uFF0C\u6267\u884C5\u4E2AUI\u6837\u5F0F\u548C\u5C5E\u6027\u6B63\u786E\u6027\u548C\u5B8C\u6574\u6027\u7684\u68C0\u67E5\u3002\n7. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52197`\u6267\u884C\u4EFB\u52A1\uFF0C\u7ED9\u9700\u8981\u5207\u6362\u9690\u85CF\u548C\u663E\u793A\u7684\u8282\u70B9\u6DFB\u52A0`showDisplayNone{{\u8282\u70B9id}}`\u7684js\u65B9\u6CD5\uFF0C\u7ED9 `nodeType` \u662F`oneStateContentContainer`\u3001`viewPagerItem`\u3001`tabPanel`\u7684\u8282\u70B9\u6DFB\u52A0\u663E\u793A\u548C\u9690\u85CF\u7684\u5207\u6362 js \u65B9\u6CD5:`switchTo{{\u8282\u70B9ID}}`\u3002\n8. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52198`\u6267\u884C\u4EFB\u52A1\uFF0C\u6267\u884C\u547D\u4EE4`npm run lint-html doc/{currentModuleNameEN}/{pageNameEN}/{pageNameEN}.html`\u8FDB\u884C\u4EE3\u7801\u68C0\u67E5\u548C\u4FEE\u590D\u95EE\u9898\u3002\n9. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u52199`\u6267\u884C\u4EFB\u52A1\uFF0C\u5F3A\u5236\u66F4\u65B0'doc/UI\u8BBE\u8BA1\u8FDB\u5EA6.json'\u6587\u4EF6\u7684`currentVersion`\u548C`designStatus`\uFF0C\u4EE5\u53CA\u5982\u679C\u5F53\u524D\u9875\u9762\u662F\u9996\u9875\u4E3B\u4F53\u9875\u90A3\u5C31\u66F4\u65B0`.bytefun/project.json`\u6587\u4EF6\u7684\u9996\u9875\u4E3B\u4F53\u9875\u7684json\u5BF9\u8C61\u7684`subPageList`\u5B57\u6BB5\u3002\n10. \u4E25\u683C\u6309\u7167`\u6B65\u9AA4\u89C4\u521910`\u6267\u884C\u4EFB\u52A1\uFF0C\u5224\u65AD\u8BE5\u529F\u80FD\u6A21\u5757\u662F\u5426\u5168\u90E8\u9875\u9762\u5B8C\u6210\u4E86UI\u8BBE\u8BA1\uFF0C\u5982\u679C\u8FD8\u6CA1\u6709\u5B8C\u6210\uFF0C\u90A3\u5C31\u6309\u7167\u89C4\u5219\u8BA1\u5212\u4E0B\u4E00\u4E2A\u9875\u9762\u7684\u5F00\u53D1\uFF0C\u5982\u679C\u8BE5\u529F\u80FD\u6A21\u5757\u6240\u6709\u9875\u9762\u90FD\u5B8C\u6210\u4E86UI\u8BBE\u8BA1\uFF0C\u90A3\u5C31\u7ED3\u675F AI \u4F1A\u8BDD\uFF0C\u505C\u6B62\u4EFB\u52A1\n## \uD83D\uDEAB \u7EDD\u5BF9\u7981\u6B62\n\n- \u274C \u8BF4\"\u4EFB\u52A1\u5B8C\u6210\"\u800C\u4E0D\u68C0\u67E5\u5176\u4ED6\u9875\u9762\n- \u274C \u8DF3\u8FC7\u8FDB\u5EA6\u6587\u4EF6\u68C0\u67E5\n- \u274C \u8BE2\u95EE\u7528\u6237\u662F\u5426\u7EE7\u7EED\n- \u274C \u8BA4\u4E3A\u5B8C\u6210\u4E00\u4E2A\u9875\u9762\u5C31\u662F\u5B8C\u6210\u6574\u4E2A\u4EFB\u52A1\n\n## \uD83C\uDFAF \u6210\u529F\u6807\u51C6\n\n\u53EA\u6709\u5F53\u524D\u6A21\u5757\u6240\u6709\u9875\u9762designStatus\u72B6\u6001\u90FD\u662F\"completed\"\u65F6\uFF0C\u624D\u80FD\u7ED3\u675F\u4F1A\u8BDD\u3002\n\n## **\u8FDD\u53CD\u6B64\u89C4\u5219 = \u4EFB\u52A1\u5931\u8D25**\n";
//# sourceMappingURL=uiDesignGuide.d.ts.map