@BenJdicken: 昨天很多人问我“这些图是怎么做的?”揭秘时间到!这些图大多最初是在 Excalidraw 中作为静态草图诞生的……

X AI KOLs Timeline 工具

摘要

Ben Dicken 分享了他制作图表的过程,使用 Excalidraw 进行静态布局,Cursor 进行动画制作,这是他关于分片的技术文章幕后花絮的一部分。

昨天很多人问我“这些图是怎么做的?”揭秘时间到! 这些图大多最初是在 Excalidraw 中作为静态草图诞生的。 在进入动画制作之前,先确定布局和视觉效果是非常有帮助的。以下是它们当时的样子: 下一步,Cursor 🧵 https://t.co/xFwaXSvsAb
查看原文
查看缓存全文

缓存时间: 2026/07/16 22:23

昨天很多人问我:“这些图是怎么做的?” 幕后花絮时间到!

多数图表最初是在 Excalidraw 里画的静态草图。

在进入动画制作前,先敲定布局和视觉目标很有帮助。它们长这样:

下一步,Cursor

接着截图,并按照这个思路给 Cursor 提需求。

(这部分主要用的是 gpt 5.5 / 5.6)

结合图片和额外上下文后,效果已经很接近了,不过通常还需要几轮迭代提示来打磨。

为了让视觉风格契合品牌调性,我联系了 @rawloopsusa 制作灵感素材,然后让 Cursor 把它们转化为一些设计规范。接着让 Cursor 利用这些技能优化一遍。

有些视觉元素,比如 USL 图表,是我后来加的。但得益于设计技能和几轮提示,最终效果非常棒。

还有大量其他调整工作,比如微调尺寸,让一切刚好达到出版水准。

不过,当你提供正确的上下文和引导时,LLM 能帮你做这么多事情,真的很酷。

无言以对

它们已经进步了很多。

虽然不能直接开箱即用就做出惊艳的设计,但在指导下能产出好东西。

相似文章

@0xQiYan: 还在手动画架构图?拖来拖去改半天? 收藏!今天必须安利这个skill——我最近装了个 `drawio-skill`,一句话就能生成专业图表,再也不用自己画了。 它的逻辑特别简单:你只用说人话(比如“画一个交易系统架构图”),它直接给你生成…

X AI KOLs Timeline

介绍 drawio-skill 工具,通过自然语言描述即可生成架构图、流程图、ER图等专业图表,支持多轮迭代和导出多种格式,大幅提升画图效率。

@geekbb: 一套让 AI 画出"对且好看"的 draw 架构图的框架加命令行工具。 靠真实 stencil 校验和自动布局,覆盖 AWS/Azure/GCP/Databricks/BPMN,专门治 AI 瞎编图形 ID 画出空白框的毛病。 https…

X AI KOLs Timeline

A framework and CLI tool that enables AI agents to generate structurally precise and aesthetically standardized draw.io diagrams for AWS, Azure, GCP, Databricks, and BPMN architectures, using real stencil validation and automatic layout to prevent hallucinated empty shapes.

@GitHub_Daily: 需要跟同事讲解项目系统架构,光说不画图效果有限,自己动手画又费时间还画得不好看。 archify,一个能装进 Claude Code、Codex CLI 和 opencode 的 Agent Skill,把一段大白话描述直接变成一张架构图…

X AI KOLs Timeline

archify 是一个能装进 Claude Code、Codex CLI 和 opencode 的 Agent Skill,可将大白话描述直接生成系统架构图、工作流程图、时序图、数据流向图和生命周期状态图,支持深色/浅色主题切换和多种格式导出。