Back to Details

astrale-frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Astrale Frontend Design

Astrale前端设计

Build the Domain as a focused product interface, not a landing page. Domains live inside the Astrale GUI and inherit its surrounding shell. Do not add a hero, large presentation area, redundant page header, or empty space before useful content.
Apply this skill together with 
astrale-domain
View guidance. Reuse the host application's visual language and the project's existing primitives unless the task establishes a different direction.
将Domain构建为聚焦型产品界面，而非着陆页。Domains运行在Astrale GUI内部，并继承其外围框架。请勿添加英雄区、大型展示区域、冗余页面页眉，或在有效内容前设置空白区域。
请结合
astrale-domain
视图指南运用此技能。除非任务指定了不同方向，否则请复用宿主应用的视觉语言及项目现有基础组件。

Plan The Information Architecture

规划信息架构

Before writing UI code, sketch a high-level wireframe mentally or in a temporary note. Identify:
  • the user's primary task;
  • the main sections and subsections;
  • the logical links between them;
  • their relative importance;
  • which information belongs together;
  • the correct parent for every subsection.
Make every section one coherent logical unit. Let information architecture and task priority drive the layout, order, space, and visual weight. Put state and controls close to the content they affect.
编写UI代码前，请在脑中或临时笔记中勾勒高保真线框图。明确：
  • 用户的核心任务；
  • 主要板块及子板块；
  • 板块间的逻辑关联；
  • 各板块的相对重要性；
  • 哪些信息属于同一组；
  • 每个子板块的正确父级板块。
确保每个板块都是一个连贯的逻辑单元。让信息架构和任务优先级驱动布局、顺序、空间分配及视觉权重。将状态控件放置在其影响的内容附近。

Keep The Interface Restrained

保持界面简洁克制

Avoid AI-slop aesthetics. Do not turn every element into a card, nest containers without a real grouping need, or make cards lift on hover. Use hover only to clarify interaction, and provide the same clarity for keyboard and touch users.
Prefer a small number of strong regions, clear hierarchy, compact spacing, and consistent controls. Do not add decorative gradients, pills, oversized metrics, animation, or ornamental copy by default. Each visual device must communicate structure, state, priority, or affordance.
避免AI生成的冗余美学风格。不要将每个元素都做成卡片，不要无意义地嵌套容器，也不要让卡片在 hover 时抬起。仅在需要明确交互时使用hover效果，同时为键盘和触控用户提供同等清晰的交互提示。
优先采用少量清晰的区域划分、明确的层级结构、紧凑的间距及统一的控件。默认情况下，请勿添加装饰性渐变、胶囊状元素、超大尺寸指标、动画或装饰性文案。每个视觉元素都必须用于传达结构、状态、优先级或交互可能性。

Make Interaction States Precise

精准设计交互状态

Model the relevant initial, loading, empty, ready, submitting, success, failure, unauthorized, and disabled states before considering a flow complete.
  • Show loading at the scope that is actually waiting: inside a submitted button for a local action, or with a page skeleton for initial page content. Never show multiple loaders for one action.
  • Prevent duplicate submissions. Preserve user input on failure and place actionable feedback next to the affected control or content.
  • Handle creation clearly: show that the action succeeded, insert the result where the user expects it, and move focus only when doing so helps the next task.
  • Handle deletion clearly: distinguish reversible removal from destructive deletion and confirm only when the consequence warrants interruption.
  • Use optimistic list updates when the result is predictable. Roll back on failure, show the failure, and reconcile the interface with committed Kernel state.
  • Close an open dropdown when the user clicks outside it or presses Escape. Support keyboard navigation, expose the selected item, and return focus to the trigger when appropriate.
  • Make long labels and values part of layout testing. Wrap when reading matters; truncate only in genuinely fixed space and provide access to the full value. Never let text cover adjacent actions.
  • Keep dialogs, menus, forms, and inline actions usable by keyboard. Use visible focus, semantic controls, correctly associated labels, and accessible status or error announcements.
  • Make hover, disabled, pending, success, and error states visually distinct without relying on color alone.
在认为流程完成前，先建模相关的初始、加载、空态、就绪、提交中、成功、失败、未授权及禁用状态。
  • 在实际等待的范围内显示加载状态：对于本地操作，在提交按钮内部显示加载；对于初始页面内容，使用页面骨架屏。同一操作绝不要显示多个加载器。
  • 防止重复提交。提交失败时保留用户输入，并将可操作的反馈信息放置在受影响的控件或内容旁边。
  • 清晰处理创建操作：显示操作成功状态，将结果插入用户预期的位置，仅在有助于后续任务时才移动焦点。
  • 清晰处理删除操作：区分可撤销的移除与破坏性删除，仅当后果严重到需要中断用户操作时才进行确认。
  • 当结果可预测时，使用乐观列表更新。失败时回滚，显示失败信息，并使界面与已提交的Kernel状态保持一致。
  • 用户点击外部或按下Escape键时，关闭打开的下拉菜单。支持键盘导航，显示选中项，并在合适时将焦点返回至触发控件。
  • 将长标签和长值纳入布局测试。当可读性重要时自动换行；仅在空间确实固定时才截断，并提供查看完整内容的途径。绝不要让文本覆盖相邻的操作按钮。
  • 确保对话框、菜单、表单及内联操作可通过键盘操作。使用可见的焦点样式、语义化控件、正确关联的标签，以及无障碍的状态或错误提示。
  • 使hover、禁用、待处理、成功及错误状态在视觉上可区分，且不单独依赖颜色。

Reduce Text Deliberately

刻意精简文案

Keep only text that helps the user understand the state, decide, or act. Preserve necessary labels, feedback, and accessibility text. Remove introductions, repetition, obvious help, decorative copy, and descriptions that merely restate a heading or control.
After implementation, perform a dedicated text-reduction pass. Read every visible string in context and remove it unless the interface becomes harder to understand, decide from, or act on.
仅保留有助于用户理解状态、做出决策或执行操作的文案。保留必要的标签、反馈信息及无障碍文案。删除介绍性文字、重复内容、显而易见的帮助信息、装饰性文案，以及仅复述标题或控件功能的描述。
实现完成后，专门进行一次文案精简检查。结合上下文阅读每一处可见的文字，除非删除会导致界面更难理解、决策或操作，否则将其移除。

Verify The Result

验证最终结果

Exercise the real task flows with representative, empty, long, loading, and failing data. Check creation, deletion, rollback, outside-click and Escape behavior, keyboard order, narrow layouts, and visible feedback. Then review the whole screen once more and remove redundant cards, effects, copy, and space before useful content.
使用代表性数据、空数据、长数据、加载状态及失败状态测试真实的任务流程。检查创建、删除、回滚、外部点击与Escape键行为、键盘导航顺序、窄屏布局及可见反馈。然后再次检查整个界面，移除冗余的卡片、效果、文案及有效内容前的空白区域。