我要投稿

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

发布日期：2025-06-30 17:32:30 浏览次数： 2601

作者：喜新

微信搜一搜，关注“喜新”

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

null

或者这样：

null

好点的时候能这样：

null

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

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

null

或者这样的

null

找到好看的模板

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

null

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

null

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

如果直接发给 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 写完代码你就可以直接欣赏新视觉了。

53AI，企业落地大模型首选服务商

产品：场景落地咨询+大模型应用平台+行业解决方案

承诺：免费POC验证，效果达标后再合作。零风险落地应用大模型，已交付160+中大型企业

相关资讯

2026-01-29

OpenAI发布的新科研工具Prism，相比起Overleaf如何？值得入手吗？

2026-01-28

打破传统，Pencil UI设计工具引领前端UI设计新潮流！

2026-01-23

AIPPT：图像生成 vs OOXML 两种实现方式对比

2026-01-23

发现了 4 个好玩 SKills，已经在 GitHub 上开源了。

2026-01-21

当A++成为新的“紧箍咒”：我们是否忘记了测试的初衷？

2026-01-20

字节错过 Manus 后，推出的 AnyGen 不是竞争是互补

2026-01-19

Skywork Design Agent重磅上线：非专业人士的AI设计利器，重塑办公创作效率

2026-01-18

字流 2.0 发布：我把 14 个平台的发布流程压到 10 分钟

联系获取

联系获取

160+中大型企业正在使用53AI

立即咨询预约演示

把握AI发展的机遇，共同探索、共同进步

2025-01-22

如何打造基于GenAI的员工服务机器人

2025-01-22

热点资讯

终于找到可以一键做 AI 漫剧的方法了

2025-12-11

复盘 AI 陪伴消亡史：我们究竟做错了什么？

2025-11-17

发现了 4 个好玩 SKills，已经在 GitHub 上开源了。

2026-01-23

AI时代的一个新职业-Skills技能创作者

2025-11-11

做AI PPT，50人团队年入1亿美元，发布AI PPT提示词指南，从7000万用户工作流精选

2025-11-13

DeepSeek 5 分钟帮我做完一份“苹果发布会级”PPT。我把方法公开了，效果绝了！

2025-11-20

AI对全球白领就业冲击有多大？

2026-01-06

Second Me 的数字身份，让我看到了 AI 时代真实社交的新可能

2025-11-21

AI 时代的设计准则：10 条启发式原则让用户体验更智能

2025-12-02

NotebookLM: 不就做个PPT，有什么难的

2025-12-15

大家都在问

OpenAI发布的新科研工具Prism，相比起Overleaf如何？值得入手吗？

2026-01-29

当A++成为新的“紧箍咒”：我们是否忘记了测试的初衷？

2026-01-21

AI对全球白领就业冲击有多大？

2026-01-06

警惕！AI创业的三重“陷阱”你避开了吗？

2025-12-22

NotebookLM+Nano Banana Pro：你的下一个PPT，何必是PPT？

2025-12-15

你用AI做的应用，是在挠自己的痒痒吗？

2025-12-09

复盘 AI 陪伴消亡史：我们究竟做错了什么？

2025-11-17

批判性思考能力为何在AI时代更为重要？

2025-11-14

热门标签

内容创作大模型技术个人提效 langchain llamaindex 多模态技术 RAG技术智能客服知识图谱模型微调 RAGFlow coze Dify Fastgpt Bisheng Qanything AI+汽车 AI+金融 AI+工业 AI+培训 AI+SaaS 提示词框架提示词技巧 AI+电商 AI面试数字员工 ChatBI AI知识库开源大模型智能营销智能硬件智能化改造 AI+医疗 MaxKB Palantir Glean

应聘简历请发送至： [email protected]

联系我们

售前咨询

预约演示

微信扫码

添加专属顾问

回到顶部