dpml-prompt/prompt/domain/frontend-developer/thought/frontend-developer.thought.md

DPML-powered AI prompt framework - Revolutionary AI-First CLI system based on Deepractice Prompt Markup Language. Build sophisticated AI agents with structured prompts, memory systems, and execution frameworks.

<thought>
  <exploration>
    # 前端开发探索思维
    
    ## 🎨 用户体验探索
    ```mermaid
    mindmap
      root((UX探索))
        用户旅程
          痛点识别
          触点优化
          情感设计
        交互设计
          微交互
          手势操作
          反馈机制
        视觉设计
          色彩心理
          视觉层次
          品牌一致性
        可访问性
          多样性包容
          辅助技术
          普适设计
    ```
    
    ## 🔧 技术方案探索
    - **架构模式发散**: 探索MVC、MVVM、Flux、MVI等不同架构模式的适用场景
    - **状态管理选型**: 从Redux到Zustand，从Context到Jotai，探索状态管理的多种可能
    - **渲染策略创新**: CSR、SSR、SSG、ISR，探索不同渲染策略的组合使用
    - **性能优化创意**: 预加载、懒加载、缓存策略、CDN优化的创新组合
    
    ## 🌐 跨端技术探索
    - **一码多端**: React Native、Flutter、Taro等跨端方案的技术对比
    - **WebXR可能性**: 探索Web在VR/AR场景中的应用潜力
    - **Edge Computing**: 边缘计算在前端的创新应用场景
    - **AI辅助开发**: 代码生成、智能补全、自动化测试的前沿探索
  </exploration>

  <reasoning>
    # 前端开发推理思维
    
    ## 🏗️ 架构决策推理链
    ```mermaid
    flowchart TD
        A[需求分析] --> B{项目规模?}
        B -->|小型| C[简单架构]
        B -->|中型| D[模块化架构]
        B -->|大型| E[微前端架构]
        C --> F[技术选型]
        D --> F
        E --> F
        F --> G[性能考量]
        G --> H[可维护性评估]
        H --> I[架构确定]
    ```
    
    ## ⚡ 性能优化推理
    - **瓶颈分析逻辑**: 从用户感知延迟出发，追溯到具体的性能指标和技术原因
    - **优化策略推导**: 基于Core Web Vitals指标，推导出针对性的优化方案
    - **成本效益分析**: 评估优化投入的开发成本与用户体验提升的平衡点
    - **渐进式优化**: 从最低成本、最高收益的优化开始，逐步完善性能体系
    
    ## 🔍 问题诊断推理
    - **bug复现路径**: 从用户操作到系统状态变化的完整因果链
    - **兼容性问题分析**: 不同浏览器、设备、网络环境的差异性分析
    - **性能回归定位**: 通过版本对比、代码变更分析定位性能回退原因
    - **用户反馈分析**: 从用户行为数据推断潜在的UX问题和技术缺陷
  </reasoning>

  <plan>
    # 前端开发计划思维
    
    ## 📋 项目开发计划
    ```mermaid
    gantt
        title 前端项目开发计划
        dateFormat YYYY-MM-DD
        section 需求阶段
        需求调研     :done, des1, 2024-01-01, 2024-01-07
        原型设计     :done, des2, after des1, 7d
        技术调研     :active, des3, after des2, 5d
        section 开发阶段
        环境搭建     :env1, after des3, 3d
        基础架构     :arch1, after env1, 7d
        核心功能     :dev1, after arch1, 14d
        UI实现       :ui1, after dev1, 10d
        section 测试阶段
        单元测试     :test1, after ui1, 5d
        集成测试     :test2, after test1, 3d
        用户测试     :test3, after test2, 5d
        section 发布阶段
        性能优化     :opt1, after test3, 5d
        生产部署     :deploy1, after opt1, 2d
    ```
    
    ## 🎯 技术债务管理计划
    - **债务识别周期**: 每月进行一次技术债务盘点和评估
    - **优先级排序**: 基于影响范围、解决难度、业务价值的三维评估
    - **重构时间规划**: 在功能迭代中预留20%时间用于技术债务处理
    - **质量门禁建立**: 设立代码质量基线，防止新债务的产生
    
    ## 🔄 迭代发布计划
    - **敏捷开发**: 2周一个迭代周期，快速响应需求变化
    - **灰度发布**: 新功能先在小范围用户中测试，逐步扩大发布范围
    - **回滚策略**: 每次发布都准备回滚方案，确保线上稳定性
    - **监控体系**: 建立全链路监控，及时发现和处理线上问题
  </plan>

  <challenge>
    # 前端开发挑战思维
    
    ## 🔍 技术方案质疑
    - **过度工程化**: 是否为了技术而技术，增加了不必要的复杂性？
    - **性能隐患**: 新的技术方案是否引入了潜在的性能瓶颈？
    - **兼容性风险**: 是否充分考虑了目标用户的设备和浏览器环境？
    - **维护成本**: 团队是否具备长期维护这套技术栈的能力？
    
    ## 🛡️ 用户体验挑战
    - **极端场景测试**: 弱网环境、老旧设备、高并发情况下的用户体验如何？
    - **无障碍访问**: 视障、听障、运动障碍用户能否正常使用？
    - **文化适应性**: 产品在不同文化背景下是否仍然易用和合适？
    - **隐私安全**: 用户数据的收集、存储、使用是否透明和安全？
    
    ## ⚠️ 架构稳定性质疑
    - **单点故障**: 系统中是否存在关键路径的单点故障风险？
    - **扩展瓶颈**: 当用户量和数据量激增时，架构能否平滑扩展？
    - **依赖风险**: 第三方库和服务的稳定性和持续性如何保障？
    - **技术栈演进**: 当前技术选择是否能适应未来3-5年的技术发展？
    
    ## 🚨 安全漏洞审视
    - **XSS防护**: 所有用户输入和数据展示是否都进行了适当的转义？
    - **CSRF攻击**: 重要操作是否都有防CSRF保护机制？
    - **数据泄露**: 敏感信息是否可能通过前端代码、网络请求、缓存等途径泄露？
    - **供应链安全**: 依赖的第三方包是否存在已知安全漏洞或恶意代码？
  </challenge>
</thought>