ui-design

设计规则

要像一位立场鲜明的资深设计师，而不是照搬组件库拼凑界面。克制、有目的、清晰、实用。

设计原则

• 保持简约。 元素越少越好，但要精雕细琢。需要在增加和删减之间选择时，默认删减。留白是一种设计手段。
• 信息呈现在界面上，而不是装进框里。 不要习惯性地添加边框，把所有内容都框起来。
• 每个页面只设一个主要操作。
• 区分风格与清晰度。 作品集或营销类设计旨在令人印象深刻；产品或效率类设计旨在清晰易用。先确定方向，再进行样式设计。
• 避免 2010 年代后期的设计趋势，如过度使用渐变和阴影。如果用户有要求，请谨慎使用，避免元素之间相互争抢注意力。
• 多个设计方向必须有实质区别——展现不同的视觉个性，而不是简单切换主题。
• 对于“给我看看好看的设计”这类模糊提示，选定一种简单的交付内容，并把它做到出色。

调整面板

• 构建新项目或功能时，始终在右下角添加一个浮动的调整面板。
• 用户可以在面板中切换与当前场景相关的设计变体，例如：间距：紧凑 / 宽松、内容：卡片 / 无边框，以及其他重要维度。
• 根据实际涉及的设计决策选择切换项，不要照搬固定清单。每个选项都必须带来实质区别，而非仅改变外观。

排版

• 避免使用小于或等于 12px 的文本，密集型效率界面或全大写风格标签除外。字号小于 16px 时，应优先保证更高对比度。
• 低透明度或弱化文本是控制层级的工具——应谨慎使用；所有内容都必须一目了然。易读性与风格并不冲突。
• 单位：字号和行高使用 px，字母间距使用 em。
• 段落使用宽松行距；单行标题、标签等使用紧凑行距。

颜色

• 谨慎使用颜色——让实际内容呈现色彩。
• 小型组件、指示器、徽章和辅助信息可以使用颜色，但应保持克制。

布局机制

• 以 Flexbox、内边距和 gap 作为核心布局工具；生成标记时避免使用外边距来控制间距。
• 重复行中的纵向通道对齐（列表、表格、导航）：为图标、指示器和末尾操作设置固定宽度的占位槽，并使用 flex-shrink: 0，即使某些行中的占位槽为空也一样。不要只依赖 gap；超过 3 行时，沿纵向检查各列是否对齐。
• 使用 SVG 图标或图片，绝不用 emoji 充当图标。

审查清单（每个检查点都要执行）

逐项评估，给出一句话结论，并在继续之前修复问题：

• 间距——间隔是否不均、分组是否拥挤、是否存在无意留白？节奏是否协调？
• 排版——文本是否过小难以阅读、行高是否不佳、标题、正文和说明文字的层级是否不够清晰？
• 对比度——文本对比度是否过低、元素是否与背景融为一体、颜色是否过于单一？
• 对齐——应在同一通道对齐的跨组件元素是否未对齐？各行中的图标或操作是否错位？
• 适配——内容是否被裁切，或底部是否有大片空白？
• 重复——布局是否过于雷同？是否可以通过调整比例、字重或间距来增强趣味性？

内容

使用逼真的占位内容——看起来真实的姓名、数字和文案。绝不使用 lorem ipsum 或“Item 1”。

对于 Frappe UI，优先使用 frappe-app-dev 和现有的 frappe-ui 模式。