我要投稿

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

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

作者：喜新

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

你让 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+中大型企业

相关资讯

2025-12-16

YouMind：一款懂输入、思考、输出闭环的 AI 创作工具

2025-12-16

Ant Design X 重磅推出 AI 流式渲染引擎！

2025-12-16

自己都用不好自家的产品就别卖给客户丢人现眼了！

2025-12-15

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

2025-12-15

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

2025-12-15

两年前对AI影响用户研究的预测，哪些应验了，哪些被打脸

2025-12-14

左手NovelCrafter，右手Claude Code，作为码字人，我从没这么痛快过

2025-12-11

用友王文京：如何用《易经》理解AI

了解更多

了解更多

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

立即咨询预约演示

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

2025-01-22

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

2025-01-22

热点资讯

用字节Seedream4.0直出4K中文海报的22种懒人方法，我找全了！

2025-09-18

全新SkyReels正式上线

2025-11-04

所有AI的馈赠，早已在暗中标好了价格｜北大最新论文解读

2025-10-10

发布了！我的“即梦 Agent”，一个提示词驱动的创作工具

2025-09-22

a16z实测 AI 办公工具：谁是能帮你干活的队友

2025-10-13

天猫行业中后台前端研发Agent设计

2025-10-20

案例｜两天搞定120张教学卡牌，AI让创意教学不再复杂

2025-10-06

这个叫Tunee的AI音乐Agent 真的很不错｜附邀请码

2025-09-23

告别错别字和退格键！这款AI语音输入法，让你的打字效率倍增（含实测体验）

2025-10-20

AI自动生成工作流，n8n官方出品

2025-10-19

大家都在问

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

2025-12-15

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

2025-12-09

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

2025-11-17

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

2025-11-14

货拉拉数据工厂：从3k+工具到AI智能体，我们如何让造数效率翻倍？

2025-11-12

可口可乐，你浓眉大眼的也用AI做广告了？

2025-11-05

一周的数据分析现在几秒完成，一位医生如何用AI给工作减负？

2025-09-11

企业、垂类应用都在用 AI 搜索做什么？

2025-09-09

热门标签

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

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

联系我们

售前咨询

预约演示

微信扫码

添加专属顾问

回到顶部