我要投稿
微信搜一搜，关注“喜新”
告别千篇一律的AI网页设计，教你用模板+提示词打造高级感爆棚的页面！ 核心内容： 1. 如何找到高质量网页模板并提取设计精髓 2. 改造模板提示词的三步关键操作 3. AI自动安装依赖实现设计落地的完整流程
你让 AI 给你写的网页大概都是这样的：
或者这样：
好点的时候能这样：
但都不够高级，尤其是那个像引用一样的边框，太 AI 了。
今天教大家一个小技巧，写出下面这样的网页：
或者这样的
推荐这个网站：https://21st.dev
这里面不但提供各种好看的模板，还给你提供了直接让 AI 写出完全一样网页的提示词
不过它提供的提示词不能直接用。
如果直接发给 AI，AI 会 1:1 复制网页。我们的目的只是复刻网页的样式，所以需要对它提供的提示词做一番调整。
它提供的提示词分成三部分：
但我们的任务不是这样的，我们只要抄这个样式，并把它应用到整个项目中
下面是具体做法：
点击open component会进入元件的详情页，这里把提示词里的代码拆成了 N 个（一般是 2 个）文件。
把他们复制下来，使用相同的文件名在项目中。
// 你的其他需求提示词
## 样式设计
下面“示例组件”的视觉风格、布局和动画效果，应用到我的项目上，确保核心功能和业务逻辑不受影响。
示例代码在 @demo.tsx 和 @shape-landing-hero.tsx ,请重点分析它的布局结构、颜色使用、字体排版以及使用 Framer Motion 实现的动画效果。
确保：
1. 分析组件结构并识别所有必需的依赖。
2. 查看组件的参数和状态。
3. 识别任何必需的上下文提供者或挂钩，并安装它们。
4. 如果组件需要，使用 lucide-react 图标作为 SVG 或徽标。
5. 其他区块的视觉与 Hero 部分适配。Cursor 的 Agent 模式已经可以自己安装依赖了，大部分时候，AI 写完代码你就可以直接欣赏新视觉了。
53AI，企业落地大模型首选服务商
产品：场景落地咨询+大模型应用平台+行业解决方案
承诺：免费场景POC验证，效果验证后签署服务协议。零风险落地应用大模型，已交付160+中大型企业
2025-06-30
靠Coze躺赢！输入水果名生成10w+AI切水果爆款视频！新号0粉小红书连爆2条快学！
2025-06-28
企业实施人工智能的瓶颈是董事长CEO自己的认知
2025-06-28
AI项目十五坑 坑坑都不简单！
2025-06-26
严肃编程时代已来！智领·开悟 AI Team，一键生成高水准专业应用！
2025-06-26
EasyDoc：将你的文档变为 AI 友好格式的万能神器
2025-06-26
AI全流程开发插件，零基础小白也能轻松上手！
2025-06-26
别再只用AI聊天了！我用MiniMax Agent肝完5个项目，效率提升120倍，这是我的实测报告
2025-06-26
50个精选职场必备DeepSeek指令，建议收藏
2025-04-05
2025-04-05
2025-04-14
2025-04-13
2025-05-22
2025-05-24
2025-04-29
2025-04-13
2025-04-21
2025-06-12
回到顶部
粤ICP备17114055号