# Personal Ui Taste

> 个人前端审美、功能驱动的信息组织与持续演化的 UI 设计指南。Use when designing, building, polishing or reviewing this user's frontend UI, dashboards, charts, forms or admin panels; choosing task-fit interactions such as joint rankings, rollups and drill-down; following 我的品味/个人审美; or recording approved feedback. Applies scoped preferences and interaction patterns across projects. Not for backend-only work.

- **Type:** Skill
- **Install:** `agentstack add skill-brilliantrough-agent-skills-personal-ui-taste`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [brilliantrough](https://agentstack.voostack.com/s/brilliantrough)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [brilliantrough](https://github.com/brilliantrough)
- **Source:** https://github.com/brilliantrough/agent-skills/tree/main/skills/personal-ui-taste

## Install

```sh
agentstack add skill-brilliantrough-agent-skills-personal-ui-taste
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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](https://github.com/brilliantrough)
- **Source:** [brilliantrough/agent-skills](https://github.com/brilliantrough/agent-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-brilliantrough-agent-skills-personal-ui-taste
- Seller: https://agentstack.voostack.com/s/brilliantrough
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.