从 3 月 ChatGPT 火热以来，发现它能够通过文字生成代码，并进一步渲染成页面，展现出了解决部分 UI、UX、测试和前端工作的能力。所以零零散散地进行了一些关于 Design To Code、AI 生成页面、动效等方面的学习与实验。在本文中，我将在工作业务脱敏的基础上，梳理这些想法。目的之一是进行总结，其二是遇到一些疑问点，希望有机会与大家相互沟通学习。
本篇实质主要讨论如何用 AI 生成设想稿，以及如何在实际项目开发过程中运用，同时设想、开发组件在其中扮演很重要的角色。（全文预计 6 分钟）
更多AI实战案例：
一、chatGPT生成设想的原理
1. 过程介绍
先看一个 chatGPT 生产页面的演示，通过与 chatGPT 对话的形式，引导它搭建出一个义务列表页面，不仅仅是固态页面，同时还支持用户的交互效果。
可以查看生成的页面，chatGPT 理解我的需求，并结合我要的 UiKit 样子表，输入了对应的实质，但是有些纰漏，例如我说了按钮要右侧对齐，它却放置在底部，下面让我们通过对话实验调整。
可以看到，调整后的页面，把按钮改为右对齐，并新增了规划的代码，改为了弹性宽度自适应规划。
2. 这里有一些 chatGPT 对话的技巧：
①指定 chatGPT 的身份
便于它基于你必要的职业身份，对实质进行合适的产出。例如涉及操作逻辑时可以说：“假设你是交互设想师”。涉及代码输入时，可以说：“假设你是前端工程师“。这样会有不错的效果。
②足够的背景信息
告诉它你必要它做什么，以及现在的背景信息，有足够的背景信息供它理解，能减少它出错的概率。
③设定明确的输入目标
对它的输入实质必要明确，并最好是拆分成有结构的。
③实验给出范例
让它更好地了解你的诉求。
④适当指示（鼓励/指出错误）
可以及时指出，避免 GPT 将问题带到下一个环节，正向的会促使它缩小方向，精准输入；反向的会促使它改变方向，避免将错误带入下次对话中。
在固态页面完成后，我让它去补充「观看 10 秒义务」义务的代码，它也顺利完成，这点超出我的预期，请查看下方演示视频。
义务简介：通过点击领取一个观看 XX 页面 3 秒的义务，例如某 PDD、某宝购物网站，（“不是.jpg”，领取后，浏览页面，倒计时 3s 后，提醒你完成义务，点击可领取奖励。
正如上述演示，通过简单的与 chatGPT 对话 2-3 次，即可生成一个可交互的页面。它似乎能将原本的设想至研发的过程进行一些压缩，达到减少沟通成本、降低设想还原验收工作量的效果。当开发同学不必要人为的还原 UI 界面时，设想还原的成本必然降低，同时节省 UI 以及测试同学的工作量。
3. AI 生成页面的重要点
上述实质表明目前 AI 可以生成页面和交互事务，但要稳定输入，关键是必要拥有自己的业务组件库。只有拥有了自己的组件库，AI 才能使用它来构建所需的页面。换言之，我们不能用 Ant Design 的 B 端组件来设想支付宝营销活动页面，因为它们的样子不通用。
二、在实际项目中如何运用
1. 开发组件（Vue）和设想组件（Figma）的异同点
只有比较开发、设想组件的异同，才能了解如何使两类组件拉通，才好兑现相互的转化，进而辅助 AI 生成页面。
①两类组件分别是什么？
Vue 中的组件是可复用的 Vue 实例，它由 Vue 组件系统构建，可以包含规划结构、脚本和样子，并且能够封装特定的功用和外观。Vue 组件可以通过 props 和 events 进行通信，从而兑现数据的传递和交互。
Figma 中的组件是设想系统中的重要组成部分，它包括可复用的设想元素，如按钮、输入框、卡片等。这些组件在 Figma 中可以被复制并多次使用，使得设想的一致性和可维护性更加容易。
②相同点
Vue 中的组件和 Figma 中的组件都具备可重用性和组件化的特点，能够在不同的上下文中被重复使用。
③当前拉通的部分：
规划结构：部分规划结构可以在设想中体现，并在前端兑现中对应相似的结构。
样子：设想系统中的颜色、字体、边距等可以与前端样子表中的样子进行对应和转化。
这部分实质，由于是固态资源，比较容易兑现开发和设想的拉通，从告别手动标注后，zeplin、蓝湖、figma 都能兑现查看开发元素的功用，能够准确的捕捉边距、间距、色值等实质。
④不同点
Vue 中的组件是前端开发中的一部分，额外包含了交互逻辑，而 Figma 中的组件是设想工具中的一部分，主要包含了设想元素和样子。
交互逻辑：Figma 中的交互设想无法直接转化为前端兑现的交互逻辑，必要在前端开发中重新兑现。
动态数据：Figma 中的固态设想数据无法直接映射到前端的动态数据，因此在前端开发中必要重新处理数据的加载和交互。
交互逻辑和动态数据，这部分实质是 Figma 组件暂时无法替代的，Figma 未来肯定也会往 Design To Code 继续深入，经过测试，在 figma 的原型制作一个点击后跳转的事务，那么在代码查看区，也能看到此点击事务被记录下来。
下方我们以弹窗举例：实验说明两类组件在实际中，有哪些不同。
目前有许多低代码平台可以执行部分功用，比如将简单的事务绑定到按钮上。举例来说，开发人员通常会编写关闭弹窗的代码，而用户可以在低代码平台上将“取消”按钮与关闭弹窗的功用进行绑定。
都是建立在组件、事务都准备好的基础上，由用户牵线去配置，所以低代码平台，暂时也不适用于能够自动生成页面。
2. 未来趋势
最近在试用阿里的通义灵码，有一个功用是自然语言生成代码，通过自然语言描述你想要的功用，根据你的描述和上下文，直接生成代码。
那么，在这类功用的加持下，也不必要使用低代码平台固定的点击事务，结合独特的业务自定义的组件，是否能完成简单的前端页面部署？
以上述弹窗举例，是否可以先利用 AI 生成弹窗，再利用自然语言生成代码的功用，为按钮绑定事务，例如：“将取消按钮，绑定一个关闭弹窗事务，点击后关闭当前弹窗”，是否可以完成简单的全过程功用，由于用的组件、所以简单的界面不必要交互、UI。只必要测试和前端同学稍加把关，检查功用是否有 bug 即可，感兴趣的同学可以实验。
这方面有经验或者想法的朋友，欢迎交流！