产品发现与体验门户
适用任务
以有视觉主角的首屏、大幅产品预览和清楚的开始条件，让使用者愿意探索、理解价值并进入体验；发布与维护保留为次级入口。
- 适合
- 面向产品使用者的多产品门户、工具集合与团队作品空间。适合发现、理解、进入和求助；分类与搜索按实际内容规模采用。
- 主要风险
- 示例交互仅在当前页面运行，不持久保存或连接真实产品；实际可用性、权限和费用由目标产品给出。
体验意图
主要意图：好奇探索与试用
次要意图：快速找到并行动
适用人群：寻找适用产品的使用者
访问阶段：首次发现、了解用途并准备体验
设计手段：以有主体的大尺度首屏与分段构图建立探索兴趣，再用产品预览和具体用途支持选择；让开始条件先于进入动作可读，维护入口保持次级；精选入口与当前目录状态一致
适用前提：有可核对的产品入口、用途与开始条件；预览资产有适用权限；品牌意象和合成示意与实际产品结果可区分
依据与边界：真实参照：2026-10-29 Google Labs 桌面首屏与探索区观察支持构图和节奏借鉴；未据视频播放或移动端流程作结论。；设计推导：本示例用原创图形、合成便笺和可运行本地交互表达探索意图；未测真实转化或用户最终审美认可。
视觉表现：沉浸首屏以一个主体和主动作聚焦，产品区域用大幅预览与阅读区互相解释
信息密度：首屏克制，进入目录后完整展示用途与开始条件，帮助及维护按需展开
交互主动性：由用户选择产品并主动进入体验
这个模板提供什么
- 复用方式
- 按场景调整信息结构与交互；可直接采用默认设计，视觉风格按需另选。
- 结构与交互
- 提供布局与组件说明。
- 视觉设计
- 提供默认视觉参数，可按项目品牌或明确选择的风格调整。
- 应用后检查
- 提供本场景的操作检查。
整套交互预览
1 个示例适用范围
面向产品使用者的多产品门户、工具集合与团队作品空间。适合发现、理解、进入和求助；分类与搜索按实际内容规模采用。
参照页面
结合 Google Labs 首页的真实观察（2026-10-29：沉浸首屏、大尺度主体、明暗段落与探索区；视频实际播放和手机完整流程未核实）及 Philo Products 的任务设计提炼。示例为本地原创合成工具，没有复制 Google 或 Philo 内部素材。
按模板应用无需访问来源网站；需要研究未覆盖组件时，可从这些入口继续查证。
应用前了解
- 会改变什么
- 将目标体验意图落实为素材主体、构图尺度、文字关系与整页节奏；使用可覆盖视觉默认，而不只调整颜色和圆角。
- 组织发现、理解条件、进入使用及求助路径；通过适用的真实预览表达产品体验。
- 将创作者维护动作放在次级视图，保留现有搜索、筛选和返回上下文。
- 数据条件与适用限制
- 提供实际产品、用途、入口与开始条件；说明哪些是可使用产品、演示或历史资料。
- 预览资产须具有适用的使用权限且不泄露个人信息。目录与可用状态沿目标权威来源，不复制第二套业务事实。
- 明确本次希望的体验感受及可用素材；真实产品界面与品牌概念视觉各自标明用途，缺少真实素材时不伪造结果。
应用后的页面
主题
本场景的可覆盖视觉默认：深色首屏与奶油色发现区形成段落对比，单一大尺度主体配简短标题和一个主动作；产品预览占据完整展示区域。明绿强调行动、淡紫承载预览，以舒展留白、胶囊按钮和柔和大圆角形成轻盈探索感。颜色、声音意象、具体产品数属于示例选择；已选品牌风格可替换这些视觉参数，保留主次与阅读关系。；可选：采用场景默认并保留项目品牌、用项目已选视觉风格覆盖场景视觉默认
布局 · 发现与进入
首屏用一个与产品价值相关的视觉主体、简短利益表达和清楚的探索动作建立兴趣，随后进入可搜索的产品区域。精选入口须落到可见产品及其开始条件；已有筛选隐藏目标时明确恢复。按真实产品数量决定单一主角或多个条目，不为展示制造虚构产品或轮播。
布局 · 展示与阅读的节奏
宽屏用较大的主体与标题形成有意图的主次，产品展示让用途、条件、操作与预览相邻；明暗或色面转换标记从探索到选择、再到创作者信息。手机重新安排主体裁切与顺序，保留文字、动作和预览的关联，不把桌面整页等比缩小。
布局 · 维护次级视图
首次发布、更新与协作说明由独立次级入口进入；返回保留搜索及筛选。规模小的目录不强加推荐、分页或分类体系。
组件 · 主视觉与动态
素材负责展示产品界面、结果或品牌意象中的明确一种，裁切和尺度服务主动作；品牌意象与合成示意不得冒充真实产品效果。可采用原创矢量、摄影或真实媒体，选取与内容相符且能维护的形式。持续装饰动态提供暂停、遵循减少动态偏好，并在离屏或后台暂停；保留静态构图，不让进入产品依赖动画或播放成功。
组件 · 产品展示
使用可辨识的名称、用户能理解的用途、真实界面或结果预览和明确主动作。必要登录、费用、设备及资源条件在动作前可见。历史截图标明其性质，图片缺失仍可读用途并进入；没有真实素材时明确示意或不放图片。 预览须足够大以判断界面，保持其内容身份；大幅展示和轻微角度只用于不妨碍阅读的部分。
组件 · 按适用性分组
按目标真实对象区分可使用产品、演示与历史资料；没有对应内容就不创建该分组。历史或计划中的条目不使用误导性的立即体验动作。
组件 · 搜索与恢复
按名称与用途搜索，次要筛选按需展开；已选条件可见且可清除。区分无匹配、目录为空与加载失败，失败提供实际可执行的重试或恢复入口。
组件 · 上手与帮助
影响能否开始的条件常显；详细步骤、指南、反馈与维护者按需展开。展开后仍能读懂长内容、操作链接并回到产品。
组件 · 发布与维护
保留创作者需要的发布、更新与协作信息，将其放在使用者发现产品之后或独立次级视图，不占用主阅读路径。
项目覆盖
保留目标品牌、目录权威、真实入口、权限与可用状态。已选视觉风格可覆盖颜色和排版；本场景保留使用者任务与信息优先级。
应用后检查
- 用同视口的实际页面检查首屏主体、素材尺度与裁切、标题/动作关系、段落节奏及手机重排；功能通过与设计表达分别说明，不以 token 一致替代视觉观察。
- 宽窄屏中，使用者能读到用途和开始条件，找到主动作；图文比例自然，外层不横向溢出。
- 实际完成搜索、无匹配清除、帮助展开和关闭，以及进入维护再返回；适用的查询条件与焦点保留。
- 实际检查产品入口与历史资料入口；计划中项目不会误报可用，预览不冒充实时状态或成功结果。
- 加载失败、空目录和图片缺失有不同且可理解的表现；修复后能恢复原有操作。
- 模板示例只验证声明的本地交互；应用到产品时从真实入口核对权限、条件与产品内下一步。
- 实际操作装饰动态的暂停/恢复，检查减少动态与离屏状态；关闭动画仍可理解内容并完成主任务。精选入口在筛选、空目录和失败状态下不会跳向不可见产品。
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`，将「产品发现与体验门户」应用到目标页面，帮助产品使用者了解用途与开始条件、选择并进入产品、找到帮助。发布与维护作为次级任务。 目标仓库：<repo> 目标页面：<URL> 产品及目录来源：<products> 模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/product-discovery-portal.json 读取当前定义并按目标任务适配。将探索意图落实为有主角的首屏、适当尺度的素材、文字与动作关系以及整页节奏；采用场景视觉默认或目标已选风格，按实际产品数量与素材设计。保留产品品牌和已选视觉风格，以真实产品预览表达体验；信息与可用状态沿权威来源，必要条件放在主动作之前。分类、搜索和维护入口按实际内容采用，不把示例中的合成产品、分组数量或演示状态控件搬进业务页面。示例代码见库内 assets/product-discovery-portal/index.html。 本次应用不授予发布、部署或共享模板修改许可。
审核现有页面
## 执行方式 本 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`，按「产品发现与体验门户」当前定义审核目标页面。 目标仓库：<repo> 目标页面：<URL> 产品及目录来源：<products> 模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/product-discovery-portal.json 分别检查设计表达与使用任务：真实页面中的首屏主体、素材尺度/裁切、段落节奏和手机重排是否支持探索，持续装饰动态能否暂停并尊重减少动态偏好。核对使用者能否理解用途与开始条件、判断预览、进入产品并找到帮助；发布与维护能否从次级入口完成并回到原查询。结合项目有效设计与实际入口，区分可使用产品、演示和历史资料，以及空结果、加载失败和图片缺失。 审核示例时只判断声明的本地交互，审核产品时取得真实入口的读数。仅审核，不自动修改页面或共享模板。