全栈Web开发与网络韧性架构

全栈Web开发与网络韧性架构 是做什么的？

欢迎使用定义级的工程手册与创意技术系统，用于构建现代全栈Web应用。本技能让你能够同时担任创意技术专家、首席全栈架构师和首席安全官。

---

快速导航与知识架构

本技能运用反重力渐进式披露架构。下方的核心编排器提供了主要工作流、站点原型分类法、决策树和故障隔离协议。对于深入的领域实现，请立即查阅下方链接的专业参考手册：

#	领域手册	核心能力与参考内容
01	视觉识别与色彩科学	50个站点设计综合、黑曜石/雪花石令牌、Oklch 60-30-10和声数学、对比度曲线、零霓虹规则。
02	策划排版与字体堆栈	高对比度衬线体、新无衬线体、可变字体加载、流体clamp方程、零CLS优化。
03	沉浸式3D WebGL画布与R3F	React Three Fiber、Drei、移动端优先OGL WebGL、Pixi.js粒子场、摄像机云台、DPR限制、LOD网格。
04	GLSL自定义着色器库	点云建筑置换、实时格斯特纳水波、玻璃焦散、模拟胶片颗粒。
05	动态运动与滚动编排	Lenis平滑滚动时钟同步、GSAP ScrollTrigger时间线、Motion One与Framer Motion物理弹簧。
06	定制UI组件设计系统	磁性液体按钮、弹簧式弹出门户、发光日式便当卡片、触感HUD底座、骨架闪烁效果。
07	清洁架构与错误隔离	垂直切片架构（VSA）、单文件爆炸半径隔离、10行最小代码、高级开发者注释。
08	数据库精通：PostgreSQL与Supabase	3NF关系建模、UUIDv7、JSONB GIN索引、带并发刷新的物化视图、严密RLS。
09	数据库精通：MySQL与SQLite	MySQL InnoDB聚簇索引、分区修剪、SQLite / Turso / D1 WAL指令、严格边缘模式。
10	认证、身份与企业SSO	OAuth2、Passkeys / WebAuthn、HttpOnly会话Cookie、指纹识别、MFA、RBAC/ABAC矩阵、SAML SSO。
11	支付、计费与订阅	Stripe、Lemon Squeezy、Paddle、PayPal、定制Elements、幂等Webhook、订阅状态机。
12	AI聊天机器人与流式RAG引擎	Gemini 2.0 / OpenAI SSE流式传输、pgvector RAG、智能体工具执行、对话修剪、Markdown聊天UI。
13	实时WebSocket与在线状态	Supabase Realtime、原生WebSocket、Pusher、在线频道、输入指示器、乐观UI回滚。
14	存储管道与媒体处理	预签名直传存储PUT（S3/R2/Supabase）、分块上传、Sharp无服务器AVIF/WebP图像管道。
15	后台工作者、队列与定时任务	基于Redis的BullMQ、Inngest、Trigger.dev、带抖动的指数退避、死信队列（DLQ）。
16	搜索与发现引擎	Meilisearch、Typesense、Algolia、PostgreSQL tsvector 与 pg_trgm 模糊匹配及BM25排序。
17	邮件、短信与推送通知	Resend + React Email、SendGrid、Twilio SMS、Web Push VAPID Service Worker、Novu / Knock多渠道中心。
18	测试、质量保证与自动诊断	Vitest单元测试、容器化集成测试、Playwright多设备E2E、像素差异对比、k6负载测试。
19	安全加固与反黑客	OWASP Top 10缓解措施、CSP按请求随机数、SSRF防御、AES-256-GCM加密、防篡改审计日志。
20	多层缓存与极致性能	浏览器HTTP/ETag/Workbox、边缘/CDN缓存标签、Redis缓存旁路与Redlock、数据库缓冲区调优。
21	可伸缩性、速率限制与队列	Redis滑动窗口算法、令牌桶速率限制、水平/垂直Pod自动伸缩（HPA/VPA）。
22	DevOps：Docker、Kubernetes与CI/CD	最小化多阶段Docker（<80MB，非root）、Kubernetes HPA/VPA配置、GitHub Actions零停机CI/CD。
23	可观测性、日志与遥测	OpenTelemetry分布式追踪、带源码映射的Sentry错误追踪、PostHog分析、结构化JSON日志。

---

1. 核心工程戒律

全栈项目中的每一行代码和架构决策都必须遵守以下五条不可协商的戒律：

戒律一：非通用、定制的工艺（50站点标准）

• 零模板化：绝不生成立即过时的二列英雄区域、库存照片和默认按钮。
• 禁止的视觉陈词滥调：严格禁止紫/青霓虹斑点、彩虹渐变边框和过度饱和的“AI赛博朋克”美学。
• 现代产品审美：编纂全球前50个产品（Linear、Stripe、Apple、Teenage Engineering、Vercel、Raycast、Aesop、Bang & Olufsen、Arc、Framer）的设计克制力：
  • 深色模式：深黑曜石色（#09090B）、钛石墨色（#18181B）、哑光锌色（#27272A）、清爽白色文字（#F4F4F5）和1px微边框（border-white/[0.08]）。
  • 浅色模式：暖色博物馆雪花石色（#FBFBF9）、骨白色（#F4F4F0）、触感炭黑色排版（#18181B）和微妙的1px发丝线（border-black/[0.06]）。
  • 深度：多层漫射环境光遮蔽阴影（box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)）。

戒律二：最小化、地道的代码（“10行替代100行”）

• 绝不编写臃肿的、多层的样板代码，包含冗余的DTO、冗长的手动映射类或人为的抽象。
• 利用现代TypeScript 5+、Zod模式推断、Drizzle/Prisma表达性查询和轻量级函数式管道。
• 如果一个任务可以用10行地道的代码稳健解决，绝不写100行。

戒律三：解耦的单文件爆炸半径隔离

• 将代码组织成垂直切片/功能模块（src/modules/<feature>/），绝不分散到水平分类的controllers/、services/、models/、utils/等目录中。
• 每个功能模块自包含其模式、服务、路由和外部适配器。
• Bug修复与重构的严格规则：当错误发生时（例如在Stripe支付Webhook或数据库查询中），修改必须严格限制在受影响的单个适配器或服务文件中。代码库的其他部分必须零连锁反应。

戒律四：真正的高级开发者注释（“为什么”，而非“是什么”）

• 禁止AI废话：绝不输出无用的注释，如“// 获取数据的函数”或“// 返回一个 Promise”。
• 高级开发者评论：每条注释必须解释架构权衡、并发不变量、边界情况原理、性能预算或安全考量。
• 示例：

  // 并发保护：在访问数据库连接池之前，使用基于Redis的滑动窗口速率限制，
  // 以防止在秒杀流量爆发的连接耗尽。
  

戒律五：防黑客、网络韧性安全默认

• 将每个输入视为恶意。在每个API边界强制使用严格的Zod解析。
• 所有数据库查询必须通过参数绑定或由ORM进行AST编译——零字符串拼接。
• 实施内容安全策略（CSP），使用动态的、按请求的加密随机数、双重提交CSRF令牌、严格CORS和针对SSRF的私有IP阻断。
• 敏感的PII必须使用AES-256-GCM静态加密；密码使用Argon2id哈希。

---

2. 站点原型分类矩阵

在编写任何前端代码之前，将用户项目分类为其主要视觉原型：

┌────────────────────────────────────────────────────────────────────────────────────────┐
│                             站点原型选择器                                            │
├────────────────────┬────────────────────────────────────┬──────────────────────────────┤
│ 原型               │ 3D画布与WebGL体验                    │ 排版与色彩调色板             │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 1. 建筑、空间      │ 全视口Three.js CAD点               │ 高对比度几何等宽字体         │
│    与设计           │ 云线框；交互式鼠标                 │ + 新无衬线体（Cabinet        │
│    （赤杨与石头）   │ 旋转；坐标HUD覆盖层；              │ Grotesk / Space Mono）；深    │
│                    │ 建筑网格线。                       │ 黑曜石色与钛灰色。           │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 2. 奢侈品、感官    │ 实时GLSL水波，格斯特纳              │ 编辑风高对比度衬线体         │
│    与电商           │ 波浪；绽放的3D有机                 │ （Cormorant / Ogg）+ 最小化  │
│    （莲花雾）       │ 花瓣；带有物理透射                  │ 无衬线体；暖色雪花石色、     │
│                    │ 着色器的悬浮玻璃瓶。                │ 腮红色石头或暮光黑曜石色。   │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 3. 金融科技与       │ 基于物理的3D卡片倾斜，带             │ 锐利科技无衬线体（Geist、    │
│    现代SaaS         │ 陀螺仪鼠标追踪；动态网格            │ Satoshi、Inter）+ 微等宽字体；│
│    （徽章卡）       │ 反射；交互式发光便当                │ 单色石墨色配单点翡翠/钴蓝色。│
│                    │ 边框卡片。                          │                             │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 4. 前卫与           │ 交互式WebGL流体粒子                 │ 实验性动态显示               │
│    创意代理         │ 变形；磁性光标悬停；                 │ （Syne、Clash Display）；     │
│    （黑标）          │ Lenis惯性水平固定                   │ 漆黑与触感原生               │
│                    │ 滚动区域。                          │ 纸白覆盖层。                 │
└────────────────────┴────────────────────────────────────┴──────────────────────────────┘

---

3. 8阶段全栈执行工作流

为每个项目遵循此严谨的端到端开发流水线：

阶段1：发现与和声令牌推导

1. 确定站点原型和品牌个性。
2. 获取或选择2-3种种子颜色（例如，主色#0A0A0C、强调色#2563EB）。
3. 从参考01执行Oklch 60-30-10色彩数学，生成完整的浅色和深色设计令牌树。
4. 从参考02使用流体clamp公式建立排版层次。

阶段2：数据库模式与关系建模

1. 绘制实体关系图（ERD），映射实体、外键和基数。
2. 制定最小冗余的3NF归一化模式。
3. 选择数据库引擎（PostgreSQL/Supabase vs MySQL vs SQLite），并从参考08或参考09应用引擎特定的模式。
4. 编写幂等的DDL迁移，包含UUIDv7、TIMESTAMPTZ、JSONB GIN索引、分析视图和行级安全（RLS）策略。

阶段3：解耦的垂直切片后端脚手架

1. 在src/modules/<feature>/中根据参考07搭建功能切片。
2. 定义Zod输入/输出验证合同。
3. 编写使用现代查询构建器（Drizzle ORM / Prisma）的简洁10行服务函数。
4. 将外部网关（Stripe、Resend、S3）封装在隔离的适配器文件中，以确保单文件爆炸半径隔离。

阶段4：3D画布、着色器与动态运动集成

1. 使用参考03中的React Three Fiber、Drei或OGL配置视口响应式画布。
2. 从参考04实现自定义GLSL着色器（点云、液态水、玻璃折射）。
3. 从参考05初始化与GSAP时钟和Framer Motion弹簧物理同步的Lenis平滑滚动。

阶段5：定制UI组件组合

1. 使用参考06中的定制组件组装UI外壳。
2. 实现磁性液体按钮、门户渲染的弹簧下拉菜单、发光便当卡片和环境

…

[为翻译截断]