从 JS 时钟到 AI 落地页：我开始理解前端开发真正的样子
今天的学习内容很多，但它们之间其实有一条很清晰的主线：
我开始慢慢理解，前端开发不只是“写页面”，而是在学习如何构建产品、组织结构，以及如何和 AI 协作开发。
一、JS Clock：我第一次真正理解前端三件套
今天先学习了一个经典案例：
JS and CSS Clock（时钟案例）
一开始我以为这只是一个简单练手项目。
但真正做下来之后，我发现它的重点根本不是“做时钟”，而是：
理解前端开发里的职责分离。
HTML：负责结构
HTML 更像页面骨架。
比如：
<div class="clock">
<div class="clock-face">
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
</div>
</div>
页面本质上就是：
- 盒子套盒子
- 外层包裹内层
- 形成树状结构
这一刻我开始理解：
HTML 的作用不是“变好看”，而是告诉浏览器页面里有什么。
Emmet 快捷写法真的很爽
今天还学到了：
.clock>.clock-face>(.hand)*3
可以快速生成整个 HTML 结构。
这里面其实已经包含了：
- 类名选择器
- 子元素关系
- 批量生成
- HTML 结构逻辑
以前我只会复制代码。
现在开始慢慢理解：
页面结构本身也是一种设计。
CSS：负责页面颜值
HTML 只是骨架。
真正让页面“像一个时钟”的，是 CSS。
比如：
- 圆形表盘
- 指针
- 居中布局
- 阴影
- 动画
- 配色
这些都属于 CSS。
所以我开始理解：
| 技术 | 职责 |
|---|---|
| HTML | 页面结构 |
| CSS | 页面样式 |
| JavaScript | 页面行为 |
这就是前端的“三权分立”。
JavaScript：让页面活起来
时钟里的秒针不会自己转。
JS 会：
- 获取当前时间
- 计算角度
- 更新旋转
- 不断刷新
于是页面就动起来了。
这时候我第一次有一种感觉：
JavaScript 像是在给页面注入灵魂。
二、我开始理解页面性能为什么重要
今天还学到了：
CSS 为什么放 head
因为浏览器越早拿到 CSS：
- 页面越早渲染
- 用户越快看到内容
而 JS 一般放 body 后面。
因为 script 会阻塞页面解析。
所以真实项目里的思路其实是：
先让用户看到页面，再给页面增加行为。
这让我开始意识到：
前端不仅是“能显示”
还包括：
- 页面性能
- 用户体验
- 加载速度
- 渲染逻辑
甚至有一句话让我印象特别深：
网页每快 0.1 秒，用户满意度都会提升。
三、模块化思想开始出现了
今天还有一个我以前没注意过的东西：
一个文件只负责一个功能
比如：
index.html
style.css
script.js
分别负责：
- 结构
- 样式
- 行为
这种思想其实就是：
模块化
以前我觉得拆文件很麻烦。
但现在开始感觉：
- 更清晰
- 更方便维护
- 更适合多人协作
- 更容易扩展
这其实已经是工程化的基础了。
四、我开始尝试用 Prompt 生成真实网页
今天除了学习原生前端之外，我还第一次认真写了一份：
AI 落地页 Prompt
目标是生成一个：
Foodiez 外卖 App 营销落地页
而且我不是简单说：
“帮我生成一个网页”。
而是开始真正拆解需求。
我开始学会描述页面
这次 Prompt 里包含了：
技术栈
- React
- TypeScript
- Tailwind CSS
- Framer Motion
风格定义
- 干净
- 现代
- 高级感
- 橙色主色调
- 大圆角
- 柔和阴影
- 外卖产品视觉风格
页面结构
我甚至开始明确页面分区：
- Navbar
- Hero Section
- 用户评价
- 使用流程
- 功能亮点
- App 展示区
- 下载 CTA
- Footer
动画与交互
包括：
- Scroll 动画
- Hover 效果
- 漂浮元素
- 微交互
响应式与无障碍
还要求：
- Mobile-first
- 平板适配
- Alt 文本
- Focus 状态
- WCAG 色彩标准
五、我第一次意识到 Prompt 工程的本质
以前我觉得 Prompt 就是：
“问 AI 的一句话”。
但现在我发现：
Prompt 本质上是在描述需求。
它其实已经很像：
- 产品需求文档
- UI 设计说明
- 页面结构设计
- 技术方案
也就是说：
AI 编程时代，并不是不需要前端知识。
反而：
越懂前端，越知道怎么和 AI 沟通。
六、我开始搭建自己的 AI 编程工作流
今天我还做了一件让我很兴奋的事情：
在 VSCode 里接入 Claude Code
而底层使用的是：
DeepSeek 模型
这让我第一次感觉：
AI 已经开始真正进入开发工具链了。
开发方式正在变化
以前开发可能是：
- 查文档
- 自己敲代码
- 自己调 Bug
但现在开始变成：
- 自己描述需求
- AI 生成结构
- 自己检查修改
- 再继续迭代
这种感觉很像：
从“纯手工开发”进入“人机协作开发”。
七、我现在对前端学习的理解
今天这一整套学习串起来之后，我开始感觉：
前端已经不只是学语法了。
而是在学习：
- 如何组织页面
- 如何拆分组件
- 如何设计用户体验
- 如何做工程化
- 如何描述需求
- 如何与 AI 协作开发
从：
- JS 时钟案例
- HTML/CSS/JS 职责分离
- 模块化思想
- Prompt 生成 Foodiez 落地页
- VSCode 接入 Claude Code
- 使用 DeepSeek 模型
这些内容串起来之后，我第一次感觉：
我开始慢慢接触到 AI 开发时代真正的工作流了。
