フロントエンドとサイト構築
フロントエンド始動セット：コンポーネント・ドキュメント・プレビュー・配備
コンポーネント表示・API 接続・配備の3点を先に固定し、その後フレームワークを選ぶ。
Frontend choices drift toward whatever is newest. This list follows the engineering chain: browsable component docs and previews first, then the data layer and deployment, and only then framework preference. Every item is independently replaceable.
Shortlist（6）
- storybook · 深度导读卡 ¥3.9MIT · TypeScript · ★91.4k
Component docs and state previews so design and engineering see the same components.
- Front-End-Checklist · 深度导读卡 ¥3.9MIT · MDX · ★74.6k
A pre-launch checklist covering accessibility, performance and SEO gaps.
- supabase · 深度导读卡 ¥3.9Apache-2.0 · TypeScript · ★114.5k
A combined database and auth layer, good for getting login and schema working first.
- coolify · 深度导读卡 ¥2.9Apache-2.0 · PHP · ★65.6k
A self-hosted deployment panel for teams that want preview environments in the same flow.
- onlook · 深度导读卡 ¥3.9Apache-2.0 · TypeScript · ★27.1k
Visual editing alongside code, for iterating interfaces on an existing codebase.
- ionic-framework · 深度导读卡 ¥2.9MIT · TypeScript · ★52.7k
One codebase across web and mobile shells, useful for validating demand before native rewrites.
Fix the API contract first
Parallel frontend and backend work requires final field names and error codes. Otherwise finished components get reworked when fields rename.
Previews must match production
The larger the gap between preview and production, the less 'works locally' means. At minimum, share build commands and dependency versions.
Put a performance budget in the pipeline
Set ceilings for initial payload and key metrics, checked on every merge. Optimization without a budget is erased by the next feature.
Common pitfalls
Common traps: components too coupled to reuse, previews hitting production databases, deploy scripts that run on one machine only, and skipping real-device mobile testing.
Alternatives
For a single marketing page, static generation plus CDN suffices; a full component system becomes a burden.