Archify设计系统深度解析“Evidence Console”证据控制台的6大设计语言【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 是一个面向架构师与 AI Agent 的交互式架构图渲染工具它将代码库或系统描述编译为可交互、可验证的 HTML 架构图。而驱动这一切的是项目内部一套名为Evidence Console证据控制台的设计系统——它决定了架构图的配色、字体、组件与证据呈现方式。这篇文章带你完整拆解这套设计语言的核心决策帮助你在生成和评审架构地图时真正看懂它的设计意图。一、核心理念证据控制台不是绘图套件Archify 的设计总纲写在 DESIGN.md 的第一行Creative North Star: The Evidence Console它的定位不是画图的套件而是一台精密的技术仪器一块主画布承载唯一空间叙事——画布始终占据主导控制区紧凑、低干扰渐进披露——读者从主干路径出发按需下钻到具体关系、元数据与已验证的代码证据全程不迷路克制的色彩——深色优先色彩只在语义值得的地方发光有限动效——状态过渡锁定 140–200ms动效有唯一属主、会自然结束且静止帧也必须承载完整含义。产品哲学在 PRODUCT.md 中进一步浓缩为一句原则Truth before spectacle真相优先于炫技——每一次聚焦、路由探测、故事回放和源码链接都必须来自作者编写或已验证的证据绝不从几何位置猜出关系。二、7种语义色午夜控制台配色方案整套调色板被称为a midnight console午夜控制台深空底色#020617之上只有7 个语义信号色且每个高饱和颜色都必须绑定一种节点或关系含义——颜色永远标识语义而非装饰色彩代号色值语义Verified Cyan验证青#22D3EE前端 / 主焦点 / 导航Proof Green证据绿#34D399后端 / 已验证证据 / 成功态Repository Violet仓库紫#A78BFA持久化状态 / 存储 / 上游关系Cloud Amber云琥珀#FBBF24云服务Boundary Rose边界玫红#FB7185策略 / 安全 / 受保护路径Transit Orange传输橙#FB923C消息总线External Slate外部石板灰#94A3B8外部系统两条命名规则值得记住语义色规则Semantic Color Rule永不为了让画面热闹而添加装饰性点缀色主题对等规则Theme Parity Rule亮色、暗色、Signal Flow、Blueprint 四种预设可以改变材质与对比度但必须保持类别身份和信息优先级一致——亮色不是另一个产品而是同一词汇表的另一材质。三、单一等宽字体层级靠字重不靠花字Archify 全部使用JetBrains Mono含系统等宽回退标题、正文、标签一视同仁。层级完全依靠字重、字号、字距与大写建立Headline7001.5rem仅用于工件标题Title6000.875rem面板、卡片、被选中的语义对象Body4000.75rem说明性文字与关系细节Label7000.625rem0.12em 字距大写状态、模式、元数据与紧凑的证据标记。配套两条规则One Voice Rule——生成的工件中绝不引入展示性字体Legibility Floor Rule可读性底线——极小标签只能承载元数据如果读者需要阅读一整句就必须升为正文尺寸或在聚焦时展开披露。这就是工程审图场景刻意追求高密度但可辨读的底层逻辑。四、组件与证据系统语义护照 验证信标这是Evidence Console名字的由来——两个关键组件把证据做成了界面的一等公民 Semantic Passport语义护照聚焦任意一个节点会打开一块紧凑的证据面板稳定 ID、作者编写的元数据、上下游关系以及可选的版本钉住的源码来源。它是细节信息的唯一目的地——DESIGN.md 明确要求新能力应优先路由到护照而不是再开一块新面板。 Verified Source Beacon验证源码信标带有仓库证据的节点右上角会出现一个安静的SRC n胶囊标记它只继承节点状态、不新增焦点目标并且在所有标准视觉导出中自动剥离——证据只存在于交互式工件里保持导出件干净、可移植、确定性。 Route Probe路由探针在作者编写的有向关系上精确解析两端点之间的最短路径绝不从几何位置推断路线 分享卡片Share Card追踪到一条真实路由或上下游影响后可导出 1200×630 的 Route / Reach 分享卡整张图作为安静背景保留卡片头部写入方向、起点、节点数、链路数与最大跳数——并且诚实地标注这是作者编写的可达性而非运行时影响或爆炸半径。组件层面还有几条量化标准按钮圆角0.5remBlueprint 预设收紧为0.2rem、面板圆角1rem、悬停/聚焦 150ms 响应、2px 青色焦点环——所有数字都登记在 DESIGN.md 头部的 frontmatter 中保证设计令牌design tokens可被程序化校验。五、Dos Donts守住证据边界的6条纪律DESIGN.md 末尾用明确的禁止清单划出了产品边界也是理解这套设计语言最直接的窗口✅Do主干路径先于次级关系每个焦点、路由、故事、源码链接都必须来自已编写或已验证证据尊重prefers-reduced-motion保持键盘可达与非颜色状态提示❌Dont不做只换主题不改进信息架构的 Mermaid 美化器不做 WYSIWYG 绘图套件不做暗示源数据中不存在的关系的动效演示❌Dont拒绝密集仪表盘外壳、无休止的相同卡片网格、装饰性玻璃拟态、渐变文字——原文称之为 AI-generated interface clichés❌Dont在没有独立代码分析证据时把图可达性称为运行时影响或爆炸半径。六、延伸阅读关键文件路径速查资料路径说明设计系统总纲DESIGN.md色彩/字体/组件/规则全量定义产品哲学PRODUCT.md六大设计原则与反参考观者运行时参考archify/references/viewer-runtime.md探索、故事、动效与导出边界交付契约archify/references/delivery-contract.md确定性交付回执字段仓库证据实现archify/renderers/shared/repository-evidence.mjs版本钉住的源码验证逻辑视觉证据样例docs/issue-52-visual-evidence/contact-sheet.png布局改进前后对照证据总结Archify 的 Evidence Console 设计语言 一套午夜语义色板 单一等宽字体家族 克制的扁平层级 以语义护照与验证信标为核心的证据系统。它把图是可验证的技术资产而非装饰画这一信念落实成了每一个色值、圆角与过渡时长的确定值——这正是它生成的架构图既好看又值得被信任的原因。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Archify设计系统深度解析：“Evidence Console”证据控制台的6大设计语言
Archify设计系统深度解析“Evidence Console”证据控制台的6大设计语言【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 是一个面向架构师与 AI Agent 的交互式架构图渲染工具它将代码库或系统描述编译为可交互、可验证的 HTML 架构图。而驱动这一切的是项目内部一套名为Evidence Console证据控制台的设计系统——它决定了架构图的配色、字体、组件与证据呈现方式。这篇文章带你完整拆解这套设计语言的核心决策帮助你在生成和评审架构地图时真正看懂它的设计意图。一、核心理念证据控制台不是绘图套件Archify 的设计总纲写在 DESIGN.md 的第一行Creative North Star: The Evidence Console它的定位不是画图的套件而是一台精密的技术仪器一块主画布承载唯一空间叙事——画布始终占据主导控制区紧凑、低干扰渐进披露——读者从主干路径出发按需下钻到具体关系、元数据与已验证的代码证据全程不迷路克制的色彩——深色优先色彩只在语义值得的地方发光有限动效——状态过渡锁定 140–200ms动效有唯一属主、会自然结束且静止帧也必须承载完整含义。产品哲学在 PRODUCT.md 中进一步浓缩为一句原则Truth before spectacle真相优先于炫技——每一次聚焦、路由探测、故事回放和源码链接都必须来自作者编写或已验证的证据绝不从几何位置猜出关系。二、7种语义色午夜控制台配色方案整套调色板被称为a midnight console午夜控制台深空底色#020617之上只有7 个语义信号色且每个高饱和颜色都必须绑定一种节点或关系含义——颜色永远标识语义而非装饰色彩代号色值语义Verified Cyan验证青#22D3EE前端 / 主焦点 / 导航Proof Green证据绿#34D399后端 / 已验证证据 / 成功态Repository Violet仓库紫#A78BFA持久化状态 / 存储 / 上游关系Cloud Amber云琥珀#FBBF24云服务Boundary Rose边界玫红#FB7185策略 / 安全 / 受保护路径Transit Orange传输橙#FB923C消息总线External Slate外部石板灰#94A3B8外部系统两条命名规则值得记住语义色规则Semantic Color Rule永不为了让画面热闹而添加装饰性点缀色主题对等规则Theme Parity Rule亮色、暗色、Signal Flow、Blueprint 四种预设可以改变材质与对比度但必须保持类别身份和信息优先级一致——亮色不是另一个产品而是同一词汇表的另一材质。三、单一等宽字体层级靠字重不靠花字Archify 全部使用JetBrains Mono含系统等宽回退标题、正文、标签一视同仁。层级完全依靠字重、字号、字距与大写建立Headline7001.5rem仅用于工件标题Title6000.875rem面板、卡片、被选中的语义对象Body4000.75rem说明性文字与关系细节Label7000.625rem0.12em 字距大写状态、模式、元数据与紧凑的证据标记。配套两条规则One Voice Rule——生成的工件中绝不引入展示性字体Legibility Floor Rule可读性底线——极小标签只能承载元数据如果读者需要阅读一整句就必须升为正文尺寸或在聚焦时展开披露。这就是工程审图场景刻意追求高密度但可辨读的底层逻辑。四、组件与证据系统语义护照 验证信标这是Evidence Console名字的由来——两个关键组件把证据做成了界面的一等公民 Semantic Passport语义护照聚焦任意一个节点会打开一块紧凑的证据面板稳定 ID、作者编写的元数据、上下游关系以及可选的版本钉住的源码来源。它是细节信息的唯一目的地——DESIGN.md 明确要求新能力应优先路由到护照而不是再开一块新面板。 Verified Source Beacon验证源码信标带有仓库证据的节点右上角会出现一个安静的SRC n胶囊标记它只继承节点状态、不新增焦点目标并且在所有标准视觉导出中自动剥离——证据只存在于交互式工件里保持导出件干净、可移植、确定性。 Route Probe路由探针在作者编写的有向关系上精确解析两端点之间的最短路径绝不从几何位置推断路线 分享卡片Share Card追踪到一条真实路由或上下游影响后可导出 1200×630 的 Route / Reach 分享卡整张图作为安静背景保留卡片头部写入方向、起点、节点数、链路数与最大跳数——并且诚实地标注这是作者编写的可达性而非运行时影响或爆炸半径。组件层面还有几条量化标准按钮圆角0.5remBlueprint 预设收紧为0.2rem、面板圆角1rem、悬停/聚焦 150ms 响应、2px 青色焦点环——所有数字都登记在 DESIGN.md 头部的 frontmatter 中保证设计令牌design tokens可被程序化校验。五、Dos Donts守住证据边界的6条纪律DESIGN.md 末尾用明确的禁止清单划出了产品边界也是理解这套设计语言最直接的窗口✅Do主干路径先于次级关系每个焦点、路由、故事、源码链接都必须来自已编写或已验证证据尊重prefers-reduced-motion保持键盘可达与非颜色状态提示❌Dont不做只换主题不改进信息架构的 Mermaid 美化器不做 WYSIWYG 绘图套件不做暗示源数据中不存在的关系的动效演示❌Dont拒绝密集仪表盘外壳、无休止的相同卡片网格、装饰性玻璃拟态、渐变文字——原文称之为 AI-generated interface clichés❌Dont在没有独立代码分析证据时把图可达性称为运行时影响或爆炸半径。六、延伸阅读关键文件路径速查资料路径说明设计系统总纲DESIGN.md色彩/字体/组件/规则全量定义产品哲学PRODUCT.md六大设计原则与反参考观者运行时参考archify/references/viewer-runtime.md探索、故事、动效与导出边界交付契约archify/references/delivery-contract.md确定性交付回执字段仓库证据实现archify/renderers/shared/repository-evidence.mjs版本钉住的源码验证逻辑视觉证据样例docs/issue-52-visual-evidence/contact-sheet.png布局改进前后对照证据总结Archify 的 Evidence Console 设计语言 一套午夜语义色板 单一等宽字体家族 克制的扁平层级 以语义护照与验证信标为核心的证据系统。它把图是可验证的技术资产而非装饰画这一信念落实成了每一个色值、圆角与过渡时长的确定值——这正是它生成的架构图既好看又值得被信任的原因。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考