HAP for VSCode：保姆式 AI Coding 开发 HAP 视图插件

即使面对结构复杂如 HAP 工作表，也能让你的 AI 编程助手“乖乖听话” HAP 视图插件：从小众到繁荣 HAP 的视图插件自推出以来，一直是区别于其他零代码厂商在页面级 UI 定制化上极具优势的能力。过去几年，国内外的开发者们用 HAP 视图插件机制打造了各种精美、实用乃至炫酷的自定义视图：精心设计的数字大屏、复杂的数据可视化报表、贴合特定行业场景的专属 UI……仅在明道云市场上架的视图插件就已有数十款，涵盖制造、零售、人力、项目管理等多个领域。 [图片] Vibe Coding 热潮兴起后，越来越多的 HAP 用户开始尝试借助 Claude Code、Cursor、Codex、Trae 等 AI 编程助手来开发自己的视图插件。然而现实往往没那么顺利：AI 对通用前端开发驾轻就熟，但它不了解 HAP 工作表的数据结构、字段类型系统和事件机制，不知道 API 调用的规范，也无从得知正确的字段渲染方式。以至于用户把大量时间消耗在了反复调试和 Debug 上。而且，对于非开发者，AI 编程的确存在大量无法驾驭的环节，即使模型能够生成部分代码，用户也无法进行有效监督，直至完成可用的发布。 这些门槛让很多有想法的业务用户望而却步。 HAP for VSCode 正是为了打破这些门槛，给所有的非开发者提供 AI 编程的垫脚石。 认识 HAP for VSCode HAP for VSCode 是 HAP 平台的官方 VS Code 扩展，将整个视图插件的开发、调试、提交、发布流程集成在一个侧边栏面板中，让你无需离开编辑器就能完成所有操作。先不要被 VS Code 吓倒，没有这个插件，非开发人员是很难直接使用 IDE 的，但是这个插件将给你铺上轨道，按照指南操作会很容易完成任务。 安装网址： HAP for VSCode - Visual Studio Marketplace [图片] 核心功能一览 功能 说明 一键创建项目 从 HAP 应用和工作表直接创建插件项目，自动配置好开发环境 内置开发服务器 基于 Webpack Dev Server，支持热更新，保存即刷新 实时预览 生成调试 URL，可以在 HAP 工作表中实时看到你的开发效果 参数双向同步 在本地和 HAP 平台之间同步插件参数配置 版本控制 提交、查看历史、删除版本 一键发布 填写版本号和说明，将插件发布到组织全局 AI Skills 集成 支持 33 种 AI 编程助手，自动注入 HAP 开发知识 支持的代码模板 插件内置多种开箱即用的代码模板，覆盖主流前端技术栈： JavaScript / TypeScript —— 轻量级原生方案 React —— 组件化开发首选 Vue 2 / Vue 3 —— Vue 生态用户的最佳选择 React + TypeScript + Tailwind CSS —— 带样式系统的完整方案 每种模板都提供自动适配当前用户的语言版本，适配全球化团队的需求。 亮点：Skills for AI Coding Agents 集成 这是 HAP for VSCode 的核心价值：它内置了 AI 编程所需要的 Skill。目前市面上的 AI 编程助手都很擅长通用编程，但如果你直接让它们写 HAP 视图插件代码，它们会遇到一个问题： 它们不了解 mdye JSSDK 的 API，不知道 HAP 工作表的字段类型规范，也不清楚如何正确监听各种事件。 结果往往是 AI 写出了"看起来合理但实际跑不通"的代码。 HAP for VSCode 通过 Skills 解决了这个问题。当你创建插件项目时，插件会自动将一套 HAP 开发知识文件 复制到你的项目目录中，放在 AI 助手能够读取的位置。这套知识文件包含：HAP 插件开发的完整指南，包括 API 用法、字段渲染规范、事件处理以及详细的参数说明文档。 当你对 AI 编程助手说"帮我写一个充满科技感的展示实时销售数据的大屏插件"时，AI 编程助手会先读取这些 Skills 文件，了解 HAP 的数据接口和字段规范，然后生成真正符合 HAP 运行时要求的代码。 支持 33 种 AI 编程助手 目前 HAP for VSCode 已适配的 AI 编程助手包括： 主流 AI 编程助手 ：Claude Code、Codex、GitHub Copilot、Cline、Augment 等 专业编程工具 ：Cursor、Trae、CodeBuddy、Qwen Code、Kimi Code、Amp 等 自动化 AI 平台 ：OpenClaw、Roo Code、OpenCode 等 [图片] 无论你习惯使用哪款 AI 助手，都可以在创建项目时勾选对应选项，让它立刻具备 HAP 开发能力。 快速上手：5 步创建你的第一个视图插件 Step 1：安装扩展，登录 HAP 在 VS Code 扩展市场搜索 "HAP fro VSCode" ，安装后在侧边栏打开扩展面板并打开一个空文件夹作为项目文件夹。安装本扩展后 无需再单独安装 mdye-cli 命令行工具 ，开发所需的全部能力已内置在本扩展中。 首次使用需要登录你的 HAP 账号。支持连接至所有的 HAP 平台，包括： 明道云 （ mingdao.com ） Nocoly （ nocoly.com ） 私有部署 （自定义 HAP 服务器地址） [图片] 点击登录按钮后，浏览器会自动打开 OAuth 授权页面，授权完成后即可自动登录，无需手动填写账号密码。 Step 2：选择你的应用和工作表 登录后，点击"开发 HAP 视图插件"，进入创建向导。 第一步选择你的 应用 ，第二步选择该应用下的 工作表 。你可以通过搜索快速定位到应用和工作表。 接下来选择要创建视图的 视图位置 ：可以挂载到已有视图，或者直接输入名称创建一个全新的视图。 [图片] Step 3：选择代码模板和 AI Agent 根据你的技术栈偏好选择代码模板。 如果你没有前端背景 ，推荐选择 React + Tailwind CSS ——Tailwind 的原子化 CSS 让 AI 更容易理解样式意图，生成的代码也更易于修改。 然后， 勾选你使用的 AI 编程助手 。这一步至关重要：勾选后，扩展会在项目创建时自动将 HAP 开发 Skills 文件复制到对应 Agent 的读取目录，让 AI 立刻掌握 HAP 开发知识。 Step 4：启动开发服务器 项目创建完成后，扩展自动进入 开发控制面板 。 点击"启动开发服务"，扩展会自动安装依赖并在后台启动 Webpack Dev Server（默认端口 3000）。启动成功后，面板显示"在线"状态，并生成一个 调试 URL 。 将这个调试 URL 复制到 HAP 工作表的视图插件的“调试”设置中，你的工作表就会开始实时加载你本地开发服务器上的代码，并在代码文件有改变时自动刷新。 [图片] Step 5：描述需求，让 AI 写代码 接下来，就可以打开你的 AI 编程助手，直接用中文描述你的需求： 帮我做一个类似小红书风格的瀑布流卡片视图： - 多列瀑布流布局，列数根据容器宽度自适应向 - 每张卡片上方是封面图（来自"封面"附件字段，取第一张图片），高度按图片比例自适应 - 卡片内容区展示：标题（"标题"字段）、分类标签（"分类"单选字段，颜色用字段配置的颜色）、作者头像和姓名（"拥有者"成员字段） - 卡片整体圆角、白色背景、轻微阴影，悬浮时有上浮效果 - 下滚动页面时分页加载数据 - 点击卡片弹出记录详情 还有一个邪修做法：看到心仪的网页效果，可以直接将图片发送给 AI 或者让 AI 根据图片来生成提示词 你不需要告诉 AI 怎么调 API、怎么渲染数据，Skills 已经帮你做了这件事。 如果你打开的是一个已经存在的视图插件项目，或者中途更换了 AI 编程助手，那么可以在开发面板的“更多”菜单中，选择"更新 Skills 配置"，可以随时添加或移除 Agent 的 Skills 文件，无需重新创建项目。 Step 6：预览、提交、发布 开发完成后，在扩展面板中： 输入提交信息 ，点击"提交"——扩展自动编译代码并上传到 HAP 平台 查看提交历史 ——每次提交都有记录，可以随时回滚 点击"发布" ——输入版本号（如 1.0.0 ）和发布说明，正式发布这个视图插件到组织中 发布后，需要通知管理员在插件中心里启用这个插件，之后组织内所有的成员都能使用你的自定义视图了。 [图片] 对普通用户意味着什么 有了 AI 编程助手 + HAP for VSCode 的 Skills 集成，你的工作流程变成了： 用自然语言描述你想要的视图效果 让 AI 生成初版代码 在工作表中实时预览效果 告诉 AI 哪里不对劲，让它修改 满意后提交并发布 这个循环中，你需要具备的能力只有两点： 清晰描述你的业务需求 + 判断视图效果是否符合预期 。 这与明道云的理念一脉相承。HAP 平台用拖拽配置降低了应用搭建的门槛，HAP for VSCode 则用 AI Coding 降低了定制化开发的门槛。两者的终点是一样的： 让业务用户掌控自己的工具，并最终产出企业级的成果。 如果你有任何"我希望能有一个这样的视图"的想法，不必担心你不懂任何技术，现在就是动手拥抱 HAP + AI Coding 的最好时机。 后续计划 HAP for VSCode 虽然可以很好的辅助你开发视图插件了，但我们不会止步于此。这个扩展会持续更新，让 HAP 更好的与 Vibe Coding 融合。 [图片] 下一步，我们计划支持在扩展中生成基于 HAP 应用开发的独立网站，同样包括完整的代码模板与 AI Skills，可以小期待一下哦。

帮我做一个类似小红书风格的瀑布流卡片视图：
- 多列瀑布流布局，列数根据容器宽度自适应向
- 每张卡片上方是封面图（来自"封面"附件字段，取第一张图片），高度按图片比例自适应
- 卡片内容区展示：标题（"标题"字段）、分类标签（"分类"单选字段，颜色用字段配置的颜色）、作者头像和姓名（"拥有者"成员字段）
- 卡片整体圆角、白色背景、轻微阴影，悬浮时有上浮效果
- 下滚动页面时分页加载数据
- 点击卡片弹出记录详情