QiuVision

从一行代码，到更多可能。

记录前端、AI 与交互的探索。把灵感写进界面，把细节留给体验。

开始探索关于作者

精选内容

前端实践、AI Coding、Agent、Skills 与交互体验的交汇处

前端动效2026.10.1218 分钟

用 Claude Code + Remotion 做有高级感的动效视频：让每一帧都可审查

让 Claude Code 搭配 Remotion 用 React 写视频，几分钟就能出片；拉开差距的是节奏、缓动、留白与审查。从「视频是帧的函数」讲起，整理动效 tokens、场景结构、四个可复用配方、分镜先行的协作流程与常见坑。

AI 工具2026.09.0727 分钟

Spec 驱动 AI 开发 v2.1：设计先行、受控实现与真实验证

Spec 完整、功能测试通过，为什么 AI 写出的前端仍然不好用？结合 spec-driven-ai-coding v2.1，以筛选导出为例，梳理按需规划、前端设计基准、设计 Skill 协作、渲染审查与修复复验，把 UI/UX 质量纳入实际交付。

Canvas 视觉2026.07.2716 分钟

MatrixEffect：把图像变成可编程的视觉矩阵

从圆点矩阵与 ASCII 艺术出发，拆解一套通用 Canvas 采样场管线：如何统一图片、外部 Canvas 与程序化动态源，让亮度、颜色和变换结果驱动不同 Renderer，同时守住响应式、性能与可访问性边界。

AI 工具2026.03.1118 分钟

Agent Skills 资产化：个人与团队的技能积累、管理与分发

当 AI Coding Agent 成为日常工具，如何把散落在项目各处的工程经验、领域知识和最佳实践，系统地沉淀为可复用的 Agent Skills？本文从一个人的技能仓库出发，聊聊 Skills 的设计理念、目录治理、写作方法论和团队级分发实践——以及为什么「资产化」比「写文档」更接近问题的本质。

前端动效2026.09.2313 分钟

Motion 连续布局过渡：让内容与周围元素一起移动

折叠面板淡入了，弹窗外框也变高了，为什么下面的按钮还是瞬移？从一次真实的界面修正出发，拆解内容显隐、真实占位、退出生命周期与嵌套测量的协作，并给 AI 一份可以直接复用的动效约定。

前端动效2026.08.3122 分钟

从按钮到面板，从卡片到浮层：Motion 容器变形过渡的两种实现策略

点击一个小元素，它平滑地长成一个更大的面板或浮层——这类效果的名字叫容器变形过渡（Container Transform）。本文从两个真实实现出发（筛选按钮原地展开成面板、景点卡片飞向视口中央变成详情浮层），梳理这类过渡的心智模型、两种实现拓扑与完整的工程细节：测量、相位状态机、内容编排、遮罩阴影与可访问性。

探索更多内容

精选作品

独立构建、持续打磨的组件与桌面应用

查看全部作品

技术栈一览

前沿技术驱动

基于现代 Web 技术栈，追求极致的开发体验与用户体验

React

Next.js

TypeScript

Tailwind CSS

Node.js

shadcn/ui

WebGL

Three.js

Framer Motion

极致体验

优雅设计

流畅动效

前沿技术

最佳实践

全球化

响应式布局

性能优化

创意交互

视觉美学

文章时间线

以时间为轴，回溯创作轨迹

从一行代码，到更多可能。

精选内容