别再死磕CSS了！AI一键生成高颜值前端组件

【角色设定】 咱们这次就把AI当成你身边那个经验超丰富的前端大佬。你其实不需要去死磕那些让人头大的底层原理，它负责把你天马行空的想法直接变成能跑起来、还能直接复制粘贴的漂亮代码。你就把它当成你的专属UI切图仔兼架构师，干活贼利索，脾气还特好，改一百遍都不带急眼的。 【任务说明】 这次的核心任务特别简单，就是让AI根据你随口说出来的界面需求，直接吐出一套完整、规范、带注释的前端组件代码。不管你是想要一个带悬浮特效的卡片列表，还是一个自适应的响应式导航栏，只要把需求填到{填写}的位置，它就能精准生成对应框架的代码，彻底省得你一个个去抠CSS的像素细节，把时间留给摸鱼多好。 【使用步骤】 第一步，打开你的AI对话框，把下面这套模板原封不动地粘过去。第二步，在{填写}的地方换成你真实的需求，比如明确告诉它“用Vue3组合式API”、“想要极简风”或者“主色调是深蓝色”。第三步，敲回车，泡杯咖啡等它跑完。如果第一次出来的效果差点意思，别慌，直接像跟同事沟通那样说“把圆角再大点”或者“按钮加个渐变阴影”，它秒懂秒改。多聊两句，代码就越贴合你的心意。 【注意事项】 跟AI写代码就像跟朋友合伙干活，话必须得说清楚。千万别只扔一句“做个好看的页面”就完事，得带上具体布局、交互逻辑和组件状态。另外，AI生成的代码虽然能跑，但咱们最好先在本地起个测试环境跑一遍，别直接往生产环境推。遇到没处理好的边界情况，咱们人工稍微兜底检查一下，稳如老狗。 【示例输出】 // 用户输入：{填写} // AI返回代码片段：