开发工具代码编辑器数据科学【免费下载链接】positronPositron, a next-generation data science IDE项目地址https://gitcode.com/gh_mirrors/po/positron点击查看免费下载本篇指南基于 Positron 仓库内置的视觉规范文档 references/style.md 及配套的 SKILL.md、evidence.md 与校验脚本系统讲解为 Positron 文档、教程、walkthrough入门引导与功能预览绘制风格化 SVG 插画的完整规范。读者将掌握画布尺寸与显示尺寸的关系、紧凑调色板与字体约定、图标与文本的机器可检查对齐契约、按钮边界验证、占位符密度预算以及使用仓库自带脚本完成图标提取、严格校验与渲染 QA 的完整工作流。规范定位可识别的视觉地标而非微型截图Positron 风格化 SVG 的核心设计目标是让插画传达calm、focused、consistent、immediately recognizable平静、专注、一致、一眼可辨的产品气质在简化信息密度的同时保留产品结构。与逐像素还原的截图不同插画应保留真实 UI 的层级、位置、特色控件、图标方向与选中状态同时移除与讲解主题无关的细节——Create a recognizable visual landmark, not a miniature screenshotSKILL.md。这一规范服务于三类典型场景VS Code 体系的 walkthrough 媒体入门引导插图文档、教程中的界面示意图功能预览与 onboarding 插图。绘图之前必须先做证据收集evidence before drawing优先使用用户提供的当前截图其次查阅本仓库的布局描述、contribution 源码、菜单与主题文件再参考已评审提交的 SVG 示例位于 src/vs/workbench/contrib/welcomeGettingStarted/common/media如positron-panes-abstract.svg、positron-git-abstract.svg等最后才用规范中的视觉惯例与明确标注的推断。切忌为了构图平衡而凭空发明产品内容。画布尺寸坐标画布不等于显示尺寸VS Code walkthrough 媒体是响应式的宿主可能在不同编辑器宽度下显示不同尺寸的图片因此并不存在一画布走天下的通用方案。不过 Positron 已评审的抽象插画建立了一套实用的本地约定默认画布如下场景默认画布典型用途完整工作台或多个区域520×260编辑器带侧边栏、面板、笔记本加 Variables普通功能 walkthrough520×260Extensions、Git、键位绑定、单一主视图聚焦控件或打开的菜单400×210会话选择器、下拉框、紧凑瞬态状态目标已确定的资源匹配目标既有系列、文档位、提供的模板使用规则用户未给出尺寸且场景在约 2:1 下能舒适呈现时使用520×260。不要为了填满画布而添加无关的窗格、图表、行或占位条——如果有效场景本身较小就选紧凑画布。只有内容确实需要时才选用更高或更宽的画布例如高挑的选择器、垂直 onboarding 序列、已知宽高比的目标位并优先裁切范围而非把 UI 区域拉伸到不合理的比例。画布与渲染尺寸的区分对于 SVG坐标尺寸主要提供一套稳定的绘图坐标系不需要栅格风格的 HiDPI 倍增。务必保持width、height、viewBox一致svg width520 height260 viewBox0 0 520 260 ...已评审的 Positron walkthrough 通常以400px 宽嵌入展示。必须始终按实际投放宽度预览在高缩放下看起来均衡的图标、占位条和描边缩放后可能变噪或消失。若目标位置未知应在场景规格scene specification中记录以下假设canvas520×260期望显示宽度400px背景浅色宽高比2:1。在正式动笔前工作笔记中还应记录投放尺寸与显示宽度、有序区域及大致比例、唯一的焦点特性、每个独特对象的父区域及所有权证据、必须保持可读的精确标签、精确图标与选中/展开状态、被占位符替换或省略的细节、以及不确定细节所依据的证据。调色板紧凑 19 色拒绝近似灰色堆砌规范规定使用下述紧凑调色板除非源证据或请求的主题要求其他值角色值Positron chrome 强调色#3A78B1插画内容强调色#447099运行中会话#3DAA6E主图标#5A5A5A次级图标/文本#8A8A8A行号#8DA5B8占位内容#C8C8C8次级占位/轴线#D0D0D0细分隔线#EEEEEE结构分隔线#E0E0E0选中行#EEF3F8面板标题栏#F4F4F4标签条#F2F2F2工具栏/编辑器输入#FAFAFA/#F8F8F8输出/内容#FFFFFF标题文本#3E4246正文文本#333333调色板的价值与仓库源码相互印证主强调色#3A78B1正是 Positron 浅色主题中的 chrome 色——positron_light.json 中activityBar.background、badge.background、button.background、tab.activeBorderTop等 token 均为该值校验脚本 validate_svg.py 内置了ALLOWED_COLORS集合除上表外还允许少量功能色如#098658、#B07020、#C75C5C开启--strict-palette后任何超出集合的颜色都会被判为错误。规范同时强调不要创建多种近乎相同的灰色来降低视觉噪声应通过减少元素数量来降噪占位内容必须比图标更浅。已评审示例中可能含功能内容专属色如绘图系列色仅在所描绘内容确实需要时复用不得升级为通用 chrome 或占位色。字体与基线文本y是基线而非视觉中心UI 字体-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif代码字体Consolas, SF Mono, Menlo, monospace文本的y是基线不是视觉中心标签需与相邻图标和条进行渲染与光学对齐。这两组字体栈同样出现在已评审示例中例如 positron-panes-abstract.svg 中CONSOLE标签使用 UI 字体栈、提示符使用代码字体栈。图标与标签对齐可机器检查的契约针对图标旁边一行文本这一最常见组合规范给出了可机器检查的对齐契约icon-label pairg>python3 skill-dir/scripts/extract_icon.py \ codicon megaphone --aligned-box 364 36 12脚本 extract_icon.py 中--aligned-box接收X、CENTER_Y、SIZE三个参数自动计算y center_y - size / 2并输出带data-rolealigned-icon的svg包裹路径同时打印来源元数据。测试用例test_emits_explicit_box_centered_on_requested_y验证了--aligned-box 36 113 14会产出x36 y106 width14 height14。除 codicon 外还支持seti --extension/seti --filename提取文件图标依赖 fontTools默认色取自主题fontColor。适用范围该契约只针对一个图标 一行文本。多行品牌组合、纯图标按钮或无关尾部操作不得强行套用这些仍需渲染后的光学检查。另外绘制前应在源码中搜索动作对应的 codicon 名称优先使用本仓库随附的图标而不是网上随手复制的版本——codicon 会演进未必匹配当前 checkout。按钮边界用手动尺寸按钮最易翻车用数据盒兜底大多数 Positron 工具栏按钮通过flex: 0 0 auto与固定内边距紧贴自身标签这类按钮手工定宽极易出错目测选一个看似合理的宽度渲染后标签却可能跑出边框——因为快速裁切用的渲染工具与实际 SVG 字体并不一致。规范要求把检查做得和对齐一样可机器验证在 pair 中加一个data-rolebutton-bounds的 rect 作为直接子元素g>python3 skill-dir/scripts/validate_svg.py \ --strict-alignment path/to/image.svg校验器错误视为阻塞项警告需刻意审查不得通过削弱校验器来静默。每个单行图标-标签 pair 都必须带对齐元数据严格模式才会检查表示真实按钮的 pair 还需带button-boundsrect。若有rsvg-convert可生成便携最终渲染rsvg-convert -w 400 path/to/image.svg -o /tmp/positron-svg-400.png rsvg-convert -z 4 path/to/image.svg -o /tmp/positron-svg-4x.png注意rsvg-convert会用自带字体替代 SVGfont-family声明的字体因此按钮标签在此渲染中不越界、在真实浏览器或原生图片查看器中仍可能溢出——它适合检查布局、接缝与图标而手写尺寸按钮内的文本适配应依赖button-bounds校验而非该渲染。最后只在打开至少一个渲染预览后才交付 SVG并简要说明哪些产品证据决定了布局或控件以及剩余的推断。延伸阅读风格规范全文本文所依据的原始规范技能说明 SKILL.md绘图契约与 QA 流程总览UI 证据指南区域归属、主题色、比例与图标证据的查找方法图标提取脚本 与 校验脚本配套工具实现校验测试对齐与按钮边界检查的自动化用例已评审示例positron-panes-abstract.svg四窗格工作台、positron-git-abstract.svg、positron-extensions-abstract.svg、kernel-selector-abstract.svg等浅色主题 token调色板中#3A78B1等颜色的产品来源。赞分享开发工具代码编辑器数据科学【免费下载链接】positronPositron, a next-generation data science IDE项目地址https://gitcode.com/gh_mirrors/po/positron点击查看免费下载相关推荐fireworks-tech-graph 动效引擎全解析从语义 SVG 到可校验动画 GIF 的 12 风格契约体系fireworks tech graph 动效引擎全解析从语义 SVG 到可校验动画 GIF 的 12 风格契约体系 导读 本文聚焦 fireworks teAI 技能数据可视化DeepSeek Harness 工具输出规范契约从 ContentBlock[] 到可校验规范化值的架构演进DeepSeek Harness 工具输出规范契约从 ContentBlock 到可校验规范化值的架构演进 DeepSeek Harness 在 2026 0人工智能AI AgentAgent 框架DeepSeekKilo JetBrains 插件 New UI 图标设计实战从画布规格到暗色变体的完整规范Kilo JetBrains 插件 New UI 图标设计实战从画布规格到暗色变体的完整规范 本篇指南以 Kilo 开源仓库中 icon jetbrains人工智能大模型AI Agent代码智能体工具调用交互助手CLI上一篇Attu轻松掌握Milvus向量数据库可视化管理的最佳实践下一篇res-downloader资源嗅探工具下载页面上没有按钮的视频与 m3u8创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考