前端与建站
前端起步组合：组件、文档、预览与部署
先把「组件怎么展示、接口怎么连、怎么部署」三件事固定下来，再挑框架。顺序反了会在迁移时付出双倍成本。
前端选型最容易被「最新」带偏。这份清单按工程链路排序：先有可浏览的组件文档与预览，再有数据层与部署，最后才是框架偏好。每一项都能单独替换。
本期入选（6）
- storybook · 深度导读卡 ¥3.9MIT · TypeScript · ★91.4k
组件文档与状态预览，先让设计和开发看到同一套组件。
- Front-End-Checklist · 深度导读卡 ¥3.9MIT · MDX · ★74.6k
上线前检查清单，用来补齐可访问性、性能与 SEO 的遗漏项。
- supabase · 深度导读卡 ¥3.9Apache-2.0 · TypeScript · ★114.5k
数据库与鉴权一体的数据层，适合先把登录和表结构跑通。
- coolify · 深度导读卡 ¥2.9Apache-2.0 · PHP · ★65.6k
自托管部署面板，适合需要把预览环境也纳入同一套流程的团队。
- onlook · 深度导读卡 ¥3.9Apache-2.0 · TypeScript · ★27.1k
可视化编辑与代码并存，适合在已有代码库上做界面迭代。
- ionic-framework · 深度导读卡 ¥2.9MIT · TypeScript · ★52.7k
一套代码覆盖 Web 与移动外壳，适合先验证需求再决定是否原生重写。
先固定接口契约
前后端并行开发的前提是接口字段与错误码先定稿。否则组件做完还要因字段改名返工。
预览环境要和生产一致
预览环境与生产的差异越大，「本地没问题」就越没有说服力。至少保证同一套构建命令与依赖版本。
性能预算写进流程
给首屏体积和关键指标设上限，并在每次合并时检查。没有预算的性能优化，会在下一次需求里被抵消。
常见坑
常见坑：组件与业务强耦合无法复用、预览环境连生产数据库、部署脚本只在某个人机器上能跑、忽略移动端真实设备测试。
替代方案
如果只是单页展示站，静态生成 + CDN 就够了，引入完整组件体系反而是负担。