GitHub Primer 产品界面
适用任务
以 GitHub Feed 与仓库页的真实界面为依据：白色画布、浅灰 #f6f8fa 区域头与嵌入面、1px #d1d9e0 功能边线、6px 主圆角、系统无衬线 14px/1.5 正文；事件卡与分组 Box 承载重复内容，蓝色只表示链接与当前位置，绿色只用于唯一主动作，常态不靠阴影和渐变造层级。
- 适合
- 可跨产品复用于资讯与动态流、目录与归档、详情长文、排行表格、指标监控、刊物报告、表单设置和管理后台等浅色界面；各页面保留自己的任务结构与业务语义，只采用同一套视觉角色。深色 token 随定义提供，仅在项目选择时使用。
- 主要风险
- 照搬 GitHub 标志、Octocat、全局顶栏或仓库业务结构会造成品牌归属误解；过量 Box 嵌套会让密集页面变成表格拼贴；系统字体与 GitHub 的 Mona Sans VF 字宽并不相同；Feed 只观察到关注类事件卡，排行、刊物、日历热度、海报与后台条款是沿同一视觉系统的推导设计。
体验意图
未标注意图；可按模板正文判断是否适用。
这个模板提供什么
- 复用方式
- 只调整视觉表达，保留页面任务结构与业务行为。
- 结构与交互
- 沿用目标页面。
- 视觉设计
- 提供默认视觉参数，可按项目品牌或明确选择的风格调整。
- 组件规范
- 应用框架与侧栏导航、信息流事件卡、分组列表 Box、按钮与图标按钮、标签、计数与状态、页内导航与分段、搜索、筛选与表单、浮层：菜单、对话框与提示、侧栏卡片与时间轴、正文与代码、数据表与排行、指标、图表与热度格、刊物与报告页、空态、加载与提示条、管理后台与设置页、头像、来源标志与图片
- 应用后检查
- 提供视觉与跨页一致性检查。
整套交互预览
1 个示例适用范围
可跨产品复用于资讯与动态流、目录与归档、详情长文、排行表格、指标监控、刊物报告、表单设置和管理后台等浅色界面；各页面保留自己的任务结构与业务语义，只采用同一套视觉角色。深色 token 随定义提供，仅在项目选择时使用。
参照页面
- GitHub · Feed
直接参照 · 真实界面 · 观察于 2026-10-10
应用框架、NavList、事件卡、Filter 浮层、时间轴与焦点态
需要登录；进入自己账号的信息流
真实登录态 Feed 观察；未观察到 Star/Release/仓库创建事件卡、条目菜单展开态或 Feed 深色。
- GitHub · Home
直接参照 · 真实界面 · 观察于 2026-10-10
空态 Box 与小节标题
需要登录；匿名入口不是同一界面
真实登录态 Home 观察，包含空态 Box。
- GitHub · 公开仓库页（首页、Issues、Pull requests、Commits、Releases）
直接参照 · 真实界面 · 观察于 2026-10-10
Box、表格、标签与按钮；全页字号分布、窄屏控件高度、复制反馈、工具提示与 Hovercard
无需登录；同类公开仓库页结构相同（第一轮另看 https://github.com/primer/react）
未登录真实页面；读取 computed style。工具提示样式取自页面元素（headless 悬停未渲染出现态），Hovercard 为实际悬停出现态。
- GitHub · Feed
适配推导 · 真实界面 · 观察于 2026-10-10
管理表单、排行、指标图表、瞬时确认与加载态的适配；GitHub 没有同构组件
需要登录；进入自己账号的信息流
真实登录态 Feed 观察；未观察到 Star/Release/仓库创建事件卡、条目菜单展开态或 Feed 深色。
按模板应用无需访问来源网站；需要研究未覆盖组件时，可从这些入口继续查证。
应用前了解
- 会改变什么
- 在共享样式与组件层落实白画布、#f6f8fa 区域面、1px 边线、6px 圆角、14px/1.5 正文与 600 标题字重；所有页面共用同一组 token。
- 把动态流落实为事件卡，把重复列表、归档与目录落实为分组 Box，把页面级切换落实为 UnderlineNav，把按钮、标签、计数器与浮层换成 Primer 角色。
- 将既有排行、指标、日历、刊物、表单、空态与后台页面对应到组件条款；已符合项保留，例外具体到角色并记录理由。
- 数据条件与适用限制
- 提供目标仓库、页面或路由范围（含详情与管理页面）及品牌约束；只需要项目已有内容，不要求新增 GitHub 业务结构。
应用后的页面
主题
取值来自 2026-10-10 GitHub 页面根部的 Primer CSS 变量与 computed style，是可直接使用的设计基线；字体以系统无衬线代替 Mona Sans VF。；可选：保留现有任务结构，仅应用 GitHub 视觉
组件 · 应用框架与侧栏导航
实测（Feed、Issues）：画布 #ffffff；区域头或顶栏 #f6f8fa 加 1px #d1d9e0 底线；侧栏白底 1px 右边线。导航项 32–33px、内边距 6px 8px、14px/1.5、#25292e、6px 圆角；hover 底 rgba(129,139,152,.10)；当前项底 rgba(129,139,152,.15)、字重 600，并在左侧 8px 外放 4×24px #0969da 竖条。分组标题 12px w600 #59636e。保留目标已有导航结构，不新增 GitHub 式全局顶栏；窄屏沿项目既有折叠或底栏，当前项用同一强调色与字重表达。
组件 · 信息流事件卡
实测（Feed）：一条动态一张卡，白底、1px #d1d9e0、6px、阴影 0 1px 1px #1f23280a, 0 1px 2px #1f232808，卡间距 16px，内容左右 16px。卡头为 32–40px 圆形头像或来源标志，行动者/来源 14px w600 #1f2328 加 14px #59636e 动作或说明，下一行时间 12px #59636e；次要操作放右上 32px 透明图标按钮。正文 14px/1.5；被引用对象放入 #f6f8fa、3px 圆角、16px 内边距的嵌入预览，内含 14px w600 标题、14px 说明、12–14px muted 统计和 28px 小按钮。卡片 hover 不位移、不加深阴影；无图不留空图槽。窄屏卡片全宽 16px 边距，所有动作留在原卡内。动态带时间列时（推导，沿 Commits 日期轴）：时间 12–13px #59636e 等宽数字放在卡片左侧，2px #d1d9e0 竖线与 8px 白心灰边节点串联同日条目；日期组标题 14px #59636e。
组件 · 分组列表 Box
实测（Issues、Commits）：同类重复条目放进一个 1px #d1d9e0、6px 的 Box；可选 #f6f8fa 头部承载计数、筛选与排序；行间 1px 分隔，行内边距 8–16px。行标题 16px w600（密集时 14px w600），元信息 12px #59636e 用「·」分隔，标签紧随标题；行 hover 可用 #f6f8fa。按日期分组时，在 Box 之上放 14px #59636e 日期标题与 16px 图标（如「Commits on Oct 7」）。适用于新闻列表、归档、来源目录和收藏。头部的计数、筛选与操作在窄屏换行。Box 位于 grid 或 flex 布局中时取 min-width: 0，否则 Box 会按其中宽表格的最小宽度撑开，表格自身的横向滚动不生效，窄屏整页横向滚动。
组件 · 按钮与图标按钮
实测：高度 28/32/40px、6px 圆角、14px w500（小号 12px）。主按钮 #1f883d 白字、1px rgba(31,35,40,.15) 边、hover #1c8139，一组动作只设一个；默认按钮 #f6f8fa、1px #d1d9e0、#25292e，hover #eff2f5；透明按钮无底、#59636e 字，hover 中性浅底；危险操作默认外观配 #d1242f 字，最终确认才用红色实底。图标按钮为 28/32px 方形 6px。focus-visible 为 2px #0969da 外环；禁用保持形状并降低不透明度。不使用胶囊按钮和按下缩放。窄屏同样只用 28/32/40px（390px 仓库页实测按钮 28/32px），不为触屏放大到 44px。复制按钮是 28px 默认按钮，复制成功后图标换成对勾并转 #1a7f37（README 代码块实测），需要文字确认时配瞬时提示层。选中的筛选、日期或分段项属于导航状态，按页内导航与分段条款使用选中样式，不套用绿色主按钮。
组件 · 标签、计数与状态
实测：Label 为 pill、20px 高、12px w500、左右 7px，1px 语义色边框加同色文字、透明底（中性 #d1d9e0 边 #59636e 字，成功 #1a7f37，强调 #0969da，注意 #9a6700，危险 #d1242f）；Counter 为 pill、18px、12px w600、底 rgba(129,139,152,.12)。需要强状态时用实底 State（成功 #1f883d、完成 #8250df、草稿 #59636e）。状态图标沿成功绿、失败红、等待黄。保留业务含义色，未知不得显示为成功或零。
组件 · 页内导航与分段
实测（仓库 UnderlineNav、Releases 分段）：按链接切换的页面级视图用 UnderlineNav：项 14px、左右 8px、40–48px 高，当前项 #1f2328 w600 加 2px #fd8c73 下划线，容器底部 1px #d1d9e0，计数器紧随标签。同一页内的局部切换用分段控件：外框 1px #d1d9e0、6px，选中项 #0969da 实底白字或白底加边，未选中 #25292e。窄屏横向滚动或收入「更多」，不换成胶囊轨道。
组件 · 搜索、筛选与表单
搜索与筛选为实测，表单字段为推导：输入框 32px（大号 40px）、白底、1px #d1d9e0、6px、14px，placeholder #59636e，focus 边框 #0969da 加 2px 外环；搜索框前置 16px 放大镜。筛选浮层见浮层条款。表单标签 14px w600 置于字段上方，说明 12px muted，错误 12px #d1242f 与图标并列；开关轨道 1px 边、开启为 #0969da；必填、禁用与只读状态清楚可辨。
组件 · 浮层：菜单、对话框与提示
Filter 浮层、工具提示与 Hovercard 为实测，菜单与瞬时确认为推导：白底、1px #d1d9e0、6px（大对话框 12px）、阴影 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px #25292e1f。头部 14px w600 标题加右上关闭；选项行 32px、14px，可带 16px 图标与 12px muted 说明，hover 中性浅底；底部操作右对齐，透明次要加绿色主按钮。工具提示深底 #25292e 白字 12px、6px、内边距 4×8px；带标题、数值或链接的悬浮卡沿 Hovercard 用白底 1px #d1d9e0 6px 卡片，不用深底。瞬时确认（已复制、已保存）沿工具提示外观，出现在触发处或页面底部中央，约 2–3 秒自动消失；失败、需要阅读或需要操作的结果改用提示条，不用自动消失的深色气泡。长内容在浮层内滚动，Escape 与关闭按钮可达。
组件 · 侧栏卡片与时间轴
实测（Feed changelog）：辅助信息放 1px rgba(209,217,224,.7)、12px 圆角、16px 内边距的卡片；标题 14px w600。时间轴为 2px 中性竖线加 8px 灰点，时间 12px #59636e 在上、条目 14px #1f2328 在下，末尾 12px muted「查看全部 →」。大事记与进展列表沿同一节奏；节点颜色只表达已有分类或状态。窄屏辅助卡移到主内容之后。
组件 · 正文与代码
实测（README、Releases）：详情正文 16px/1.5，中文长文可放宽到 16px/1.75；h1 32px w600、h2 24px w600 各带 1px #d1d9e0 底线；链接 #0969da、hover 下划线；引用 4px #d1d9e0 左边线加 #59636e 字；行内代码 85% 字号、底 rgba(129,139,152,.2)、6px；代码块 #f6f8fa、6px、16px 内边距、13.6px 等宽、局部横向滚动；正文表格 1px #d1d9e0 单元格、表头 600、隔行 #f6f8fa；图片 6px 圆角。
组件 · 数据表与排行
表格为实测，排行为推导：表头 12px w600 #59636e，可用 #f6f8fa 底或白底加 1px 底线；行 1px 分隔，单元格 8px 16px，数值右对齐等宽。名次用中性数字，前三名只靠字重区分，不用奖牌色、渐变或光晕；头部概览卡沿 Box，主要数值 24–32px w600 #1f2328。宽表在自身容器内横向滚动，不撑破页面；保留原有列、单位和未知标记。
组件 · 指标、图表与热度格
贡献日历色阶为实测，其余为推导：统计卡沿 Box，标签 12px muted，数值 20–32px w600 #1f2328，单位 12px 紧邻数值。图表白底、1px #d1d9e0 弱网格、2px 主线 #0969da，多系列沿项目可辨色；提示层沿浮层规则。强度或日历格采用贡献日历色阶 #eff2f5 / #aceebb / #4ac26b / #2da44e / #116329，10px 级方格配 2px 圆角；选中格 2px #0969da 外框，今天用小点或描边，业务状态另用语义色。
组件 · 刊物与报告页
推导（沿 Releases 发布卡与 Commits 日期分组）：刊头为一张 Box，标题 32px w600 加期号或「最新」Label，下方 14px muted 元信息行（日期、条数、来源）带 16px 图标；不使用巨型字标、点阵日期或装饰色带。分节标题 20px w600 加 1px 底线，序号用 Counter 或 muted 数字；条目沿分组列表 Box 或事件卡；往期导航沿侧栏 NavList。有图无图都不留空槽，窄屏分栏自然堆叠。
组件 · 空态、加载与提示条
空态为实测（Home），提示条与加载为推导：局部空态是 Box 内一行 14px 说明，可带图标与次要动作；页面级空态标题 20px w600、说明 14px muted、一个按钮，不画大插画。加载用 #eff2f5 骨架或 16px 转圈，保留原布局占位。提示条 1px 语义边框加浅语义底（#ddf4ff、#dafbe1、#fff8c5、#ffebe9）、14px 字、6px；错误正文 #d1242f。
组件 · 管理后台与设置页
推导（沿 Settings 式页面骨架）：页头为 24px w600 标题、14px muted 说明与右侧按钮组；内容区块用带 #f6f8fa 头部的 Box；统计、表格、表单与浮层分别沿对应条款；侧栏导航沿应用框架 NavList。危险区用 1px #ffcecb 边框 Box 与红字按钮；操作结果用提示条或浮层，不用常驻装饰。
组件 · 头像、来源标志与图片
实测（Feed、Issues）：人员头像圆形，组织/来源标志 6px 方圆角，尺寸 16/20/24/32/40px，1px rgba(31,35,40,.15) 内描边；列表缩略图 6px 圆角、等比裁切；媒体播放标志为深色半透明圆。图片加载失败回退到首字母或通用图标，不留空白框。
项目覆盖
保留项目名称、标志、路由、数据、筛选、收藏与业务状态含义；品牌色只用于标志等身份角色，交互强调改用 #0969da，主动作改用 #1f883d，确有业务约束时记录例外。只改视觉角色，不新增 GitHub 式全局顶栏、仓库导航、Star/Fork 等业务。项目已有深色主题按项目定义保留；本定义的 dark token 仅在项目选择时启用。生成的分享图片、导出文件不继承网页 CSS，如需同风格须单独渲染并核验字节。
应用后检查
- GH-V01 范围内浅色页面及详情、管理状态使用同一组画布、区域面、边线、文字与强调 token；项目覆盖有记录。
- GH-V02 字号、字重和行高沿 theme.tokens 的角色及 components 的角色特例（含时间列、行内代码、代码块与头像首字母）；没有 700 以上的装饰字重与巨型字标，标题、数字和大写小标签都不加正负字距。
- GH-V03 动态条目以事件卡或分组 Box 呈现：1px 边线、6px 圆角、无悬浮位移，来源/时间/摘要关系与 Feed 卡一致；有图无图都不留空槽。
- GH-V04 按钮、输入和选择框为 28/32/40px（窄屏相同）、6px 方圆角；主动作绿色且每组至多一个，默认按钮浅灰带边，透明按钮无底。
- GH-V05 标签为描边 pill、计数器为中性 pill；业务状态色保留含义，未知不显示为成功或零。
- GH-V06 页面级切换为下划线导航（2px #fd8c73），局部切换与选中的筛选/日期项为分段选中样式而非绿色主按钮；当前项、hover 与键盘焦点（2px #0969da）清楚。
- GH-V07 侧栏或底栏导航当前项有中性底、600 字重与强调竖条或强调色；品牌标志保留。
- GH-V08 排行、表格与指标保留原列和单位；名次中性，没有奖牌色、渐变与光晕；宽表局部滚动，整页无横向溢出。
- GH-V09 时间轴、日历与热度格使用中性竖线与贡献色阶；今天、选中和业务事件可分辨。
- GH-V10 刊物、报告与关于页收敛巨型题头和装饰日期，保留期号、日期、分栏与往期入口。
- GH-V11 菜单、对话框、工具提示、悬浮卡与筛选浮层分别遵循 components「浮层：菜单、对话框与提示」的底色、边线、圆角和阴影；大对话框与深底工具提示不套用普通白底菜单规则，宽窄屏可操作、可关闭。
- GH-V12 表单、代码、空/忙/错误状态沿对应条款；复制成功为成功色对勾，瞬时确认用工具提示外观，失败用提示条；错误、禁用反馈清楚，未运行的提交状态如实列出。
- GH-V13 后台页头、Box、统计、数据表、表单与导航沿同一组角色，与公开页面一致。
- GH-V14 宽窄屏实际阅读和操作受影响控件；新增页面复用同一共享入口；未覆盖的组件、状态与主题明确交代。
Prompt 模板
1 条## 执行方式 本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。 ## 任务 使用 `web-ui-workflows apply-ui-template` 优化目标产品的视觉风格。 模板：GitHub Primer 产品界面 模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/github-primer-product-ui.json 目标仓库：[填写仓库路径] 产品入口：[填写 URL] 应用范围：[整个产品，或列出页面／路由集合；含详情状态与管理页面] 项目明确约束：[有则填写] 读取当前定义的 theme、components、overrides 和 acceptance，无需访问 GitHub。按 skill 的合并规则形成本次有效设计，以 theme 为视觉参数来源，components 为角色及特例来源，acceptance 为验收依据。把 GitHub Feed 与仓库页的视觉关系落实到目标产品：动态条目用事件卡，重复列表、归档与目录用分组 Box，页面级切换用下划线导航，按钮、标签、计数器、输入与浮层换成对应 Primer 角色。颜色用途、字号与浮层差异按当前定义的角色规则落实。不能只换配色；也不引入 GitHub 标志、全局顶栏或仓库业务结构。 先结合路由、导航、真实页面和代码盘点全部页面、详情状态、管理页面及其组件与状态，逐项对应到 components 条款、项目例外或待补设计。在项目共享样式与组件层落实同一份有效设计，记录模板来源与内容摘要、覆盖路由、项目例外和新增页面的继承入口；保留品牌、任务结构、内容含义与业务行为，已有深色主题按项目定义保留。示例展示视觉关系，不指定目标产品布局。 从真实入口在宽窄屏阅读并操作受影响的导航、筛选、展开、菜单、表单与详情；用全页取值检查找出盘点清单之外仍离档的元素；按 GH-V acceptance 逐项报告结果、例外与未核实项，区分模板未规定、产品未落实与尚未验证。发现可复用缺口时，按 skill 的维护授权边界处理；未获共享模板修改授权的建议留在应用记录。
审核现有页面
## 执行方式 本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。 ## 任务 使用 `web-ui-workflows review-ui` 审核目标产品的视觉风格。 模板：GitHub Primer 产品界面 模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/github-primer-product-ui.json 目标仓库：[填写仓库路径] 产品入口：[填写 URL] 应用范围：[整个产品，或列出页面／路由集合；含详情状态与管理页面] 项目明确约束：[有则填写] 读取当前定义的 theme、components、overrides 和 acceptance，无需访问 GitHub；按 skill 的合并规则形成或复用项目有效设计，以 theme 为视觉参数来源，components 为角色及特例来源，acceptance 为验收依据；检查事件卡、分组 Box、下划线导航、按钮、标签与计数器、输入、浮层与瞬时提示、表格、时间轴、空态和后台页面是否落实到对应条款，并用全页取值检查找出规则清单之外的离档元素。 本次只审核，不修改。从真实入口在宽窄屏核对颜色、文字层级、分组、对齐、跨页一致性和受影响控件的实际操作，覆盖整个产品的页面、详情状态与管理页面。按 GH-V acceptance 给出证据、项目例外与未核实项，区分模板未规定、产品未落实与尚未验证，并区分本次回归和基线问题；不以示例存在替代产品验证。