east-ui
为 East 语言提供类型化的 UI 组件库,实现声明式界面描述。
安装使用
复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:
帮我安装这个 AI Skill:east-ui。 它的用途是:为 East 语言提供类型化的 UI 组件库,实现声明式界面描述。 完整的 Skill 内容见:https://321skill.com/skills/east-ui/raw/index.md 请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我用 East UI 设计一个用户数据仪表盘,包含数据概览卡片、一个近30天趋势的折线图和一个用户列表表格。”,它会引导你使用 East 函数组合 Stack、Stat、LineChart 和 Table 等组件,生成对应的 UI 描述数据结构。或者
对AI说:“我想创建一个带有表单提交按钮的反馈收集界面。”,它会演示如何使用 East UI 的 Form 相关组件(如 Input, Textarea, Button)来构建界面逻辑。
介绍
East UI 是一个专为 East 语言设计的 UI 组件库,它解决了在 AI 驱动的业务优化场景中,如何以声明式、可移植的方式定义用户界面的问题。它不直接渲染界面,而是生成描述 UI 布局的数据结构,这使得同一套界面描述可以在不同的渲染环境(如 React、VSCode 预览)中复用。
使用 East UI 时,开发者通过导入其类型化组件(如 Button、Stack、Table),在 East 函数中组合这些组件来构建界面逻辑。生成的 UI 描述结构可以被专门的渲染器(如配套的 React 包或 VSCode 扩展)解析并最终呈现给用户,实现了业务逻辑与界面渲染的解耦。
这个 Skill 非常适合正在使用或探索 East 语言进行智能体开发、需要构建复杂交互界面的前端开发、全栈开发和智能体开发者。它特别适合那些希望将 AI 业务逻辑与用户界面清晰分离的项目。
需要注意的是,East UI 深度绑定 East 语言,因此使用者需要先学习 East 语言的基本概念。其核心价值在于为 East 生态提供了一套标准、类型安全的 UI 描述方案,适合在 Elara AI 的技术栈内构建端到端的 AI 应用。
核心特点
与直接操作 DOM 或特定框架的 UI 库不同,East UI 生成的是与渲染环境无关的 UI 描述数据结构,实现了真正的界面描述与渲染分离;它深度集成 East 语言的类型系统,为组件提供了完整的类型安全。
注意事项
不适合不使用 East 语言或不需要将 UI 作为数据描述进行跨环境移植的传统 Web 开发项目。
常见问题
East UI 和 React 组件库(如 Ant Design)有什么区别?
East UI 生成的是抽象的 UI 描述数据,不直接渲染,可被不同渲染器使用;而 React 组件库直接产出 React 组件,绑定在 React 生态内。
使用 East UI 需要先学 East 语言吗?
是的,East UI 是 East 语言的 UI 扩展,必须在其函数中调用,因此需要掌握 East 语言基础。
给 AI 助手的安装指引
如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:
请访问 https://321skill.com/skills/east-ui/raw/index.md 读取 east-ui 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址:/skills/east-ui/raw/index.md(查看排版版本)