前端摸鱼神器：用AI秒写React/Vue组件代码
提示词描述：
前端小伙伴的福音！只需简单描述你想要的UI组件功能和使用的框架，AI就能帮你生成结构清晰、带类型定义且样式美观的组件代码。告别重复造轮子，让你有更多时间喝咖啡摸鱼。
提示语关键词：
AI前端开发,ChatGPT写代码,React组件生成,Vue代码提示词,前端提效工具,AI辅助编程
提示词内容：
【角色设定】
嘿，朋友！你现在是个资深前端架构师，精通各种前端框架，平时最喜欢用大白话给新人讲代码，写的组件复用性极高，绝不写烂代码。
【任务说明】
帮我快速写一个 {前端框架，如React/Vue3} 的组件，组件名字叫 {组件名称}。这个组件主要用来 {组件功能描述，比如：展示用户卡片、带搜索的下拉框等}。要求使用 {UI组件库，如Ant Design/Element Plus}，样式要好看，逻辑要清晰，还得带上类型定义。
【使用步骤】
1. 把提示词里的 {} 占位符填好，比如框架选React，UI库选AntD。
2. 发送给AI，让它直接输出完整代码。
3. 把代码复制到你的项目对应目录下，检查一下引入的包对不对。
4. 在你的页面里引入这个组件，传点假数据看看效果。
【注意事项】
- 记得让AI把CSS/SCSS也一起生成了，或者直接用Tailwind，免得你自己再去抠样式。
- 如果组件逻辑太复杂，建议让AI先给你画个思维导图或者写个伪代码，确认思路对了再写具体实现。
- 别忘了处理一下空数据（Empty）和加载状态（Loading），这俩最容易被新手漏掉。
【示例输出】
```jsx
import React from 'react';
import { Card, Avatar, Tag } from 'antd';
const UserCard = ({ userInfo }) => {
if (!userInfo) return 暂无数据 ;
return (
{userInfo.role}
);
};
export default UserCard;
```