STAGE 03 / 前端开发
前端开发阶段 / 把设计稿翻译成可访问的网页
静态切图、响应式适配、交互动效落地、后台对接、性能优化，10-20 天交付可访问的测试地址，设计师全程监督还原度。
DEV APPROACH / 开发方法
1:1 还原设计，性能与体验并重
前端开发不是简单地把设计稿"画"成网页，而是要在 1:1 还原视觉的同时，保证加载速度、交互流畅度与代码可维护性。我们坚持手写语义化 HTML，不用现成框架堆砌，让官网轻盈又干净。
每个项目都遵循芭彼小镇前端工程规范，从命名约定到组件拆分都有统一标准，方便后续迭代与团队接手。开发过程中设计师每日走查，确保像素级还原。
- 手写语义化 HTML5 + CSS3，无冗余框架
- 移动端优先的响应式适配
- GSAP / 原生 JS 实现交互动效
- 首屏加载控制在 1.5s 以内
- 代码评审 + 设计师每日走查
DEV SPEC / 开发规范
我们的前端工程规范要点
以下是芭彼小镇前端团队长期沉淀的工程规范核心，每条都对应实际项目经验。
06 RULES / 工程标准
01
语义化结构
header / nav / main / section / article / footer 语义化标签优先，提升 SEO 与无障碍体验。
02
响应式优先
移动端优先断点策略，375 / 768 / 1080 / 1440 四档适配，确保各尺寸下视觉一致。
03
性能预算
首屏 LCP < 1.5s，图片懒加载 + WebP，CSS/JS 压缩，关键资源内联，拒绝臃肿依赖。
04
动效有度
动效服务于叙事与引导，不喧宾夺主，尊重 prefers-reduced-motion 偏好设置。
05
安全加固
HTTPS 强制、XSS 防护、表单校验、敏感信息脱敏，后台接口鉴权，定期漏洞扫描。
06
组件化拆分
复用模块抽成组件，统一命名约定与目录结构，方便后续迭代与多人协作接手。