← 返回提示词
UI 设计

界面加固:长文本、空状态、错误与重复操作(优化版 v001)

把界面从理想演示扩展到真实输入、失败和恢复情境,保护用户已完成的工作。;优化版 v001,效果未实测。

提示词发布于 2026-11-09更新于 2026-11-09浏览 0

来源:import:liubai_versions_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0009/optimized-v001.md · 授权:Apache License 2.0;原文来自对应上游项目,许可全文:http://promptlab.zhichow.com/licenses/apache-2.0.txt

适用说明

适用场景

优化版 v001;使用者确认拥有本站公开转载权或授权。
本站原文:http://promptlab.zhichow.com/prompts/p-912054b36cae44fca97420fd74652358

原文来源:https://github.com/pbakaus/impeccable/blob/5cb95eea9c96479f57afe0732a45470d30183326/skill/reference/harden.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 equal landscape keyframes showing ordinary interface edge states, edge-to-edge without gutters or labels. Each tile shows the same blue and white browser panel with calm cream background and consistent framing. In order: a card with a very long abstract line wrapping cleanly onto three lines; an empty content area with a simple empty box icon; a small amber inline warning icon next to a blank field; a clear disabled duplicate-submit button with a single checkmark beside it. No text, words, numbers, people, logos or watermark. Soft flat editorial illustration with muted blue and teal, readable high-level visual hierarchy.
查看输入译文

译文仅供参考;实际生成时使用的是上方原文。

创建一张由 2 x 2 组成的、包含四个等大的横向关键帧的原创设计稿,展示普通的界面边界状态,边缘对边缘,无间距或标签。每个图块显示相同的蓝白浏览器面板,配有宁静的奶油色背景和一致的构图。顺序如下:一张带有非常长的抽象线条并整齐折行至三行的卡片;一个带有简单空白框图标的空白内容区域;一个位于空白字段旁的微小琥珀色内联警告图标;一个清晰的禁用状态重复提交按钮,旁边带有一个对勾。无文本、单词、数字、人物、徽标或水印。采用柔和的扁平化编辑插画风格,色调为柔和的蓝色和青色,具有清晰、易读的整体视觉层级。

图片与动图示意结果

四格依次示意长文本、空状态、提示和提交状态;具体交互仍需在真实界面验证。

静态图片由 imagegen 按上面的输入生成;动图由生成的四帧画面拼接而成,效果仅供参考。

界面长文本、空状态和提示的四格示意
生成的四格关键画面

THE PROMPT

提示词正文

# 界面加固:长文本、空状态、错误与重复操作

> 中文改编 v001 · 2026-10-23 · 基于 [pbakaus/impeccable](https://github.com/pbakaus/impeccable/blob/5cb95eea9c96479f57afe0732a45470d30183326/skill/reference/harden.md) 的公开指令,已修改。来源、原版依赖和许可见 [SOURCE.md](SOURCE.md) 与 [LICENSE.txt](LICENSE.txt)。实际效果:**未测试(untested)**。

填写或提供 `{{变量}}` 对应材料;没有提供的项目按正文缺失处理规则执行。以下代码块可完整复制:

```text
请检查并在授权范围内加固 {{ui_scope}} 的边界状态。

用户主要操作 {{critical_actions}};现有实现 {{implementation}};已知接口与权限约定 {{api_and_permission_contract}};支持的语言和设备 {{supported_contexts}};可修改范围 {{editable_scope}}。

先读取当前行为,列出与任务有关的状态矩阵:状态/触发条件|用户看到什么|仍可做什么|如何恢复|需要什么证据。至少考虑正常、加载、空、错误和无权限;不适用项说明理由。

根据风险选取边界输入:超长中文与数字、空值、Emoji、较多条目、必要的多语言/RTL、网络超时、断线、重复点击、取消与重试。不要为覆盖清单添加不在项目范围内的功能。

设计与修复原则:
1. 错误说明失败了什么、用户可采取什么动作;不暴露敏感内部信息,也不只给一个‘失败’。
2. 可恢复错误尽量保留用户输入和操作上下文。加载、空结果和权限不足需明确区分。
3. 长文本不要压坏布局;截断关键信息时提供查看完整内容的办法。
4. 重复操作按接口约定处理。前端禁用按钮不等于服务端幂等;没有契约依据,不盲目重试可能重复产生副作用的请求。
5. 保持键盘可达、焦点合理、状态不只依赖颜色。修改必须复查正常路径,不能用隐藏错误换取表面正常。

能安全模拟的状态可在本地测试,并明确标注模拟来源。真实接口与业务成功需要单独证据;未经授权不要在生产环境制造错误。只交付设计时给规格和验证方案,不声称已实现。

输出按影响排序的问题、状态与恢复设计、实际改动和验证结果。把未实现、未验证、外部依赖分别写清。

Loop 与停止条件:
对已授权修改且能安全构造的状态,最多 3 轮‘触发失败 → 记录预期与实际 → 修复 → 重跑失败与正常路径’。先处理数据丢失、主任务受阻、权限误导和重复提交,再处理视觉问题。每轮记录输入、状态来源、步骤、修改和结果。已选状态通过且正常路径不退化即停止;缺少接口约定或测试能力、连续一轮无新进展、修改超出范围或达到上限时停止并报告。不能真实验证的场景保留为待验证,不能通过删除场景或吞掉错误让清单变绿。
```

提示词仅供参考,请结合实际场景调整,并核实 AI 生成结果。