怎么让 AI 写出好看有设计感的网页

你让 AI 给你写的网页大概都是这样的：

或者这样：

好点的时候能这样：

但都不够高级，尤其是那个像引用一样的边框，太 AI 了。

今天教大家一个小技巧，写出下面这样的网页：

或者这样的

推荐这个网站：https://21st.dev

这里面不但提供各种好看的模板，还给你提供了直接让 AI 写出完全一样网页的提示词

不过它提供的提示词不能直接用。

如果直接发给 AI，AI 会 1:1 复制网页。我们的目的只是复刻网页的样式，所以需要对它提供的提示词做一番调整。

它提供的提示词分成三部分：

1. 1. 任务背景介绍（把这个样式的组件嵌入到现有项目中）

2. 2. 告诉 AI 怎么迁移文件

3. 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 部分适配。

Cursor 的 Agent 模式已经可以自己安装依赖了，大部分时候，AI 写完代码你就可以直接欣赏新视觉了。

加入AI行动圈继续精进

我从 23 年开始和起点课堂一起运营「AI学习行动圈」，截止到此刻已更新 1500+主题，与接近 4000 关注 AI 的实战派在过去 500+ 天里每天讨论、交流 AI 实战应用。

学习圈目前有 3 个核心的学习交流“阵地”：

1. 1. 知识星球： 知识资料技巧沉淀的核心渠道，随时可查阅

2. 2. 微信交流群： 目前 6 个群，每天都有圈友交流分享 AI 使用心得

3. 3. 吹水局直播： 工作日晚 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 元立减金加入