← 返回路线图
5前端篇
用户看到的一切：选对框架，AI 帮你画
前端就是用户能看到和点击的界面。AI 时代做前端，核心是选对框架 + 描述清楚想要什么。
🌐
网页端
最快最简单。AI 最擅长 React 页面，响应式自带适配各种屏幕。
📱
小程序
微信生态获客强。Taro 一套代码出多平台小程序。
📲
App 端
体验最好。React Native 一套代码双端运行。
💻
桌面端
Tauri 轻量打包，网页技术直接出桌面软件。
🎨 主流前端方案
Next.js
⭐ 新人首选React 全栈框架，前后端一体，AI 最擅长。自带路由、SSR、API，Vercel 一键部署。
React
最流行Meta 出品，生态最大、岗位最多。组件化开发思想，学一次可写 Web + App。
Vue
中文友好尤雨溪出品，中文文档极佳。上手平缓，适合不想学 JSX 的开发者。
Tailwind CSS
样式首选AI 时代的标准样式方案。不用写 CSS 文件，直接在 HTML 里写类名，AI 生成极其精准。
shadcn/ui
组件库基于 Radix 的组件库，复制代码即用。比 npm install 更灵活，AI 可直接修改组件源码。
React Native
移动端用 React 写 iOS 和 Android App。Expo 免配置，一套代码双端运行。
Taro / UniApp
小程序跨端一套代码同时出微信/支付宝/百度小程序。国内小程序开发事实标准。
Astro
内容站极速静态站点框架，适合博客、文档站、Landing Page。默认零 JS，体积极小。
❓ 我该选哪个？
▶
零基础起步？ → Next.js + Tailwind + shadcn/ui。AI 最熟、网上一键部署、组件拿来就用。
▶
习惯中文文档？ → Vue + Element Plus。中文社区最大，文档质量高。
▶
要做 App？ → React Native + Expo。学一次 React 写两端的 App。
▶
做小程序？ → Taro + NutUI。一套代码跑微信/支付宝/百度小程序。
▶
做博客/文档站？ → Astro + Tailwind。零 JS 输出，加载飞快。
🤖 告诉 AI 你要什么界面
描述越具体，AI 生成越精准：
"帮我用 Next.js + Tailwind + shadcn/ui 生成一个登录页面，
带邮箱/密码输入框、第三方登录按钮、忘记密码链接"}
"帮我创建一个仪表盘，左侧导航栏，右侧展示
卡片式数据统计、折线图和最近订单列表"
"把这个页面改成响应式，手机上卡片要叠起来显示"
告诉 AI：用的什么框架 + 页面结构 + 每块放什么。越详细，一次过。
📐 跨平台适配三要素
响应式
同一网页自适应电脑/平板/手机。Tailwind 用 sm:/md:/lg: 前缀一行搞定。
触摸友好
手机上按钮≥44px，间距留足。小程序有专用设计规范，注意可点击区域。
性能
小程序包体积有限制，图片要压缩。告诉 AI「优化加载速度」它会处理。
⚠️ 常见踩坑
- ❌ 只在电脑上看效果 — 必须手机上测！AI 生成的界面有时桌面端好看手机端崩。
- ❌ 一次生成十页 — 一页一页来，每页确认后再做下一页。一口吃不成胖子。
- ❌ 忽略空状态和加载态 — 数据没回来时显示什么？列表为空时提示什么？AI 不会主动考虑，你得说。
- ❌ 不学基础 CSS 概念 — 不用精通，但 padding/margin/flex/grid 要能看懂，AI 写的你得会改。
下一步
继续 →第六步：发布上线 — 让别人用上你的软件