关于 generative-ui
Generative UI 是一项设计技能，用于规定 AI 生成界面的组合方式和约束。内容涵盖组件库、布局与样式规则、交互、无障碍要求及回退标准。
主要功能
- 01定义组件库和布局规则
- 02设定视觉样式边界
- 03规定交互模式
- 04包含无障碍要求
- 05制定质量和回退标准
适用场景
- 01设计 AI 生成仪表板的规则
- 02约束生成的表单和图表
- 03规划界面生成失败时的回退
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/generative-ui确认已加载。
详细介绍
生成式 UI
生成式 UI 指 AI 即时创建界面元素（表单、卡片、图表、布局），而不是以纯文本回应。界面本身也成为模型的输出。
生成式 UI 带来的变化
传统 UI 是预先设计好的。生成式 UI 则是在当下创建的：
- 静态 UI：设计师创建所有可能的屏幕。开发者构建这些屏幕。用户在屏幕之间导航。
- 生成式 UI：AI 根据用户需求创建界面元素。没有任何屏幕是预先设计好的。 这使设计师的角色从设计屏幕转变为设计 AI 用来生成屏幕的规则、约束和模式。
生成式 UI 的设计约束
AI 需要遵循护栏来生成内容：
- 组件库：AI 可组合使用的一组已定义组件（卡片、表格、表单、图表、按钮）
- 布局规则：AI 必须遵循的网格系统、间距和层级规则
- 样式边界：AI 必须遵守的颜色、排版和视觉风格
- 交互模式：生成元素的行为方式（可点击、可编辑、可关闭）
- 无障碍要求：生成的 UI 必须自动符合无障碍标准
何时使用生成式 UI
在以下情况下，生成式 UI 效果显著：
- 输出是适合以可视化方式呈现的结构化数据（表格、图表、比较）
- 用户的请求暗示需要一个界面（例如，“给我展示一个……仪表板”）
- 交互元素比文本更实用（例如，表单、选择器、切换开关）
- 内容变化很大，无法为每种情况预先设计
何时不使用
- 纯文本更清晰、更简单时
- 生成的 UI 可能令人困惑或不一致时
- 无法保证无障碍性时
- 用户期望界面可预测且稳定时
设计产物
- 生成式 UI 组件库（AI 可使用的组件）
- 生成规则和约束规范
- 生成界面的质量标准
- 生成失败时的备用设计
评论
支持 Markdown