来源：import:liubai_versions_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0008/optimized-v001.md · 授权：Apache License 2.0；原文来自对应上游项目，许可全文：http://promptlab.zhichow.com/licenses/apache-2.0.txt
适用说明
适用场景
优化版 v001；使用者确认拥有本站公开转载权或授权。 本站原文：http://promptlab.zhichow.com/prompts/p-94b14d884a494527940e556bb9232f75 原文来源：https://github.com/pbakaus/impeccable/blob/5cb95eea9c96479f57afe0732a45470d30183326/skill/reference/adapt.md 效果未实测。 上游 NOTICE： # Third-Party Notices This project includes content derived from third-party work, used under the terms of its original license. ## Platform Design Skills The `skill/reference/ios.md` and `skill/reference/android.md` platform reference files are distilled from ehmo's `platform-design-skills` (Apple Human Interface Guidelines and Material Design 3 rules), rewritten in Impeccable's voice. **Original work:** https://github.com/ehmo/platform-design-skills **Original license:** MIT **Author:** ehmo
公开署名
pbakaus/impeccable 贡献者；留白素材库收录；留白优化版
EXAMPLE
使用示例
该主题的原文与优化版共用这份示例。
提示词示例输入
示例页面包含标题、三张产品卡和一个主要操作；桌面端横排卡片，手机端宽度不足。要求所有内容和操作保持可见。
文字示意结果
以下结果为人工编写的示意，并非模型实测输出。
桌面使用三列布局，空间减少时依次调整为两列和一列；卡片文字允许换行，按钮保留足够点击区域。检查窄屏、长标题和文字放大时是否出现遮挡或横向溢出。
实际生成时的文字输入
Create one original 2-by-2 sheet of FOUR landscape keyframes illustrating responsive design. Four equal tiles edge-to-edge, no gutters, borders, words, letters, numbers, brand marks, people or watermark. In every tile a centered simple device screen on a pale warm-gray background displays the same blue-and-cream content cards: a title bar, three small cards and one clear main action. From frame 1 to frame 4 the device changes from a wide desktop rectangle to tablet to a narrow phone, while the same cards reflow from a row to a vertical stack and remain fully visible. Keep colors, card identity and icon style consistent; no content clipped. Polished editorial cut-paper illustration, gentle shadows.
查看输入译文
译文仅供参考；实际生成时使用的是上方原文。
创作一张 2 x 2 的原创单页，包含四个展示响应式设计的横向关键帧。四个等大的平铺方块，无间距、无边框、无文字、无字母、无数字、无品牌标识、无人像或水印。在每个方块中，一个位于浅暖灰色背景上的居中简单设备屏幕显示相同的蓝色与奶油色的内容卡片：一个标题栏、三个小卡片和一个清晰的主要操作。从第 1 帧到第 4 帧，设备从宽大的桌面矩形变为平板电脑，再变为窄长的手机，同时相同的卡片从行排列重排为垂直堆叠，并保持完全可见。保持颜色、卡片标识和图标风格一致；无内容裁剪。精致的编辑风格剪纸插画，柔和阴影。图片与动图示意结果
相同内容从桌面横排变为手机纵向排列；设备画面为原创示意。
静态图片由 imagegen 按上面的输入生成；动图由生成的四帧画面拼接而成，效果仅供参考。
THE PROMPT
提示词正文
# 响应式适配：让任务在不同屏幕与输入方式下成立
> 中文改编 v001 · 2026-10-23 · 基于 [pbakaus/impeccable](https://github.com/pbakaus/impeccable/blob/5cb95eea9c96479f57afe0732a45470d30183326/skill/reference/adapt.md) 的公开指令，已修改。来源、原版依赖和许可见 [SOURCE.md](SOURCE.md) 与 [LICENSE.txt](LICENSE.txt)。实际效果：**未测试（untested）**。
填写或提供 `{{变量}}` 对应材料；没有提供的项目按正文缺失处理规则执行。以下代码块可完整复制：
```text
请将 {{web_page_or_component}} 适配到 {{target_contexts}}，保证 {{primary_task}} 可以完成。
现有技术栈 {{stack}}；当前材料 {{source_or_design}}；必须保留 {{must_keep}}；允许修改范围 {{editable_scope}}；已知问题 {{known_failures}}。
先识别支持的视口、输入方式和使用环境。用户未指定时，可把 320、768、1440 CSS 像素作为初步抽查示例，并说明它们不代表所有设备；正式目标仍以项目支持范围为准。
建立检查矩阵：情境｜主要任务｜可能失败｜验证方法｜证据来源。优先检查：
- 阅读顺序、主要操作与必要信息是否保持可发现。
- 长中文标题、表格、表单和弹层是否溢出或遮挡关键内容。
- 窄屏是否需要重排信息，而不只是缩小字体或隐藏功能。
- 键盘焦点、触摸与鼠标能否完成主要任务；关键功能不能只依赖 hover。
- 与任务相关的方向切换、软键盘、滚动和加载情况。
先找造成问题的布局与组件规则，沿现有组件和断点体系做最小修改。必要时建议表格的横向滚动或替代表达，并说明取舍。不要把专业数据页面一律改成大卡片。
如果涉及拖拽或手势，实际检查开始、移动、释放、取消及与滚动的冲突；仅靠截图不能判断手势通过。所有证据注明是静态审查、模拟视口、合成输入还是真实设备，并写明浏览器或设备。
输出适配方案、实施改动（若授权）、检查矩阵结果、前后证据及未覆盖范围。不把几个视口通过描述成全设备兼容。
Loop 与停止条件：
在用户已授权实现且可运行目标页面时，最多 3 轮‘检查情境矩阵 → 修复最高影响失败 → 复测失败与相邻情境’。每轮保存视口、浏览器、输入方式、操作步骤和前后结果。优先处理主任务受阻、遮挡和误操作，不为循环增加新平台。目标情境通过即停止；连续一轮无法减少已确认失败、缺真机/材料/权限、需要改业务范围或达到上限时停止，列出未覆盖项。新改动导致原情境退化时恢复或修正相关改动。纯建议任务只交付矩阵与方案，不伪造测试结果。
```
提示词仅供参考，请结合实际场景调整，并核实 AI 生成结果。