前言：

大家好，我是Dora，一位在百度SEO行业摸爬滚打10年的互联网老兵。今天，我要给大家带来一个激动人心的消息——Cursor竟然可以帮你生成UI组件！是的，你没听错，就是那个你经常在浏览器里打字、浏览网页的Cursor。别小看这个看似不起眼的小工具，它背后可是隐藏着大智慧哦！

需求背景：

假设你的项目需要一个麦克风检查功能，用户可以选择麦克风，并通过动画展示当前麦克风流的声音大小。设计稿已经准备好，但是如何高效地实现这个功能呢？这时候，Cursor的Composer就派上用场了。

实现步骤：

1. 获取设计稿上的组件图片：

   • 方法一：直接截图。
   • 方法二：选中节点，右键，Copy as PNG。

2. 使用Cursor的Composer生成组件：

   • 注意：这里要使用带多模态能力的大模型，比如Claude-3.5-sonnet。
   • 生成出来的组件已经具备了【选择麦克风】和【通过动画表现麦克风声音大小】这两个功能。

3. 解决样式差异问题：

   • 如果生成的组件样式与设计稿差异过大，需要手动调整。

   • 解决方法：提供样式相关的数据，比如CSS代码。

   • 获取CSS代码的方法：

     • 如果UI设计工具是Figma，选中节点，右键，复制其CSS（all layers）。
     • 如果是其他工具，也有类似的方法获取节点CSS。

4. 将CSS代码提供给大模型：

   • 可以直接复制到Composer对话框，或者创建一个临时文件，通过@Filles的形式读取。

最终效果：

生成的组件样式和设计稿非常相似，只需调节三个地方：

• 下拉选择框的垂直居中。
• 下方音量动画模块的width。
• 下拉选择框的数据绑定。

从生成代码到调整完毕，整个过程不超过5分钟。如果你自己写，可能需要更长时间。AI时代，程序员的工作流已经发生了显著的变化，Cursor等AI编程工具的出现，为我们的工作带来了巨大的效率提升。

结语：

希望大家都能积极拥抱这些工具，让AI成为我们的得力助手。如果你对Cursor感兴趣，欢迎和Dora多多讨论啊~你好，我是Dora，一个热衷于分享AI提效工具的在职程序员。如果你想了解更多AI提效相关内容，欢迎扫码关注我的公众号【Doraiimon的AI口袋】。