制作安卓代理客户端纯html界面预览，文档：1. 产品设计定位 FLsing 是一款面向普通用户的轻量代理客户端。 核心设计目标： 用户无需理解代理协议、节点参数、规则配置，即可完成连接、切换节点、管理订阅。 UI 不追求「专业工具感」，而

평가 프롬프트

制作安卓代理客户端纯html界面预览，文档：1. 产品设计定位 FLsing 是一款面向普通用户的轻量代理客户端。 核心设计目标： 用户无需理解代理协议、节点参数、规则配置，即可完成连接、切换节点、管理订阅。 UI 不追求「专业工具感」，而追求： 简单 安静 高级 可预测 无学习成本 避免出现： 大量技术参数堆叠 开发者视角的信息展示 类 Clash 面板风格 复杂配置入口 2. 整体视觉规范 主题 整体采用： 黑白 × 高级极简 × 系统工具风 参考： x.com iOS Settings Nothing OS Linear 关键词： 留白 克制 微弱玻璃感 低饱和 高对比 颜色规范 Background 主背景： #000000 或： #0A0A0A 禁止： 彩色渐变背景 大面积蓝紫科技风 Card 卡片： rgba(255,255,255,0.06) 边框： rgba(255,255,255,0.08) 禁止： 强阴影 高亮边框 Accent 唯一强调色： 绿色： #30D158 仅用于： 已连接 延迟优秀 成功状态 禁止： 大面积使用绿色 3. 布局原则 首页结构固定 首页永远保持： Header ↓ Connection Visualization ↓ Control Area 不要添加： 流量统计 CPU 内存 日志 复杂状态 Header 高度： 约 56dp 内容： 左： FLsing 右： 订阅入口 设置入口 禁止： 多按钮 用户头像 状态文字 4. 首页核心交互 地球动画 地球不是展示数据。 它代表： 当前连接状态 状态： 未连接 暗淡 缓慢动画 连接中 光环扩大 粒子流动 已连接 稳定旋转 中心显示： 已连接 00:12:48 稳定 禁止： 展示服务器线路 展示复杂网络拓扑 5. 抽屉设计规范 FLsing 大部分功能采用 Drawer。 类型： Full Drawer 用于： 设置 特点： 覆盖整个页面 独立页面体验 Partial Drawer 用于： 订阅 节点 高度： 70%~85% 保留背景上下文。 6. 设置页规范 设置页只负责分类入口。 结构： 设置 连接 代理方式 订阅与节点 外观 后台与启动 隐私与数据 高级设置 诊断 关于 每项： Icon 标题 > 禁止： 首页展示具体配置。 例如： 错误： HTTP代理 端口7890 DNS fake-ip 正确： 连接 > 7. 订阅设计规范 订阅管理必须支持： CRUD: Create Read Update Delete 但隐藏复杂操作。 默认： 卡片展示： 名称 地址 更新时间 状态 高级操作： 长按 / 更多按钮 菜单： 编辑 更新 复制 删除 删除必须： 二次确认 8. 添加订阅交互 禁止独立大按钮。 使用： 右上角： + 展开： 链接导入 剪贴板 文件导入 保持： 一步一个动作。 9. 节点页规范 节点页目标： 快速找到最快节点 默认展示： 国家 节点名称 延迟 测速状态 示例： 🇯🇵 日本 Tokyo-01 68ms 节点测速 支持两个层级： 全局测速 顶部： 测速 用于： 批量测试 单节点测速 每个节点： 测速按钮 用于： 单独测试 10. 信息展示原则 遵循： 用户需要知道什么，就显示什么。 普通用户需要： ✅ 是否连接 ✅ 当前节点 ✅ 延迟 ✅ 当前模式 不需要： ❌ 协议 ❌ 加密方式 ❌ UUID ❌ TLS ❌ TCP参数 高级信息进入： 高级设置 / 诊断。 11. 动画规范 动画： 慢、轻、自然。 允许： Fade Slide Scale 禁止： 弹跳 过度粒子 游戏化动画 推荐： 200~350ms 12. Flutter 实现约束 组件优先： Material 3 + Custom Animation + BackdropFilter 避免： WebView式布局 HTML思维 过度自定义组件 所有页面： 优先： Scaffold Stack AnimatedContainer BottomSheet ListView 最重要的一条 FLsing 不是给开发者玩的代理工具，而是让普通用户感觉「打开即可使用」的网络工具。 任何新增功能必须回答： “这个功能是否降低普通用户的操作成本？” 如果不能降低，就不要出现在主流程中。