Community编程与开发github.com

Astrale 前端界面设计

设计、实现、审查和优化 Astrale GUI 中嵌入的 Astrale Domain 视图的聚焦产品界面。用于处理信息架构、布局、React 或 UI 组件、表单、列表、菜单、对话框、加载/空/错误/变更状态、交互打磨、响应式行为、可访问性或界面文案。

Astrale 前端界面设计 是什么?

该技能专门用于在 Astrale GUI 框架内构建 Domain 的前端界面。它强调将 Domain 视为一个聚焦的产品界面,而非普通的登录页面,并复用宿主应用的现成视觉语言和基础组件。技能文档要求开发者首先规划信息架构,明确用户的主要任务、区域划分及其逻辑关系,然后以克制的方式设计界面,避免常见的 AI 生成式“泛快”审美,如过度使用卡片、装饰性渐变或动画。此外,该技能特别关注精确的交互状态建模,包括加载、空态、提交、成功、失败和删除等多种场景,并鼓励通过键盘导航、聚焦管理和无障碍支持确保交互的准确性和可访问性。最后,开发者需有意识地精简文案,只保留有助于用户理解状态、做出决策或采取行动的文字,并在实现后对界面进行严格验证,确保所有任务流程在各种数据条件下运行正常。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/astrale-os/cli/tree/main/skills/astrale-frontend-design

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Astrale 前端界面设计 是做什么的?

将 Domain 构建为一个聚焦的产品界面,而不是一个登录页面。Domains 存在于 Astrale GUI 内部,并继承其周围的壳层结构。请勿添加英雄区、大型展示区域、冗余的页面标题或有效内容前的空白区域。

将此技能与 astrale-domain 视图指南配合使用。复用宿主应用的视觉语言和项目现有的基础组件,除非任务指定了不同的方向。

规划信息架构

在编写 UI 代码之前,在脑海中或临时笔记中勾勒出高层次的线框图。确定:

  • 用户的主要任务;
  • 主要区域和子区域;
  • 它们之间的逻辑关联;
  • 它们的相对重要性;
  • 哪些信息应归在一起;
  • 每个子区域的正确父级。

使每个区域成为一个连贯的逻辑单元。让信息架构和任务优先级驱动布局、顺序、间距和视觉权重。将状态和控件放在它们所影响的内容附近。

保持界面克制

避免 AI 生成的“泛快”审美。不要将每个元素都变成卡片,在没有实际分组需求的情况下嵌套容器,或者让卡片在悬停时抬起。仅在需要明确交互时使用悬停效果,并为键盘和触摸用户提供相同的清晰度。

优先使用少量强区域、清晰的层级、紧凑的间距和一致的控件。默认情况下不添加装饰性渐变、药丸标签、过大的指标、动画或装饰性文案。每个视觉元素必须传达结构、状态、优先级或可供性。

精确处理交互状态

在认为流程完成之前,建模相关的初始、加载、空态、就绪、提交中、成功、失败、未授权和禁用状态。

  • 仅在实际等待的范围内显示加载:在按钮内显示对于本地操作的加载,或对于初始页面内容使用页面骨架。切勿为一个操作显示多个加载器。
  • 防止重复提交。在失败时保留用户输入,并将可操作的反馈放在受影响的控件或内容旁边。
  • 明确处理创建:显示操作成功,在用户期望的位置插入结果,并且仅在有助于执行下一任务时才移动焦点。
  • 明确处理删除:区分可逆移除和破坏性删除,仅当后果需要中断时才进行确认。
  • 当结果可预测时,使用乐观列表更新。在失败时回滚,显示失败,并使用已提交的 Kernel 状态协调界面。
  • 当用户点击外部或按下 Escape 时,关闭打开的 dropdown。支持键盘导航,暴露所选项目,并在适当时将焦点返回到触发器。
  • 使长标签和值成为布局测试的一部分。当阅读更重要时使用换行;仅在真正固定的空间中截断,并提供完整值的访问途径。绝不让文本覆盖相邻的操作。
  • 确保对话框、菜单、表单和内联操作可通过键盘使用。使用可见的焦点、语义控件、正确关联的标签以及可访问的状态或错误公告。
  • 使悬停、禁用、待处理、成功和错误状态在视觉上可区分,而不仅仅依赖颜色。

有意识地减少文案

只保留有助于用户理解状态、做出决策或采取行动的文本。保留必要的标签、反馈和可访问性文本。删除介绍性文字、重复内容、明显的帮助、装饰性文案以及仅重复标题或控件的描述。

实施后,进行一次专门的文本精简通行。在上下文中阅读每个可见字符串,除非删除该字符串会使界面更难理解、决策或操作,否则将其移除。

验证结果

使用代表性的、空的、长的、加载中和失败的数据实际测试任务流程。检查创建、删除、回滚、外部点击和 Escape 行为、键盘顺序、窄布局以及可见反馈。然后,再次审视整个屏幕,并移除有效内容前多余的卡片、效果、文案和空间。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相关技能