你让 AI 给你写的网页大概都是这样的：
或者这样：
好点的时候能这样：
但都不够高级，尤其是那个像引用一样的边框，太 AI。
今天教大家一个小技巧，写出下面这样的网页：
或者这样的
找到好看的模板
推荐这个网站：https://21st.dev
这里面不但提供各种好看的模板，还给你提供了直接让 AI 写出完全一样网页的提示词
不过它提供的提示词不能直接用。
如果直接发给 AI，AI 会 1:1 复制网页。我们的目的只是复刻网页的样式，所以需要对它提供的提示词做一番调整。
它提供的提示词分成三部分：
- 任务背景介绍（把这个样式的组件嵌入到现有项目中）
- 告诉 AI 怎么迁移文件
- 告诉 AI 把这个组件的依赖都安装全
但我们的任务不是这样的，我们只要抄这个样式，并把它应用到整个项目中
下面是具体做法：
1. 复制模板提供的代码
点击open component会进入元件的详情页，这里把提示词里的代码拆成了 N 个（一般是 2 个）
把他们复制下来，使用相同的文件名在项目中创建成为文件
2. 给你的大模型发送下面的提示词
// 你的其他需求提示词
## 样式设计
下面“示例组件”的视觉风格、布局和动画效果，应用到我的项目上，确保核心功能和业务逻辑不受影响。
示例代码在 @demo.tsx 和 @shape-landing-hero.tsx ,请重点分析它的布局结构、颜色使用、字体排版以及使用 Framer Motion 实现的动画效果。
确保：
1. 分析组件结构并识别所有必需的依赖。
2. 查看组件的参数和状态。
3. 识别任何必需的上下文提供者或挂钩，并安装它们。
4. 如果组件需要，使用 lucide-react 图标作为 SVG 或徽标。
5. 其他区块的视觉与 Hero 部分适配。
3. 安装依赖，欣赏新的视觉
Cursor 的 Agent 模式已经可以自己安装依赖了，大部分时候，AI 写完代码你就可以直接欣赏新视觉了。
加入AI行动圈继续精进
我从 23 年开始和起点课堂一起运营「AI学习行动圈」，截止到此刻已更新 1500+主题，与接近 4000 关注 AI 的实战派在过去 500+ 天里每天讨论、交流 AI 实战应用。
学习圈目前有 3 个核心的学习交流“阵地”：
- 知识星球： 知识资料技巧沉淀的核心渠道，随时可查阅
- 微信交流群： 目前 6 个群，每天都有圈友交流分享 AI 使用心得
- 吹水局直播： 工作日晚 19:30-21:30，每场一个 AI 应用主题
阵地一：知识星球
我在星球里主要维护「实战分享」「工具箱」和「情报局」三个标签
实战分享是可以在日常工作和生活中直接应用的提示词和效率工具。上面截图里的 Step-Back 提示词就非常好用，堪比 o4。在公众号、直播中演示的所有 AI 实战应用的提示词也都在这个标签下。
AI 工具和鲜知道就是好用的、热门的 AI 工具、资讯分享，我把那些太技术、太浮夸的都筛选了，放进这个标签的都是可以直接用来的好玩儿！
星球还有一个“专栏”体系，目前的定位跟标签差不多。
如果你正在找一个 能第一时间了解最新、实用的 AI 资讯和实战技巧 ，遇到任何 AI 应用问题能 随时找到同行人交流、请教、讨论 的圈子，
阵地二：微信交流群
我们为圈友配了微信交流群，现在 6 群快满了。
微信群里每天一早有 AI 早报，上下午还有“读报时间”，以及我每天不定期刷屏级的各种 AI 工具体验、提示词编排思考、行业新闻解读同步。
以及，你可以在群里讨论任何与 AI 相关的工具、应用问题，几乎都能找到答案。
如果你正在找一个 能第一时间了解最新、实用的 AI 资讯和实战技巧 ，遇到任何 AI 应用问题能 随时找到同行人交流、请教、讨论 的圈子，
立刻扫码领取 50 元立减金加入
阵地三：AI吹水局直播
刚复盘我专门去视频号后台看了一下直播记录，过去一年一共为学习圈做了 130 场 AI 应用、实战、热点解读相关的直播，累计肝了 257 小时！
有十几场仅学习圈成员可观看的闭门直播，平均观看时长都是 1 个多小时，有时逼近接近 2 小时！
没点干货，平均停留时长到不了这水平的。
如果你正在找一个 能第一时间了解最新、实用的 AI 资讯和实战技巧 ，遇到任何 AI 应用问题能 随时找到同行人交流、请教、讨论 的圈子，
立刻扫码领取 50 元立减金加入