我要投稿

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

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

作者：喜新

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

你让 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-03-21

设计师慌了：Google Stitch 一出，Figma 两天跌了 12%

2026-03-21

Anthropic 产品经理：PRD 已死，原型万岁

2026-03-19

一部5分钟短剧让你惊出冷汗，它的成功却不在于此

2026-03-13

“洗代码即服务”火了！“开源代码洗白”奇葩网站上线，反讽白嫖企业：开源合规太昂贵了！CC逆向复刻客户软件，十分之一的价格转卖！

2026-03-12

为什么 LSP Language Server 对 Coding Agent 很重要

2026-03-09

给“氛围编程”系上安全带：阿里集团 AI 代码评审实践与 Benchmark 开源

2026-03-09

AI时代的"无界面"交互趋势——兼论用户体验行业发展（长文）

2026-03-05

从生成到交付：AI 做游戏，关键在「边界、地图、循环」

联系获取

联系获取

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

立即咨询预约演示

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

2025-01-22

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

2025-01-22

热点资讯

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

2026-01-23

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

2026-01-06

万字长文讲解：团队落地 AI 辅助编程和 Specs 实战

2026-01-12

我做了个Claude Skill：一键复刻任意公众号的排版

2025-12-25

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

2026-01-28

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

2026-01-29

98.4K Star！OpenCode+Agent Browser 重构自动化测试流程

2026-02-11

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

2026-01-18

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

2026-02-28

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

2026-01-20

大家都在问

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

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

2025-12-15

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

2025-12-09

热门标签

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

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

联系我们

售前咨询

预约演示

微信扫码

添加专属顾问

回到顶部