GPTs Store 要来了，GPT-4V 又出新玩法！

GPTs Store

昨天刚发了一篇文章，有人爆出 ChatGPT 要支持记忆功能（了解更多：ChatGPT：你的第二大脑！）。现在又有新功能截图流出，之前爆料 GPTs 的老哥 @btibor91 再次爆料称，官方即将推出 GPTs Store（怕你不信，还附带了接口数据截图）。

其实在上周我也开发了一个 GPTs 收集列表的开源项目 GPTHub^[1]，差不多搞了两天就放弃了。我当时已经意识到它完全踩在 OpenAI 的战略规划上，如果官方不推出 Store，和 Sam 之前在 DevDay 上许诺的 GPTs 作者盈利计划就对不上了。既然要让作者盈利，ChatGPT 肯定要有分发，曝光渠道，以及评分系统（注：这篇文章成稿早于 Sam 宣布离职，所以现在这个功能会不会拿掉也未可知）。

📌 一条帖子

当时我发了一条帖子说：令人尴尬的消息，GPTHub 项目似乎没啥存在必要了，通过设置过滤规则，Google 就能返回只包含 GPTs 的结果（例如 Google 搜索：site:http://chat.openai.com/g/）。如果硬要给 GPTHub 项目刷存在感，那就是详情页信息丰富一点。但在我看来，这类项目如果没啥特别功能，基本都歇菜，洗洗睡吧。

评论区网友：有点心疼你，看你没日没夜的忙活了好几天。

我回复到：哈哈哈，这个没啥。一个产品随时会因需求变更而失去价值，写代码就是为了玩技术和想法。做能强迫自己深入思考一个产品的功能和可能性，是在学习创造，积累经验。只专注于结果会少了很多体验的乐趣，细节往往隐藏在不起眼的地方，等你去发现，它们才是真正的宝藏！

注：其实 Google 还有更高级的搜索技巧，掌握了它，基本可以过滤出你想要的任何信息。

GPT-4 Vision

GPT-4 Vision 就是 GPT-4 的图像识别（GPT-4V），它可能远比你想象的要强大。目前使用 GPT-4V 主要有两种方式，ChatGPT Plus 或者直接调用 GPT-4V API^[2]。在 ChatGPT 中使用没什么好说的，大家应该都体验过了，今天主要想聊几个网页生成相关的项目。

draw-a-ui

draw-a-ui^[3]：使用 tldraw^[4] 画布绘制 SVG，转成 PNG 图片后发送到 GPT-4V，它会返回一个由 TailwindCSS 构成的 HTML 文件。此项目基于 Next.js 开发，通过 OpenAI API Key 驱动（目前项目仍处于早期实验阶段，生产慎用）。

其实借助 GPT-4V 识别草图生成静态 HTML 页面，早已不是什么稀奇的事情，但它与 tldraw 的结合却碰撞出了不一样的火花，最近在社区大火。以下是多个示例合集，有各种小游戏生成，表单创建，响应式布局等。

StatelyAI + Tldraw

draw-a-ui 虽然好玩，但因 AI 的随机性，无法进行更多逻辑上的控制。而 StatelyAI^[5] 的加入，让一切都变得可控起来。下面是一个复杂表单的交互视频演示。

screenshot-to-code

screenshot-to-code^[6]：将屏幕截图转换为 HTML/TailwindCSS。它使用 GPT-4V 生成代码，并使用 DALL-E 3 生成外观相似的图像。

小结

GPT-4V 带来太多的惊喜，但额外需要注意：TailwindCSS^[7] 在不同项目中多次出现，它很可能会成为 AI 生成代码的首选 CSS 方案。使用 TailwindCSS 作为 AI 生成代码的优势有：

• 快速原型设计和迭代：TailwindCSS 的实用类使得快速构建和调整设计变得简单，这对于 AI 生成的代码尤其重要，因为 AI 可以迅速生成和修改样式，而不需要深入研究复杂的 CSS。

• 一致性和可预测性：Tailwind 提供一套一致的实用类，这意味着 AI 可以更容易地生成符合预期的样式，减少不一致和意外结果的风险。

• 可定制性和扩展性：TailwindCSS 允许通过配置文件进行定制，这使得 AI 可以根据特定项目的需求调整和扩展样式库。

• 响应式设计：TailwindCSS 的响应式工具使得 AI 可以更方便地生成适应不同屏幕尺寸的设计，提高生成代码的适应性和灵活性。

• 减少样式冗余：由于 Tailwind 使用实用类，AI 生成的代码通常更加简洁，避免了冗余或重复的样式声明，使得生成的代码更加高效和易于维护。

总的来说，使用 TailwindCSS 可以帮助 AI 生成更加一致、可预测、且高效的代码，同时也支持快速迭代和响应式设计。

References

[1]

GPTHub: https://github.com/lencx/gpthub

[2]

GPT-4V API: https://platform.openai.com/docs/guides/vision

[3]

draw-a-ui: https://github.com/SawyerHood/draw-a-ui

[4]

tldraw: https://github.com/tldraw/tldraw

[5]

StatelyAI: https://stately.ai

[6]

screenshot-to-code: https://github.com/abi/screenshot-to-code

[7]

TailwindCSS: https://tailwindcss.com