当需要在 HNULS-LuminaStudio 中设计、编写、重构或重新设计渲染器端前端 UI 时使用，遵循本项目针对紧凑面板、表单、编辑器和配置 UI 的首选视觉语言。特别适用于用户明确要求更紧凑的间距、更清晰的层级、更深的次要文本、基于文本的类型选择器、分层左侧标记，或一致的排版、间距和 UI 规则而非临时样式时。
仅在明确调用此技能或用户明确要求应用此前端编写风格时遵循。
以紧凑、可读、面向面板的 Lumina 风格编写渲染器 UI：
将此技能应用于：
LuminaStudio/src/renderer/src/views/**LuminaStudio/src/renderer/src/components/**保留项目规则：
编辑前：
除非用户另有要求，否则优先使用与 IterationNodePanel.vue 相同的密度。
system-xl-semiboldsystem-sm-semibold-uppercase 或 text-xs font-semibold uppercasetext-[13px] font-semibold leading-[18px]text-xstext-xs leading-5避免：
使用比默认冲淡占位符更深的灰色。
text-gray-800 或 text-gray-900text-gray-500 或 text-gray-600text-gray-400避免：
text-gray-300默认使用紧凑的面板间距。
px-4 py-3space-y-2 或 space-y-3py-2 到 py-3pl-3 或 pl-4gap-1、gap-1.5、gap-2避免：
对于面板、编辑器和配置 UI：
对于嵌套的类模式结构：
避免：
语义化使用强调色：
对于嵌套层级：
在一个组件内保持颜色映射稳定。
优先使用轻量级控件：
当控件在密集编辑器中重复多次时，倾向于使用类文本控件而非带边框按钮。
对于每个可编辑行：
优先使用单行或一行半的行，而非高大的堆叠表单。
精确使用三个信息层级：
如果一行感觉繁忙：
text-xs 以下之前先压缩间距不要在密集编辑器中留下永久性的笨重警告块，除非消息是持久且关键的。
优先使用：
对于浮动消息：
当用户要求：
gray-500/600在此技能下完成 UI 工作之前，验证：
在编码任务中应用此技能时：