@BenJdicken: 昨天很多人问我“这些图是怎么做的?”揭秘时间到!这些图大多最初是在 Excalidraw 中作为静态草图诞生的……
摘要
Ben Dicken 分享了他制作图表的过程,使用 Excalidraw 进行静态布局,Cursor 进行动画制作,这是他关于分片的技术文章幕后花絮的一部分。
查看缓存全文
缓存时间: 2026/07/16 22:23
昨天很多人问我:“这些图是怎么做的?” 幕后花絮时间到!
多数图表最初是在 Excalidraw 里画的静态草图。
在进入动画制作前,先敲定布局和视觉目标很有帮助。它们长这样:
下一步,Cursor
接着截图,并按照这个思路给 Cursor 提需求。
(这部分主要用的是 gpt 5.5 / 5.6)
结合图片和额外上下文后,效果已经很接近了,不过通常还需要几轮迭代提示来打磨。
为了让视觉风格契合品牌调性,我联系了 @rawloopsusa 制作灵感素材,然后让 Cursor 把它们转化为一些设计规范。接着让 Cursor 利用这些技能优化一遍。
有些视觉元素,比如 USL 图表,是我后来加的。但得益于设计技能和几轮提示,最终效果非常棒。
还有大量其他调整工作,比如微调尺寸,让一切刚好达到出版水准。
不过,当你提供正确的上下文和引导时,LLM 能帮你做这么多事情,真的很酷。
无言以对
它们已经进步了很多。
虽然不能直接开箱即用就做出惊艳的设计,但在指导下能产出好东西。
相似文章
@trendtech33566: 致那些在AI diagram-design绘制图表时变成某种“通用框”的人们,约3.4k。精彩之处…
一项名为diagram-design的新Claude Code技能可让AI生成27种编辑级质量的图表(架构图、流程图等),以自包含的HTML+SVG形式,自动匹配站点的颜色和字体,避免输出看起来千篇一律。
@0xQiYan: 还在手动画架构图?拖来拖去改半天? 收藏!今天必须安利这个skill——我最近装了个 `drawio-skill`,一句话就能生成专业图表,再也不用自己画了。 它的逻辑特别简单:你只用说人话(比如“画一个交易系统架构图”),它直接给你生成…
介绍 drawio-skill 工具,通过自然语言描述即可生成架构图、流程图、ER图等专业图表,支持多轮迭代和导出多种格式,大幅提升画图效率。
@geekbb: 一套让 AI 画出"对且好看"的 draw 架构图的框架加命令行工具。 靠真实 stencil 校验和自动布局,覆盖 AWS/Azure/GCP/Databricks/BPMN,专门治 AI 瞎编图形 ID 画出空白框的毛病。 https…
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.
@tom_doerr: Generates 27 types of diagrams including flowcharts and architecture charts that automatically match your website's fon…
Introduces diagram-design, an open-source Claude Code skill that generates 27 types of branded diagrams (flowcharts, architecture, etc.) automatically matching a website's fonts and colors.
@trq212:这使得工件更具表现力,并且可以以创造性的方式组合。我最喜欢的一种用法是创建一个仪表板…
Claude Code 工件现已支持公开分享和多人协作编辑,使用户能够为项目创建和分享可编辑的仪表板。