AS-Flow AI – 下一代生产力与上下文 AI

Source: Dev.to

我构建的内容

我构建了 AS-Flow AI，这是一款高级跨平台生产力应用，旨在帮助用户瞬间进入深度工作状态。它通过以下方式解决碎片化注意力的问题：

• 上下文感知的专注模式 – 超真实沉浸式环境（雨天、海滩、火焰、太空），提升专注度。
• AI 驱动的计划 – 基于用户能量水平的智能助理，自动生成日程。
• 无缝跨平台体验 – 在桌面和移动端网页上运行，拥有类似原生应用的手感。

技术栈

• 核心：Next.js 14（App Router）、React、TypeScript
• 样式：Tailwind CSS + Glassmorphism UI
• AI：上下文 AI 代理（Claude）+ 本地逻辑
• 状态管理：React Context + 持久化存储

演示

🚀 在线应用
https://github.com/AsamaeS/AS-Flow-AI

截图

测试凭证

Email: asmae@focusflow.ai
Password: demo123

AI 工具实战

使用 Claude（Antigravity）构建 AS‑Flow AI 大幅加速了开发。

⚡ 10 倍更快的功能实现

示例请求：
“添加一个带有噼啪音效和真实火焰动画的 Fire 专注模式。”

AI 代理的操作：

• 解析项目结构 (src/data/focus-modes.ts)
• 添加新模式
• 获取免版税音频资源
• 生成 UI 代码

⏱️ 耗时： 3 分钟（相较于没有 AI 的约 1 小时）

🐛 零样本 Bug 修复

关键错误： useLanguage must be used within LanguageProvider

AI 的操作：

• 分析整个组件树
• 检测到 layout.tsx 中的 provider 包装问题
• 使用 suppressHydrationWarning 实现了一个安全的水合修复

⏱️ 节省时间： 2–3 小时

使用 App MCP 与 Uno Platform MCP

虽然 AS‑Flow AI 使用的是 Next.js，但项目遵循 App MCP 哲学，使 AI 能够理解完整的应用上下文。

🧠 应用上下文感知

AI 代理了解：

• 技术栈（Tailwind、Lucide）
• 文件夹结构（src/app/dashboard/...）
• 正确放置新文件的位置

它能够在 10+ 文件 中对 “AS‑Flow AI” 进行品牌统一更改。

🛠️ AI 引导的架构设计

AI 的角色类似架构师：

• 建议将 FocusModeCard 抽离为可复用组件
• 确保音频播放器的 use client 边界
• 为持久化存储创建干净的服务层

这与 Uno Platform MCP 的理念相呼应——AI 能够理解完整的应用上下文。

跨平台覆盖

AS‑Flow AI 可在所有平台运行：

• 桌面 → 四列优化仪表盘
• 移动 → 单列响应式布局
• 网页 → 任意浏览器即点即用
• 自动主题 → 检测操作系统的暗/亮模式

开发体验

惊喜 #1 — 真正的配对程序员

感觉像在和一位资深工程师合作。
示例：“修复侧边栏的内边距。”
AI 在正确的文件 (Sidebar.tsx) 中修改了正确的类名 (p-4)。

惊喜 #2 — 持续的动能

AI 处理了：

• 样板代码
• 类型定义
• i18n 字典
• 布局问题
• 水合警告

这让我可以专注于设计和用户体验。

结果

我在 不到 2 天 内构建了一个 可投入生产的、多语言、暗模式的生产力平台——通常这类项目需要数周时间。

由 Asmae 用 ❤️ 通过上下文 AI 加速构建