我要投稿

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

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

作者：喜新

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

你让 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-06-22

写代码你不在乎AI味儿，写文章为啥那么计较？

2026-06-03

用 WorkBuddy 辅助写投标技术方案：别让 AI 替你投标，让它替你把话说清楚

2026-05-30

企业级 AI Coding 还有一堆问题，并没有像PR一样说的这么好用

2026-05-27

如何使用 AI 设计企业级产品？

2026-05-24

我研究了这个 18.6k Star 的 Skills，做幼师的女朋友夸我真猛！

2026-05-21

AI里，你必学的新Office三件套：MD、CSV、HTML

2026-05-21

体验完阿里首款Design Agent，我开始替UI/前端焦虑了..

2026-05-19

不要再直接把 UI 图转成代码了，先看这份 UI Spec 模板

联系获取

联系获取

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

立即咨询预约演示

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

2025-01-22

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

2025-01-22

热点资讯

纳米漫剧流水线，我劝你别太离谱

2026-04-14

gpt-image-2发布后，PPT最强skill

2026-04-28

刚刚，Claude Design 发布！网友：将摧毁设计行业……

2026-04-18

他们用悟空重写了内容生产这件事

2026-03-30

体验完阿里首款Design Agent，我开始替UI/前端焦虑了..

2026-05-21

如何使用 AI 设计企业级产品？

2026-05-27

不要再直接把 UI 图转成代码了，先看这份 UI Spec 模板

2026-05-19

Amazon Quick桌面版：读文档、做PPT、查邮件，一句话全搞定

2026-05-06

AI里，你必学的新Office三件套：MD、CSV、HTML

2026-05-21

我研究了这个 18.6k Star 的 Skills，做幼师的女朋友夸我真猛！

2026-05-24

大家都在问

写代码你不在乎AI味儿，写文章为啥那么计较？

2026-06-22

如何使用 AI 设计企业级产品？

2026-05-27

Nano Banana 2 实测：8 大落地场景 + 全部 Prompt，AI 绘画 SOTA 到底逆天在哪？

2026-02-28

AI内容工程化：为什么你的团队用了AI，内容还是做不出来?

2026-02-07

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

2026-01-29

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

2026-01-21

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

2026-01-06

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

2025-12-22

热门标签

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

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

联系我们

售前咨询

预约演示

微信扫码

添加专属顾问

回到顶部