AI 编程 | 使用skill,快速生成可视化代码 скачать в хорошем качестве

AI 编程 | 使用skill,快速生成可视化代码

本视频是一场围绕 “Agent Skills（代理技能）” 与 VisActor 技术栈（VTable、VChart） 的实战教学演示。讲者从概念入手，介绍 Skill 的定义、目录结构与优势，随后在一个 Vite + React 项目中，演示如何通过 skills 命令行工具给 AI 开发助手（Builder / TRAE）安装 VTable、VChart 等技能，并让 AI 自动读取技能知识库、理解项目上下文，生成“表格单元格内嵌迷你图表”的完整示例代码。过程中顺带展示了依赖安装、包管理器（npm vs pnpm）差异处理、错误排查与修复等细节，最后完成一个 React-VTable & React-VChart 迷你图表矩阵页面，并强调 Skill 相比 MCP 的优势以及“开发者需要认真 review AI 代码”的人机协作范式。 00:00 - 01:00 Agent Skills 概念入门 介绍 Agent Skills 的基本概念、官网 agentskills.io 页面，以及通过 GitHub 上的 vchart-development-assistant 示例讲解 SKILL.md、参考文档目录等结构。 01:00 - 02:10 在前端项目中接入 Skills 能力 切到 Vite + React 项目和支持技能的 IDE，说明如何在项目中使用 Skills，展示 Builder 协作面板与基础环境。 02:10 - 03:40 使用 skills CLI 安装 VTable/VChart 相关技能 在 VS Code 终端执行 npx skills add VisActor/VTable、选择 agents、安装 vtable-development-assistant 与 find-skills 等技能，并展示 .agents/skills 目录与 SKILL.md。 03:40 - 04:50 准备实战案例：表格内嵌图表需求 浏览 VTable 官方示例文档，锁定“基本表格集成图表”案例，讲解传统手写配置的复杂性，并提出用 AI + Skill 自动生成代码的实战目标。 04:50 - 06:30 向 AI 下达需求并观察“思考与规划” 在 Builder 面板输入需求（React + VTable + VChart，近 7 天指标可视化等），AI 自动分析 package.json、App.tsx 和技能知识库，拆解任务并生成实现计划。 06:30 - 07:30 依赖问题与包管理器选择（npm vs pnpm） 检查 @visactor/vchart 依赖报错，通过安装依赖解决，并引出“Ruler”配置告知 AI 使用 pnpm 的实践，避免环境不一致导致的问题。 07:30 - 08:30 代码落地：注册图表模块与列配置 展示 App.tsx 中注册 register.chartModule('vchart', VChart)、生成 mock 数据、配置 columns 的 cellType: 'chart' 与 chartSpec，最终通过 npm run dev 启动并在浏览器看到表格 + 迷你图表。 08:30 - 09:40 迷你图表矩阵成品与进一步优化 演示 “React-VTable & React-VChart 迷你图表矩阵” 页面，鼠标悬停 tooltip 交互；强调这是 AI 在没有显式 API 指导下、通过 Skill 自主学习生成的结果，并在 IDE 中继续给 AI 下达“让图表更美观”的改进指令。 09:40 - 11:10 深入 Skill 结构与 MCP 对比 打开 SKILL.md、knowledge 目录中的各类文档（如 table-types、column-cell-types、interaction-patterns 等），说明 Skill 以 Markdown + 类型定义为载体，通过路由规则按需披露知识；对比 MCP 方式读取文档的“占量”问题，突出 Skill 的渐进式上下文披露优势。 11:10 - 12:34 人机协作范式与开发者责任 总结 Skill 范式解决 Token 限制与“遗忘”问题的思路，强调不要让 AI 乱读所有文档，而是通过 Skill 精准给知识；最后重点强调：AI 可以写代码，但开发者必须认真审查（Code Review）并为最终代码负责。