我要投稿

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

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

作者：喜新

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

你让 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-09-29

AI辅助编程工具Claudecode入门教程，手把手教，小白也能学会

2025-09-26

Vibe Coding清理服务

2025-09-24

中国公众对生成式AI的看法与使用行为｜年度调研

2025-09-23

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

2025-09-22

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

2025-09-18

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

2025-09-18

我们又更新了：ima支持上传音频文件

2025-09-17

处理Word文档？AI编程比你想象的更强大！

了解更多

了解更多

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

立即咨询预约演示

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

2025-01-22

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

2025-01-22

热点资讯

AI做解压赛道，太火了！

2025-07-28

一个用 AI 起号的新思路

2025-08-06

豆包 Seedream 4.0：图像创作革新者与精简使用攻略

2025-09-17

185个真实AI应用场景案例，涵盖六大版块，全球170多个公司和组织

2025-09-02

AI走进中小学课堂案例研究：四个项目，四种探索

2025-09-04

一键解锁创意魔法！用 Dify + 豆包大模型搭建文生图 / 文生视频 Agent

2025-07-08

公开帮我每天赚钱的 AI 工作流之产品分析

2025-09-15

AI批量抠图！5秒抠30张图，毛发/玻璃/多人物场景一键分离

2025-09-05

数据可视化：20余种图表类型，让你的数据瞬间"活"起来！

2025-07-15

研究显示：AI 并没有提升编程效率，它反而让你变慢了19%

2025-07-11

大家都在问

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

2025-09-11

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

2025-09-09

AI 时代，为什么文档处理依然这么难？

2025-09-06

学AI-笔记025：如何利用AI读书助力高效知识吸收？

2025-08-28

我为什么不建议用AI读文献？

2025-08-24

AI 浪潮下，“掉队”=“淘汰”，普通人能否成为AI小专家？

2025-08-20

AI 项目的 “真与假”：为什么聊了很多，却没优质项目？

2025-08-20

用AI写论文发现不像是人写的，自己写文发现又不够深度，咋整？

2025-08-18

热门标签

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

应聘简历请发送至： ceo@53ai.com

联系我们

售前咨询

预约演示

微信扫码

添加专属顾问

回到顶部