SuperAPI AI 工具集

design-to-canvas

设计与创作

查看项目

更新于 10-15 10:34

技能介绍

design-to-canvas 是一个把设计文档转化为独立 Cursor Canvas 的技能,目标是帮助团队快速理解并对齐“我们将如何构建这个东西”。它主要是一个知识传递产物,而不是审批工作流、辩论空间,也不是文档的漂亮副本。

核心目标:让作者已知的内容尽可能容易被团队吸收,同时不丢失重要含义、决策、约束或实现方向。

在构建 Canvas 之前,需要识别以下内容:

  • 问题是什么以及为什么重要
  • 预期结果
  • 核心心智模型
  • 提议的系统及其各部分如何协同工作
  • 关键流程、状态、边界和归属
  • 重要决策及其理由
  • 约束、风险、假设和明确的非目标
  • 实施顺序以及每个团队或组件负责什么
  • 哪些细节用于对齐,哪些细节可以渐进式披露

呈现原则:

  • 少即是多,不要逐节复制文档。
  • 优先展示而非解释。
  • 仅在视觉无法承载含义时使用简短直接的文字。
  • 将信息分隔为可独立理解的视图。
  • 建立强层次:先核心理解,后实现细节。
  • 面向 5–10 分钟的读者优化,同时允许深入探索。
  • 让重要决策保持可见。
  • 将次要机制和详尽细节放入可展开区域或紧凑的技术附录。
  • 不要隐藏不确定性、有意义的权衡、依赖或未解决的风险。
  • 不要给每个细节相同的视觉权重。
  • 不要添加装饰性图表、通用卡片、虚假指标或无法解释任何内容的视觉元素。
  • 不要过度强调签署、审批状态、利益相关者辩论或治理。

绘图:

  • 当绘图比文字更快或更清晰地传达观点时使用绘图。
  • 将绘图视为解释工具,而非装饰。
  • 用它们解释关系、流程、边界、状态、时序、归属和因果关系。
  • 当绘图承载想法时,保持其支持文字最少。
  • 每张图都应回答一个具体问题,并且无需旁白即可理解。
  • 当一句话或短列表更清晰时,不要强行使用视觉。
  • 只选择真正能阐明设计的视觉形式,例如:系统或组件图、用户到系统的旅程、序列或数据流图、生命周期或状态模型、职责与归属边界、分阶段实施路径、针对有意义权衡的聚焦对比。

建议的叙述结构:

  • 我们在构建什么以及为什么
  • 一分钟心智模型
  • 系统如何端到端工作
  • 主要构建块及其职责
  • 关键流程、状态和边缘情况
  • 影响实现的决策
  • 我们将如何构建和推出
  • 风险、假设和有意推迟的细节
  • 面向需要深度读者的紧凑技术参考

准确性要求:

  • 保留源文档的意图。
  • 不要编造需求、决策或确定性。
  • 清楚区分已决定、假设、提议和未解决的事项。
  • 保留源文档中的重要术语。
  • 如果文档包含矛盾或缺口,安静而精确地呈现它们,不要将 Canvas 变成审查报告。

Canvas 要求:

  • 使用 Cursor Canvas 技能创建实际的 .canvas.tsx 工件。
  • 使其作为独立工件有用,无需源文档在旁边。
  • 使用强视觉层次和多样化的构图——不是一堵相同的卡片墙。
  • 对次要细节使用渐进式披露。
  • 保持每个视图有目的且可扫描。
  • 不包含占位符或空章节。
  • 完成前,移除任何不能提升理解或实现对齐的内容。

最终测试:对每个章节问:读者在这里必须理解什么?它能比文字更清晰地展示吗?移除什么可以不丢失含义?