• McyleLin

    这些心得是我到处打野获得的,有什么不对希望大家批评指正```
    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,确保后续项目开发能有统一的设计风格`

    重点来了,求求别举报我,我还是个新人,如果我的帖子有问题或者触犯禁忌的话,希望有佬告诉我,我就删除了!

    主楼
  • codertao

    有没有推荐的skill呢 现在ai做的页面真的感觉不好看

    #1
  • McyleLin

    现在我做的主要是灵感网站截图让ai复刻形成风格+taste-skill 提升质感,配色、排版、留白的质感会有提升

    #2
  • McyleLin

    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 前端页面。

    #3

发表回复

登录后回复