大家好啊，我是Dora。
作为一个前端工程师，我们不可避免的要花不少时间来实现设计稿上的内容。但最近我发现，Cursor已经可以做到 按照设计稿来生成对应的组件 了。
下面给大家演示一下。
我们的需求是：实现一个麦克风检查功能，可以选择麦克风，并通过一个动画表现当前麦克风流的声音大小。设计稿（UI设计工具为figma）如下：
首先我们获取设计稿上面这个组件的图片。可以直接截图；也可以选中该节点，右键，Copy as PNG。
然后使用Cursor的Composer，按照图片内容生成组件。 （注意这里要用带多模态能力的大模型，例如Claude-3.5-sonnet）
此时生成出来的组件，已经具备了【选择麦克风】和【通过动画表现麦克风声音大小】这两个功能。
不得不感叹现在大模型的多模态能力实在是太强了，我们只给了一张图片，根本没有任何关于功能的描述，大模型就能推理出我们所需要的功能，并生成直接可用的代码。
但是目前还有一点问题：生成的组件样式与设计稿的差异还是太大了，如果需要我们手动改，还是要花不少时间。
样式差异过大的原因其实也很好理解，大模型难以从图片直接推理出具体样式（毕竟让大模型从图片上看出这个选择框的border-radius是4px还是8px实在是太扯了）。
所以 要想生成的组件样式相似度较高，需要额外提供样式相关的数据 。
那该怎么做呢？
非常简单！如果UI设计工具是Figma，我们可以选中figma中的节点，右键，复制其CSS（all layers）
如果是其他UI设计工具，应该也有类似的获取某个节点CSS的方式，我们复制下来即可。
然后把这些CSS一起给到大模型，可以直接复制到Composer对话框；也可以创建一个临时文件，在Composer通过@Filles 的形式去读取这个文件。
（我这里就是将CSS信息粘贴到一个临时文件schema中，让Composer去参考这个文件中的样式）
最终生成出来的效果：
可以看到，生成的组件样式和设计稿已经非常相似了，最终需要调节的地方只有三个：
- 下拉选择框的垂直居中（因为antd组件库的样式比较复杂，大模型也很难保证一次生成就能正确覆盖antd的样式）
- 下方音量动画模块的width。
- 下拉选择框的数据绑定（第一个版本的数据绑定是对的，第二个版本因为引入了设计稿的原始样式，导致原本的数据绑定逻辑被改了）
从生成代码到调整完毕，实现这个组件的 整个过程不超过5分钟 ，如果是我们自己来写，需要多久呢？
AI时代，程序员的工作流已经发生了显著的变化。Cursor等AI编程工具的出现，为我们的工作带来了巨大的效率提升。希望大家都能积极拥抱这些工具，让AI成为我们的得力助手。
如果大家对Cursor感兴趣的话，欢迎和Dora多多讨论啊~
你好，我是Dora，一个热衷于分享AI提效工具的在职程序员。 如果你想了解更多AI提效相关内容，欢迎扫码关注我的公众号【Doraiimon的AI口袋】
