UNPKG

bytefun-ai-mcp

Version:

ByteFun AI MCP服务 - 打通产品设计、UI设计、代码开发的服务平台,支持设计稿转代码和跨平台原生代码开发

40 lines (37 loc) 8.91 kB
export const uiDesignPromptTemplate = `# 1、UI设计要求 - 这是静态html页面设计,不得写任何js或ts的代码,只允许写html+css代码 - 这是静态html页面,不得添加任何动画效果,禁止使用keyframes等任何动画效果的代码 - **必须遵循\`.bytefun/UI设计规范.md\`的UI设计规范,并且html里面不能增删改\`:root\`颜色变量,颜色只能使用html文件的\`head\`标签里已经定义好的\`:root\`颜色变量,不能直接使用颜色值或私自定义其他颜色变量** - 遵循iPhone 16 Pro尺寸规格(宽度393px高度852px) - 采用明亮、活力的配色方案 - 如用户没有明确描述说明页面背景色,只有闪屏页面的背景色允许设置primary主色或primary与secondary的渐变色,其他页面必须使用非primary与非secondary的纯色做页面背景色,比如一般使用白色系,如果是暗黑风那就是黑色系。 - 输入框\`input\`如果需要展示文字label,尽量使用icon代替文字label,并且icon重叠在输入框的左侧,这样整个页面的空间利用率高。 - 页面开头必须要有一个手机状态栏phoneTopStatusBar节点,并且手机状态栏phoneTopStatusBar节点的高度必须永远设计为22px,必须设置height、min-height、max-height属性和值是22px,已经背景色是透明的,css代码如下: \`\`\`css ... height: 22px; min-height: 22px; max-height: 22px; background-color: transparent; ... \`\`\` - 顶部导航栏左边的返回按钮必须使用\`icon\`图标组件来实现,不得使用\`text\`和\`button\`组件来实现。 - 闪屏页面的不得添加任何js代码,不得添加N秒后跳转页面的js代码,因为闪屏页只是一个展示页,不能添加任何交互功能和动画效果。 - 所有轮播节点不得添加自动播放功能的js代码 - 禁止添加任何动画效果 # 2、icon图标与img图片写法和规则 - 当需要icon图标时必须使用FontAwesome图标,比如:\`<i name="微信Icon" nodeType="icon" id="wxIcon" class="fab fa-weixin"></i>\` - 当需要img图片时,src使用图片地址:\`https://oss.bytefungo.com/f1/showImg1.jpg\`),其中结尾的’showImg1'可以换为从1到30的数字,1~30的数字必须随机挑选,不得每个页面每个图片都使用同一个数字。写法比如:\`<img src="https://oss.bytefungo.com/f1/showImg17.jpg" alt="xxx" class="xxx" nodeType="image">\` - 绝对不能使用emoji表情符号,不得使用任何emoji表情符号,请使用icon或img图片节点来代替。 - 需要严格遵守\`UI设计规范.md\`的UI设计规范里面的\`图标规范\`来设计icon图标。 # 3、html节点规则 - 所有css样式定义只能使用以下这些css伪类选择器:hover、active、focus、disabled、checked、selected、placeholder - 禁止写任何@media相关的(响应式调整)css代码,因为已经明确是以393*852的分辨率设计APP移动端了 - 每个组件都必须包含\`id\`属性,\`id\`属性必须是英文或数字,且不能以数字开头,并且整个页面\`id\`属性的值必须唯一 - css的class定义必须使用内联样式,并且必须在html页面里面定义好,不得只使用class而不去定义 - 这是静态html页面设计,不得写任何js或ts的代码,只允许写html+css代码 - 这是静态html页面,不得添加任何动画效果,禁止使用keyframes等任何动画效果的代码 # 4、节点显示隐藏规则 - 节点的显示与隐藏的切换必须使用\`display: none\`来实现,不能使用\`opacity: 0\`和\`visibility: hidden\`来实现 `; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidWlEZXNpZ24gY29weS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy91aURlc2lnbiBjb3B5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQXNDckMsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjb25zdCB1aURlc2lnblByb21wdFRlbXBsYXRlID0gYCMgMeOAgVVJ6K6+6K6h6KaB5rGCXG4tIOi/meaYr+mdmeaAgWh0bWzpobXpnaLorr7orqHvvIzkuI3lvpflhpnku7vkvZVqc+aIlnRz55qE5Luj56CB77yM5Y+q5YWB6K645YaZaHRtbCtjc3Pku6PnoIFcbi0g6L+Z5piv6Z2Z5oCBaHRtbOmhtemdou+8jOS4jeW+l+a3u+WKoOS7u+S9leWKqOeUu+aViOaenO+8jOemgeatouS9v+eUqGtleWZyYW1lc+etieS7u+S9leWKqOeUu+aViOaenOeahOS7o+eggVxuLSAqKuW/hemhu+mBteW+qlxcYC5ieXRlZnVuL1VJ6K6+6K6h6KeE6IyDLm1kXFxg55qEVUnorr7orqHop4TojIPvvIzlubbkuJRodG1s6YeM6Z2i5LiN6IO95aKe5Yig5pS5XFxgOnJvb3RcXGDpopzoibLlj5jph4/vvIzpopzoibLlj6rog73kvb/nlKhodG1s5paH5Lu255qEXFxgaGVhZFxcYOagh+etvumHjOW3sue7j+WumuS5ieWlveeahFxcYDpyb290XFxg6aKc6Imy5Y+Y6YeP77yM5LiN6IO955u05o6l5L2/55So6aKc6Imy5YC85oiW56eB6Ieq5a6a5LmJ5YW25LuW6aKc6Imy5Y+Y6YePKipcbi0g6YG15b6qaVBob25lIDE2IFByb+WwuuWvuOinhOagvCjlrr3luqYzOTNweOmrmOW6pjg1MnB4KVxuLSDph4fnlKjmmI7kuq7jgIHmtLvlipvnmoTphY3oibLmlrnmoYhcbi0g5aaC55So5oi35rKh5pyJ5piO56Gu5o+P6L+w6K+05piO6aG16Z2i6IOM5pmv6Imy77yM5Y+q5pyJ6Zeq5bGP6aG16Z2i55qE6IOM5pmv6Imy5YWB6K646K6+572ucHJpbWFyeeS4u+iJsuaIlnByaW1hcnnkuI5zZWNvbmRhcnnnmoTmuJDlj5joibLvvIzlhbbku5bpobXpnaLlv4Xpobvkvb/nlKjpnZ5wcmltYXJ55LiO6Z2ec2Vjb25kYXJ555qE57qv6Imy5YGa6aG16Z2i6IOM5pmv6Imy77yM5q+U5aaC5LiA6Iis5L2/55So55m96Imy57O777yM5aaC5p6c5piv5pqX6buR6aOO6YKj5bCx5piv6buR6Imy57O744CCXG4tIOi+k+WFpeahhlxcYGlucHV0XFxg5aaC5p6c6ZyA6KaB5bGV56S65paH5a2XbGFiZWzvvIzlsL3ph4/kvb/nlKhpY29u5Luj5pu/5paH5a2XbGFiZWzvvIzlubbkuJRpY29u6YeN5Y+g5Zyo6L6T5YWl5qGG55qE5bem5L6n77yM6L+Z5qC35pW05Liq6aG16Z2i55qE56m66Ze05Yip55So546H6auY44CCXG4tIOmhtemdouW8gOWktOW/hemhu+imgeacieS4gOS4quaJi+acuueKtuaAgeagj3Bob25lVG9wU3RhdHVzQmFy6IqC54K577yM5bm25LiU5omL5py654q25oCB5qCPcGhvbmVUb3BTdGF0dXNCYXLoioLngrnnmoTpq5jluqblv4XpobvmsLjov5zorr7orqHkuLoyMnB477yM5b+F6aG76K6+572uaGVpZ2h044CBbWluLWhlaWdodOOAgW1heC1oZWlnaHTlsZ7mgKflkozlgLzmmK8yMnB477yM5bey57uP6IOM5pmv6Imy5piv6YCP5piO55qE77yMY3Nz5Luj56CB5aaC5LiL77yaXG5cXGBcXGBcXGBjc3Ncbi4uLlxuaGVpZ2h0OiAyMnB4O1xubWluLWhlaWdodDogMjJweDtcbm1heC1oZWlnaHQ6IDIycHg7XG5iYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbi4uLlxuXFxgXFxgXFxgXG4tIOmhtumDqOWvvOiIquagj+W3pui+ueeahOi/lOWbnuaMiemSruW/hemhu+S9v+eUqFxcYGljb25cXGDlm77moIfnu4Tku7bmnaXlrp7njrDvvIzkuI3lvpfkvb/nlKhcXGB0ZXh0XFxg5ZKMXFxgYnV0dG9uXFxg57uE5Lu25p2l5a6e546w44CCXG4tIOmXquWxj+mhtemdoueahOS4jeW+l+a3u+WKoOS7u+S9lWpz5Luj56CB77yM5LiN5b6X5re75YqgTuenkuWQjui3s+i9rOmhtemdoueahGpz5Luj56CB77yM5Zug5Li66Zeq5bGP6aG15Y+q5piv5LiA5Liq5bGV56S66aG177yM5LiN6IO95re75Yqg5Lu75L2V5Lqk5LqS5Yqf6IO95ZKM5Yqo55S75pWI5p6c44CCXG4tIOaJgOaciei9ruaSreiKgueCueS4jeW+l+a3u+WKoOiHquWKqOaSreaUvuWKn+iDveeahGpz5Luj56CBXG4tIOemgeatoua3u+WKoOS7u+S9leWKqOeUu+aViOaenFxuXG4jIDLjgIFpY29u5Zu+5qCH5LiOaW1n5Zu+54mH5YaZ5rOV5ZKM6KeE5YiZXG4tIOW9k+mcgOimgWljb27lm77moIfml7blv4Xpobvkvb/nlKhGb250QXdlc29tZeWbvuagh++8jOavlOWmgu+8mlxcYDxpIG5hbWU9XCLlvq7kv6FJY29uXCIgbm9kZVR5cGU9XCJpY29uXCIgaWQ9XCJ3eEljb25cIiBjbGFzcz1cImZhYiBmYS13ZWl4aW5cIj48L2k+XFxgXG4tIOW9k+mcgOimgWltZ+WbvueJh+aXtu+8jHNyY+S9v+eUqOWbvueJh+WcsOWdgO+8mlxcYGh0dHBzOi8vb3NzLmJ5dGVmdW5nby5jb20vZjEvc2hvd0ltZzEuanBnXFxgKe+8jOWFtuS4ree7k+WwvueahOKAmXNob3dJbWcxJ+WPr+S7peaNouS4uuS7jjHliLAzMOeahOaVsOWtl++8jDF+MzDnmoTmlbDlrZflv4Xpobvpmo/mnLrmjJHpgInvvIzkuI3lvpfmr4/kuKrpobXpnaLmr4/kuKrlm77niYfpg73kvb/nlKjlkIzkuIDkuKrmlbDlrZfjgILlhpnms5Xmr5TlpoLvvJpcXGA8aW1nIHNyYz1cImh0dHBzOi8vb3NzLmJ5dGVmdW5nby5jb20vZjEvc2hvd0ltZzE3LmpwZ1wiIGFsdD1cInh4eFwiIGNsYXNzPVwieHh4XCIgbm9kZVR5cGU9XCJpbWFnZVwiPlxcYFxuLSDnu53lr7nkuI3og73kvb/nlKhlbW9qaeihqOaDheespuWPt++8jOS4jeW+l+S9v+eUqOS7u+S9lWVtb2pp6KGo5oOF56ym5Y+377yM6K+35L2/55SoaWNvbuaIlmltZ+WbvueJh+iKgueCueadpeS7o+abv+OAglxuLSDpnIDopoHkuKXmoLzpgbXlrohcXGBVSeiuvuiuoeinhOiMgy5tZFxcYOeahFVJ6K6+6K6h6KeE6IyD6YeM6Z2i55qEXFxg5Zu+5qCH6KeE6IyDXFxg5p2l6K6+6K6haWNvbuWbvuagh+OAglxuXG4jIDPjgIFodG1s6IqC54K56KeE5YiZXG4tIOaJgOaciWNzc+agt+W8j+WumuS5ieWPquiDveS9v+eUqOS7peS4i+i/meS6m2Nzc+S8quexu+mAieaLqeWZqO+8mmhvdmVy44CBYWN0aXZl44CBZm9jdXPjgIFkaXNhYmxlZOOAgWNoZWNrZWTjgIFzZWxlY3RlZOOAgXBsYWNlaG9sZGVyXG4tIOemgeatouWGmeS7u+S9lUBtZWRpYeebuOWFs+eahCjlk43lupTlvI/osIPmlbQpY3Nz5Luj56CB77yM5Zug5Li65bey57uP5piO56Gu5piv5LulMzkzKjg1MueahOWIhui+qOeOh+iuvuiuoUFQUOenu+WKqOerr+S6hlxuLSDmr4/kuKrnu4Tku7bpg73lv4XpobvljIXlkKtcXGBpZFxcYOWxnuaAp++8jFxcYGlkXFxg5bGe5oCn5b+F6aG75piv6Iux5paH5oiW5pWw5a2X77yM5LiU5LiN6IO95Lul5pWw5a2X5byA5aS077yM5bm25LiU5pW05Liq6aG16Z2iXFxgaWRcXGDlsZ7mgKfnmoTlgLzlv4XpobvllK/kuIBcbi0gY3Nz55qEY2xhc3PlrprkuYnlv4Xpobvkvb/nlKjlhoXogZTmoLflvI/vvIzlubbkuJTlv4XpobvlnKhodG1s6aG16Z2i6YeM6Z2i5a6a5LmJ5aW977yM5LiN5b6X5Y+q5L2/55SoY2xhc3PogIzkuI3ljrvlrprkuYlcbi0g6L+Z5piv6Z2Z5oCBaHRtbOmhtemdouiuvuiuoe+8jOS4jeW+l+WGmeS7u+S9lWpz5oiWdHPnmoTku6PnoIHvvIzlj6rlhYHorrjlhplodG1sK2Nzc+S7o+eggVxuLSDov5nmmK/pnZnmgIFodG1s6aG16Z2i77yM5LiN5b6X5re75Yqg5Lu75L2V5Yqo55S75pWI5p6c77yM56aB5q2i5L2/55Soa2V5ZnJhbWVz562J5Lu75L2V5Yqo55S75pWI5p6c55qE5Luj56CBXG5cbiMgNOOAgeiKgueCueaYvuekuumakOiXj+inhOWImVxuLSDoioLngrnnmoTmmL7npLrkuI7pmpDol4/nmoTliIfmjaLlv4Xpobvkvb/nlKhcXGBkaXNwbGF5OiBub25lXFxg5p2l5a6e546w77yM5LiN6IO95L2/55SoXFxgb3BhY2l0eTogMFxcYOWSjFxcYHZpc2liaWxpdHk6IGhpZGRlblxcYOadpeWunueOsFxuYCJdfQ==