一个前端一天可以做多少页面?

一个前端一天能做多少页面?这个问题没有固定答案,但在真实项目中,绝大多数情况下是 0.5–3 个页面/天(中等复杂度),极端情况下能到 5–10+ 个(纯切图/高度重复/用 AI 工具)。

下面按 2025–2026 年国内互联网/外包/大厂/中小厂的真实反馈和观察,给你一个务实的分层对比表(基于知乎、掘金、V2EX、Reddit、脉脉等高赞讨论共识):

页面类型 & 复杂度典型日完成量(经验中级前端,8小时有效编码)影响因素 & 真实案例备注对应场景 / 项目类型
极简静态页(纯 HTML+CSS,无交互)3–8 个复制粘贴模板 + 改颜色/文字,AI 工具(如 v0、Cursor)可 10+ 个外包低价站、营销落地页批量
简单业务页(表单、列表、Tab切换)2–4 个有基本交互 + 响应式 + 调接口,设计师给好设计稿中后台管理系统、H5 活动页
中等复杂度页(复杂布局、动画、组件封装)1–2 个涉及自定义组件、状态管理、性能优化、适配多端官网、电商详情页、小程序主页面
高复杂度页(重交互、3D、WebGL、大屏、复杂表单校验)0.3–1 个(甚至 2–3 天/页)需要写大量 JS 逻辑、调试浏览器兼容、像素级还原、跟设计师反复对齐营销 H5、数据可视化大屏、复杂 SaaS 页面
使用 AI 工具加速后(Cursor / v0 / Claude / Windsurf)+50% ~ +300%(1 天干传统 3–10 天活)先让 AI 生成布局/组件,再手动修交互/逻辑/性能,2025–2026 年已成主流提效方式创业公司/个人项目/快速原型

更现实的“一天工作量”拆解(中级前端,正常 8 小时)

  • 纯切图/布局阶段:2–5 个页面(Tailwind / UnoCSS / Shadcn 等现代工具下更快)
  • 加交互 + 调接口 + 联调:通常砍一半,只剩 1–2.5 个
  • 像素级还原 + 动效 + 兼容性 + 测试:再砍一半,0.5–1.5 个
  • 开会/需求澄清/改稿/写文档/ code review:有效编码时间经常只剩 4–6 小时 → 再砍 30–50%

所以大厂/中大型项目里,一个前端一个月交付 15–30 个页面(中等偏上复杂度)已经算正常偏快节奏了。
外包/小厂/创业公司如果赶工期,经常 1 天 3–5 个,但质量和可维护性通常打折。

影响“一天多少页”的核心变量(排序从高到低)

  1. 设计稿质量 & 复杂度 → 设计师给的稿越乱/细节越多,前端越慢
  2. 交互/动效需求 → 简单 Tab vs 复杂拖拽/粒子动画/3D 差 5–10 倍时间
  3. 是否需要像素级还原 → 要像素级 vs “大概像就行” 差 2–4 倍
  4. 框架/工具链 → Vue/React + Tailwind + Shadcn vs 纯原生 CSS/JS 差 2–3 倍
  5. AI 辅助程度 → 2026 年用好 Cursor/v0 的前端,效率轻松翻倍甚至更多
  6. 经验 & 专注度 → 5 年+ 老手 vs 1 年新人,速度差 2–3 倍
  7. 联调/后端接口稳定性 → 接口经常变/没 mock,前端时间浪费在等和改上

一句话总结(最扎心的版本):

一个正常业务项目里,中级前端一天真正“高质量交付”的页面数,通常是 1–2 个(中等复杂度)。
吹一天 5–10 个的,要么是极简页/批量复制、要么是 AI 神助攻、要么是质量/可维护性不要了。

你现在问这个,是自己被 leader 压 KPI 了,还是在评估某个项目的工作量?
或者想知道用 AI 工具后能提效到什么程度?说说你的具体情况(技术栈、页面类型、公司类型),我可以给你更针对性的估算~

Read more

【前端进阶之旅】项目实战:使用 three.js+vue3+ts 完成 VR 全景看房应用

【前端进阶之旅】项目实战:使用 three.js+vue3+ts 完成 VR 全景看房应用

文章目录 * 前言 * 一、项目概述与技术栈选择 * 1. 项目需求 * 2. 技术栈选择 * 二、项目核心实现步骤 * 1. 基础环境搭建(Vue3 + Three.js 初始化) * 2. 全景房间模型实现(Room 类) * 3. 房间切换交互(PositionSprite 类) * 4. 物品信息提示(TooltipSprite + 悬浮交互) * 4.1 提示点精灵(TooltipSprite) * 4.2 悬浮显示 Tooltip * 5. 交互体验优化 * 5.1 鼠标拖拽旋转视角 * 5.2 窗口自适应 * 三、功能扩展与优化方向 * 四、总结 前言 在房地产、

Microi吾码:开源低代码,微服务开发的利器

Microi吾码:开源低代码,微服务开发的利器

前言 在微服务架构的应用中,服务的灵活性和可扩展性至关重要。Microi吾码作为一个高效的微服务框架,凭借其轻量级、可插拔的特性,已经成为开发者构建分布式应用的首选工具。除了基础的微服务开发功能外,Microi吾码还提供了丰富的扩展功能,其中表单引擎是一个重要亮点。本篇博客将详细介绍Microi吾码的特点,以及如何使用其表单引擎和其他实用功能。 一. Microi吾码简介 Microi吾码是一个基于Spring Boot构建的微服务框架,致力于为开发者提供简单、灵活的解决方案,帮助他们高效构建分布式应用。它整合了常用的微服务功能,如服务注册与发现、负载均衡、熔断器、API网关、配置中心等,使得开发者无需从零开始构建基础设施,从而专注于业务逻辑。 1.1 核心特点 Microi吾码的核心特点: * 轻量级:基于Spring Boot,极大地简化了项目配置和开发流程。 * 高度可扩展:提供丰富的插件支持,可以根据需要定制功能。 * 开箱即用:内置常见的微服务功能,减少了开发者的重复工作。 * 开发友好:支持热部署和自动化构建,提升开发效率。 1.2 功能介绍

把 AI 小助手接入企业微信:用一个回调接口做群聊机器人实战篇

你也许已经有了一个「看起来还挺像样」的 AI 小助手服务,比如: * 有 HTTP 接口 /v1/chat; * 能识别不同 Skill(待办、日报、FAQ 等); * 甚至已经有网页版前端。 但现实是:同事们每天真正打开的是企业微信,很少会专门去打开一个新网页跟机器人聊天。 这篇文章就做一件很实用的小事: 在不动你现有 AI 服务核心逻辑的前提下, 用一个企业微信“回调接口”, 把它变成「群聊里的 @ 机器人」。 一、整体思路:后端不重写,只加一层「翻译器」 假设你现在的 AI 服务长这样: * 接口:POST /v1/chat 返回: { "answer": "上午开会,下午写代码……"

AI绘画报错

提示输出验证失败:CheckpointLoaderSimple: - 值不在列表中:ckpt_name: 'v1-5-pruned-emaonly-fp16.safetensors' 不在 ['anything-v5-PrtRE.safetensors'] 中 模型文件夹里面没模型 这是官方链接:v1-5-pruned-emaonly.safetensors https://huggingface.co/runwayml/stable-diffusion-v1-5/tree/main 点击同一行的小下载箭头。然后把文件放在:models/checkpoints文件夹里 你还需要标准的VAE文件,也就是:vae-ft-mse-840000-ema-pruned.safetensors https://huggingface.co/stabilityai/sd-vae-ft-mse-original/tree/main 这个文件放在:models/vae文件夹里 现在你已经拥有运行所需的一切了。慢慢来。你最初生成的图片会很糟糕。但是继续尝试,很快你就能得到很棒的结果。