Maggie Appleton 写设计、人类学和智能体界面时，习惯先画清楚隐喻，再谈工具。把「Illustrating Gatsby's Key Concepts」整理成可阅读的中文笔记：问题在哪、界面默认会把人带去哪、落地时该改什么。原站导航、评论回响和广告已去掉。
Illustrating the Key Concepts
My previous website was built in a JavaScript framework called Gatsby.js . It’s one of a host of new website builders based around static site-generation and the JAMStack JAM stands for JavaScript, APIs, and Markup. It’s a relatively new approach to building websites that’s been gaining popularity over the last half decade. If you’ve heard of Gatsby before but haven’t wrapped your head around it yet, this might be for you.
I already have some illustrated notes up on using the JAMStack with Gatsby & Contentful and Building Gatsby Themes , but they’re a little more advanced.
Page Queries vs. Static Queries
Khaled Garbaya put out an egghead course on Getting Started with Gatsby that’s better suited to Gatsby beginners.
I made a set of illustrations that capture the key concepts from Khaled’s course. They don’t summarise all the course content. They’re just supporting material that help clarify the most important ideas.
Progressive Enhancement
First up is a big picture view showing all the essential parts of a Gatsby site.
Gatsby sites are able to pull in data from multiple sources all at once. This includes REST API endpoints, classic content management systems like WordPress or Contentful , or just your local file system.
落地时建议先做的 5 件事
- 先写清这个工具在强化思考还是在替人思考。
- 默认交互不要只会谄媚：该追问、该给反例、该要求证据。
- 智能体界面要露出推理步骤，而不是只给一个光滑答案。
- 知识发布用可生长的笔记，而不是一次性营销长文。
- 改产品前先画隐喻：用户以为自己在做什么，系统实际在做什么。
和智能体产品怎么接
龙虾PRO做 OpenClaw 落地时，最该从这类笔记里拿走的是「别把聊天框当唯一界面」。数字员工要能追问、能验证、能把过程摊开，而不是只负责说好话。
本文侧重全链路风控方法论。落地时请用自身业务单据做回放验证，不要把示例阈值直接当生产策略。 相关：风控体检 · 方案资源
常见问题 FAQ
Gatsby.js 是什么，它和 JAMStack 有什么关系？
根据文章，Gatsby.js 是一个基于 JavaScript 的静态网站生成器，属于 JAMStack 架构。JAMStack 代表 JavaScript、APIs 和 Markup，是一种通过预构建静态文件来快速构建网站的方法。Gatsby 能从 REST API、CMS 如 Wordpress 或本地文件系统等多种数据源拉取数据，这体现了其灵活性和现代性。
页面查询和静态查询在 Gatsby 中具体区别是什么？
文章指出，页面查询和静态查询是 Gatsby 中的关键概念。页面查询用于在构建时动态获取数据并传递给页面组件，适用于需要灵活数据的场景；静态查询则在构建时静态注入数据，更适合固定内容。两者都帮助管理数据，但使用方式不同，页面查询更灵活，静态查询更高效。
为什么渐进增强在 Gatsby 网站中很重要？
渐进增强允许网站从基础功能开始，逐步添加高级特性。在 Gatsby 中，这意味着即使 JavaScript 加载失败或用户设备不支持，网站仍能提供基本内容。这提高了可访问性、用户体验和网站韧性，确保更多用户能访问核心信息。
落地 Gatsby 项目时，建议先做的第一件事是什么？
文章建议落地时先写清工具在强化思考还是替人思考。这意味着要明确 Gatsby 的角色：它是辅助工具，帮助开发者更高效地构建网站，而不是完全自动化思考过程。这能避免过度依赖工具，确保项目基于清晰的需求和思考。
如何将 Gatsby 的理念应用到智能体产品如龙虾PRO/OpenClaw？
文章提到，与智能体产品结合时，应避免将聊天框作为唯一界面。龙虾PRO/OpenClaw 在落地时，可借鉴笔记建议：数字员工要能追问、验证并展示推理过程，而不是只给出光滑答案。这有助于提升透明度和用户信任，让交互更自然有效。
在使用 Gatsby 或类似工具时，有哪些常见陷阱要避免？
文章隐含了陷阱，如过度依赖工具而忽略思考。落地时，要确保默认交互不只会谄媚，而是能追问、给反例、要求证据；智能体界面应露出推理步骤，避免只追求光滑答案。这能防止工具滥用，保持项目基于扎实的观察和记录。