Maggie Appleton 写设计、人类学和智能体界面时，习惯先画清楚隐喻，再谈工具。把「How to Draw Invisible Programming Concepts: Part I」整理成可阅读的中文笔记：问题在哪、界面默认会把人带去哪、落地时该改什么。原站导航、评论回响和广告已去掉。

An Introduction

Developers interested in design and illustration. Designers and illustrators interested in programming. Anyone who gets excited about metaphors.

This is a long, overdue case study showing how I make an egghead course illustration. It spans everything from cognitive metaphor theory to Photoshop rendering so I hope you have a hot, caffeinated beverage with you.

Part Zero – What are we doing?

For the last half decade I’ve been the art director & lead illustrator over at egghead .

We’re a company / website / collection of humans who teach web development. We use a mix of tutorial videos, code challenges, articles, illustrated notes, workshops, and whatever other medium we feel like. As you might expect, it’s a whole lot of JavaScript, React, GraphQL, Vue, classic HTML & CSS, and other internety technologies.

How do you draw a thing that’s not a thing?

It’s my job to take all those abstract, hard-to-explain programming concepts, and make them visible in a way that helps people understand. Sometimes through illustrations, or animations, or illustrated notes, or diagrams, or interpretive dance on zoom calls.

One part of that is making course illustrations , which are like album cover art for all the courses we publish.

Tool Talk

So far I’ve made over 150 of these things, and I’m almost beginning to think I know what I’m doing. 不必 make all of our illustrations – I work with a rotating team of freelancers who help with the load. Lovely folks like Maxime and Aleksander have made plenty of them.

The guinea pig for this case study is going to be Mike Sherov ’s course on Web Security Essentials .

Part One – Making Metaphors

Here’s a quick overview of the course – it shows you how to protect a website against common attacks like man-in-the-middle interceptions, cross-site scripting, and cookie hijacking. All your classic internet foes.

The first step in starting a design task of any kind – illustration, innovative sandwich recipe, or carbon capture technology – is making the challenge you’re facing nice and clear. So let’s write ourselves a challenge statement:

So, what’s a Metaphor?

Create an illustration that clearly communicates the idea of “Web Security”

That might seem dumb and obvious, but it’s surprising how easy it is to get off track without stating the goal up front.

值得单独记下的观察

• Time is a quantifiable substance we can count
• Time is a valuable, limited resource
• Time is a something we can give to, and take from other people

落地时建议先做的 5 件事

1. 先写清这个工具在强化思考还是在替人思考。
2. 默认交互不要只会谄媚：该追问、该给反例、该要求证据。
3. 智能体界面要露出推理步骤，而不是只给一个光滑答案。
4. 知识发布用可生长的笔记，而不是一次性营销长文。
5. 改产品前先画隐喻：用户以为自己在做什么，系统实际在做什么。

和智能体产品怎么接

龙虾PRO做 OpenClaw 落地时，最该从这类笔记里拿走的是「别把聊天框当唯一界面」。数字员工要能追问、能验证、能把过程摊开，而不是只负责说好话。

本文侧重智能体生命周期与技能边界。若你要动手验证，优先用 Playground 做小任务压测；权限与托管再单独规划，避免「先装一堆再治理」。 相关：Playground · 创建智能体 · 学习中心