QiuVision

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

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

精选内容

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

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

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

2026.09.0727 分钟

Canvas 视觉

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

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

2026.07.2716 分钟

AI 工具

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

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

2026.03.1118 分钟

前端动效

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

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

2026.09.2313 分钟

前端动效

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

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

2026.08.3122 分钟

数据可视化

ECharts 多层 X 轴智能自适应合并：从 Hack 到优雅的工程实践

在半导体数据可视化场景中，多层 X 轴面临密集数据下的 label 重叠问题。本文记录了如何在 ECharts 上构建多层 X 轴，并最终实现一套像素驱动的自适应合并算法，让每一层 label 在任意数据密度下保持清晰可读。

2026.04.2020 分钟

探索更多内容

技术栈一览

前沿技术驱动

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

React

Next.js

TypeScript

Tailwind CSS

Node.js

shadcn/ui

WebGL

Three.js

Framer Motion

极致体验

优雅设计

流畅动效

前沿技术

最佳实践

全球化

响应式布局

性能优化

创意交互

视觉美学

文章时间线

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

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

精选内容

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

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

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

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

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

ECharts 多层 X 轴智能自适应合并：从 Hack 到优雅的工程实践

前沿技术驱动

文章时间线

2026年

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

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

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

列表增删不再跳帧：Motion 中进退场与位置重排的分层实现

内容高度变化不再跳动：Motion 中 auto 到 auto 的平滑过渡

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

ThemeTransitionToggle：把深浅模式切换设计成一次几何揭幕

几何遮罩与揭幕过渡：让界面切换像一层光被慢慢打开