1. 描述任务
构建一个能感知位置的野生植物指南,适用于您所在的地区。在交互式地图上选择您所在的州,按类别浏览植物,查看当前正值季节的植物,并导出可打印的野外参考资料。
告诉 Claude 该工具的用途、交互流程以及您的设计方向。具体的功能需求和美学提示能产生更精致的结果。
我想为刚接触野生食用植物、不知从何入手的人构建一份采集指南。
它应该具备以下功能:
- 让用户在交互式美国地图上点击所在的州,查看该地区的采集数据(从 us-atlas TopoJSON CDN https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json(在新标签页中打开) 获取地图数据,并使用 D3 的 geoAlbersUsa 投影进行渲染)
- 按类别浏览可食用植物,并为每个物种显示一个 12 个月的季节条,让用户一目了然地看到采收窗口期
- 让用户点击任意植物以展开详情,然后让用户将植物添加到个人采集清单中,并导出包含所选物种和安全提示的可打印野外指南
设计风格:安静而自然。暖奶油色、柔和的鼠尾草绿、淡橄榄色。想象田野笔记本与编辑类杂志的结合——精致而不失亲和力。流畅的过渡效果、圆角设计、良好的字体层级。
2. 为 Claude 提供上下文
Claude 可以直接在对话中构建可运行的 artifacts。在设置中启用 Artifacts,这样 Claude 就能创建您可以立即使用的交互式应用程序。
在设置中开启 Artifacts。这样 Claude 就能生成具有完整交互性的应用——地图、状态管理、数据可视化——并直接在聊天中渲染。无需任何设置或部署。
必需的上下文
无需上传任何内容。
对于复杂的多组件应用,请开启扩展思考(在新标签页中打开),以便 Claude 在构建之前先规划架构。
可选的上下文
3. Claude 创建的内容
Claude 生成了一份完整、可运行的采集指南,首先呈现的是一张交互式美国地图,点击某个州即可显示该地区的植物数据。
我已经为您构建了野生食用植物野外指南。以下是您可以进行的操作:
按地区探索 — 点击地图上任意高亮显示的州。该指南目前包含太平洋西北地区(华盛顿州、俄勒冈州、爱达荷州)和东北地区(从缅因州到马里兰州)的数据。其他地区显示为"即将推出"。
按类别浏览 — 选择州之后,使用标签页浏览您所在地区的野生绿叶菜、浆果、蘑菇、根茎类和坚果。
查看季节性 — 每张植物卡片都显示一个 12 个月的条形图,标示采收窗口期。当前月份会被高亮显示,让您一眼就能看出当下正值季节的植物。
深入了解 — 点击任意卡片以展开详情:在哪里能找到它、如何处理它,以及需要留意的任何相似物种。具有危险相似物种的植物会显示警告面板。
建立您的清单 — 点击 + 按钮将植物添加到您的采集清单中。您的选择会显示在一个浮动面板中,该面板会追踪您的数量。
导出野外指南 — 准备好后,导出功能会生成一份可打印的参考资料,其中包含您所选的物种、处理说明和安全提示。
查看您的野外指南
4. 后续提示
继续与 Claude 对话,以完善、扩展或进一步探索。
替换为经过验证的信息
该指南使用示例数据来演示其工作方式。一旦您对其外观和体验感到满意,可以请 Claude 为您所在地区研究真实的物种——实际的采收季节、经过验证的识别细节、最新的安全警告。
请用我所在地区当前的采集数据替换 artifact 中的示例。研究经过验证的采收窗口期、准确的识别技巧以及有记录的相似物种。我想在野外实际使用这份指南。
识别野外发现的物种
上传一张照片,从您眼前的实物反向推导信息。
我附上了一张我在步道上发现的东西的照片。根据这张图片和我所在的地区,这可能是什么?我应该亲自检查哪些特征——菌褶结构、孢子印、气味——来确认?请告诉我仅凭照片能确定什么、不能确定什么。
5. 技巧、提示与故障排除
从 Claude 的构建中学习——或直接复用
请 Claude 讲解其中的逻辑,让您理解其模式,而不仅仅是结果。或者跳过解释,直接从 artifact 中复制代码,作为构建新内容的起点。参见一个复用此模式创建的交互式园艺指南(在新标签页中打开)示例。
在同一对话中持续完善
Claude 能在多轮交流中保持上下文,因此您可以大量迭代而无需从头开始。添加一个功能、测试它、发现问题、描述问题、获得修复。这种来回往复——有时多达数十轮——正是复杂工具逐步成形的方式。向 Claude 提出修改要求并不会打扰它;这正是整个流程的运作方式。
交互式地图最好配合数据源使用
Claude 并没有精确记住地理边界——州的轮廓、海岸线、县界。如果没有指向真实地图数据的指引,它有时会用占位形状来近似表示,而不是准确的地图。该提示通过指定一个 TopoJSON 数据源(一种标准的地图数据格式)解决了这个问题。Claude 会获取真实的边界数据并正确渲染。如果您的地图看起来不对,请检查您是否指向了真实的地理数据。
6. 准备好自己尝试了吗?
创建具有自定义界面的交互式工具,根据您喜欢的探索和学习方式量身定制。与 Claude 一起描述和完善您的想法,打造对您有用的工具。
