你让 AI 给你写的网页大概都是这样的：
或者这样：
好点的时候能这样：
但都不够高级，尤其是那个像引用一样的边框，太 AI 了。
今天教大家一个小技巧，写出下面这样的网页：
或者这样的
找到好看的模板
推荐这个网站：https://21st.dev
这里面不但提供各种好看的模板，还给你提供了直接让 AI 写出完全一样网页的提示词
不过它提供的提示词不能直接用。
如果直接发给 AI，AI 会 1:1 复制网页。我们的目的只是复刻网页的样式，所以需要对它提供的提示词做一番调整。
它提供的提示词分成三部分：
1. 任务背景介绍（把这个样式的组件嵌入到现有项目中） 2. 告诉 AI 怎么迁移文件 3. 告诉 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 写完代码你就可以直接欣赏新视觉了。
