Hello大家好，好久没写文章了，今天抽空来写一下在工作中我是如何运用AI的。
根据UI稿，让AI生成对应的DOM。这里要思考以下几点：
- 想一想，除了可视化等视觉效果极强的项目，这些项目严重的依赖了第三方库，其余的项目，对组件库的依赖严重吗？或者换句话说，组件库里真正被用到的组件，很多吗？
- 在前一步的基础上，你是否对组件库足够熟悉，足够到不用看使用文档，只看UI稿，就知道这个组件用到了哪些属性，以及对应的属性值是什么。
- 如何让AI生成的东西稳定，或者如何说AI生成的东西符合我们的预期？那只能把我们的逻辑罗列出来，然后让AI生成，这样生成的东西大概率是符合预期的。
所以为了能让AI还原设计稿，这个时候，虚拟DOM派上用场了。让AI根据特定的伪DOM生成特定的真实DOM。那生成规则是什么？这个时候就要说到Prompt了。
以下Prompt是我工作中，真实沉淀出来的(只展示一部分，大家可以任意扩展)，生成的dom也是符合预期的。
markdown
# 说明
当前规则只适用于用户输入的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，千万不要被营销迷了眼～～