在响应式网页设计中使用 ChatGPT 实现智能简写

自从移动 Web 诞生以来，数字设计师们就一直要求方案撰稿人们尽量缩短文本长度。

可总有叛逆青年对此表示不满，“怎么能妨碍自我表达呢！”

00:00 / 00:00

1.0x

3.0x
2.5x
2.0x
1.5x
1.25x
1.0x
0.75x
0.5x

网页全屏

全屏

00:00

传统方式

长文本在大屏幕上显示效果不错，但在小屏上却容易让人头晕眼花。

解决办法非常简单！现在，我们只需要提醒方案创作者们将原始内容分为两个版本，其一先把文本量缩短约 50%，其二则进一步提炼出几个核心要点。但这还是有点烦人，你的合作伙伴恐怕会表达强烈不满。

或者，我们也可以借助 AI 的力量……

新的方式

这就是 AI 响应式 Web 设计，页面规划的全新形态。

00:00 / 00:00

1.0x

3.0x
2.5x
2.0x
1.5x
1.25x
1.0x
0.75x
0.5x

网页全屏

全屏

00:00

根本问题

由于响应式 Web 设计中的一大常见策略，就是在不同设备上让字体保持大小一致，所以当网站显示在较小、较窄的屏幕上时，大段的文字就只能向下方延伸。这样用户阅读起来就得不断滚动，不少受众觉得这种体验相当糟糕。

解决之道

答案很简单：使用 ChatGPT 进行文本简写！本文的要点也正在于此，下面我们就一同了解具体过程中涉及的思路和技巧。

中等尺寸屏幕

这里我们先用提示词生成一个简写后的段落，其长度约等于原始段落的 60%。（眼尖的朋友可能发现了，我在提示词里要求的是缩短至 10%。但这里必须得把要求极端化，否则 ChatGPT 的简写程度总是达不到要求。）

使用以下提示词在中等尺寸的屏幕上生成简写文本：

对于以下原始文本，请在遵循各项具体要求的前提下创建简写版本：
1. 保持原本的语气、风格和表达习惯：如果原始文本较为严肃、正式，则简写后也应保持这种风格。如果原始文本较为轻松愉快，则简写后也应保持这种风格。简写版本应该与作者在编写原始内容时的思路和表达方式保持一致。
2. 保留关键信息：确保简写后的版本仍保留原始文本的要点和中心思想。在生成简写版本时，不可丢失关键信息。
3. 长度：简写版的字符量应为原始文本的 10%。
原始文本：
[此处添加您的原始文本，不含方括号]
简写版本：

通过尝试，我发现要想得到一份像样的简写版本，其实没必要把提示词搞得这么复杂。但明确表述这些要求会让我更加安心，毕竟我自己一直都对生成式 AI 抱有一点怀疑态度，所以就当是我有强迫症吧。

小尺寸屏幕

对于小尺寸屏幕，大家可以调整上述提示词，或者使用以下提示词进一步提炼要点：

在 ChatGPT 中使用以下提示词，在小尺寸屏幕上输出要点概括：

对于以下原始文本，请生成简写版本，其中包含 1 到 3 条相互独立的要点概括，每点最多包含 3 到 8 个单词。
原始文本：
[此处添加您的原始文本，不含方括号]
简写版本：

HTML 形式

这种结构非常简单而且效果不错。（可能有人会说这是在浪费带宽，毕竟确实需要传输额外的文本。我觉得咱们最好别抬杠，你杠就是你对。）

<div class="content-lg">    <p>A lot of text goes here for big screens.</p></div><div class="content-md">    <p>Shorter text goes here for medium screens.</p></div><div class="content-sm">    <ul>        <li>Bullets...</li>        <li>go...</li>        <li>here...</li>    </ul></div>

复制代码

CSS 形式

/* Mobile First: Hide everything except the small text */.content-lg { display:none; }.content-md { display:none; }/* Medium Screen: Hide mobile, show medium */@media only screen and (min-width: 440px){	.content-sm { display:none; }	.content-md { display:block; }}/* Large Screen: Hide medium, show large */@media only screen and (min-width: 740px){	.content-md { display:none; }	.content-lg { display:block; }}