大作业 2：现代前端组件库 + Trae 实战

用 Codex 实现

如果你准备用 Codex 完成这份前端大作业，建议让它先做“组件库顾问”和“页面拆分助手”：

先分析页面结构和组件复用关系
再推荐组件库、主题变量和状态管理方式
最后再进入逐页实现和视觉对齐

可直接使用：

text

请先根据这个前端作业目标输出：
1. 页面结构与组件树
2. 适合的组件库与主题方案
3. 哪些部分适合先做静态，再做交互
4. 最后的验收标准
先不要改代码

配套阅读：

图示：前端大作业更适合直接在编辑器里用 Codex 扩展处理组件树、样式细节和选区重写。

作业目标

这份作业强调的是“现代前端产品感”和“组件复用思维”，不是单纯做一堆页面。

你最终应该做出：

一套统一风格的页面
一组可复用的组件
一份清楚的主题变量或设计规则
一个可以展示在电脑和手机上的完整前端项目

适合的题目方向

校园活动展示与报名页
课程介绍官网
个人作品集站点
轻量管理面板
工具型 Web 应用前端

推荐交付结构

层级	需要交付什么
设计层	风格关键词、色板、页面结构
组件层	按钮、卡片、导航、表单、空状态
页面层	首页、列表页、详情页或表单页
工程层	目录结构、变量管理、响应式适配

推荐里程碑

先做风格板和页面结构
把高频组件抽出来
先完成静态页面，再做交互
再补手机端适配和细节状态
最后统一命名、组件文档和展示稿

验收标准

页面视觉是否统一
是否真的抽出了复用组件
页面结构是否清晰
手机端是否可用
学员能否说出“哪些是共用规则，哪些是页面特例”

推荐展示方式

先展示整套页面风格一致性
再切到组件视角，说明复用关系
最后讲 Codex 在重构组件和打磨样式时发挥了什么作用

常见卡点

只顾着做漂亮首页，没有组件体系
每个页面都手写一遍，后期不好维护
没有提前考虑手机端，最后被动修补