Hello大家好，好久没写文章了，今天抽空来写一下在工作中我是如何运用AI的。
根据UI稿，让AI生成对应的DOM。这里要思考以下几点：
- 想一想，除了可视化等视觉效果极强的项目，这些项目严重的依赖了第三方库，其余的项目，对组件库的依赖严重吗？或者换句话说，组件库里真正被用到的组件，很多吗？在前一步的基础上，你是否对组件库足够熟悉，足够到不用看使用文档，只看UI稿，就知道这个组件用到了哪些属性，以及对应的属性值是什么。如何让AI生成的东西稳定，或者如何说AI生成的东西符合我们的预期？那只能把我们的逻辑罗列出来，然后让AI生成，这样生成的东西大概率是符合预期的。
所以为了能让AI还原设计稿，这个时候，虚拟DOM派上用场了。让AI根据特定的伪DOM生成特定的真实DOM。那生成规则是什么？这个时候就要说到Prompt了。
以下Prompt是我工作中，真实沉淀出来的(只展示一部分，大家可以任意扩展)，生成的dom也是符合预期的。
# 说明当前规则只适用于用户输入的prompt明确的说明了要根据伪dom生成真实dom，否则，当前规则不启用。# 伪dom结构{ tag:, class, child, style, text,}属性说明：- tag 不可省略，主要用于控制生成的标签类型- class 可省略，主要用于控制标签对应的样式类名- child 可省略，主要用于生成当前标签的子元素- style 可省略，主要用于生成当前标签对应的样式代码- text 可省略，主要用于生成当前标签对应的文本元素# 规则一如果当前用户明确要生成真实的dom，请检查用户输入的伪dom结构是否满足定义的结构，如果用户给出的伪dom结构不满足定义，或者用户没有给出伪dom结构，则终止任务，并给出以下提示："请给出一个符合规则定义的伪dom结构，具体属性请参考规则说明。"# 规则二满足规则一的情况下，请检查用户是否明确了技术栈（react、vue、html），如果没有指明技术栈，请终止当前任务，并给出以下提示：“请明确相应的技术栈，否则会影响dom的生成，比如class属性。”# React满足规则二的情况下，如果用户输入的prompt里明确了技术栈是React，则根据以下规则去生成真实DOM。## 规则三此规则是最基础的生成dom的规则，tag对应的值是什么，真实dom的标签就是什么，示例如下（要求举一反三）：伪dom如下：{ tag: div, text: 这是一段描述}则应该生成以下真实dom<div>这是一段描述</div>## 规则四此规则用于生成class类名。示例如下（要求举一反三）：伪dom如下：{ tag: div, text: 这是一段描述, class: class1}则生成的真实dom如下：<div className='class1'>这是一段描述</div>-----------------------------------------------------如果class的值是数组的形式，则类名的生成顺序与写法保持一致。示例如下（要求举一反三）：伪dom如下：{ tag: div, class: [class2, class1]}则生成的真实dom如下：<div className='class2 class1'></div>## 规则五此规则用于生成相应的子元素。child的值必须是一个数组类型的，同时生成顺序与写法顺序保持一致。伪dom如下（要求举一反三）：{ tag: div, class: class1, child: [ { tag: span, text: span子元素, class: class1-1 }, { tag: div, text: class子元素, class: class1-2 } ]}则生成的真实dom如下：<div className='class1'> <span className='class1-1'>span子元素</span> <div className='class1-2'>class子元素</div></div>------------------------------------------------------如果text属性与child属性同时存在，则渲染顺序与写法保持一致。伪dom如下（要求举一反三）：{ tag: div, child: [ { tag: span, text: span子元素 } ], text: 这是一段描述}则生成的真实dom如下：<div> <span>span子元素</span> 这是一段描述</div>以上只是罗列了一部分规则，这样当我们拿到UI稿的时候，其实脑海里就已经存在了dom结构，我们只需要把伪dom结构写出来，然后让Agent帮我们自动生成对应的dom即可。
有人会说，你这样似乎也没有提高效率，好像也没节省时间。
嗯，如果是这样的话，是否节省时间就不好说了。
但是如果你能做到以下2点，那还原设计稿的效率将会直接起飞：
- 将规则设置为编辑器的系统规则，这样每次生成时，它都会去读系统规则。如果你能在规则里定义“简洁写法”，那么效率将高的可怕。
最后，前端同仁们，不要执着于让AI去熟悉组件库了，因为目前的AI只能干确定的事情，那什么又是确定的事情呢，那就是确定的prompt，千万不要被营销迷了眼～～
