轻微立体倾斜
让产品预览随指针产生轻微空间感，并比较它与分层反馈的组合。
在卡片内移动指针，观察预览倾斜；移出归位。
选用这个效果
粘贴到目标项目的 Claude Code 或 Codex，并说明要应用的页面或组件。
查看完整应用请求
## 执行方式 使用 web-ui-workflows。若未安装，从 https://github.com/lindong28/lindong-skills 取得完整 web-ui-workflows/，读取 SKILL.md；不覆盖已有同名目录。 ## 任务 请应用目标页面的「轻微立体倾斜」效果，目标与范围沿当前对话。缺少目标时先确认；先判断它是否符合体验意图、内容和现有风格。按目标页面适配并实施；保持真实内容和入口，冲突时说明原因并采用适合的静态反馈。 定义：https://prompts.aiplanet.live/api/webui/effects/v1/pointer-tilt.json 目录内容 SHA256：af4d52b59fe7066ee47020b38442b531904e1158de2ebe3e1aeb6afe531a2406 可运行示例：https://prompts.aiplanet.live/webui/exemplars/effects/pointer-tilt/index.html 按 references/effect-selection.md 核对效果及其交互和回退；交代实际采用或不采用的理由和未核实边界。示例内容为合成演示，不复制成产品事实。 所选变体：仅预览倾斜（tilt）。本次应用以此变体为准。
## 执行方式 使用 web-ui-workflows。若未安装，从 https://github.com/lindong28/lindong-skills 取得完整 web-ui-workflows/，读取 SKILL.md；不覆盖已有同名目录。 ## 任务 请应用目标页面的「轻微立体倾斜」效果，目标与范围沿当前对话。缺少目标时先确认；先判断它是否符合体验意图、内容和现有风格。按目标页面适配并实施；保持真实内容和入口，冲突时说明原因并采用适合的静态反馈。 定义：https://prompts.aiplanet.live/api/webui/effects/v1/pointer-tilt.json 目录内容 SHA256：af4d52b59fe7066ee47020b38442b531904e1158de2ebe3e1aeb6afe531a2406 可运行示例：https://prompts.aiplanet.live/webui/exemplars/effects/pointer-tilt/index.html 按 references/effect-selection.md 核对效果及其交互和回退；交代实际采用或不采用的理由和未核实边界。示例内容为合成演示，不复制成产品事实。 所选变体：倾斜与分层组合（combined）。本次应用以此变体为准。
- 每轴最大倾斜
- 4°
- 归位过渡
- 220 ms
- 组合分层位移
- 6 px
这些是演示参数，应用时按目标页面调整。
适合用在
- 有独立预览区域的作品或产品卡片
这些情况保持静态
- 额度、告警或需要逐行比较的数据
- 要求禁止位移的视觉风格
- 依靠悬停才能取得信息的内容
触屏与减少动态效果
触屏、减少动态效果或无 JavaScript 时保持完整静态预览和可用链接。键盘聚焦清除倾斜并显示焦点轮廓。
同一张卡片，四种处理
这里只用于比较。上方选中的变体才会写入复制请求；静态和分层不会被当作倾斜效果应用。
静态
分层
倾斜
组合
技术说明与应用检查
触发与结束
精细指针在卡片内移动时，仅预览内层在两个方向各最多倾斜 4 度；移出、取消指针、窗口失焦或切换标签后归位。标题与点击区域固定。示例并排展示同一内容的静态、分层、倾斜和克制组合；6 像素距离用于组合中的分层移动。
应用后怎么检查
- 从卡片左上到右下移动时预览倾斜方向改变，标题和点击区域不移动
- 移出、取消指针与窗口失焦后恢复；快速移动不积累偏移
- 静态、分层、倾斜和组合使用相同内容，所有链接都可到达目标
- 键盘、触屏、减少动态效果与无脚本条件下可阅读和激活链接
目录内容 SHA256：af4d52b59fe7066ee47020b38442b531904e1158de2ebe3e1aeb6afe531a2406
只审核已有页面
检查当前选中的变体，提出建议，不修改页面。
查看完整审核请求
## 执行方式 使用 web-ui-workflows。若未安装，从 https://github.com/lindong28/lindong-skills 取得完整 web-ui-workflows/，读取 SKILL.md；不覆盖已有同名目录。 ## 任务 请审核目标页面的「轻微立体倾斜」效果，目标与范围沿当前对话。缺少目标时先确认；先判断它是否符合体验意图、内容和现有风格。仅审核不修改页面；说明适配情况、问题和修改建议。 定义：https://prompts.aiplanet.live/api/webui/effects/v1/pointer-tilt.json 目录内容 SHA256：af4d52b59fe7066ee47020b38442b531904e1158de2ebe3e1aeb6afe531a2406 可运行示例：https://prompts.aiplanet.live/webui/exemplars/effects/pointer-tilt/index.html 按 references/effect-selection.md 核对效果及其交互和回退；交代实际采用或不采用的理由和未核实边界。示例内容为合成演示，不复制成产品事实。 所选变体：仅预览倾斜（tilt）。本次审核以此变体为准。
## 执行方式 使用 web-ui-workflows。若未安装，从 https://github.com/lindong28/lindong-skills 取得完整 web-ui-workflows/，读取 SKILL.md；不覆盖已有同名目录。 ## 任务 请审核目标页面的「轻微立体倾斜」效果，目标与范围沿当前对话。缺少目标时先确认；先判断它是否符合体验意图、内容和现有风格。仅审核不修改页面；说明适配情况、问题和修改建议。 定义：https://prompts.aiplanet.live/api/webui/effects/v1/pointer-tilt.json 目录内容 SHA256：af4d52b59fe7066ee47020b38442b531904e1158de2ebe3e1aeb6afe531a2406 可运行示例：https://prompts.aiplanet.live/webui/exemplars/effects/pointer-tilt/index.html 按 references/effect-selection.md 核对效果及其交互和回退；交代实际采用或不采用的理由和未核实边界。示例内容为合成演示，不复制成产品事实。 所选变体：倾斜与分层组合（combined）。本次审核以此变体为准。