- McyleLin2026-08-0754461
这些心得是我到处打野获得的,有什么不对希望大家批评指正```
AI 生成页面的质量上限,取决于你的判断力。判断力不是凭空来的,先去大量看好东西。
```1.先提高审美判断力我推荐三个灵感网站:
- Pinterest——品牌设计金矿。海量品牌视觉案例和配色方案,每天刷 15 分钟,灵感爆棚。
- Mobbin——UX/UI 设计宝典。收录全球顶尖产品的界面原型,从交互逻辑到图标细节全解析
- Landingfolio——落地页神器。精选高转化率页面,教你设计让用户"一见钟情"的关键入口。
2.使用codex/其他agent分析
- 做项目时,不要先花三个月学习。先让 Codex 调研市场、整理术语、分析竞品,再用真实项目反向学习,举例做前端就要知道前端的专业术语方便一次性跟ai沟通好位置,样子等其他的。
- 做网页时,让 Codex 同时检查桌面端、移动端、加载状态、空状态和错误状态,别只看首页截图
2.界面获取
- 用设计skills提升质感
-直接生成的页面能用,但往往“AI 味”很重。两个 Skill 分别解决审美和动效问题taste-skill和emilkowalski/skills
- 图像复刻法
-图像复刻法,去心怡的网站或者产品找到完整长截图2. 把截图和提示词一起交给 AI,这条提示词里有个关键动作:让 AI 抽取一份 DESIGN.md 设计风格文件。它把配色、字体、间距、圆角这些设计决策沉淀成文档,之后项目里所有页面都引用它,整个产品的视觉风格才能统一,不会做一页换一个风格
`请你基于该图片,1:1 还原出这个的前端图:
- 使用Next.js/其他
- 需要抽取设计风格文件 DESIGN.md,确保后续项目开发能有统一的设计风格`
重点来了,求求别举报我,我还是个新人,如果我的帖子有问题或者触犯禁忌的话,希望有佬告诉我,我就删除了!
主楼 - codertao2026-08-0715139
有没有推荐的skill呢 现在ai做的页面真的感觉不好看
- McyleLin2026-08-0754461
现在我做的主要是灵感网站截图让ai复刻形成风格+taste-skill 提升质感,配色、排版、留白的质感会有提升
- McyleLin2026-08-0854461
2026/8/8 更新前端小记
补充几个站点我觉得挺好的
站点 |
看什么 |Godly |
顶级网页设计,先开开眼,知道“高级感”长什么样 |Land-book / SaaS Landing Page |
落地页画廊,按行业挑同类的,“配色学这张、排版学那张” |One Page Love |
专收单页网站,正好是我们这个技术栈 |Mobbin |
真实 App 和网站的界面截图库,手机端参考它 |Awwwards |
设计奖项站,获奖作品里挑元素让 AI 学 |配色和字体方面呢: Coolors 按空格键在网站刷配色,挑一套顺眼的,把 5 个色值贴给 AI“整站用这套”;字体去 Google Fonts 挑好,跟 AI 说“标题用 XX、正文用 XX”,单文件 HTML 一行就引入了。
还有组件懒得一个个描述,直接让 AI“用 Tailwind CDN 、Shadcn UI 或 daisyUI 写”,都是一行引入、AI 最成熟的组件库,出来就是现成的好看组件。
值得说的是个偷懒神器 screenshot-to-code (7 万+ star):把你喜欢的网页截图丢进去,直接写出来完整的 HTML 前端页面。