@BenJdicken: 昨天很多人问我“这些图是怎么做的?”揭秘时间到!这些图大多最初是在 Excalidraw 中作为静态草图诞生的……
摘要
Ben Dicken 分享了他制作图表的过程,使用 Excalidraw 进行静态布局,Cursor 进行动画制作,这是他关于分片的技术文章幕后花絮的一部分。
查看缓存全文
缓存时间: 2026/07/16 22:23
昨天很多人问我:“这些图是怎么做的?” 幕后花絮时间到!
多数图表最初是在 Excalidraw 里画的静态草图。
在进入动画制作前,先敲定布局和视觉目标很有帮助。它们长这样:
下一步,Cursor
接着截图,并按照这个思路给 Cursor 提需求。
(这部分主要用的是 gpt 5.5 / 5.6)
结合图片和额外上下文后,效果已经很接近了,不过通常还需要几轮迭代提示来打磨。
为了让视觉风格契合品牌调性,我联系了 @rawloopsusa 制作灵感素材,然后让 Cursor 把它们转化为一些设计规范。接着让 Cursor 利用这些技能优化一遍。
有些视觉元素,比如 USL 图表,是我后来加的。但得益于设计技能和几轮提示,最终效果非常棒。
还有大量其他调整工作,比如微调尺寸,让一切刚好达到出版水准。
不过,当你提供正确的上下文和引导时,LLM 能帮你做这么多事情,真的很酷。
无言以对
它们已经进步了很多。
虽然不能直接开箱即用就做出惊艳的设计,但在指导下能产出好东西。
相似文章
@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.
@trq212:这使得工件更具表现力,并且可以以创造性的方式组合。我最喜欢的一种用法是创建一个仪表板…
Claude Code 工件现已支持公开分享和多人协作编辑,使用户能够为项目创建和分享可编辑的仪表板。
Show HN:Atlasphere – 实时基础设施架构图
Atlasphere 是一款 macOS 应用,它使用只读 IAM 角色自动从您的 AWS 账户生成实时基础设施架构图,并让图表与实际资源保持同步。
@GitHub_Daily: 需要跟同事讲解项目系统架构,光说不画图效果有限,自己动手画又费时间还画得不好看。 archify,一个能装进 Claude Code、Codex CLI 和 opencode 的 Agent Skill,把一段大白话描述直接变成一张架构图…
archify 是一个能装进 Claude Code、Codex CLI 和 opencode 的 Agent Skill,可将大白话描述直接生成系统架构图、工作流程图、时序图、数据流向图和生命周期状态图,支持深色/浅色主题切换和多种格式导出。