适用对象
- 技术写作团队呈现一套专注于起草、审阅和发布的工作流。
- 文档产品页面解释一款专业写作产品，避免泛化的功能蔓延。
- 编辑式 SaaS 概念围绕鲜明的发布理念塑造产品定位。
- 以键盘为中心的工作流展示专注型交互如何支持重视结构的写作者。
亮点
- 编辑式首屏克制的开场围绕写作质量为产品定调。
- 工作流序列五个编号功能单元格连接大纲、审阅、导出、历史记录和集成。
- 产品边界Does 与 Doesn't 的对比让定位呈现出少见的具体性。
- 套餐结构三个以受众为导向的套餐将定价与团队情境连接起来。
画廊
1 / 4
Quartz 技术写作网站设计
Quartz 被呈现为面向技术写作者的工作区，这些写作者希望无需离开键盘，便能从大纲推进到草稿、审阅和发布。该页面是一个概念网站，而不是已连接生产服务的证据，因此它最重要的贡献在于编辑式呈现：它先为专业工具赋予一种立场，再列出具体能力。
开场句位于大型左对齐的 Instrument Serif 标题中，并对“docs nobody read”进行斜体强调。其 16ch 最大宽度将较长的定位文案压缩成窄列，而辅助段落采用更宽的 52ch 栏宽。在温暖的灰白画布上，深色 Request access 按钮与更低调的 Read the manual 操作及展示出的快捷键徽章形成对比。这一安排优先突出写作前提，尽管这些控件并不会执行所宣传的工作区任务。
设计所支持的任务
页面面向多个相关的网站任务，但始终将它们与 Quartz 的核心前提绑定。访客可以了解产品面向谁、其设想中的工作流如何排序、它拒绝成为什么，以及不同套餐如何按受众区分。这些任务通过简短标签和反复对比来传达，而不是通过功能繁多的开场介绍来呈现。
解释写作工作流
源设计列出五个阶段：“OUTLINE”、“REVIEW”、“EXPORT”、“HISTORY”和“STACK”。这一序列让读者能够沿着从塑造文档到连接周边工具的拟议路径阅读。代价是页面描述了一种线性叙事；寻找无关能力的读者必须等到后续部分。
让产品边界令人难忘
“DOESN'T”和“DOES”配对将定位转化为可见的对比。“Auto-generate three-column landing pages”与发布写作者所写内容相对照，而数据库同步则与将 Markdown 写入磁盘相对照。划掉的文字让排除项在视觉上变得活跃，但也赋予这一概念一种刻意鲜明的观点色彩。
让套餐匹配受众
“Solo”、“Studio”和“Press”被介绍为不同的组织情境，而不是一条单纯的价格阶梯。页面将 Solo 与一名写作者联系起来，将 Studio 与最多十二人的文档团队联系起来，将 Press 与出版商和大型组织联系起来。这样，即使访客尚未研究功能列表，套餐结构也已经清晰可读。
页面从写作推进到定位
布局遵循与产品故事相同的顺序。大型首屏先建立语气，随后页面介绍编辑器，再依次经过审阅、导出、历史记录和集成。之后，对比部分说明 Quartz 不是什么，定价部分则将编辑立场转化为三个面向不同受众的产品报价。这一顺序让页面读起来更像一篇论证，而不是一份目录。
从编辑器开始
第一个编号部分是“01 / OUTLINE”，标题为“An outline that doubles as a typewriter.”。其文案提到拖动标题、专注模式和页面其余部分变暗。这些细节将结构与专注联系起来，但仍属于拟议的交互行为，而不是经过验证的运行时行为。
扩展到团队情境
接下来的部分介绍行内审阅、Markdown 导出、版本历史和集成。标签让每个概念保持紧凑，而描述则补充了具体关系：评论锚定到某一行，文档被描述为以相同的 .md 结构进行读写，工单 ID 则显示为与侧栏相关。每一项新增内容都扩展了设想中的工作区，同时也增加了真实实现需要证明的产品主张数量。
以商业选择收尾
定价区域对比 Solo 每月 $9、Studio 每席位每月 $22，以及 Press 的“Talk / to us.”。不同的计费单位和受众标签区分了单个写作者、文档团队和出版商。Solo 和 Press 各列出四项功能；Studio 列出五项，并获得推荐徽章。Press 将主题转向 SSO、自托管、导出流水线和支持服务，而不是简单地提供更长的功能列表。所有价格和能力都只是示例性的定位内容。
可见的设计与能力边界
Quartz 是一个营销概念，而不是已实现的写作工作区。它唯一的脚本通过 IntersectionObserver 显示各个部分；它不处理按钮、所显示的快捷键、编辑、审阅、导出或账户创建。原生链接可以跳转到 Surfaces、What It Isn't 和 Plans，而 Changelog 没有匹配的分区，页脚链接则是占位项。因此，该页面展示的是视觉定位，而不是可运行的集成、加密同步、发布功能或真实的定价套餐。这些服务需要单独实现和测试。
来源归属
OpenDesign 在其 Community 资源库中分发此示例。源文档将编辑式极简风格和空间节奏方面的指导归功于 Taste Skill by Leonxlnx：https://github.com/Leonxlnx/taste-skill。这是分发署名，并不声称 OpenDesign 是独立的原创作者。随附的清单声明采用 MIT；这并不为每项展示素材确立独立权利。
如何在 OpenDesign 中创建技术写作网站设计
设定编辑框架
从一个面向技术写作工作区的大型窄栏首屏开始。采用长篇主张、克制的辅助段落，以及两个意图不同的操作，遵循 Quartz 的“Request access”和“Read the manual”模式。让页面目标集中于写作与发布，而不是呈现通用软件仪表盘。
建议提示词为 Quartz 创建一个单页连续营销网站；Quartz 是一个示例性的技术写作工作区。使用温暖的 #FBFBFA 画布、带斜体强调的 Instrument Serif 展示文字、Inter Tight 正文文字，以及 JetBrains Mono 元数据。添加浮动导航栏、左对齐的 16ch 首屏标题和 52ch 辅助段落、深色 Request access 按钮，以及更低调的 Read the manual 操作。构建六列编辑式网格，其中包含五个编号单元格，分别用于大纲、审阅、导出、历史记录和集成；让前两个单元格跨越两行，并将浅色胶囊标签仅用于类别标识。随后加入三组配对的 Doesn't/Does 陈述，以及三个示例套餐：Solo $9/month、Studio $22/seat/month（带推荐标签），以及 Press Talk/to us。保留四/五/四的功能列表长度和不同的操作样式。在 880px 以下将网格和定价区域纵向堆叠。使用本地内容显现（reveal）动画，并支持减少动态效果（reduced-motion），同时清楚标注导航占位项。展示快捷键和工作流文字，但不要声称具备编辑、发布、集成、加密同步、账户或后端服务。将 Taste Skill by Leonxlnx 作为设计指导上游，将 OpenDesign 作为 Community 分发方。这是一份建议性的重建设计简报，而不是原始提示词。
构建五部分叙事
将主要产品故事组织为五个编号部分：大纲、审阅、导出、历史记录和技术栈。为每个部分提供一种可观察的关系，例如评论锚定到某一行，或 Markdown 以相同结构进出。将键盘快捷键和集成引用作为可见的概念细节，而不是已实现行为的证明。
细化边界与套餐
加入配对的“DOESN'T”和“DOES”构图，让产品排除项与产品承诺一样清晰易读。最后设置 Solo、Studio 和 Press 三列，保留源设计中的受众递进、价格格式、功能排序和操作差异。检查长篇衬线标题、紧凑标签和功能列表在列堆叠后仍然易读。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
