Feedly 清爽阅读器
适用任务
以紧凑的左图右文信息流为核心：黑色粗体标题、低对比元数据与短摘要按固定节奏排列；白色画布、弱分隔和少量绿色帮助读者连续扫读。
- 适合
- 适合资讯流、订阅阅读、知识更新及其目录、刊物、排行、详情和辅助页面的浅色视觉风格；各场景保留既有业务结构，以同一套阅读层级与组件角色适配。
- 主要风险
- 信息流与目录依据实际公开 Feedly UI；趋势、洞察与刊物参考企业版官方示意。日历、模型评测、社交组合、表单和海报是沿共同视觉原则的适配，不是 Feedly 官方组件；只定义浅色，不要求引入示例业务。
体验意图
未标注意图；可按模板正文判断是否适用。
这个模板提供什么
- 复用方式
- 只调整视觉表达，保留页面任务结构与业务行为。
- 结构与交互
- 沿用目标页面。
- 视觉设计
- 提供默认视觉参数，可按项目品牌或明确选择的风格调整。
- 组件规范
- 信息条目、导航与筛选、操作与反馈、详情与长文、目录与归档、排行、表格与指标、趋势图与时间轴、刊物与简报、监控状态与日历、引用、证据与复合条目、收藏与阅读队列、表单、代码与辅助状态、菜单、弹窗与分享图片、介绍与说明页
- 应用后检查
- 提供视觉与跨页一致性检查。
整套交互预览
1 个示例适用范围
适合资讯流、订阅阅读、知识更新及其目录、刊物、排行、详情和辅助页面的浅色视觉风格；各场景保留既有业务结构，以同一套阅读层级与组件角色适配。
参照页面
- Feedly · TechCrunch 订阅信息流
直接参照 · 真实界面 · 观察于 日期未记录
文章列表、日期分组、缩略图、作者时间与摘要
公开匿名信息流；用户私有 Feeds 不在观察范围
真实列表与详情观察。 原记录保留观察范围，最近实际观察日期未明确记录。
- Feedly · Discover
直接参照 · 真实界面 · 观察于 日期未记录
主题与来源目录
公开页面
真实主题与来源目录观察。 原记录保留观察范围，最近实际观察日期未明确记录。
- Feedly · Market Intelligence 产品展示
直接参照 · 公开展示材料 · 观察于 日期未记录
趋势、Insights、Newsletter 的公开示意参照；无登录交互证据
公开产品展示页，不是登录后的操作台
官方公开 UI 示意；不能作为登录操作证据。 原记录保留观察范围，最近实际观察日期未明确记录。
- Feedly · TechCrunch 订阅信息流
适配推导 · 真实界面 · 观察于 日期未记录
日历、评测和海报等没有核实同构组件的适配设计
公开匿名信息流；用户私有 Feeds 不在观察范围
真实列表与详情观察。 原记录保留观察范围，最近实际观察日期未明确记录。
按模板应用无需访问来源网站；需要研究未覆盖组件时，可从这些入口继续查证。
应用前了解
- 会改变什么
- 在共享样式与组件层统一白色画布、浅灰辅助表面、绿色强调及文字层级。
- 把既有信息条目落实为标题优先、元数据次之、短摘要收尾的连续阅读节奏；有图采用左图右文，缺图释放空间，普通条目无卡片阴影，以留白和轻量日期分组组织。
- 将既有目录、排行、图表、刊物、时间轴/日历、引用证据、收藏、表单/代码/状态及分享图片对应到同一组件规则；已符合项保留，例外具体到角色，不把全站改为单一列表。
- 数据条件与适用限制
- 提供目标仓库、页面或路由范围及品牌约束；只需项目已有内容，不要求新增图片、推荐算法、订阅或收藏功能。
应用后的页面
主题
根据真实信息流的视觉关系制定的适配基线，数值不是 Feedly 官方 token。绿色是少量交互强调；视觉主体是黑白灰的图文信息流。；可选：保留现有任务结构，仅应用阅读器视觉
组件 · 信息条目
采用杂志式紧凑信息流：有图条目以约130×80px的横向缩略图居左，20px间距后为文字；正文按标题→来源/作者与时间→摘要顺序共用左边界。标题16px/1.35、700字重，元数据12–13px/1.5，摘要14px/1.4；长标题自然换行，摘要优先展示2行并保留进入完整内容的入口。缺图时文字占用图文区域，不保留空图槽。窄屏缩略图降为80×60px、间距12px，文字可换行，不强行保持固定行高。
组件 · 导航与筛选
已有导航维持浅灰辅助表面、紧凑中性条目与克制的绿色选中态；阅读区白底。列表题头与轻量工具条共同服务当前阅读范围，已有日期组标题使用低对比小字和留白，不增加大块色底或重复边框。匿名参照未呈现登录订阅侧栏，其具体目录与控件由项目决定。
组件 · 操作与反馈
动作视觉退居内容之后：常态中性细线图标，hover/focus显示清楚反馈；绿色仅用于主动作、选中和保存状态。条目可以浅灰hover辅助定位，不常驻展示多个抢眼按钮。触摸与键盘操作仍可达，名称与状态保持清楚。
组件 · 详情与长文
详情作为项目适配保持白底、标题优先和低对比元数据，连续正文16px/1.75及适合阅读的行宽；辅助说明用轻线分组。列表可短预览，详情保留完整内容。详情容器、打开方式和默认展开策略沿目标产品，不将示例对话框当作参照产品的实测交互。
组件 · 目录与归档
主题、来源及归档采用白底轻边框或无框行，不使用渐变与常态阴影。标题16px/1.35、说明14px、数量与来源12–13px；头像/标志约24–32px，作为身份而非装饰。卡片内标题、说明、计数和动作共用对齐关系；窄屏减少列数，保留实际筛选、分页与长名称。
组件 · 排行、表格与指标
排行保留名次、分数、证据及价格等原有列，名次用中性数字而非奖牌色或渐变底。首位突出靠字重；前三名概览白底轻线，主要数值24–32px且使用正文色，普通表格数值14–20px。标签与单位12–13px紧邻值。表头浅灰、行分隔细线、无阴影；窄屏保留数据语义，表格可在自身容器内横向滚动。业务状态可保留语义色，不能把未知改成零。
组件 · 趋势图与时间轴
图表白底或浅灰辅助底，弱网格，中性主线；绿色仅标当前选中或需要辨识的系列，多系列按项目可辨色保留。提示层白底轻阴影且不越视口。时间轴线与日期低对比，事件标题14–16px优先；节点颜色只表达既有分类/状态，取消无意义光晕。保留原轴向、日期关系、滚动与展开；装饰不制造大块空白。
组件 · 刊物与简报
保留已有期号、日期、头条、分栏、统计与往期导航。刊名/图形题头视觉高度约28–36px，头条24–28px/1.35，分节20–22px，普通条目16px；长文16px/1.75，统计值18–24px。日期用普通清晰文字，弱化点阵/巨号装饰与重复色带；白底轻线、区块间距24–32px。图片保持项目资格与正文关联，无图释放空间；既有分栏在窄屏自然堆叠。
组件 · 监控状态与日历
当前状态以紧凑标签、主说明和辅助原帖组成，正常状态用小面积标记，容器白底；不以整块绿色面板表达正常。日历保留七列日期和原有事件，普通日期白/浅灰，事件用文字或小点，选中日才用淡绿面。今天、选中和业务事件有各自可辨标记；禁用明确。日期详情与日历用轻线或留白分组，窄屏依既有结构重排，正文与原文展开不裁断。
组件 · 引用、证据与复合条目
原帖保留作者身份，不为匹配新闻顺序虚构标题。引用、推荐理由、相关信源、进展与评测证据使用12–14px辅助文字、轻线或一层浅灰底；信息仍邻近所属条目，避免套多层卡片。主内容深色，辅助标签中性；业务精选/风险状态可保留克制语义色。展开保持原数据与入口，长文按详情规格，长来源可换行。
组件 · 收藏与阅读队列
收藏条目沿用主信息流的标题、来源/时间、摘要和操作关系：白底无逐条卡片阴影，标题16px/1.35，摘要14px/1.4，辅助信息12–13px。收藏时间和移除动作退居辅助；不可用/仅摘要等状态保留清楚说明。只使用实际保存字段，不为统一外观补造图片、标题或数据。
组件 · 表单、代码与辅助状态
输入与代码区域浅灰底、1px轻边框、6px圆角；输入有可见标签，正文14px、辅助12–13px，控件约36px且触摸沿项目可达尺寸。代码等宽并局部横向滚动，复制反馈邻近按钮。错误使用克制语义色与文字，禁用保持可辨。空/忙/错误状态沿同一标题、说明、主动作层级；表单提交与错误不由风格示例新增业务。
组件 · 菜单、弹窗与分享图片
菜单和弹窗白底、12px圆角、轻阴影，次要动作中性，主动作克制绿色；长内容在容器内可滚动，关闭入口可达。分享图片内部也使用白底、黑灰文字和弱分隔，取消装饰渐变、重阴影与发光；尺寸按交付介质等比适配，保留品牌标记、实际内容与二维码可扫描性。图片不是网页CSS的继承对象，需单独核验生成字节和缓存身份。
组件 · 介绍与说明页
关于、更新、条款及设置页沿共同文字层级：页面标题28–32px，分节20–22px，正文14–16px，元信息12–13px；连续文字保持阅读行宽。保留品牌和既有示意图、日期、数字含义，收敛巨型标语及装饰色块。主题切换保留项目深色定义。
项目覆盖
保留项目名称、标志、路由、数据、筛选与收藏语义。品牌色有明确约束时映射到强调色角色并记录例外。仅应用浅色范围；已有深色主题沿项目定义，不静默关闭或声称已覆盖。 品牌保留不冻结旧组件字号、渐变或分组外观；仅将确有业务含义的状态色、图表区分色及身份标志记为例外。
应用后检查
- FR-V01 范围内浅色页面及详情状态使用同一套颜色、字体、间距与控件角色；项目覆盖有明确记录。
- FR-V02 长短标题、有图及无图条目均检查：标题先读、来源/时间与摘要紧随且共用对齐线；有图保持横向小缩略图与文字的稳定比例，无图释放空间。
- FR-V03 连续条目保持紧凑扫读节奏：普通条目无卡片阴影或逐条重边框，标题较摘要更深更粗，元数据安静；日期分组以小字和留白呈现，绿色不铺满正文。
- FR-V04 现有导航、筛选、收藏、展开和详情入口在改造后仍可操作，选中、hover、键盘焦点与禁用状态清楚；不为风格添加新业务。
- FR-V05 在宽窄视口实际连续阅读多条长短资讯，核对文字、图像和操作的占比；列表短摘要仍有完整内容入口，长标题与来源不分离，详情长文可完整阅读，缺图无空槽。
- FR-V06 示范数据、示例中的列表/卡片切换和侧栏目录不自动成为目标产品要求；保留品牌、内容含义和原有交互，未覆盖的主题与状态明确交代。
- FR-V07 目录、归档和收藏的标题/辅助信息对齐；收藏与主信息流保持一致阅读节奏，长名称与不可用状态可读。
- FR-V08 排行、表格、指标与图表保留真实含义；无装饰渐变、奖牌色和常态阴影，数值不压过名称，窄屏数据及提示层可达。
- FR-V09 刊物保留期号、日期、头条、分栏和往期入口；题头/日期装饰收敛到规定比例，有图/无图与宽窄屏均连续可读。
- FR-V10 时间轴、监控状态和日历区分日期/选中/事件；状态色局部使用，日期详情与原文展开可读可操作。
- FR-V11 引用、多信源、进展及证据展开后仍从属于对应主内容，辅助层级克制；不伪造标题、不删业务字段或改变默认展开语义。
- FR-V12 表单、代码和空/忙/错误状态使用相同控件角色；复制/筛选/展开及适用的错误/禁用反馈清楚，未运行的提交状态如实列出。
- FR-V13 菜单/弹窗在宽窄屏可操作；实际分享图片内部白底黑灰、无装饰渐变与阴影，品牌与二维码保留，核对新生成图片及缓存身份。
- FR-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` 优化目标产品的视觉风格。 模板：Feedly 清爽阅读器 模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/feedly-reader.json 目标仓库：[填写仓库路径] 产品入口：[填写 URL] 应用范围：[整个产品，或列出页面／路由集合] 项目明确约束：[有则填写] 读取当前定义的 theme、components、overrides 和 acceptance，按 skill 的合并规则形成或复用本次有效设计；以真实订阅信息流的紧凑阅读关系适配目标页面及详情状态：白底黑灰文字，有图条目左图右文，标题→来源/时间→短摘要依次排列，轻量日期分组与留白支持连续扫读；绿色只作少量交互强调。按定义落实字体、图片比例和条目密度，不能仅更换配色。保留项目品牌、任务结构、内容含义和业务行为，示例只展示视觉关系，不要求新增侧栏、封面、订阅、收藏或视图切换。已有深色主题保留项目定义，本模板只定义浅色视觉。 将实际出现的目录、排行/指标/图表、刊物、时间轴/日历、引用/证据、收藏、表单/代码/状态和分享图片对应到当前组件规则；保留业务结构，调整旧字号、装饰和辅助层级，符合项无需重画。 在项目共享样式与组件层落实同一份有效设计，记录模板来源与内容摘要、覆盖路由、项目例外和新增页面的继承入口。从真实入口阅读长短条目、有图与无图内容，检查宽窄屏并操作本次受影响的筛选、展开与详情；按适用 acceptance 报告结果及未核实项。
审核现有页面
## 执行方式 本 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` 审核目标产品的视觉风格。 模板：Feedly 清爽阅读器 模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/feedly-reader.json 目标仓库：[填写仓库路径] 产品入口：[填写 URL] 应用范围：[整个产品，或列出页面／路由集合] 项目明确约束：[有则填写] 读取当前定义的 theme、components、overrides 和 acceptance，按 skill 的合并规则形成或复用本次有效设计；以真实订阅信息流的紧凑阅读关系适配目标页面及详情状态：白底黑灰文字，有图条目左图右文，标题→来源/时间→短摘要依次排列，轻量日期分组与留白支持连续扫读；绿色只作少量交互强调。按定义落实字体、图片比例和条目密度，不能仅更换配色。保留项目品牌、任务结构、内容含义和业务行为，示例只展示视觉关系，不要求新增侧栏、封面、订阅、收藏或视图切换。已有深色主题保留项目定义，本模板只定义浅色视觉。 将实际出现的目录、排行/指标/图表、刊物、时间轴/日历、引用/证据、收藏、表单/代码/状态和分享图片对应到当前组件规则；保留业务结构，调整旧字号、装饰和辅助层级，符合项无需重画。 本次只审核，不修改。复用项目有效设计，从真实入口核对颜色、文字层级、分组、对齐、宽窄屏和受影响的实际操作；检查长短条目及有图/无图情况。按适用 acceptance 给出证据、项目例外与未核实项，区分本次回归和基线问题，不以示例存在替代产品验证。