写点什么

AIGC 在前端 Web 开发中的应用:响应式设计和 Tailwind 配置的完美搭档

作者 | Mike Solomon

  • 2023-11-17
    北京
  • 本文字数:2532 字

    阅读完需:约 8 分钟

大小:1.04M时长:06:02
AIGC在前端Web开发中的应用:响应式设计和Tailwind配置的完美搭档

在响应式网页设计中使用 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; }}
      复制代码


      好了,就是这么简单。希望我的方法能给大家带来启发,特别是让作者跟设计师之间脆弱的合作关系继续维持下去。


      提醒各位,请一定使用 GPT-4 来实现这项技术。毕竟跟 4 代相比,GPT-3 只能算是个自动补全器、效果还很一般。


      使用 ChatGPT、GitHub Copilot 与 Phind 组合,为 width 类生成 Tailwind 配置


      借助 ChatGPT 4、GitHub Copilot 和 Phind 的力量,轻松生成符合黄金比例的 Tailwind width 配置。


      这些语言模型就如同一个个可以直接对话的助手,各自为同一问题提供不同的解决方案。


      这里我们主要试验它们各自对黄金比例的配置建议,并讨论具体效果如何。


      试验案例


      这里我们只使用个人项目,并没有完整的设计,单纯用于尝试各种布局灵感。


      我打算在 Web 应用程序的 Tailwind 配置中添加一些自定义的 width 大小,且桌面分辨率最大不超过 800 像素。


      我向 ChatGPT 4 和 GitHub Copilot Chat 提出了相同的问题,但得到的答案却有所区别。


      ChatGPT 4


      先来看看我向 ChatGPT 4 提出的问题。



      它给出的建议如下。


      

      大家可能已经注意到,它使用我添加的约束(即使用黄金比例)来计算所给出的最后一个尺寸(384 像素)的实际大小,希望借此达到我所要求的 800 像素。之后,它尝试创建了一系列 width utilities 将其区隔开来,基本处理逻辑跟 Tailwind 差不多。


      我并没有检查它建议的所有 utilities,但第一条和最后一条根据 rem 与 px 的比率计算可知是正确的。

      Github Copilot


      之后,我又尝试通过 VSCode 使用 GitHub Copilot 来生成这份列表。


      下面来看提示词和相应的输出结果:


      

      这里的步骤更为精细,最终达到 800 像素,而且它正确地从 400 像素开始建议(因为 Tailwind 已经定义了 384 像素),但我发现它并没有理会黄金比例(约为 1.61)这码事。


      它显然是忽略了使用黄金比例的要求,没有用它来进行区隔,也没有用该比例计算两个 utilities 类之间以 rem 或 px 为单位的距离结果。


      Github Copilot Chat


      我随后又尝试了 Github Copilot Chat:



      它给出的响应如下:


      

      它似乎并不知道 Tailwind 已经给出了到 384 像素的 width 类,但在区隔各 width 类时,它正确使用了黄金比例的近似值。


      Phind


      最后,我向 Phind 提出了同样的问题,结果如下:




      很明显,Phind 给出的答案更靠谱。它解释了自己的整个计算过程,在每个步骤中都用到了黄金比例,给出 Tailwind 配置并演示了具体该如何使用。


      原文链接:

      https://thecleverest.com/using-chatgpt-for-smart-truncation-in-responsive-web-design/


      https://allaboutcoding.ghinda.com/using-chatgpt-github-copilot-and-phind-to-generate-tailwind-config-for-width-classes


      相关阅读:


      AIGC 浪潮下,如何推动企业应用及落地?

      顶流「AIGC」的疯狂与争议|解读 AIGC 的 2022

      AIGC 将如何影响产业?又面临哪些科技治理的问题和挑战?

      AIGC 发展现状与应用展望

      2023-11-17 14:286802

      评论

      发布
      暂无评论
      发现更多内容

      360度全方位了解堡垒机作用-行云管家

      行云管家

      网络安全 数据安全 堡垒机

      一文读懂,Abaqus生成文件后缀含义

      思茂信息

      abaqus abaqus软件 有限元分析 有限元仿真 有限元

      MyEMS能源管理系统后台配置-联系人管理

      开源能源管理系统

      开源 能源管理

      MyEMS能源管理系统后台配置-网关管理

      开源能源管理系统

      开源 能源管理

      好消息!Apache DolphinScheduler 荣获上海上海菁英荟优秀开源项目奖

      白鲸开源

      大数据 开源 Apache DolphinScheduler 上海 大数据调度

      AI 英语写作 App 的上线

      北京木奇移动技术有限公司

      软件外包公司 AI英语学习 AI英语写作

      AI 英语写作 App 的测试

      北京木奇移动技术有限公司

      软件外包公司 AI英语学习 AI英语写作

      如何一眼定位SQL的代码来源:一款SQL染色标记的简易MyBatis插件

      京东科技开发者

      Java的SPI机制详解

      京东科技开发者

      可观测领域的王者Dynatrace的故障定位能力验证

      乒乓狂魔

      可观测性 故障定位 AIOPS

      CAD图纸填充不完整是怎么回事?快试试这种方法!

      在路上

      cad cad看图

      行业分享丨泛亚汽车数字化转型实践:虚拟仿真技术如何赋能汽车研发的创新实践?

      Altair RapidMiner

      AI 汽车 仿真 智能制造 CAE

      BeeWorks 免费版上线,赋能重要行业高效协作

      BeeWorks

      即时通讯 IM 私有化部署

      MyEMS能源管理系统后台配置-协议

      开源能源管理系统

      开源 能源管理

      告别SQL卡顿与混乱!AI如何赋能实时计算?

      袋鼠云数栈

      数据库 sql 数据治理 数据平台 数据管理

      分布式集群中雪花ID重复?三招教你彻底避坑!实战经验+解决方案

      Geek_e3e86e

      Java 编程

      动态化-罗码(京东科技一码多端解决方案)介绍

      京东科技开发者

      企微、钉钉、飞书私有化贵?这个支持私有化的 IM 软件可免费用!

      BeeWorks

      即时通讯 IM 私有化部署

      Nextcloud AIO - 一站式自托管Nextcloud解决方案

      qife

      Nextcloud 自托管

      低成本创业新方向:使用现成源码搭建游戏陪玩小程序平台

      DUOKE七七

      MySQL uniapp thinkphp

      基于华为开发者空间 - 开发平台,构建AI会议助手

      华为云开发者联盟

      welink 华为云FunctionGraph 华为开发者空间 MCP Server

      等保测评公司是干什么的?哪里可以查到?

      行云管家

      等保 等保测评

      捷途汽车6月销售汽车55741辆,上半年累销突破299368辆

      科技热闻

      政务一体化平台的小程序化构建路径:生态融合驱动下的数字化转型创新实践

      xuyinyin

      屏蔽海外流量是什么意思

      网络安全服务

      CDN 防火墙 waf DDoS 攻击 海外IP

      智源-人大高瓴26级联培博士预推免报名开始啦~欢迎感兴趣的同学咨询报名

      智源研究院

      人工智能

      7月代理IP | 充值加赠22%,1元也加赠!再加新人礼包,限时开启中ing

      kookeey代理严选

      节点搭建 海外IP 海外IP代理 跨境网络专线

      数字揭秘丨什么?!Altair EDEM竟然可以用来解答高考物理压轴的电磁力学题?

      Altair RapidMiner

      AI 制造业 电磁仿真 EDEM 离散元仿真

      手把手教你获取淘宝天猫商品详情数据和全店数据(避坑版)

      tbapi

      淘宝商品详情接口 天猫商品详情接口 淘宝店铺商品接口 天猫店铺商品接口

      数字金融的产业界共识,为什么是存算分离?

      脑极体

      AI

      注塑行业MES系统解决方案:全面指南与最佳实践

      万界星空科技

      制造业 mes 万界星空科技mes 注塑MES 注塑行业

      AIGC在前端Web开发中的应用:响应式设计和Tailwind配置的完美搭档_生成式 AI_InfoQ精选文章