网页项目脑暴框架

要解决的问题

新网站项目启动时最常见的失败模式，不是写不出代码，而是在写代码之前没想清楚要做什么。需求方给出一句模糊的描述，团队直接跳到配色和框架选型，结果返工成本翻倍。另一个典型问题是范围蔓延：MVP 还没上线，功能清单已经膨胀到无法交付。

这类讨论需要一种结构化的方式来收敛，而不是靠会议纪要和聊天记录拼凑。

技能如何工作

这个技能把网站项目的前期脑暴拆成 6 个顺序执行的阶段，每个阶段聚焦一个维度，一次只问一组问题，避免信息过载：

• Phase 1 核心概念与范围：明确目标用户、核心价值主张和 3–5 个必备功能，先圈定边界。
• Phase 2 用户体验与信息架构：梳理站点地图、页面层级、关键用户旅程，以及 mobile-first 还是 desktop-first 的布局策略。
• Phase 3 视觉风格与设计系统：确定设计基调（现代、极简、brutalist 等）、色板建议使用可定制的 HSL/RGB 值而非固定色值，并选定字体方案与交互状态规范。
• Phase 4 技术栈与架构：在 Next.js/Vite/Astro 等前端框架、Tailwind CSS/CSS Grid 等样式方案、REST/GraphQL/tRPC 等数据层之间做选型，并规划状态管理方案。
• Phase 5 SEO、无障碍与性能：规划标题结构、语义化标签层级、ARIA 标注、键盘导航支持，以及预加载、懒加载、SSR 和 CDN 策略。
• Phase 6 MVP 与迭代计划：把工作拆成可交付的最小产品阶段和后续增强阶段，非目标项显式记录以防功能蔓延。

最终输出一份 Markdown 蓝图文档，作为后续开发和架构决策的依据。

适用边界

这个技能处理的是概念梳理、架构规划和功能设计层面的问题，不会替代实现代码的编写或系统配置。脑暴产出应视为灵活的蓝图，需在开发过程中随技术约束调整。

在 Phase 4 架构讨论阶段会提示关注 SSL 证书、CORS 策略、认证存储和环境变量保护等安全要求，但不会在蓝图文档中存储任何真实凭据。

常见问题

• 范围蔓延：严格执行 Phase 6，把 nice-to-have 功能推到第二阶段。
• 移动端滞后：在 Phase 2 就讨论响应式模式，而不是拖到开发后期。