SuperAPI AI 工具集

signet-design

设计与创作

查看项目

更新于 10-16 09:29

技能介绍

用途:Signet Design System 是 Signet 代理身份项目的视觉设计系统,定位为技术化、工业化、诚实的界面语言,源自制图蓝图、CRT 终端、赛博朋克界面、1-bit 半调印刷与锐舞海报风格,明确不是消费级 SaaS 或 Material Design 风格。

主要能力与要素:双字体——Chakra Petch(标题)+ IBM Plex Mono(正文);近单色灰阶调色板,几乎无彩色强调;零圆角,全部 90 度直角;按钮与徽章用描边而非填充;系统命名用下划线约定(Sys_Palette、Component_Library);几何图标为内联 SVG,24x24 viewBox;十字准星等定位标记作为视觉标点;生成式 Bayer 抖动半调艺术作为构图元素;深色与浅色双主题;所有覆盖元素背景透明度 0.8。设计令牌通过 CSS 自定义属性并用 [data-theme] 切换主题;浅色主题背景为暖米色而非纯白。组件模式涵盖按钮、卡片与表面、徽章、输入框、分节面板、HUD/准星区块、终端副标题、元数据网格、色板等。嵌入图覆盖层用 16 个十字节点、3 个枢纽圆与 3 个星标,边由 JS 读取节点中心后绘制二次贝塞尔曲线,仅一个控制点,绝不使用 S 曲线。

使用方式:资料给出字体 Google Fonts 引入参数与 CSS 变量示例(--font-display、--font-mono),完整令牌见 assets/globals.css,全部 SVG 路径见 assets/index.html,生成式模式实现见 references/generative-patterns.md,整页参考截图见 assets/design-brief.png。

适用场景:需要呈现“运行中的系统 / 持续存在的意识”氛围的代理身份类界面。

限制:明确列出反模式,禁止圆角、静止态填充按钮、Inter/Roboto/Arial/system-ui、衬线字体、高饱和颜色、紫色渐变、柔和友好 UI、对已弱化文字再叠加 opacity、纯白背景、单字体层级、抢眼动画、S 曲线连接线。具体安装命令未提供。