---
name: neko-tail-style
description: 延续猫尾巴（Neko-tail）现有视觉与交互风格，设计、实现或审查猫尾主站、项目工作台和同品牌服务的界面。适用于用户要求“猫尾风格”、统一猫尾界面或修改现有猫尾页面；独立品牌仅在用户明确要求时采用。
metadata:
  version: "1.1.0"
  baseline: "2026-10-12"
---

# 猫尾风格

以现有猫尾界面为基准：安静、清楚、亲近，服务于工作与日常。用浅灰底、白色面板、青绿强调色、细边框和适量留白组织信息；暗色对应深青灰底与浅薄荷强调色。品牌区域点缀猫、月亮、植物和暖金色。

公开原文：[neko-tail.wang/skills/neko-tail-style/SKILL.md](https://neko-tail.wang/skills/neko-tail-style/SKILL.md)。这是可独立使用的单文件技能。规则记录当前基准，用户在当前任务中的明确设计要求优先。

## 先确定页面所属层次

- **主站门户**：[neko-tail.wang](https://neko-tail.wang/)。保留左侧导航、顶部搜索、欢迎语、月下猫主视觉、快捷入口和服务卡片的层次。已有页面直接复用相邻组件与变量。
- **项目工作台**：[project.neko-tail.wang](https://project.neko-tail.wang/)。沿用同一色系，重心是检索、分组、应用入口和管理表单；内容密度高于门户，不复制门户大幅欢迎区域。
- **产品与内容页**：[gbf.neko-tail.wang](https://gbf.neko-tail.wang/)。保留产品名称、主题插画与必要的游戏内容，在导航、按钮、面板、字体和明暗配色上与猫尾一致。
- **同品牌业务服务**：统一外壳、控件与主题，保留表格、编辑器、媒体内容和业务状态各自的结构。第三方服务使用其原生主题和定制接口。独立品牌（如 memix.jp）不自动套用。

在现有工程中先查看页面、样式变量与组件。新页面选择最接近的现有页面作为参照，再确定内容层级。工程选型按[猫尾项目偏好](https://neko-tail.wang/skills/neko-tail-project-preferences/SKILL.md)，必要时可更换框架；保留现有功能、服务端渲染与普通链接、表单回退，网页交互优先使用 htmx。

## 色彩与主题

下表来自共享主题 `ui/tokens.json`，用于新建同品牌服务。变量使用 `--neko-` 前缀，例如 `--neko-bg`。品牌强调色与成功、警告、错误等业务语义色分开。

| 角色 / 变量后缀 | 浅色 | 暗色 |
| --- | --- | --- |
| 页面底色 `bg` | `#f7f8fa` | `#141d20` |
| 面板 `panel` | `#ffffff` | `#1d282c` |
| 次级表面 `subtle` | `#f0f4f3` | `#233237` |
| 正文 `ink` | `#263c3f` | `#dfebe6` |
| 次级文字 `muted` | `#64787b` | `#a3b4b4` |
| 边线 `line` | `#e2e8e8` | `#2c3b3f` |
| 较强边线 `line-strong` | `#c4d2cf` | `#465f61` |
| 强调 `accent` | `#267166` | `#a4d5c2` |
| 强调悬停 `accent-hover` | `#1c5c53` | `#bfe5d6` |
| 选中浅底 `soft` | `#eaf3ef` | `#263e38` |
| 强调底上的文字 `on-accent` | `#ffffff` | `#173b32` |
| 深实色表面 `strong` | `#263c3f` | `#101a1e` |
| 浮层阴影 `shadow` | `0 12px 36px #193d3514` | `0 12px 36px #00000033` |

主站已有自己的变量，不用上表批量覆盖。`src/styles.css` 中 `--page` 对应页面底、`--text` 对应正文；浅色 `--muted: #60757b`、`--line: #e7ebed`、`--soft: #f1f5f4`、`--active: #e9f3ef`、`--accent-strong: #1c5b53`；暗色 `--soft: #263438`、`--active: #293f3b`、`--accent-strong: #b2e1cf`。门户常规阴影为浅色 `0 5px 22px #253b3909`、暗色 `0 5px 22px #0000000d`。项目工作台使用 `src/project.css` 自己的对应变量。

主题接入沿用所在页面的机制：

- 主站、产品和项目工作台用根元素 `data-theme="light|dark"`；共享服务用 `data-neko-theme="light|dark"`。
- 同品牌自有页面使用 `localStorage` 的 `neko-tail:theme` 外观偏好；无明确选择时跟随系统。存储不可用仍应正常显示。不同子域的 localStorage 独立，不承诺跨站同步。
- 在首屏绘制前应用主题，并正确设置 `color-scheme`。主题按钮的可访问名称说明下一步操作，例如“切换到深色模式”。
- Gitea、FileBrowser、Jellyfin 沿用各自的原生主题选择和选择器。修改第三方应用时查对应适配文件，不额外注入另一套主题控制。
- 新控件成对处理明暗状态。浅薄荷实色按钮使用深色文字；不要把所有按钮文字都固定为白色。
- 错误、警告、收入、支出、代码高亮、diff、图表系列色保留原语义；状态同时用文字或图标表达。

## 字体、空间与形状

采用系统无衬线字体，不为普通界面引入远程字体。主站字体栈：

```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
  "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
```

共享服务使用 `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Noto Sans JP", sans-serif`；沿用目标工程已有本机字体回退。域名、代码、校验值使用 `ui-monospace, "SFMono-Regular", Consolas, monospace`。

- 普通内容以 13–15px、行高 1.65–1.9 为起点；主站服务卡片标题为 16px / 650，页面标题约 23px / 650。主视觉标题约 30–44px，随容器缩放。
- 小号英文眉题、域名和元信息属于辅助层级。现有 8–11px 装饰文字不作为新长文、关键操作或移动表单的字号标准。
- 控件圆角通常 6–8px，卡片 10–12px；主站主视觉为 15px、详情弹窗为 18px。优先继承现有值，不把所有元素都做成胶囊。
- 1px 中性边线负责划分结构，阴影轻而少。强调色集中在主操作、当前导航和焦点；大块颜色主要留给品牌主视觉。
- 按钮组和图标文字间距约 8–12px，卡片间距 12–16px，卡片内边距约 20–24px，内容区边距按宽度取 20–40px。这些是现有尺度的起点，不要求把所有页面统一为固定网格。

## 布局与组件

**门户参照尺寸。** 桌面侧栏 234px、顶栏 78px；主内容最大宽度 1450px、两侧内边距 40px。服务卡片三列，1200px 以下两列，450px 以下一列。900px 以下收起侧栏并显示菜单；660px 以下搜索另起一行。项目工作台和产品页使用各自已有断点，不把门户断点机械移植过去。

**导航与搜索。** 当前项用浅绿色底、较深强调色文字与适度字重表示。搜索有可见提示、焦点状态和清空方式；分类、收藏、最近访问与搜索结果保持一致。长域名或长标题有合理换行或截断，完整信息仍可访问。

**服务卡片。** 上部为小色底线性图标与收藏、说明操作；中部是中文服务名、原产品名和一句用途；下部是域名、分隔线与访问说明。整个卡片不要覆盖嵌套按钮的点击区域。分类色使用现有低饱和青绿、蓝、紫、琥珀、玫瑰或石板灰配对，保留暗色版本。

**按钮和表单。** 同一区域突出一个主要动作，次操作用边框、浅底或文字。按钮直接写动作，如“保存设置”“下载”“发送反馈”。输入框使用轻底色与细边框，提供独立标签、帮助和就地错误；失败后保留已填内容。进行中、成功、失败和禁用状态要可区分。

**后台和表格。** 用标题、工具栏、筛选、表头、行分隔与局部操作组织密集信息。金额、时间和状态按业务对齐；保留必要的排序、分页、选择与批量操作。统一配色时不要用大留白或大量卡片拆散原有高效工作流。

**弹窗与提示。** 内容区使用面板色、细边框和比普通卡片略大的圆角；关闭、Escape、焦点进入与返回完整。短提示只表达操作结果；持久错误与待处理信息放在相关位置，不依赖短暂弹出消息。

**响应式。** 手机优先保证主操作、搜索、导航和正文可用。缩小装饰、调整列数或改为纵向排列；表格的横向滚动限于表格容器。不要靠整体缩放、隐藏溢出或减小关键文字来勉强塞入页面。

## 信息密集页面的视觉分层

适用于进度地图、状态面板、故障分析、验收和决策详情。按实际信息选择分区，不把这些结构机械套到普通服务卡片或表单。

**突出当前有效信息。** 首屏先说明当前事实、适用范围及需要处理的事项，提供到详情和证据的入口。已完成事项保留结果与来源，移出当前待处理队列；旧失败、旧版本和已结束方案归入历史说明。折叠长细节时，仍在摘要中保留关键状态与限制。

**区分事实与解释。** 已验事实、缺失部分、已有尝试及结果、原因判断、拟议方案、验收条件和证据采用可辨认的标题与区域。原因未定时直接标注；建议与未来条件使用“拟议”“待验证”等文字，不借成功配色、勾选图标或流程位置表现为已通过。对原因、方案和验收的说明集中在对应记录，避免散落的短标签代替依据。

**分类、安排和状态分别表达。** 例如一条记录可以同时属于“上游依赖”“本版本不变”“原因未定”。原因未知不意味着本版本处理方向未知。已决定暂不纳入的内容单列“本版本不变”或相应业务名称，实验内容也单列；未来调查与备选方案放在“后续准入”等详情区域，不挤入当前执行或方向待定队列。

**分类色辅助定位。** 按业务根源、责任或用途选择少量有意义的类别，以低饱和浅底、边线和有字标识区分；导航、摘要、详情沿用同一类别名称与色对。分类色与成功／警告／错误状态色各自表达含义；缺少证据或责任未定不能仅凭红色表现为已证实的某方故障。类别和状态都有文字，暗色、打印及无颜色时仍可读，关键标识不用装饰性小字或过淡颜色。

**总览与详情同源。** 有维护数据时，从同一条记录派生分组、标签、计数、筛选和详情，明确父项与子项、重复引用的统计口径。说明数字是记录数、待处理数还是已验数；类型数、链接数或局部通过数不自行转换为缺陷数、完成率或完整覆盖率。关闭、排除及实验分组的调整同时反映到总览。

**流程显示实际阶段。** 需要说明处理路径时，用简短步骤串起已验、卡住、未执行和未知阶段，并为状态提供文字或图例。拟议步骤保持待验证状态，旁边给出适用条件与证据。窄屏改为纵向步骤，长文本自然换行；简单列表已经足够时不增加图表。

**按需展开并保留定位。** 用语义化标题、普通锚点和原生折叠控件组织密集详情。深链接能够定位记录，并在增强交互可用时展开相关层次和移动焦点；无脚本仍能通过链接和键盘阅读。搜索包含范围、原因及方案等有效详情；筛选组合无结果时给出明确空状态和重置入口。

## 品牌、图标与文案

- 页面品牌沿用“猫尾巴 / NEKO-TAIL”，服务名称与独立产品名保持原样。代码中的统一标识使用 `neko-tail`。
- 复用 `CatMark`、`MoonlightCat` 与现有 SVG 图标。图标以细线、圆端点和简单几何形为主；普通导航约 16–20px，避免混用 emoji、粗实心图标和多套视觉体系。
- 门户主视觉为深青绿 `#1d4742`，奶油色文字 `#ecf0de`，少量暖金 `#d9c494`，配月下猫与植物线条。插画不抢占功能页主要工作区域；第三方服务保留自己的标识。
- 日常文案温和具体，例如“少找一步，多一点从容”“让工具各得其所”。操作、权限和错误提示先说清发生了什么、下一步能做什么；避免夸张承诺和每句都加入“喵”。
- 不为了填充布局编造服务、用户数、在线状态、下载、功能或评价。服务目录和访问说明来自现有数据源。
- 当前风格以平整表面和低饱和配色为主。避免把新页面改成霓虹渐变、通篇玻璃拟态、纯黑高反差或多重大阴影；现有主视觉的轻微光晕与弹窗遮罩不必移除。

## 交互与交付检查

保持现有约 160–180ms 的颜色、边线和轻微位移动效；卡片悬停上移约 2px。支持 `prefers-reduced-motion`，减少位移与滚动动画。键盘焦点清晰可见；图标按钮有名称，表单有标签，状态不只靠颜色。

完成改动后，在目标页面实际检查：

1. 桌面及约 390px 手机宽度下的布局、长内容与主操作；必要时补目标应用的平板断点。
2. 浅色、暗色、主题切换和刷新后的偏好；检查正文、次级文字、按钮及错误状态的对比度。
3. 键盘导航、焦点、弹窗关闭、空结果和失败后内容保留；相关 htmx 交互及无 JavaScript 回退，存储不可用与减少动效时仍可用。
4. 密集信息页面的分类／安排／状态是否独立且一致；事实、未知原因和拟议方案是否易于辨别；总览计数、筛选组合、重置、折叠及深链接是否与详情对应。
5. 颜色调整是否保持业务状态、链接目标与现有功能；有构建和测试命令的工程执行对应检查。页面验证绑定实际输入版本，报告范围限制；不把视觉核验当作业务功能已通过。

报告实际改动与验证范围；公开登录页检查不能代替登录后的业务操作验收。仅做风格指导不意味着发布或修改其他服务。

## 在主站工程中维护

本技能源文件为 `.agents/skills/neko-tail-style/SKILL.md`，构建时发布到上述公开地址；`/llms.txt` 提供发现入口。保持这一份源文件，避免另存相互漂移的指南。

配色以 `ui/tokens.json`、主站 `src/styles.css`、工作台 `src/project.css` 为依据；品牌与组件查 `src/components.tsx`、`src/icons.tsx`、`src/MoonlightCat.tsx`，产品与 GBF 查 `src/product.css`、`src/gbf.css`。主题行为查 `src/theme.ts`、`src/client.ts`、`ui/theme.js`；第三方服务查 `ui/adapters/`。修改品牌基准时同步技能版本、基准日期和相应示例，并重新检查公开原文与源码一致。