Vue 3 + TypeScript + uni-app 组件库推荐：hy-app（华玥组件库）

华玥作者2026-11-04 10:29

文章目录

    • 一、hy-app是什么？
    • [二、为什么 Vue 3 + TypeScript + uni-app 项目值得考虑 hy-app？](#二、为什么 Vue 3 + TypeScript + uni-app 项目值得考虑 hy-app？)
    • 三、hy-app的核心优势
      • [1. Vue 3 + TypeScript 原生开发体验](#1. Vue 3 + TypeScript 原生开发体验)
    • [四、强类型定义：让开发者和 AI 都更容易正确使用组件](#四、强类型定义：让开发者和 AI 都更容易正确使用组件)
    • [五、hy-app+ MCP：让 AI 真正"会用"组件库](#五、hy-app+ MCP：让 AI 真正“会用”组件库)
    • [六、hy-app AI Coding 规范](#六、hy-app AI Coding 规范)
    • [七、hy-app + llms.txt：让 AI 更容易理解官方知识](#七、hy-app + llms.txt：让 AI 更容易理解官方知识)
    • [八、hy-app + AI：不仅生成代码，更规范代码](#八、hy-app + AI：不仅生成代码，更规范代码)
    • [九、亮色 / 暗色主题](#九、亮色 / 暗色主题)
    • 十、国际化
    • 十一、跨端开发
    • 十二、业务组件：减少重复造轮子
    • [十三、hy-app 与其他 uni-app 组件库](#十三、hy-app 与其他 uni-app 组件库)
    • [十四、hy-app 的核心竞争力](#十四、hy-app 的核心竞争力)
    • 十五、快速开始

如果你正在使用 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（华玥组件库）是一套基于：

text 复制代码 
Vue 3 + TypeScript + uni-app

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

text 复制代码 
# 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？

传统组件库解决的是：

#mermaid-svg-sYSQKQcBlGgKK0Xj{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-sYSQKQcBlGgKK0Xj .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-sYSQKQcBlGgKK0Xj .error-icon{fill:#552222;}#mermaid-svg-sYSQKQcBlGgKK0Xj .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sYSQKQcBlGgKK0Xj .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sYSQKQcBlGgKK0Xj .marker.cross{stroke:#333333;}#mermaid-svg-sYSQKQcBlGgKK0Xj svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sYSQKQcBlGgKK0Xj p{margin:0;}#mermaid-svg-sYSQKQcBlGgKK0Xj .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-sYSQKQcBlGgKK0Xj .cluster-label text{fill:#333;}#mermaid-svg-sYSQKQcBlGgKK0Xj .cluster-label span{color:#333;}#mermaid-svg-sYSQKQcBlGgKK0Xj .cluster-label span p{background-color:transparent;}#mermaid-svg-sYSQKQcBlGgKK0Xj .label text,#mermaid-svg-sYSQKQcBlGgKK0Xj span{fill:#333;color:#333;}#mermaid-svg-sYSQKQcBlGgKK0Xj .node rect,#mermaid-svg-sYSQKQcBlGgKK0Xj .node circle,#mermaid-svg-sYSQKQcBlGgKK0Xj .node ellipse,#mermaid-svg-sYSQKQcBlGgKK0Xj .node polygon,#mermaid-svg-sYSQKQcBlGgKK0Xj .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sYSQKQcBlGgKK0Xj .rough-node .label text,#mermaid-svg-sYSQKQcBlGgKK0Xj .node .label text,#mermaid-svg-sYSQKQcBlGgKK0Xj .image-shape .label,#mermaid-svg-sYSQKQcBlGgKK0Xj .icon-shape .label{text-anchor:middle;}#mermaid-svg-sYSQKQcBlGgKK0Xj .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-sYSQKQcBlGgKK0Xj .rough-node .label,#mermaid-svg-sYSQKQcBlGgKK0Xj .node .label,#mermaid-svg-sYSQKQcBlGgKK0Xj .image-shape .label,#mermaid-svg-sYSQKQcBlGgKK0Xj .icon-shape .label{text-align:center;}#mermaid-svg-sYSQKQcBlGgKK0Xj .node.clickable{cursor:pointer;}#mermaid-svg-sYSQKQcBlGgKK0Xj .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-sYSQKQcBlGgKK0Xj .arrowheadPath{fill:#333333;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-sYSQKQcBlGgKK0Xj .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-sYSQKQcBlGgKK0Xj .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-sYSQKQcBlGgKK0Xj .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-sYSQKQcBlGgKK0Xj .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-sYSQKQcBlGgKK0Xj .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-sYSQKQcBlGgKK0Xj .cluster text{fill:#333;}#mermaid-svg-sYSQKQcBlGgKK0Xj .cluster span{color:#333;}#mermaid-svg-sYSQKQcBlGgKK0Xj div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-sYSQKQcBlGgKK0Xj .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-sYSQKQcBlGgKK0Xj rect.text{fill:none;stroke-width:0;}#mermaid-svg-sYSQKQcBlGgKK0Xj .icon-shape,#mermaid-svg-sYSQKQcBlGgKK0Xj .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-sYSQKQcBlGgKK0Xj .icon-shape p,#mermaid-svg-sYSQKQcBlGgKK0Xj .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-sYSQKQcBlGgKK0Xj .icon-shape .label rect,#mermaid-svg-sYSQKQcBlGgKK0Xj .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-sYSQKQcBlGgKK0Xj .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-sYSQKQcBlGgKK0Xj .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-sYSQKQcBlGgKK0Xj :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 开发者提出需求
查阅组件文档
复制官方示例
根据业务修改代码
调试与适配
完成页面

而 AI Coding 时代更适合：

#mermaid-svg-EHyWdd6M8KECMfOC{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-EHyWdd6M8KECMfOC .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-EHyWdd6M8KECMfOC .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-EHyWdd6M8KECMfOC .error-icon{fill:#552222;}#mermaid-svg-EHyWdd6M8KECMfOC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-EHyWdd6M8KECMfOC .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-EHyWdd6M8KECMfOC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-EHyWdd6M8KECMfOC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-EHyWdd6M8KECMfOC .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-EHyWdd6M8KECMfOC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-EHyWdd6M8KECMfOC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-EHyWdd6M8KECMfOC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-EHyWdd6M8KECMfOC .marker.cross{stroke:#333333;}#mermaid-svg-EHyWdd6M8KECMfOC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-EHyWdd6M8KECMfOC p{margin:0;}#mermaid-svg-EHyWdd6M8KECMfOC .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-EHyWdd6M8KECMfOC .cluster-label text{fill:#333;}#mermaid-svg-EHyWdd6M8KECMfOC .cluster-label span{color:#333;}#mermaid-svg-EHyWdd6M8KECMfOC .cluster-label span p{background-color:transparent;}#mermaid-svg-EHyWdd6M8KECMfOC .label text,#mermaid-svg-EHyWdd6M8KECMfOC span{fill:#333;color:#333;}#mermaid-svg-EHyWdd6M8KECMfOC .node rect,#mermaid-svg-EHyWdd6M8KECMfOC .node circle,#mermaid-svg-EHyWdd6M8KECMfOC .node ellipse,#mermaid-svg-EHyWdd6M8KECMfOC .node polygon,#mermaid-svg-EHyWdd6M8KECMfOC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-EHyWdd6M8KECMfOC .rough-node .label text,#mermaid-svg-EHyWdd6M8KECMfOC .node .label text,#mermaid-svg-EHyWdd6M8KECMfOC .image-shape .label,#mermaid-svg-EHyWdd6M8KECMfOC .icon-shape .label{text-anchor:middle;}#mermaid-svg-EHyWdd6M8KECMfOC .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-EHyWdd6M8KECMfOC .rough-node .label,#mermaid-svg-EHyWdd6M8KECMfOC .node .label,#mermaid-svg-EHyWdd6M8KECMfOC .image-shape .label,#mermaid-svg-EHyWdd6M8KECMfOC .icon-shape .label{text-align:center;}#mermaid-svg-EHyWdd6M8KECMfOC .node.clickable{cursor:pointer;}#mermaid-svg-EHyWdd6M8KECMfOC .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-EHyWdd6M8KECMfOC .arrowheadPath{fill:#333333;}#mermaid-svg-EHyWdd6M8KECMfOC .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-EHyWdd6M8KECMfOC .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-EHyWdd6M8KECMfOC .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-EHyWdd6M8KECMfOC .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-EHyWdd6M8KECMfOC .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-EHyWdd6M8KECMfOC .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-EHyWdd6M8KECMfOC .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-EHyWdd6M8KECMfOC .cluster text{fill:#333;}#mermaid-svg-EHyWdd6M8KECMfOC .cluster span{color:#333;}#mermaid-svg-EHyWdd6M8KECMfOC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-EHyWdd6M8KECMfOC .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-EHyWdd6M8KECMfOC rect.text{fill:none;stroke-width:0;}#mermaid-svg-EHyWdd6M8KECMfOC .icon-shape,#mermaid-svg-EHyWdd6M8KECMfOC .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-EHyWdd6M8KECMfOC .icon-shape p,#mermaid-svg-EHyWdd6M8KECMfOC .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-EHyWdd6M8KECMfOC .icon-shape .label rect,#mermaid-svg-EHyWdd6M8KECMfOC .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-EHyWdd6M8KECMfOC .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-EHyWdd6M8KECMfOC .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-EHyWdd6M8KECMfOC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 开发者
提出需求
AI Agent
调用 hy-app MCP / 官方文档
查询真实组件
查询真实 Props / Events / Slots / Hooks
检查 TypeScript 类型
检查平台兼容性
遵循 hy-app 开发规范
生成 Vue 3 + TypeScript + uni-app 代码
完成页面

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

三、hy-app的核心优势

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

hy-app面向 Vue 3 + TypeScript 项目设计。

推荐使用：

html 复制代码 
<script setup lang="ts">
</script>

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

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

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

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

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

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

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

html 复制代码 
<hy-popup
  :visible="visible"
  :close-on-click-overlay="true"
  @confirm="handleConfirm"
/>

但这些 API 可能根本不存在。

hy-app 的核心思路是：
#mermaid-svg-Zhegu4MrAqYkhjYA{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Zhegu4MrAqYkhjYA .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Zhegu4MrAqYkhjYA .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Zhegu4MrAqYkhjYA .error-icon{fill:#552222;}#mermaid-svg-Zhegu4MrAqYkhjYA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Zhegu4MrAqYkhjYA .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Zhegu4MrAqYkhjYA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Zhegu4MrAqYkhjYA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Zhegu4MrAqYkhjYA .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Zhegu4MrAqYkhjYA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Zhegu4MrAqYkhjYA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Zhegu4MrAqYkhjYA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Zhegu4MrAqYkhjYA .marker.cross{stroke:#333333;}#mermaid-svg-Zhegu4MrAqYkhjYA svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Zhegu4MrAqYkhjYA p{margin:0;}#mermaid-svg-Zhegu4MrAqYkhjYA .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Zhegu4MrAqYkhjYA .cluster-label text{fill:#333;}#mermaid-svg-Zhegu4MrAqYkhjYA .cluster-label span{color:#333;}#mermaid-svg-Zhegu4MrAqYkhjYA .cluster-label span p{background-color:transparent;}#mermaid-svg-Zhegu4MrAqYkhjYA .label text,#mermaid-svg-Zhegu4MrAqYkhjYA span{fill:#333;color:#333;}#mermaid-svg-Zhegu4MrAqYkhjYA .node rect,#mermaid-svg-Zhegu4MrAqYkhjYA .node circle,#mermaid-svg-Zhegu4MrAqYkhjYA .node ellipse,#mermaid-svg-Zhegu4MrAqYkhjYA .node polygon,#mermaid-svg-Zhegu4MrAqYkhjYA .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Zhegu4MrAqYkhjYA .rough-node .label text,#mermaid-svg-Zhegu4MrAqYkhjYA .node .label text,#mermaid-svg-Zhegu4MrAqYkhjYA .image-shape .label,#mermaid-svg-Zhegu4MrAqYkhjYA .icon-shape .label{text-anchor:middle;}#mermaid-svg-Zhegu4MrAqYkhjYA .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Zhegu4MrAqYkhjYA .rough-node .label,#mermaid-svg-Zhegu4MrAqYkhjYA .node .label,#mermaid-svg-Zhegu4MrAqYkhjYA .image-shape .label,#mermaid-svg-Zhegu4MrAqYkhjYA .icon-shape .label{text-align:center;}#mermaid-svg-Zhegu4MrAqYkhjYA .node.clickable{cursor:pointer;}#mermaid-svg-Zhegu4MrAqYkhjYA .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Zhegu4MrAqYkhjYA .arrowheadPath{fill:#333333;}#mermaid-svg-Zhegu4MrAqYkhjYA .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Zhegu4MrAqYkhjYA .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Zhegu4MrAqYkhjYA .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Zhegu4MrAqYkhjYA .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Zhegu4MrAqYkhjYA .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Zhegu4MrAqYkhjYA .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Zhegu4MrAqYkhjYA .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Zhegu4MrAqYkhjYA .cluster text{fill:#333;}#mermaid-svg-Zhegu4MrAqYkhjYA .cluster span{color:#333;}#mermaid-svg-Zhegu4MrAqYkhjYA div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Zhegu4MrAqYkhjYA .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Zhegu4MrAqYkhjYA rect.text{fill:none;stroke-width:0;}#mermaid-svg-Zhegu4MrAqYkhjYA .icon-shape,#mermaid-svg-Zhegu4MrAqYkhjYA .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Zhegu4MrAqYkhjYA .icon-shape p,#mermaid-svg-Zhegu4MrAqYkhjYA .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Zhegu4MrAqYkhjYA .icon-shape .label rect,#mermaid-svg-Zhegu4MrAqYkhjYA .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Zhegu4MrAqYkhjYA .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Zhegu4MrAqYkhjYA .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Zhegu4MrAqYkhjYA :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} hy-app 组件
TypeScript 类型定义
Props / Events / Slots / Methods
官方组件文档
MCP / llms.txt / LLM 文档
AI Agent

让 AI 尽可能基于真实的组件定义和官方资料 生成代码，而不是根据其他 UI 框架的经验猜测。

因此，使用 hy-app 进行 AI Coding 时应该遵循：

先查询，后生成；先验证 API，后写代码。

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

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

传统 AI Coding：
#mermaid-svg-Z01NNQXgf0iLVK9i{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Z01NNQXgf0iLVK9i .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Z01NNQXgf0iLVK9i .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Z01NNQXgf0iLVK9i .error-icon{fill:#552222;}#mermaid-svg-Z01NNQXgf0iLVK9i .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Z01NNQXgf0iLVK9i .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Z01NNQXgf0iLVK9i .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Z01NNQXgf0iLVK9i .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Z01NNQXgf0iLVK9i .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Z01NNQXgf0iLVK9i .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Z01NNQXgf0iLVK9i .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Z01NNQXgf0iLVK9i .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Z01NNQXgf0iLVK9i .marker.cross{stroke:#333333;}#mermaid-svg-Z01NNQXgf0iLVK9i svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Z01NNQXgf0iLVK9i p{margin:0;}#mermaid-svg-Z01NNQXgf0iLVK9i .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Z01NNQXgf0iLVK9i .cluster-label text{fill:#333;}#mermaid-svg-Z01NNQXgf0iLVK9i .cluster-label span{color:#333;}#mermaid-svg-Z01NNQXgf0iLVK9i .cluster-label span p{background-color:transparent;}#mermaid-svg-Z01NNQXgf0iLVK9i .label text,#mermaid-svg-Z01NNQXgf0iLVK9i span{fill:#333;color:#333;}#mermaid-svg-Z01NNQXgf0iLVK9i .node rect,#mermaid-svg-Z01NNQXgf0iLVK9i .node circle,#mermaid-svg-Z01NNQXgf0iLVK9i .node ellipse,#mermaid-svg-Z01NNQXgf0iLVK9i .node polygon,#mermaid-svg-Z01NNQXgf0iLVK9i .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Z01NNQXgf0iLVK9i .rough-node .label text,#mermaid-svg-Z01NNQXgf0iLVK9i .node .label text,#mermaid-svg-Z01NNQXgf0iLVK9i .image-shape .label,#mermaid-svg-Z01NNQXgf0iLVK9i .icon-shape .label{text-anchor:middle;}#mermaid-svg-Z01NNQXgf0iLVK9i .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Z01NNQXgf0iLVK9i .rough-node .label,#mermaid-svg-Z01NNQXgf0iLVK9i .node .label,#mermaid-svg-Z01NNQXgf0iLVK9i .image-shape .label,#mermaid-svg-Z01NNQXgf0iLVK9i .icon-shape .label{text-align:center;}#mermaid-svg-Z01NNQXgf0iLVK9i .node.clickable{cursor:pointer;}#mermaid-svg-Z01NNQXgf0iLVK9i .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Z01NNQXgf0iLVK9i .arrowheadPath{fill:#333333;}#mermaid-svg-Z01NNQXgf0iLVK9i .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Z01NNQXgf0iLVK9i .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Z01NNQXgf0iLVK9i .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Z01NNQXgf0iLVK9i .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Z01NNQXgf0iLVK9i .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Z01NNQXgf0iLVK9i .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Z01NNQXgf0iLVK9i .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Z01NNQXgf0iLVK9i .cluster text{fill:#333;}#mermaid-svg-Z01NNQXgf0iLVK9i .cluster span{color:#333;}#mermaid-svg-Z01NNQXgf0iLVK9i div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Z01NNQXgf0iLVK9i .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Z01NNQXgf0iLVK9i rect.text{fill:none;stroke-width:0;}#mermaid-svg-Z01NNQXgf0iLVK9i .icon-shape,#mermaid-svg-Z01NNQXgf0iLVK9i .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Z01NNQXgf0iLVK9i .icon-shape p,#mermaid-svg-Z01NNQXgf0iLVK9i .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Z01NNQXgf0iLVK9i .icon-shape .label rect,#mermaid-svg-Z01NNQXgf0iLVK9i .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Z01NNQXgf0iLVK9i .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Z01NNQXgf0iLVK9i .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Z01NNQXgf0iLVK9i :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 用户提问
帮我写一个 hy-app 登录页面
AI执行
凭模型记忆猜组件
凭经验猜 Props
凭经验猜 Events
直接生成代码

容易出现

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

而 hy-app 的目标是：
#mermaid-svg-yA4yAxJURtJzngfl{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-yA4yAxJURtJzngfl .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-yA4yAxJURtJzngfl .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-yA4yAxJURtJzngfl .error-icon{fill:#552222;}#mermaid-svg-yA4yAxJURtJzngfl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-yA4yAxJURtJzngfl .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-yA4yAxJURtJzngfl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-yA4yAxJURtJzngfl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-yA4yAxJURtJzngfl .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-yA4yAxJURtJzngfl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-yA4yAxJURtJzngfl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-yA4yAxJURtJzngfl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-yA4yAxJURtJzngfl .marker.cross{stroke:#333333;}#mermaid-svg-yA4yAxJURtJzngfl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-yA4yAxJURtJzngfl p{margin:0;}#mermaid-svg-yA4yAxJURtJzngfl .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-yA4yAxJURtJzngfl .cluster-label text{fill:#333;}#mermaid-svg-yA4yAxJURtJzngfl .cluster-label span{color:#333;}#mermaid-svg-yA4yAxJURtJzngfl .cluster-label span p{background-color:transparent;}#mermaid-svg-yA4yAxJURtJzngfl .label text,#mermaid-svg-yA4yAxJURtJzngfl span{fill:#333;color:#333;}#mermaid-svg-yA4yAxJURtJzngfl .node rect,#mermaid-svg-yA4yAxJURtJzngfl .node circle,#mermaid-svg-yA4yAxJURtJzngfl .node ellipse,#mermaid-svg-yA4yAxJURtJzngfl .node polygon,#mermaid-svg-yA4yAxJURtJzngfl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-yA4yAxJURtJzngfl .rough-node .label text,#mermaid-svg-yA4yAxJURtJzngfl .node .label text,#mermaid-svg-yA4yAxJURtJzngfl .image-shape .label,#mermaid-svg-yA4yAxJURtJzngfl .icon-shape .label{text-anchor:middle;}#mermaid-svg-yA4yAxJURtJzngfl .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-yA4yAxJURtJzngfl .rough-node .label,#mermaid-svg-yA4yAxJURtJzngfl .node .label,#mermaid-svg-yA4yAxJURtJzngfl .image-shape .label,#mermaid-svg-yA4yAxJURtJzngfl .icon-shape .label{text-align:center;}#mermaid-svg-yA4yAxJURtJzngfl .node.clickable{cursor:pointer;}#mermaid-svg-yA4yAxJURtJzngfl .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-yA4yAxJURtJzngfl .arrowheadPath{fill:#333333;}#mermaid-svg-yA4yAxJURtJzngfl .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-yA4yAxJURtJzngfl .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-yA4yAxJURtJzngfl .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-yA4yAxJURtJzngfl .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-yA4yAxJURtJzngfl .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-yA4yAxJURtJzngfl .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-yA4yAxJURtJzngfl .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-yA4yAxJURtJzngfl .cluster text{fill:#333;}#mermaid-svg-yA4yAxJURtJzngfl .cluster span{color:#333;}#mermaid-svg-yA4yAxJURtJzngfl div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-yA4yAxJURtJzngfl .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-yA4yAxJURtJzngfl rect.text{fill:none;stroke-width:0;}#mermaid-svg-yA4yAxJURtJzngfl .icon-shape,#mermaid-svg-yA4yAxJURtJzngfl .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-yA4yAxJURtJzngfl .icon-shape p,#mermaid-svg-yA4yAxJURtJzngfl .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-yA4yAxJURtJzngfl .icon-shape .label rect,#mermaid-svg-yA4yAxJURtJzngfl .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-yA4yAxJURtJzngfl .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-yA4yAxJURtJzngfl .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-yA4yAxJURtJzngfl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 用户提出需求
AI Agent读取hy-app skills开发规范
然后调用hy-app MCP
查询真实组件
查询真实 API
查询 TypeScript 类型
查询官方示例
检查平台兼容性
遵循 hy-app 规范生成代码

例如：

text 复制代码 
用户：
使用 `hy-app` 做一个登录页面

AI 应该先：

text 复制代码 
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 工具遵循：

text 复制代码 
当用户要求使用 `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可以提供：

text 复制代码 
/llms.txt
/llms-full.txt

llms.txt

让 AI 快速了解：

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

llms-full.txt

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

text 复制代码 
组件
Props
Events
Slots
Hooks
TypeScript 类型
示例
平台说明
使用规范

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

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

例如项目规定：

text 复制代码 
Vue 3
TypeScript
uni-app
hy-app

那么 AI 应该统一：

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

避免出现：

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

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

九、亮色 / 暗色主题

现代移动应用经常需要：

复制代码 
亮色主题
暗色主题
品牌主题
自定义主题

hy-app提供统一的主题定制能力。

可以形成：
#mermaid-svg-34FiwnWw1PPQKJIZ{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-34FiwnWw1PPQKJIZ .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-34FiwnWw1PPQKJIZ .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-34FiwnWw1PPQKJIZ .error-icon{fill:#552222;}#mermaid-svg-34FiwnWw1PPQKJIZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-34FiwnWw1PPQKJIZ .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-34FiwnWw1PPQKJIZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-34FiwnWw1PPQKJIZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-34FiwnWw1PPQKJIZ .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-34FiwnWw1PPQKJIZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-34FiwnWw1PPQKJIZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-34FiwnWw1PPQKJIZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-34FiwnWw1PPQKJIZ .marker.cross{stroke:#333333;}#mermaid-svg-34FiwnWw1PPQKJIZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-34FiwnWw1PPQKJIZ p{margin:0;}#mermaid-svg-34FiwnWw1PPQKJIZ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-34FiwnWw1PPQKJIZ .cluster-label text{fill:#333;}#mermaid-svg-34FiwnWw1PPQKJIZ .cluster-label span{color:#333;}#mermaid-svg-34FiwnWw1PPQKJIZ .cluster-label span p{background-color:transparent;}#mermaid-svg-34FiwnWw1PPQKJIZ .label text,#mermaid-svg-34FiwnWw1PPQKJIZ span{fill:#333;color:#333;}#mermaid-svg-34FiwnWw1PPQKJIZ .node rect,#mermaid-svg-34FiwnWw1PPQKJIZ .node circle,#mermaid-svg-34FiwnWw1PPQKJIZ .node ellipse,#mermaid-svg-34FiwnWw1PPQKJIZ .node polygon,#mermaid-svg-34FiwnWw1PPQKJIZ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-34FiwnWw1PPQKJIZ .rough-node .label text,#mermaid-svg-34FiwnWw1PPQKJIZ .node .label text,#mermaid-svg-34FiwnWw1PPQKJIZ .image-shape .label,#mermaid-svg-34FiwnWw1PPQKJIZ .icon-shape .label{text-anchor:middle;}#mermaid-svg-34FiwnWw1PPQKJIZ .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-34FiwnWw1PPQKJIZ .rough-node .label,#mermaid-svg-34FiwnWw1PPQKJIZ .node .label,#mermaid-svg-34FiwnWw1PPQKJIZ .image-shape .label,#mermaid-svg-34FiwnWw1PPQKJIZ .icon-shape .label{text-align:center;}#mermaid-svg-34FiwnWw1PPQKJIZ .node.clickable{cursor:pointer;}#mermaid-svg-34FiwnWw1PPQKJIZ .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-34FiwnWw1PPQKJIZ .arrowheadPath{fill:#333333;}#mermaid-svg-34FiwnWw1PPQKJIZ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-34FiwnWw1PPQKJIZ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-34FiwnWw1PPQKJIZ .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-34FiwnWw1PPQKJIZ .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-34FiwnWw1PPQKJIZ .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-34FiwnWw1PPQKJIZ .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-34FiwnWw1PPQKJIZ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-34FiwnWw1PPQKJIZ .cluster text{fill:#333;}#mermaid-svg-34FiwnWw1PPQKJIZ .cluster span{color:#333;}#mermaid-svg-34FiwnWw1PPQKJIZ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-34FiwnWw1PPQKJIZ .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-34FiwnWw1PPQKJIZ rect.text{fill:none;stroke-width:0;}#mermaid-svg-34FiwnWw1PPQKJIZ .icon-shape,#mermaid-svg-34FiwnWw1PPQKJIZ .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-34FiwnWw1PPQKJIZ .icon-shape p,#mermaid-svg-34FiwnWw1PPQKJIZ .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-34FiwnWw1PPQKJIZ .icon-shape .label rect,#mermaid-svg-34FiwnWw1PPQKJIZ .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-34FiwnWw1PPQKJIZ .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-34FiwnWw1PPQKJIZ .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-34FiwnWw1PPQKJIZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} hy-app Theme
Light
Dark
Application UI

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

text 复制代码 
背景颜色
文字颜色
边框颜色
按钮颜色
卡片颜色

而是由统一的主题系统控制。

这对于 AI Coding 同样重要：

AI 优先使用 hy-app 的主题体系，而不是每生成一个页面就重新发明一套颜色规范。

十、国际化

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

典型场景：

text 复制代码 
中文
英文
日文
其他语言

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

text 复制代码 
加载
空状态
分页
日期
选择器
提示

应该能够配合统一的国际化机制。

这样可以避免组件内部大量写死语言文本。

十一、跨端开发

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可以理解为：
#mermaid-svg-tOHUMyfMkoIwrDo3{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-tOHUMyfMkoIwrDo3 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-tOHUMyfMkoIwrDo3 .error-icon{fill:#552222;}#mermaid-svg-tOHUMyfMkoIwrDo3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-tOHUMyfMkoIwrDo3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-tOHUMyfMkoIwrDo3 .marker.cross{stroke:#333333;}#mermaid-svg-tOHUMyfMkoIwrDo3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-tOHUMyfMkoIwrDo3 p{margin:0;}#mermaid-svg-tOHUMyfMkoIwrDo3 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-tOHUMyfMkoIwrDo3 .cluster-label text{fill:#333;}#mermaid-svg-tOHUMyfMkoIwrDo3 .cluster-label span{color:#333;}#mermaid-svg-tOHUMyfMkoIwrDo3 .cluster-label span p{background-color:transparent;}#mermaid-svg-tOHUMyfMkoIwrDo3 .label text,#mermaid-svg-tOHUMyfMkoIwrDo3 span{fill:#333;color:#333;}#mermaid-svg-tOHUMyfMkoIwrDo3 .node rect,#mermaid-svg-tOHUMyfMkoIwrDo3 .node circle,#mermaid-svg-tOHUMyfMkoIwrDo3 .node ellipse,#mermaid-svg-tOHUMyfMkoIwrDo3 .node polygon,#mermaid-svg-tOHUMyfMkoIwrDo3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-tOHUMyfMkoIwrDo3 .rough-node .label text,#mermaid-svg-tOHUMyfMkoIwrDo3 .node .label text,#mermaid-svg-tOHUMyfMkoIwrDo3 .image-shape .label,#mermaid-svg-tOHUMyfMkoIwrDo3 .icon-shape .label{text-anchor:middle;}#mermaid-svg-tOHUMyfMkoIwrDo3 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-tOHUMyfMkoIwrDo3 .rough-node .label,#mermaid-svg-tOHUMyfMkoIwrDo3 .node .label,#mermaid-svg-tOHUMyfMkoIwrDo3 .image-shape .label,#mermaid-svg-tOHUMyfMkoIwrDo3 .icon-shape .label{text-align:center;}#mermaid-svg-tOHUMyfMkoIwrDo3 .node.clickable{cursor:pointer;}#mermaid-svg-tOHUMyfMkoIwrDo3 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-tOHUMyfMkoIwrDo3 .arrowheadPath{fill:#333333;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-tOHUMyfMkoIwrDo3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-tOHUMyfMkoIwrDo3 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-tOHUMyfMkoIwrDo3 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-tOHUMyfMkoIwrDo3 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-tOHUMyfMkoIwrDo3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-tOHUMyfMkoIwrDo3 .cluster text{fill:#333;}#mermaid-svg-tOHUMyfMkoIwrDo3 .cluster span{color:#333;}#mermaid-svg-tOHUMyfMkoIwrDo3 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-tOHUMyfMkoIwrDo3 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-tOHUMyfMkoIwrDo3 rect.text{fill:none;stroke-width:0;}#mermaid-svg-tOHUMyfMkoIwrDo3 .icon-shape,#mermaid-svg-tOHUMyfMkoIwrDo3 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-tOHUMyfMkoIwrDo3 .icon-shape p,#mermaid-svg-tOHUMyfMkoIwrDo3 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-tOHUMyfMkoIwrDo3 .icon-shape .label rect,#mermaid-svg-tOHUMyfMkoIwrDo3 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-tOHUMyfMkoIwrDo3 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-tOHUMyfMkoIwrDo3 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-tOHUMyfMkoIwrDo3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} hy-app
UI 组件
开发规范
AI 能力
移动端 UI
业务组件
Hooks
TypeScript
Theme
i18n
MCP
llms
Skills
Vue 3 + uni-app
跨端应用

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

十五、快速开始

安装组件

bash 复制代码 
npm install @hy-app/ui

安装MCP

bash 复制代码 
# 全局安装
npm install -g @hy-app/mcp

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

trae编辑器配置mcp工具

json 复制代码 
{
    "mcpServers": {
        "hy-app": {
            "command": "npx",
            "args": ["@hy-app/mcp"]
        }
    }
}

安装skills

bash 复制代码 
pnpm dlx skills add hy‑uniapp/skills
# or
npx skills add hy-uniapp/skills

官方资源：

相关推荐
阿琳a_2 小时前
b-map-viewer：面向 Vue 3 的地图可视化 SDK，从接入到展示再到交互分析
前端·javascript·vue.js·gis·数据可视化·地图
FinelyYang2 小时前
uniapp使用kkfileview在线预览ppt，excel，word，pdf类型文件
pdf·uni-app·powerpoint
齐 飞3 小时前
VUE2常用语法总结
javascript·vue.js
北城笑笑3 小时前
Vue 106 ，上篇：前端桌面端应用实现方案（ Electron 框架详细介绍，Vue + Electron ）
前端·javascript·vue.js·python·electron
2501_916008893 小时前
iPhone 设备信息查看，用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
不磕了还不行4 小时前
用 Vue + Element UI 把元宝搜索的返回值做成“能点开检查的证据卡片”
前端·vue.js·ui
FRing0315 小时前
vue2干货总结2（v-bind、v-for、v-model、指令修饰符、v-bind操作class和style）
开发语言·前端·vue.js·vue2
徐小夕18 小时前
深度剖析 30k star 的编码 Agent DeepSeek-Reasonix：长会话 Token 成本直降 80%
前端·vue.js·github
ModyQyW20 小时前
vite-plugin-uni-manifest 0.7：在 uni-app 读取之前生成
前端·uni-app
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04几个好用的ip纯净度检测网站05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06苹果iPA游戏软件资源下载网站07昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战08如何新建文件夹？ 电脑新建文件夹的4种方法09Dify：一站式AI应用开发平台全解析与Windows部署指南10Android 屏幕适配系列开篇：核心概念、官方机制与主流方案