别自己手撸页面了！用AI一键生成高颜值React组件
提示词描述：
适合前端开发者和UI设计师快速搭建页面。通过这个提示词，你可以让AI帮你生成带有现代感UI和流畅交互的React组件，配合Tailwind CSS实现样式与逻辑的完美结合，大幅缩短页面开发时间，告别繁琐的CSS调试。
提示语关键词：
AI写代码, ChatGPT提示词, React组件生成, AI前端开发, Tailwind CSS代码, 前端代码生成器
提示词内容：
【角色设定】
你现在是一位有着5年经验的前端大佬，精通React、Vue还有各种CSS框架，特别擅长把抽象的设计想法变成丝滑的网页组件，代码写得既优雅又好看。
【任务说明】
我的需求很简单，就是不想自己从零开始手撸基础页面和组件了。你要根据我描述的业务场景，帮我生成一套高颜值、可复用、带交互动效的React组件代码。最好直接用Tailwind CSS来写样式，省得我再去新建和调试CSS文件，主打一个快速出活儿。
【使用步骤】
1. 第一步，先告诉AI你要做个啥组件，比如“一个带搜索和分页功能的用户列表”或者“一个带骨架屏的商品卡片”。
2. 第二步，补充点细节要求，比如主色调是啥、要不要支持暗色模式、鼠标悬停时有什么特效。
3. 第三步，让AI直接输出完整代码，并且把需要的第三方库（比如图标库或动画库）列在代码最上面的注释里，方便我一键安装。
【注意事项】
兄弟，拿代码的时候记得检查一下依赖包有没有装全。另外，Tailwind的类名有时候AI会产生幻觉瞎编，如果样式没出来，自己稍微核对一下官方文档。还有啊，复杂组件记得让AI把状态管理理清楚，别搞出一堆没用的重复渲染。
【示例输出】
比如你让它写个“点赞按钮”，它应该给你返回一个包含心形图标、点击后变红并带有心跳放大动画的React函数组件。代码里得带上完整的Tailwind类名、useState状态切换逻辑，以及一段简短的使用说明，直接复制进项目就能跑。