适用场景
- 编辑式产品发布通过有节奏、类似出版物的阅读方式呈现产品。
- 开源项目网站无需采用仪表盘惯例，也能解释工具、原则和方向。
- 长篇产品叙事将产品细节转化为一系列由作者编排的章节。
- 设计系统展示将字体、设计令牌和构图作为产品证据展示出来。
亮点
- 温暖纸张配色米白色表面和海军蓝强调色营造出印刷编辑风格。
- 基于章节的结构编号章节将产品说明转化为易于阅读的序列。
- 超大衬线首屏标题大型展示标题让主题立即可见。
- 编辑式实用细节期号标签、坐标和发布元数据增添出版物特征。
图库
1 / 4
温暖纸张质感的产品介绍
该网站将 OpenDesign 呈现为编辑式产品，而不是传统的软件仪表盘。其由作者编排的标题 “Designing intelligence on warm paper.” 以非常大的衬线字体占据开场视图，其中 “paper.” 使用了海军蓝配色。这样的对比让视觉设定在说明文案开始之前就清晰可读。
首屏将这种展示处理与句子 “The open-source studio for editorial documents, white papers, and one-pagers — typeset by your own coding agent.” 结合起来。右侧的 “31 SKILLS”、“72 SYSTEMS” 和 “12 AGENTS · BYOK” 紧凑区块，与左侧开阔的栏位形成平衡。源 CSS 确认首屏采用 1.45fr/0.55fr 网格，因此构图将叙事重点交给标题，同时保留窄幅证据栏。
这是一项关于产品落地页的设计研究。数量、命令、路线图和能力声明都是示例性源内容，并非经过验证的当前性能或已连接服务的证明。页面的视觉语言可以独立评估：温暖纸张质感、超大字号、克制的海军蓝、紧凑的元数据，以及经过刻意安排的阅读顺序。
标题如同封面
超大的衬线标题如同出版物封面，让访客首先理解产品的编辑定位。
指标如同边注
小型技能、系统和智能体区块提供方向感，同时不与主陈述争夺注意力；代价是留给辅助细节的空间更少。
刊头中的实用信息
“VOL. 01 · ISSUE Nº 26”、“V0.2.0” 和 “APACHE-2.0” 将网站框定为一份出版物的某一期，而不是匿名的产品界面。
面向产品叙事的落地页
这种设计适合那些需要先解释、再促成转化的产品：开源工具、编辑平台，以及价值取决于各个部分如何关联的系统。开场文案提到文档、白皮书和单页文档，然后进入 “What it is”、“How it feels” 和 “What ships next”。这一顺序为访客提供了一条紧凑的叙事弧线：定义、工作理念和面向未来的范围。
左侧章节标签很短，而正文栏负责承载解释。样式表将章节段落限制为 62ch，使每一行保持易读，但也会让较长的声明转化为更多的纵向滚动。对于带有宣言式语气的产品来说，这是一个有价值的取舍：页面保留了注意力和节奏，但无法像密集的对比表那样快速传达大量功能清单。
可见文案还使用了反复出现的编辑标记，包括 “01”、“02” 和 “03”，以及 “MANIFESTO · Nº 01” 等小型标签。这些重复元素帮助访客定位自己在论述中的位置。对于交易型商店或实用工具应用，这些元素的意义会弱一些，因为任务状态和控件通常会优先于它们。
开源工作室
在邀请访客采取行动之前，页面可以通过宣言、来源引用和发布信息建立项目原则。
面向文档的产品
温暖纸张质感的环境适合与阅读、写作、白皮书和单页文档相关的产品，而不是强调快速操作扫描的产品。
叙事型路线图
专门的 “What ships next” 章节让未来方向位于产品说明之后，将当前定位与拟议工作区分开来。
从刊头到路线图
阅读顺序从类似期刊的刊头和首屏开始，进入带海军蓝边线的宣言区，然后是四单元格指标行。接下来是三个编号章节：“What it is” 介绍工作室概念，“How it feels” 描述其拟议工作流，“What ships next” 承载示例路线图文案。大型 OpenDesign 字标、来源与工作室索引，以及最后的法律信息栏收束页面。这些中间模块很重要：它们将开场陈述与较长的说明分隔开来。
第二章尤其独特，因为它描述了一个 30 秒问题表单，其中包含品牌、受众、规模和语言字段，随后是选定的视觉方向、锁定的字体栈和一份书面产物。在截图中，这些想法以文字叙述呈现，而不是实际表单。这保留了编辑风格，但也意味着页面解释的是拟议工作流，而不是展示交互状态变化。
其工作流段落搭配了 “looks AI”、“looks shipped” 和 “One brush tag per page.” 等高亮短语。这些行内强调打断衬线正文，但没有引入新的面板系统。结果具有表现力，不过这种约定依赖读者理解：高亮词语是编辑注释，而不是控件。
01：确立设定
首屏使用温暖纸张质感的标题、产品句子、期刊元数据和右侧栏，在访客进入章节之前回答工作室是什么。
02：解释产品
“What it is” 从本地优先的描述延伸到源文件、设计系统、预览和导出相关表述，让访客在接触路线图内容之前先获得概念模型。
03：描述拟议工作流
“How it feels” 将问题字段、视觉方向选择、字体栈锁定、文件输出、iframe 审阅和评论锚点列为一个序列；正文描述了这些状态，但并未证明运行时行为。
04：区分未来范围
“What ships next” 将打包、多租户令牌和产物持久化列为路线图线索，使规划中的工作在视觉上与页面当前的编辑定位保持区别。
可见设计与能力边界
可以确信地复用的是可见构图：温暖的米白色背景、超大的衬线展示字体、类似 Source Sans 的实用文字、海军蓝强调色、编号章节和窄幅阅读宽度。随附 CSS 也支持观察到的比例：更宽的首屏文案栏和 62ch 的章节正文。
来源并未确立实时守护进程、已连接后端、持久化层、确定性生成或已完成的导航。经检查， “EN”、“中文”、“日本語”、“github.com/nexu-io”、发布信息和 issue 都链接到了占位目标。复用该设计时，应将工作流、存储、命令、产品数量和路线图声明视为示例性内容或拟议行为。
OpenDesign 通过其 Community 库分发此示例。其源文档指出 Kami by tw93 是由该设计系统改编的上游技能，地址为：https://github.com/tw93/kami。请将该署名与分发者署名分开；这并不意味着 OpenDesign 独立创作了最初的 Kami 方向。
如何在 OpenDesign 中创建编辑式产品网站设计
定义编辑框架
从简短的产品设定、类似期刊的元数据行和温暖纸张质感的视觉方向开始。让首屏陈述足够简洁，以便与窄幅证据栏并置。
构建章节序列
创建标题为 “What it is”、“How it feels” 和 “What ships next” 的章节。保留更宽的叙事栏和约 62ch 的阅读宽度，然后使用编号标签展示推进顺序。
建议提示词为一个示例性的本地优先工作室创建一个连续的编辑式产品网站，使用温暖羊皮纸色 #f5f4ed、海军蓝 #1B365D、克制的衬线展示字体，以及小号无衬线或等宽元数据字体。以类似期刊的刊头和超大衬线标题开场，随后设置 1.45fr/0.55fr 的首屏布局，并加入三个右对齐的示例徽章。添加左侧海军蓝边线的宣言区，以及包含清晰标注的示例值 31、72、12 和 3 的四个指标单元格。构建标题为 What It Is、How It Feels 和 What Ships Next 的编号章节，使用窄标题栏、约 62ch 的正文宽度、内嵌示例命令块和少量行内高亮。以大型工作室字标和紧凑的来源、技能及工作室链接栏收尾。1080px 以下将首屏和章节折叠为单栏；640px 以下堆叠指标和页脚栏。明确将语言和发布链接标记为占位符。不要实现或声称支持语言切换、后端、确定性生成、存储、当前产品数量或已验证的路线图交付。保留简洁的 Kami by tw93 上游署名，并区分 OpenDesign 的 Community 分发角色。这是一份建议性的复刻说明，不是原始创建提示词。
强化编辑重点
谨慎使用海军蓝突出关键词、紧凑的指标值和选定的行内短语。检查高亮短语读起来像注释而不是按钮，并确保较长的章节文案换行时不会失去阅读节奏。
检查来源与范围表述
让占位符链接与已完成的导航保持明显区别，保留 Kami by tw93 的上游署名，并在来源未验证运行时行为时，将路线图或工作流声明标注为示例性内容。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
