Wbit AI 助手平台
01杭州微风企科技
2024 — 2026
0-1 主导 Wbit AI 助手平台整体产品设计，将税务、销售、老板、财务、信贷五类数字人整合进同一套对话式工作台，通过任务卡片、快捷能力标签和定时任务，把企业经营问题转化为可执行的 AI 工作流。
0-1产品AI智能体对话式交互设计规范
从视觉，走向更多可能
持续在商业视觉之外，探索工具、系统与更有效的解决方式。
Scroll
过去几年主要在商业视觉领域做执行，后来逐渐发现很多设计问题本质上是流程和系统问题。现在更多关注效率、自动化、以及如何用工具把重复劳动省下来——把时间留给真正需要判断力的部分。
Work Experience
工作经历
视觉设计师品牌设计IP设计AI产品设计增长设计
8 年商业视觉设计经验，跨越出行、财税领域。从品牌视觉、IP 设计到 AI 产品 0-1 搭建，擅长将复杂业务转化为清晰好用的产品体验，持续探索设计系统与效率工具。
01
杭州微风企科技有限公司
2023.09 — 2026.04设计负责人
02
滴滴出行科技有限公司
2021.07 — 2023.03视觉设计师
03
杭州兑吧网络科技有限公司
2020.04 — 2021.07视觉设计师
04
杭州顺网科技股份有限公司
2016.11 — 2020.04视觉设计师
过往经历沉淀为方法 → 真实项目验证为结果 · 过往经历沉淀为方法 → 真实项目验证为结果 · 过往经历沉淀为方法 → 真实项目验证为结果
EXPERIENCE INTO PRACTICE · EXPERIENCE INTO PRACTICE · EXPERIENCE INTO PRACTICE · EXPERIENCE INTO PRACTICE
Capability Map
从视觉执行到系统判断
三条能力线共同支撑后面的案例：视觉经验负责表达，自动化负责效率，系统思维负责把问题推进到落地。
Selected Work / Case Studies
精选商业案例
从真实业务问题出发，整理 AI 产品、品牌系统、IP 设计和自驱项目中的关键判断。
Systems & Tools
工具与系统
每一项都来自真实工作痛点，从发现问题到推动落地，展示完整的解决过程。
System 01AI Collaboration
AI 协作搭建个人网站
这个网站本身就是 AI 协作的产物。用 Claude Code 搭架构、写组件、调样式，用对话迭代文案和信息层级，我负责判断方向、校准审美、决定取舍。
AI 协作作品集
自我表达
重新生成
设计判断、AI 协作与前端实现被放进同一个工作现场，让作品集成为持续生长的个人系统。
VS Code
Claude Code
设计判断
本地调试 / 作品集系统
产品设计 / AI / 系统
从视觉，走向更多可能
持续在商业视觉之外，探索工具、系统与更有效的解决方式。
模块
经历重组
模块
案例分层
模块
AI 协作
模块
持续迭代
01
叙事线
02
界面层
03
迭代环
01
Pressure
问题
传统作品集是静态 PDF：展示结果，但看不到过程。我想做的不只是一个展示页面，而是一个能同时证明「我做过什么」和「我怎么工作」的可交互系统——而且这个系统本身就得是 AI 协作的证据。
01
PDF 作品集看不到工作方式
静态截图能展示视觉结果，但无法体现一个设计师如何拆解问题、组织信息、推动落地。尤其在 AI 时代，工作方式本身就是能力的一部分。
02
传统建站周期太长
如果从零手写一个包含 7 个案例、3 篇文章、多套交互动效的网站，周期会拉到数周。我需要一种更快的方式，同时保证视觉质量不妥协。
03
设计师和前端之间总有落差
设计稿交给开发后，间距、动效、响应式往往走样。如果我能直接和 AI 协作完成前端，就能让最终产物和设计判断之间没有中间商。
02
Method
方法
把 Claude Code 当作一个能写代码的设计协作伙伴：我描述结构和意图，它生成组件和样式；我审查视觉结果，它根据反馈修改。整个过程是对话式的，不是一次性的。
01
对话驱动的信息架构
先和 AI 讨论「一个设计师的作品集应该讲什么故事」，确定 Hero → 能力 → 案例 → 工具 → 思考 → 联系的叙事线，再逐个板块拆解内容结构。
02
实时迭代的视觉校准
AI 生成组件后，我直接在浏览器看效果，告诉它「标题再大一号」「间距收紧」「这个动效太重了」，它立刻改。不用写 brief，不用等排期，审美判断和实现之间的延迟几乎为零。
03
文案也用对话打磨
案例描述、板块标题、总结段落——都是先让 AI 写初稿，我再逐句调整语气和信息密度。最终的文案不是 AI 生成的，也不是我独立写的，而是对话的产物。
03
Outcome
成果
这个网站从第一行代码到上线，全程在 VS Code + Claude Code 中完成。它不只是作品的容器，它本身就是作品——证明一个设计师可以用 AI 协作完成从信息架构到前端实现的全流程。
01
网站即证据
面试官看到的不只是案例截图，而是一个真实运行的、由设计师和 AI 协作搭建的系统。这个过程本身就是能力证明。
02
迭代速度提升一个量级
从「想改一个板块」到「改完在浏览器看到效果」，通常只需要几分钟的对话。这让作品集能真正持续更新，而不是做完就封存。
03
设计师的新工作方式
未来设计师的竞争力不在于会不会某个软件，而在于能不能把 AI 放进自己的方法里，形成稳定、可复用、可迭代的工作流。这个网站就是我的实验场。
System 02Core
Flow2Figma 插件
一个面向设计工作流的效率工具：将复杂流程图从截图、代码或结构描述中重新整理为可进入 Figma 的清晰版式，减少重复描摹，把时间留给信息判断与方案优化。
插件面板
F2
Flow2Figma
结构化流程图转可编辑版式
流程图输入
截图 / Markdown / HTML
01
Input
导入流程截图 / 文本结构
02
Clean
识别节点、层级与连接关系
03
Render
生成稳定可编辑版式
04
Export
进入 Figma 继续校准
生成规范 Figma 稿
无 SVG 依赖可编辑图层干净结构
流程管线→
Start
需求输入
AI Parse
结构识别
Clean HTML
生成规范稿
Figma
设计校准
Asset
团队复用
手动重绘
数小时
生成底稿
几分钟
聚焦判断
逻辑层
流程图重绘占用大量低价值时间
一张包含多分支、多判断节点的流程图，手动还原往往需要反复画框、拉线、对齐和改字，设计师的时间被消耗在机械整理上。
现有转换链路对复杂图表不稳定
很多自动化方案依赖 SVG 路径或复杂节点嵌套，遇到长文本、分支线、跨层级连接时容易出现解析失败、结构错位或后期不可编辑的问题。
交付结果难以沉淀为团队资产
临时绘制的流程图通常只服务于单次沟通，节点样式、间距和命名缺少统一规则，后续项目难以复用，也不利于团队形成稳定的表达标准。
Zero-SVG 的稳定渲染策略
尽量避开复杂 SVG 路径，改用更容易被转换工具理解的盒模型、边框、间距和层级关系，让流程图在进入 Figma 前就具备稳定结构。
从视觉还原转向结构整理
工具不只追求“看起来一样”，而是把输入内容拆成开始、判断、动作、结果等语义节点，再用统一规则组织连接关系，减少后续修改成本。
把设计规范写进生成规则
节点圆角、文字层级、连接线、留白和状态色都通过规则约束，输出不只是一次性图，而是更接近团队可复用组件的流程表达。
显著压缩重绘与排版时间
原本需要长时间手动重画的流程图，可以先生成规范底稿，再在 Figma 中做少量校准，工作重心从“描一遍”转向“判断是否正确”。
降低自动化链路的不确定性
通过减少复杂 SVG 与无意义嵌套，输出内容更容易被转换工具识别，复杂图表的结构错位和不可编辑问题明显减少。
形成可复用的流程表达标准
节点、连接、状态和间距被沉淀成统一规则，让流程图从临时沟通材料变成可持续复用的设计资产。
Thinking
思考与记录
不是博客，是工作过程中对 AI 协作、Agent 工作流、效率和判断力的复盘。
从视觉出发 → 延伸到业务 → 持续创造价值 · 从视觉出发 → 延伸到业务 → 持续创造价值 · 从视觉出发 → 延伸到业务 → 持续创造价值
DESIGN · BUSINESS · VALUE · DESIGN · BUSINESS · VALUE · DESIGN · BUSINESS · VALUE · DESIGN · BUSINESS · VALUE