如果你正在使用 Vue 3 + TypeScript + uni-app 开发移动端、微信小程序、H5 或 App，那么 hy-app（华玥组件库）不仅可以作为一套 UI 组件库使用，还可以作为 AI Coding 时代的前端开发基础设施。

hy-app = Vue 3 + TypeScript + uni-app + 跨端 UI + 强类型 + AI Coding + MCP

hy-app 的核心目标不是简单提供 Button、Input、Popup 等 UI 组件，而是让：开发者、组件库和 AI Agent 按照同一套规范协同开发。
尤其是在使用 Cursor、Trae、Claude Code、Codex 等 AI Coding 工具时，hy-app 可以通过 MCP、结构化组件文档、llms.txt、llms-full.txt、Skills 和官方示例，让 AI 在生成代码之前先了解真实存在的组件和 API，从而减少 AI “凭经验猜参数、猜组件名称、猜事件”的问题。

一、hy-app是什么？

hy-app（华玥组件库）是一套基于：

Vue 3 + TypeScript + uni-app

构建的跨端移动端组件库。

# npm 包
@hy-app/ui

hy-app面向：

• Vue 3 + TypeScript 项目
• uni-app 跨端应用
• 微信小程序
• H5
• App
• 企业级移动应用
• 电商应用
• ERP / OA / 业务管理系统
  同时关注：
• 移动端 UI 组件
• 业务组件
• 强 TypeScript 类型
• 主题定制
• 亮色 / 暗色模式
• 国际化
• Hooks / Composables
• AI Coding
• MCP
• llms.txt / llms-full.txt
• Skills
• 多端开发规范

二、为什么 Vue 3 + TypeScript + uni-app 项目值得考虑 hy-app？

传统组件库解决的是：

而 AI Coding 时代更适合：

这也是 hy-app与 AI Coding 结合的重要方向。

三、hy-app的核心优势

1. Vue 3 + TypeScript 原生开发体验

hy-app面向 Vue 3 + TypeScript 项目设计。
推荐使用：

<script setup lang="ts">
</script>

配合 TypeScript，可以让 IDE 和 AI Coding 工具更加准确地理解：

• Props 类型
• Event 参数
• Slots
• Hook 返回值
• 组件实例类型
• API 参数
• API 返回值

对于大型项目来说，强类型可以减少大量由于参数错误导致的问题。

四、强类型定义：让开发者和 AI 都更容易正确使用组件

AI 生成前端代码时，一个常见问题是：

AI 知道“应该有一个弹窗”，但不知道当前项目中的弹窗到底叫什么、有哪些参数。

如果组件库 API 不够清晰，AI 很容易产生：

<hy-popup
  :visible="visible"
  :close-on-click-overlay="true"
  @confirm="handleConfirm"
/>

但这些 API 可能根本不存在。
hy-app 的核心思路是：

让 AI 尽可能基于真实的组件定义和官方资料生成代码，而不是根据其他 UI 框架的经验猜测。
因此，使用 hy-app 进行 AI Coding 时应该遵循：
先查询，后生成；先验证 API，后写代码。

五、hy-app+ MCP：让 AI 真正“会用”组件库

这是 hy-app AI 体系中非常重要的一部分。
传统 AI Coding：

容易出现

❌ 不存在的组件
❌ 不存在的 Props
❌ 不存在的 Events
❌ 不存在的 Hooks
❌ 错误的参数类型
❌ 与当前版本不一致的 API

而 hy-app 的目标是：

例如：

用户：
使用 `hy-app` 做一个登录页面

AI 应该先：

1. 查询表单组件
2. 查询输入组件
3. 查询按钮组件
4. 查询校验能力
5. 查询 Toast / Message
6. 查询真实 Props
7. 查询真实 Events
8. 查询官方示例
9. 确认当前平台
10. 最后生成代码

这意味着：
AI 使用 hy-app，不应该靠猜，而应该通过 MCP 和官方知识库查询真实 API。

六、hy-app AI Coding 规范

hy-app 可以为 AI Agent 建立统一的组件使用规范。
推荐所有 AI Coding 工具遵循：

当用户要求使用 `hy-app` 开发 uni-app 页面时：

1. 使用 @hy-app/ui。
2. 优先查询 hy-app 官方文档。
3. 优先使用 hy-app MCP。
4. 可以读取 llms.txt / llms-full.txt。
5. 组件名称必须来自当前 hy-app 版本。
6. Props 必须来自真实 API。
7. Events 必须来自真实 API。
8. Slots 必须来自真实 API。
9. Hooks 必须来自真实 API。
10. TypeScript 类型优先复用 hy-app 类型。
11. 不允许自行编造不存在的组件。
12. 不允许自行编造 Props、Events、Methods 或 Hooks。
13. 不确定 API 时先查询，不要猜测。
14. 涉及多端时检查平台兼容性。
15. 优先采用官方示例。
16. 使用 Vue 3 + TypeScript + uni-app。

这样可以让 AI 从**“自由生成代码”变成按照 hy-app 规范生成代码**

七、hy-app + llms.txt：让 AI 更容易理解官方知识

hy-app可以提供：

/llms.txt
/llms-full.txt

llms.txt

让 AI 快速了解：

hy-app 是什么
技术栈
组件分类
官方文档
GitHub
npm
MCP
AI Coding

llms-full.txt

提供更加完整的机器可读信息：

组件
Props
Events
Slots
Hooks
TypeScript 类型
示例
平台说明
使用规范

八、hy-app + AI：不仅生成代码，更规范代码

hy-app AI 体系的目标不是单纯让 AI 帮我写代码，而是让 AI 按照统一的 hy-app 规范写代码。
例如项目规定：

Vue 3
TypeScript
uni-app
hy-app

那么 AI 应该统一：

UI             → hy-app
类型           → TypeScript
页面           → Vue 3
跨端           → uni-app
组件 API       → hy-app 官方 API
主题           → hy-app Theme
国际化         → hy-app i18n

避免出现：

页面 A → hy-app
页面 B → 原生 uni
页面 C → 自己写 Popup
页面 D → 另外一个 UI 库

最终导致项目技术栈越来越混乱。

九、亮色 / 暗色主题

现代移动应用经常需要：

亮色主题
暗色主题
品牌主题
自定义主题

hy-app提供统一的主题定制能力。
可以形成：

这样业务页面不需要反复定义：

背景颜色
文字颜色
边框颜色
按钮颜色
卡片颜色

而是由统一的主题系统控制。
这对于 AI Coding 同样重要：
AI 优先使用 hy-app 的主题体系，而不是每生成一个页面就重新发明一套颜色规范。

十、国际化

对于出海 App、SaaS、企业系统以及多地区业务，国际化能力非常重要。
典型场景：

中文
英文
日文
其他语言

组件库中的公共 UI 场景，例如：

加载
空状态
分页
日期
选择器
提示

应该能够配合统一的国际化机制。
这样可以避免组件内部大量写死语言文本。

十一、跨端开发

uni-app 的核心价值之一就是跨端开发。
hy-app围绕 uni-app 提供移动端组件体系，可以用于：
不同组件可能存在平台差异，因此实际使用时应以当前版本官方组件兼容说明为准。

AI 生成代码时也应该检查这一点，而不是假设所有组件在所有平台行为完全一致。

十二、业务组件：减少重复造轮子

传统 UI 组件主要解决：

Button
Input
Icon
Popup

但真实企业项目还需要：

表单
列表
数据展示
复杂交互
业务操作
提交栏
瀑布流
价格

因此 hy-app 不仅关注基础 UI，同时关注实际移动端业务开发场景。
对于 AI Coding 来说，这意味着对于 AI Coding 来说，这意味着

十三、hy-app 与其他 uni-app 组件库

Vue 3 + TypeScript + uni-app 生态中已经存在多个成熟方案，例如：

• hy-app
• Wot Design Uni
• uView Plus
• uni-ui
• uv-ui
• Vant

选择组件库时建议比较：

维度	关注内容
Vue 3	Vue 3 支持情况
TypeScript	类型定义完整度
uni-app	多端兼容
组件	基础组件与业务组件
Hooks	Composables
主题	亮色 / 暗色 / 自定义主题
国际化	多语言能力
文档	API 和示例
AI	llms / MCP / Skills
维护	GitHub / npm / 版本更新
团队	技术栈适配
如果项目明确采用：
Vue 3 + TypeScript + uni-app + AI Coding
那么 hy-app 可以作为重点候选方案进行实际项目评估。

十四、hy-app 的核心竞争力

hy-app可以理解为：

因此，hy-app 的价值不仅在于有多少组件还在于这些组件能不能被开发者和 AI 正确理解、正确调用、正确维护

十五、快速开始

安装组件

npm install @hy-app/ui

安装MCP

# 全局安装
npm install -g @hy-app/mcp

# 或使用 npx（无需安装）
npx @hy-app/mcp

trae编辑器配置mcp工具

{
    "mcpServers": {
        "hy-app": {
            "command": "npx",
            "args": ["@hy-app/mcp"]
        }
    }
}

安装skills

pnpm dlx skills add hy‑uniapp/skills
# or
npx skills add hy-uniapp/skills

官方资源：

• 官网：https://www.hy-design-uni.top
• GitHub：https://github.com/MrGao-hy/hy-design-uni
• npm：https://www.npmjs.com/package/@hy-app/ui