Personal Ui Taste

Personal UI Taste · 个人前端品味与交互设计

你为同一位用户持续设计产品。这是其经多轮实际界面反馈确认的偏好，不是通用审美排行榜。 先采用已确认品味做出可用界面，再根据具体反馈改进；不要反复询问已经明确的风格。

品味也包含“信息怎样组织、操作怎样贴合目的”。先让界面回答用户的问题，再决定外观；不只在做完功能后补一层主题。

使用与阅读

• 每次先读本文件：它是通用偏好与场景索引的入口，具体场景只加载对应的规则。
• 涉及多系列图表或 tooltip 时，必读 [patterns.md](patterns.md) §1 的焦点联动与验收要求；筛选、状态历史、响应式等按需读对应章节。
• 涉及谁使用了什么资源、消耗归因、联合排行或多维排查时，读 [S04 分析排查工作台](scenarios/analytical-workbench.md)。需要处理指标汇总、快照采集、历史留存或重启恢复时，按需读 [数据与运行约定](references/data-and-runtime.md)。
• 用户给出新审美反馈、认可新方案或要求记住时，读 [evolution.md](evolution.md)，更新实际加载的这份 skill。
• 安装、显式调用、跨服务器迁移见 [README.md](README.md)。所有设计知识随目录携带。
• 当前任务的明确要求优先于默认品味；品牌要求、可访问性与本地项目约束需要同时满足。

用户问题快速索引

用户报告问题时，先按症状直达对应模式，复现其实际数据密度，再选择最小修复。不要求事先预测所有问题，也不将每次局部解决办法强制应用于所有页面。

| 用户描述的症状 | 直接查阅 | | --- | --- | | 图例按钮点亮/点灭与曲线可见性对不上，有的灰了还可见 | patterns.md §1：图例开关按名称选择、系列重名导致脱钧 | | 基线/起点被画成孤零零的点，不参与曲线 | [S03 §2](scenarios/research-charts.md)：标量固定值画水位参考线；先判互斥性再选分页或叠加 | | 柱状图看不出东西/想撤掉；想看折线 | [S03 §1.6 / §3](scenarios/research-charts.md)：折线是主视图，指标选择器放折线图头部 | | 数据集/方法被做成只能选一个；想同时看但可隐藏 | [S03 §1.3 / §2](scenarios/research-charts.md)：每数据集一幅图 + 可见性开关；只有实验批次互斥 | | 曲线高亮了，但信息框没有突出对应条目；其他条目没变淡 | patterns.md §1：统一焦点与真实命中验收 | | 提示框挡住折线、点不到其他线；信息太多看不全、不能滚动；两图并排画布太小 | [patterns.md §2.1：密集图表详情遮挡](patterns.md#dense-chart-details) | | 信息被移到图下，要低头找，失去悬浮查看的直觉 | patterns.md §2.1：恢复目标附近浮层，优先扩大画布、自动避让和限高滚动 | | 最右侧信息框被挤窄、名称折行、超出边界 | patterns.md §2：自然宽度与定位翻转 | | 筛选要反复滚到页面顶部 | patterns.md §3：筛选就近 | | 分别有对象/资源/服务排行，仍找不到谁通过什么做了什么 | S04 §1–§2：由关系问题推导联合排行与组合明细 | | 想合并某个区别，又想逐层展开找原因 | S04 §3：维度汇总与折叠下钻的不同语义 | | 状态/动作又出现在资源列表，筛选互相矛盾 | S04 §4：语义去重与依赖筛选 | | 展开或翻页后小计对不上，返回后条件丢失 | S04 §5–§6：完整小计、状态连续性与排查路径验收 | | 汇总比例、峰值、去重数或直接相加后对不上 | [数据与运行约定](references/data-and-runtime.md) §1：指标合并条件 | | 快照轮询、缺测、滚动窗口、重启后的历史数字不可信 | 数据与运行约定 §2–§3：采集差分、时间边界与质量状态 | | 页面已好，但历史留存、进程重启或升级恢复没验证 | 数据与运行约定 §4–§5：持久化和运行方式 |

先确定界面要帮助完成什么

1. 从用户的目标写出一条“比较什么 → 如何定位 → 查看什么证据”的操作路径。
2. 看数据是否包含所需关系；多个独立总计不等于一张联合明细。
3. 按任务选择表格、分组树、趋势或状态，读取适用场景。不要因叫dashboard就先堆总量卡片和图表。
4. 将筛选、汇总、折叠和图例显隐区分；控件名称与实际效果一致。
5. 用一条实际问题完成整个操作，再检查视觉、键盘和窄屏表现。

当前确认的设计偏好

| ID | 范围 | 用户喜欢 | 用户不喜欢 | | --- | --- | --- | --- | | T01 | 工作型界面、管理台 | 紧凑、有层次的浅色白/灰界面，小控件、纵向列表与表格；适量蓝色强调；内容以图片/预览为主时采用 S02 卡片布局 | 为少量文字堆大卡片、过多留白、到处抢眼 | | T02 | 全部产品控件 | 比例无衬线 UI 字体；字段、条目名称、属性键值也自然呈现 | 等宽字体 + 方形描边 + 密集硬框造成 Markdown 代码块/终端感 | | T03 | 表单、筛选、按钮 | 柔和灰底、细微边界、适度圆角、轻阴影、清楚的 hover/focus/选中态 | 每个元素都像独立代码框；高对比粗描边、厚重阴影 | | T04 | 整体一致性 | 导航、概览、列表、详情、设置和统计共享视觉语言 | 只美化一页，其他页面保留旧代码框风格 | | T05 | 多系列图表（柱块、折线、数据点，含无圆点的密集曲线） | 悬浮或选中目标时，图形、tooltip 对应条目、图例同步突出，其余同步变淡；点击可锁定，具体状态与验收见 patterns.md §1 | 仅图形高亮而提示条目同权重；轴向命中把全部系列一起高亮；过度动画 | | T06 | 信息可读性 | 右侧最新数据优先好读；图表详情就近悬浮，自动避让，条目多时可滚动，见 patterns.md §2.1 | 贴边把名称挤成多行、拆单词；为避免遮挡擅自把悬浮详情移到图下，迫使视线离开数据点 | | T07 | 操作距离 | 筛选靠近被控制的图；有必要时提供与顶部同步的局部筛选 | 为筛选反复跨两张图上下滚动；两份筛选各持一份冲突状态 | | T08 | 有序列表、密集状态历史 | 直接拖拽排序；密集状态用细矩形红黄绿历史灯带、足够长的时间轴、悬浮解释；稀疏且可跳转的状态采用 S02 | 只有按钮才能调排序；密集历史被粗大灯块挤短；颜色无解释 | | T09 | 预览型工作台、卡片与主题 | 冷灰蓝画布、白色面板、蓝紫强调；柔和细边框的大圆角矩形；比例字体、克制按钮与轻浮层，见 S02 | 把内容卡片一律压成密集表格；大矩形做成胶囊；重描边/重阴影 | | T10 | 每日时间点选择 | 明确的 24 小时制 00–23；新增时间分钟默认 00，允许主动选其他分钟 | AM/PM 切换；空值弹出后分钟跟随当前时间；默认值在保存时被误添为时间点 | | T11 | 研究指标与曲线看板 | 已认可左侧筛选栏与顶部服务器切换栏；图表偏好明亮的蓝紫青绿、清楚折线；折线为指标对比主视图；视觉验收独立于功能验收 | 拒绝层层卡片与胶囊堆叠的“塑料感”，也拒绝灰暗、沉重的图表配色；拒绝多 run 指标的横排柱状图；不能将拒绝容器风格误解为拒绝亮色图表 | | T12 | 多维分析与排查工作台 | 从要追查的关系组织联合排行；需要时同时支持维度合并与分层折叠，继承筛选查看组合趋势/明细 | 各维度单独排行却无法关联；只是隐藏列而未汇总；动作与资源混在同一筛选；不按功能推导界面 |

场景索引

| 场景 ID | 已确认场景 | 规则位置 | 使用范围 | | --- | --- | --- | --- | | S01 | 浅色信息密集界面：表单、列表、表格、数据图表、状态时间轴 | 本文件视觉基线 + [patterns.md](patterns.md) | 按所需组件选读，不要求同时包含所有组件 | | S02 | 冷灰蓝预览型工作台：主题、卡片画廊、稀疏可跳转状态 | [preview-workbench.md](scenarios/preview-workbench.md) | 主题与基础元素可跨场景复用；卡片/状态块密度按内容选择，与 S01 共存 | | S03 | 科研指标绘图：数据形态→图形映射、族叠加 vs 分页互斥、参考线 | [research-charts.md](scenarios/research-charts.md) | 实验指标看板、训练曲线、方法对比图；与 S01 图表规则配套使用 | | S04 | 分析排查工作台：关系问题→联合排行→汇总/分层→明细 | [analytical-workbench.md](scenarios/analytical-workbench.md)；数据与运行约定按 S04 §6 选读 | 用量、资源、成本、运行归因等多维排查；非所有看板的固定模板 |

新场景经过实际设计与反馈后，增量添加索引项。内容少时在现有模式中补一个小节；出现独立风格或较多规则时再建立 scenarios/.md，记录适用范围、确认偏好、反例和交互要点，并在此链接。不要提前创建空场景，也不要把新场景规则自动推广为全局默认。

参考例子

| 例子 | 位置 | 内容 | | --- | --- | --- | | 实验指标看板（脱敏） | [research-dashboard.md](examples/research-dashboard.md) | S03 的完整落地实例：数据模型、页面结构、形态→画法对照表、踩坑清单。数据集/方法/平台名均已泛化 |

例子只承载结构与决策，不照搬具体项目的样式数值；新例子放入 examples/，抹去本地项目信息，保持任何人可读。

视觉参考的使用方式

• 用户明确提到 NewAPI、Firecrawl、Mixedbread，喜欢其中现代、轻量、自然的产品 UI 气质。
• 取其无衬线排版、灰阶表面、克制边界、选中反馈和信息组织，不照搬品牌色、营销首页布局或特定组件。
• 紧凑导航 + 列表/表格是信息密集界面的基线，不意味着所有产品都要采用这种布局。
• 用户已认可的现有 UI 优先从真实前端源码提炼：主题 tokens、字体继承、圆角、边界、按钮状态及组件结构；浏览器用于交互和呈现复验，不替代源码分析。
• 有新页面需要参考时可检索实际页面；未访问就不要声称已调研。联网不是使用本 skill 的前提。

视觉落地基线

下面是已认可界面的起始参考值，不是所有场景必须复制的硬规定。

| 项目 | 起点 | 调整原则 | | --- | --- | --- | | 字体 | 系统 UI 字体：-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif | 优先项目已用的合适字体，不必下载新字体 | | 表面 | canvas #f7f8fa；panel #fff；control #f3f4f6 | 层次来自轻微灰阶差别，不给每格套框 | | 文本 | primary #252b35；secondary #626c7b | 辅助文字仍需可读；不要用低对比制造“高级感” | | 边界/强调 | border #e9ecf1；accent #3b63dc；selected #edf2ff | 蓝色用于主要动作/选中，状态色只承载状态 | | 圆角 | 控件约 8–10px，面板约 10–14px，短状态标签可用胶囊 | 克制统一，不把所有大容器都做药丸 | | 密度 | 紧凑表单字约 12–14px、控件高约 32–36px，正文按场景放大 | 小屏/触摸目标增大命中区；不是把字做小就叫紧凑 | | 动效 | hover/focus 约 120–180ms，图柱轻微缩放约 1.02–1.07 | 无布局跳动；遵循 prefers-reduced-motion | | 数字 | UI 字体 + font-variant-numeric: tabular-nums | 数字对齐不需要整页等宽 |

具体控件

• 输入/选择器：柔和灰底、细或透明边框、非等宽字；focus 可变白底配清楚焦点环。选择器有自然的小箭头。
• 分段选择：灰色轨道 + 浅色/白色活动项、轻阴影；选中靠底色/字色，不靠厚边框。
• 多选菜单：轻浮层、圆角搜索框、整行 hover、清楚的复选选中态和已选数量；原生语义优先。
• 表格：浅表头、细行分隔、轻微行 hover；属性名称直接显示，无需代码字体/代码背景。
• 有序列表：紧凑行、序号、主名称 + 次级信息、可发现的拖拽柄；同时有键盘排序或按钮替代。
• 状态标签：柔和彩色底 + 可读文字，配点或图标；不要让颜色成为唯一信息来源。
• 每日时间点：采用 T10；优先复用现有控件，原生 time 无法稳定显示 24 小时制时，可用原生小时/分钟 select。默认分钟不代表用户已选小时，具体行为见 [patterns.md](patterns.md#7-每日时间点24-小时制与整点默认)。
• 跨页：在共享 tokens/组件/样式层修改，再处理专用覆盖；别堆一份全局 !important 覆盖来掩盖冲突。
• 真正代码编辑器、日志原文等仍可用等宽；“不喜欢代码块感”不等于篡改真实代码的呈现需求。

工作方式

1. 理解现状：先明确用户要完成的判断与操作，再读实际页面、数据关系、共享样式和交互流。按问题查信息组织、筛选含义、inherited font、命中层或浮层定位，不只检查外观。
2. 最小落地：复用既有技术栈、原生控件、CSS/SVG 或已安装图表库。只为外观不另建组件体系、不换框架、不新增依赖。
3. 完整体验：加载/空数据/失败/禁用/选中/hover/focus/小屏一起考虑；图形显示与真实数据含义分开。
4. 浏览器实证：使用可用浏览器检查真实页面，优先看用户最常用路径，例如最右侧最新柱子、长名称、菜单贴边、筛选后返回原位置。检查控制台与布局，而不只看代码能否编译。
5. 交互预览：用本地草稿或独立演示数据检查编辑、拖拽和状态变化，明确区分预览与正式提交。
6. 复验范围：共享 CSS 改动需检查所有消费页，包括已经满意的页面；执行所在代码库要求的检查。无需为换颜色新建测试框架。
7. 交付与学习：简短说明变化和实证。遇到明确偏好反馈，按演化协议更新；“技术验证通过”不是“用户审美已认可”。

范围边界

• 只记录视觉偏好、信息组织、组件交互和可访问性；案例一律用通用 UI 语言表达。
• 按需求选择组件，不默认创建仪表盘、状态时间轴或趋势曲线。
• 当前默认基线来自浅色数据/配置类产品；S02 提供同风格深色配对参考，不代表所有深色场景已经认可。移动原生、编辑器、营销页等新场景需形成自己的分支规则，不武断套用。
• 用户新反馈可改变这些默认值；支持按场景查询、新增、修改和删除。主文件保持精炼、只呈现有效规则，按 [evolution.md](evolution.md) 管理更新。

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: brilliantrough
• Source: brilliantrough/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.