《前端 + AI 转型探索营》文档

Appearance

Q：不会编程也可以用 AI 工具生成应用，程序员和大众的区别在哪？

基本概念 ​

提示词是什么？

提示词 = 用 提示词技巧 表达 明确的需求

明确的需求 = 用 专业知识 探索 特定场景 下的 最佳实践

以 wuxia-comment 项目 举例：

  • 原始需求：用武侠故事情节为代码添加注释
  • 特定场景：注释生成场景
  • 探索最佳实践：
    • Q：注释和什么关联？
    • A：和代码逻辑关联
    • 得出结论：只需将代码逻辑与故事情节映射即可
    • 具体的映射实现细节交给模型实现

User Prompt

我的需求是“用武侠故事情节为代码添加注释”，我认为需求的最佳实践是“将代码逻辑与故事情节映射”。
请基于最佳实践给出完整实现步骤

“AI 辅助编码”的示例 ​

v0：vercel 推出的 AI 生成 Nextjs 组件的应用

v0 挑战赛的目的：培养“用专业知识明确需求”的能力

  • 原始需求：https://github.com/AI-FE/ai-demo-challenge/issues/2
  • 特定场景：简单 web 应用
  • 探索最佳实践：
    1. 常规思路：多模态大模型可以识别图片，让模型识别图片中的每个像素点，再用 DIV 复刻一遍，以此思路实现的示例
    2. 难点：当前最先进的模型也无法精确识别每一个像素点
    3. 最佳实践：AI 没法识别图片每个像素，但他能实现一个“能识别每个像素的工具”

最佳实践：实现一个“能识别每个像素的工具”，而不是靠模型自身识别每个像素

实现步骤：

  1. 保存图片
  2. 实现一个用 DIV 渲染像素图的工具
  3. 用这个工具渲染保存的图片

以此思路实现的示例

在前端开发领域明确需求 ​

  • 原始需求：老板想开发一个类似慕课网的在线教育平台
  • Q：特定场景是什么？
    • Q：是否有复杂课程交互场景？
    • A：MobX 的响应式编程模型更适合复杂交互的状态管理
    • Q：是否包含多条产品条线（课程、题库、直播、社区等）？
    • A：单体应用 → qiankun 微前端框架，可能需要 Zustand 这样更简洁轻量的状态管理方案
    • Q：是否有完善且规范的设计系统支持？
    • A：Tailwind CSS
    • Q：移动端用户比例占多少？是否需要考虑首屏性能
    • 元框架选型 React → Preact
  • 特定场景：有复杂课程交互场景、包含多条并行产品线、有设计系统支持的多端 web 项目
  • 最佳实践：AI 辅助下，技术栈为 Preact + Zustand + qiankun + Tailwind CSS 项目的最佳实践

“明确需求”本身也可以作为产品 ​

对于专业人士，“明确需求”是核心竞争力。

例子：copyCoder

注意：该产品仅做课程演示目的，不做推荐。课程录制期间该产品已从免费试用变为付费使用

CopyCoder 工作流程： ​

根据 B 站首页截图 获得如下提示词：

xml
<summary_title>
  创建详细组件时需满足以下要求：
  1. 对客户端组件使用 'use client' 指令
  2. 使用 Tailwind CSS 工具类实现响应式设计
  3. 使用 Lucide React 图标库（来自 lucide-react 包）。除非特别要求，否则不使用其他 UI 库
  4. 在适当的地方使用 picsum.photos 的库存照片，仅使用已知存在的有效 URL
  5. 配置 next.config.js 的 image remotePatterns 以启用 picsum.photos 的库存照片
  6. 创建包含所有页面必要导航项的根布局 layout.tsx
  7. 必须在正确位置实现导航元素项，即左侧边栏、顶部标题栏
  8. 准确实现必要的网格布局
  9. 遵循正确的导入实践：
  - 使用 @/ 路径别名
  - 保持组件导入的组织性
  - 用新的完整代码更新当前的 src/app/page.tsx
  - 不要忘记根路由(page.tsx)处理
  - 在停止之前必须完成整个提示内容

  视频内容平台仪表板与网格布局
</summary_title>

<image_analysis>

  1. 导航元素：
  - 顶部标题栏包含：搜索栏、用户档案、通知
  - 主导航栏包含：分类（游戏、娱乐、新闻等）
  - 次级导航包含：趋势、流行、最新


  2. 布局组件：
  - 标题栏高度：60px
  - 搜索栏宽度：240px
  - 视频缩略图卡片：280px × 156px
  - 桌面端采用4列网格布局
  - 网格项之间间距16px


  3. 内容部分：
  - 主横幅部分 (1140px × 320px)
  - 视频网格部分
  - 缩略图预览卡片包含：
  - 视频缩略图
  - 标题（最多2行）
  - 频道信息
  - 观看次数和时间戳
  - 时长标记


  4. 交互控件：
  - 带自动完成的搜索栏
  - 带活动状态的分类标签
  - 视频卡片的悬停状态
  - 点赞/分享按钮
  - 用户菜单下拉框


  5. 颜色：
  - 主要：#FF2B4C（红色强调）
  - 背景：#F4F4F4
  - 文本：#222222
  - 次要文本：#666666
  - 边框：#E5E5E5


  6. 网格/布局结构：
  - 容器最大宽度：1200px
  - 响应式网格：
  - 桌面端：4列
  - 平板端：3列
  - 移动端：1列
  - 外边距24px
  - 网格间隔16px
</image_analysis>

<development_planning>

  1. 项目结构：

src/
├── components/
│ ├── layout/
│ │ ├── Header
│ │ ├── Navigation
│ │ └── VideoGrid
│ ├── features/
│ │ ├── Search
│ │ ├── VideoCard
│ │ └── CategoryNav
│ └── shared/
├── assets/
├── styles/
├── hooks/
└── utils/

2. 主要功能：

- 无限滚动视频网格
- 搜索功能
- 分类筛选
- 视频预览卡片
- 响应式布局

3. 状态管理：

interface AppState {
├── videos: {
│   ├── items: Video[]
│   ├── loading: boolean
│   ├── currentPage: number
│   └── filter: FilterOptions
├── search: {
│   ├── query: string
│   ├── results: SearchResult[]
│   └── loading: boolean
├── }
}

4. 路由：

const routes = [
├── '/',
├── '/category/:id',
├── '/search',
└── '/video/:id'
]

5. 组件架构：

- VideoGrid (容器)
  ├── VideoCard (展示型)
  ├── CategoryNav (容器)
  ├── SearchBar (容器)
  └── Pagination (展示型)

6. 响应式断点：

$breakpoints: (
  ├── "sm": "320px",
  ├── "md": "768px",
  ├── "lg": "1024px",
  └── "xl": "1200px"
);

</development_planning>

提示词对应思维导图：

画板

后续拆分的需求：页面结构分析

xml
Next.js 基于导航菜单项的路由结构（不包括主路由）。确保用组件包装所有路由：

路由：
- /search-bar
- /user-profile
- /notifications
- /categories-gaming
- /entertainment
- /news
- /etc
- /trending
- /popular
- /latest

页面实现：
/search-bar:
核心目的：使用户能够通过过滤器和建议搜索站点内容
关键组件：
- 带自动完成的搜索输入
- 过滤选项（日期、类型、类别）
- 带无限滚动的搜索结果网格
- 最近搜索历史
布局结构：
- 顶部固定搜索栏
- 左侧过滤面板（移动端可折叠）
- 带响应式网格的主要结果区域

/user-profile:
核心目的：显示和管理用户信息和活动
关键组件：
- 带头像和统计数据的个人资料头部
- 活动信息流
- 历史记录
- 账户设置
- 已保存项目
布局结构：
- 个人资料头部横幅
- 头部下方的导航标签
- 带侧边栏的主要内容区域

/notifications:
核心目的：显示用户通知和提醒
关键组件：
- 带类别的通知列表
- 已读/未读状态
- 操作按钮
- 过滤选项
布局结构：
- 顶部类别栏
- 可滚动通知列表
- 快速操作侧边栏

/categories-gaming:
核心目的：显示游戏相关内容和子类别
关键组件：
- 游戏子类别导航
- 精选游戏轮播
- 热门直播/内容
- 相关讨论
布局结构：
- 带精选内容的主要部分
- 子类别的网格布局
- 带热门项目的侧边栏

/entertainment:
核心目的：展示娱乐内容和新闻
关键组件：
- 媒体轮播
- 新闻信息流
- 名人动态
- 即将发布
布局结构：
- 精选滑块
- 多列内容网格
- 带亮点的侧边栏

/news:
核心目的：展示各类别的最新新闻
关键组件：
- 突发新闻横幅
- 新闻类别标签
- 文章预览
- 分享按钮
布局结构：
- 头条新闻部分
- 主要新闻网格
- 快速链接侧边栏

/trending:
核心目的：显示当前流行内容
关键组件：
- 热门话题列表
- 实时更新
- 类别过滤器
- 分享功能
布局结构：
- 趋势图表
- 内容卡片网格
- 趋势侧边栏

/popular:
核心目的：按指标显示最受欢迎的内容
关键组件：
- 人气指标
- 时间段选择器
- 内容预览
- 交互式图表
布局结构：
- 统计概览
- 热门内容网格
- 分析侧边栏

/latest:
核心目的：显示最新内容
关键组件：
- 实时信息流
- 类别过滤器
- 排序选项
- 快速查看预览
布局结构：
- 新内容提醒横幅
- 时间顺序信息流
- 快速过滤侧边栏

布局：
MainLayout：
- 适用路由：所有路由
- 核心组件：
- 带导航的页眉
- 页脚
- 侧边栏
- 内容区域
- 响应式行为：
- 移动端可折叠侧边栏
- 小屏幕上的堆叠布局
- 流动容器宽度

ContentLayout：
- 适用路由：/categories-*, /entertainment, /news
- 核心组件：
- 类别导航
- 内容区域
- 相关项目侧边栏
- 响应式行为：
- 网格根据屏幕大小调整列数
- 侧边栏在移动端移至底部
- 小屏幕上可滚动的类别导航

FeedLayout：
- 适用路由：/trending, /popular, /latest
- 核心组件：
- 信息流头部
- 内容流
- 过滤面板
- 响应式行为：
- 移动端单列
- 小屏幕上的浮动过滤按钮
- 支持无限滚动

启示 ​

细分场景的完整提示词工程流程终将交给 AI 实现，这既是机遇也是挑战：

  • 挑战：传统固定场景的前端业务开发（比如后台管理系统）会被 AI 取代
  • 机遇：这也是新的职业发展机遇，实战篇最终的成果就是实现细分场景的完整提示词工程流程（生成私有业务组件）
Copyright© 2020-2025 卡颂
京ICP备20028082号-1