网站建设客户群体分析mysql 网站开发 问好

网站建设客户群体分析,mysql 网站开发 问好,东莞百姓网交友,wordpress 后台管理设置阿里妹导读本文系统总结了在仅有 UI 图片、无设计稿和交互说明的情况下#xff0c;如何通过 AI 技术实现高质量前端代码自动生成。一、需求图片开局一张图需求#xff0c;前端先行#xff01;对于一个仅提供几张图片没有任何Sketch文件和设计稿的前端开发需求#xff0c;我…阿里妹导读本文系统总结了在仅有 UI 图片、无设计稿和交互说明的情况下如何通过 AI 技术实现高质量前端代码自动生成。一、需求图片开局一张图需求前端先行对于一个仅提供几张图片没有任何Sketch文件和设计稿的前端开发需求我们尝试使用AI技术来生成代码。看下来非常合适用AI出码分别尝试使用不同方式出码二、imgcook Agent 智能出码方案演进基于imgcook插件 Aone Agent结合 mcp 服务调用智能产出代码。通过三个阶段的优化将代码可用度从基础Agent出码的40%提升至最终的70%。核心改进包括引入imgcook提升设计稿还原度集成alife/cook-unify-mobile组件库实现Button和Icon等组件的自动识别和调用。2.1 使用IDE直接读取图片进行开发2.1.1 输入图片示例详细信息模式Agent模型Claude-4-Sonnet外部模型多模态上下文/src/pages/index/index.tsx/src/pages/index/style.module.less图片2.1.2 输出描述组件结构src/pages/index/├── index.tsx # 主页面组件├── style.module.less # 主页面样式└── components/ ├── Header/ # 头部组件 │ ├── index.tsx │ └── style.module.less └── ServiceCard/ # 服务卡片组件 ├── index.tsx ├── style.module.less ├── ServiceTypeSelector/ # 服务类型选择器 │ ├── index.tsx │ └── style.module.less ├── BenefitList/ # 福利列表 │ ├── index.tsx │ └── style.module.less └── SubmitButton/ # 提交按钮 ├── index.tsx └── style.module.less2.1.3 实际出码2.1.4 效果图2.2 调优过程主要针对以上两个痛点改进点来进行调优具体过程如下所示。2.2.1 解决设计稿的还原度的问题-imgcookTips1.在开发过程中找到历史设计稿中有一小段内容和本次一样于是使用历史设计稿中这个小模块继续探索2.除了这个有历史设计稿的小模块之外以下截图其他设计稿内容是人工还原使用imgcook点击复制提示词imgcook产物Prompt使用 imgcook 生成代码。模块链接http://tao-d2c.fc.alibaba-inc.com/modules/621/preview基于此生成一个语义化命名的 react 组件目录。对其 classname 语义化命名采用 css modules组件目录包含 index.tsx、index.modules.css 此组件放入当前 components 目录下使用Agent调用mcp服务将以上产物Prompt复制到VSCode中使用Aone Agent插件的Agent功能输出产物效果图点赞非常好但是还有一个问题就是没有使用现有资产组件库继续调优。2.2.2 解决没有使用已有组件物料的问题组装Prompt使用imgcook产物Prompt再结合自己组装的Prompt整理成以下提示词使用 imgcook 生成代码。模块链接http://tao-d2c.fc.alibaba-inc.com/modules/621/preview基于此生成一个语义化命名的 react 组件目录。对其 classname 语义化命名采用 css modules组件目录包含 index.tsx、index.modules.css 此组件放入当前 components 目录下 可用的移动端组件库 alife/cook-unify-mobile 包含的常用组件- Button 按钮- Icon 图标 请按照如下的步骤进行页面的开发1. 识别用户提供图片中的功能和组件有相似度询问用户是否需要组件进行开发2. 对用户选择的组件从node_modules中检索代码找到了组件库的实现和定义用来完善上下文Icon使用PayCircleOutline、ExclamationCircleOutline、ClockCircleOutline,然后使用结果完成代码的生成输出大模型产物分析过程使用 codebase_search 工具在node_modules中搜索组件的代码实现创建的组件结构src/components/DiningBenefitsCard/├── index.tsx # React 组件文件└── index.module.css # CSS Modules 样式文件组件特点1. 使用组件库组件 ○ Button 组件使用 alife/cook-unify-mobile/2x 的 Button 组件实现底部前往授权按钮 ○ Icon 组件使用 ■ PayCircleOutline金色- 餐补消费 ■ ExclamationCircleOutline蓝色- 员工折扣 ■ ClockCircleOutline橙色- 员工专享2. 语义化命名 ○ 组件名DiningBenefitsCard用餐优惠卡片 ○ CSS 类名都采用语义化命名如 ■ .benefitsCard - 优惠卡片 ■ .cardTitle - 卡片标题 ■ .benefitsGrid - 优惠项目网格 ■ .benefitItem - 优惠项目 ■ .authorizeButton - 授权按钮3. 设计还原 ○ 完整还原了 imgcook 解析的布局结构和尺寸 ○ 保持了原始的颜色、字体、间距等设计细节 ○ 使用图标替换了原始的图片资源更加语义化4. 技术实现 ○ 使用 TypeScript 和 React ○ 采用 CSS Modules 进行样式隔离 ○ 支持点击回调函数 onAuthorize ○ 支持通过 props 传入额外的 classNamIcon和Button使用方式1.检索代码后a.能学习到Icon的正确使用方式b.并且知道通过color指定颜色2.检索代码后a.能学习到Button的正确使用方式b.并且知道通过block、color、size等使用方式代码和效果图变更文件效果图组件库组件理解度非常好能找到应该使用的组件并且放到相应的位置上组件Api理解非常好能正常传参2.3 输出2.3.1 技术实现亮点使用TypeScript React CSS Modules语义化组件命名如DiningBenefitsCard支持组件API正确传参和配置实现了从 40% 到 70% 的代码可用度提升2.3.2 三种形式出码效果图对比Agent出码Agent出码 imgcook插件(mcp 服务调用)Agent出码 imgcook插件(mcp 服务调用) 组件库(codebase)结论三、剧本出码3.1 剧本介绍一句话理解把开发过程中需要的一块块砖比如组件库比如开发规范比如接口元数据准备好一个story.md把这些串联在合适的位置让大模型理解再产出我需要的代码3.2 剧本开发过程3.3 创作剧本比较艰难的一个过程要不断的调优不断根据大模型的反馈调整提示词但是好在只需要做一次后续可以重复使用剧本这也是剧本的魅力‼️ 核心过程让大模型模仿人类的写代码行为给ta示例能让这个过程事半功倍核心物料需要让大模型做什么story.md组件库cookUnifyMobile.md例子sample.md示例代码把示例代码当作一部分让大模型学习并仿写config文件会从上到下组装所需要的物料[{ type: prompt, path: ./naposMarketing/snippet/story.md, desc: }, { type: prompt, path: ../knowledge-graph/cookUnifyMobile.md, desc: }, { type: prompt, path: ./naposMarketing/snippet/sample.md, desc: }, { type: snippet, path: ../code-base/src/services/NaposMarketingController.ts, desc: src/services/NaposMarketingController.ts 接口定义}, { type: snippet, path: ../code-base/src/pages/mobile/NaposMarketing/index.tsx, desc: src/pages/mobile/NaposMarketing 页面示例tsx}, { type: snippet, path: ../code-base/src/pages/mobile/NaposMarketing/style.module.less, desc: src/pages/mobile/NaposMarketing 页面示例less}, { type: snippet, path: ../code-base/src/pages/mobile/NaposMarketing/components/ListItem/index.tsx, desc: src/pages/mobile/NaposMarketing 页面示例 组件ListItem tsx}, { type: snippet, path: ../code-base/src/pages/mobile/NaposMarketing/components/ListItem/style.module.less, desc: src/pages/mobile/NaposMarketing 页面示例 组件ListItem less}]核心提示词# B端Napos活动营销页 你是一个前端开发专家擅长移动端页面开发你需要按照如下步骤学习然后完成开发任务生成一个活动营销页的页面的代码。1. 理解移动端常见营销页面的结构2. 学习案例中的示例代码3. 从需求中提取功能信息4. 要求用户按照规格输入需求和接口参考案例按照如下条件生成代码 4.1 理解本篇文档中的知识图谱看饿了么中后台 App 组件库中哪些组件可以被用于需求开发询问用户需要使用哪些组件依次用于开发 4.2 使用alife/cook-unify-mobile组件库 ## 营销页面的结构 典型的B端/Napos的营销页面多卡片信息呈现包含1若干个卡片呈现默认展示限定条数如果超出限定条数可以进行展开其余部分2提交区域包含用户提供的协议提交按钮剧本呈现形式md文件包含组装好大模型能理解的提示词。3.4 使用剧本下面演示一下非开发者更容易上手的一种方式只需三步这里做简单的步骤演示1.Step1打开metaStack官网新建前端出码开发任务选择你的产品2.Step2上传你的需求原型图片并且上传需求业务描述3.Step3生成出码提示词3.5 剧本应用实践剧本生成代码优势快速构建上下文能够通过剧本编排和任务执行快速构建出码所需上下文高效产出几分钟即可产出 5 个文件变更新增 379 行代码代码可用度达到 80%一次性投入重复使用剧本创作虽然艰难需要不断调优和调整提示词但好在只需要做一次后续可以重复使用剧本模仿人类编程行为让大模型模仿人类的写代码行为通过示例让开发过程事半功倍结构化开发把开发过程中需要的组件库、开发规范、接口元数据等准备好通过 story.md 串联在合适位置效果图大模型代码产物3.6 结论此前我们使用的 Agent 出码配合 imgcook 插件mcp服务调用和组件库的综合方案表现已经相当优秀代码可用度达到70%。然而当我们引入剧本出码模式后发现这一方案能够将代码可用度进一步推高至80%虽然在使用便捷性上需要权衡但整体开发效果确实更胜一筹。说明在追求更高质量代码生成的道路上总有更优的解决方案等待发现四、感悟1.不要排斥新事物尝试去接受过程和结果都会给你惊喜之前我还不知道agent究竟是什么东西现在通过不断的调优过程慢慢发现了大模型的无边能力。2. 勇于探索从尝试到调优的实践过程中Agent使用、mcp调用、codebase召回等新知识点逐步串联成完整的知识图谱让我触及更广阔的技术网络。3.过程中发现很多东西AI真的能比人类做得更好更快但是怎么让AI理解我的想法是要重点探索的过程。4.结果有好的工具确实能事半功倍但前提是有好的工具通义千问3 MCP一切皆有可能MCP 协议通过标准化交互方式解决 AI 大模型与外部数据源、工具的集成难题通义千问3 原生支持 MCP 协议能更精准调用工具阿里云百炼上线了业界首个全生命周期 MCP 服务大幅降低 Agent 开发门槛用户只需 10 分钟即可构建增强型智能体。点击阅读原文查看详情。