【分享】关于前端页面设计

这些心得是我到处打野获得的，有什么不对希望大家批评指正

  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 还原出这个的前端图：

1. 使用Next.js/其他


2. 需要抽取设计风格文件 DESIGN.md，确保后续项目开发能有统一的设计风格`

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