framed-tech-dark-border-gradient

name	framed-tech-dark-border-gradient
description	创建一个框选式暗色技术设计系统，带有边框渐变外壳、非对称网格面板、等宽实用标签与克制的单色氛围。

Framed Tech Dark Border Gradient Skill

何时使用

• 创建一个框选式暗色技术设计系统，带有边框渐变外壳、非对称网格面板、等宽实用标签与克制的单色氛围。

工作流程

范围

• 将其作为一套完整的设计系统方向，贯穿页面外壳、框选线、卡片、面板、排版、控件与氛围背景处理。
• 当界面应显得高级、技术感强、暗色，并围绕可见边界而非柔和悬浮卡片来搭建时使用。
• 这不是平庸的仪表盘暗色模式，也不是光泽玻璃拟态。其个性应来自框架逻辑、边框渐变、外探的导轨与精准的单色层级。

视觉目标

• 在近黑基底上搭建页面，让背景、框选面板与抬升的交互行之间有微妙的色调分隔。
• 使用一个强有力的外层容器或应用外壳，带可见的边缘导轨、纤细的网格边界与小角标，使整个构图显得被工程化。
• 让一像素渐变边框或包裹边框成为容器、按钮、模块与交互卡片上的标志性母题。
• 偏好由黑、炭灰、烟灰、白与银构成的克制单色调色板。若需要强调色，从品牌派生并保持稀疏。
• 将安静的无衬线排版与等宽标签、大写系统标题及微元数据相搭配，使界面显得操作化且精准。

实现指引

• 偏好非对称网格布局，带清晰分段的面板块，例如一个较大的主视觉或信息区，配一个较小的可视化或实用面板来平衡。
• 用细分隔线、边框线或基于间隙的框缝分隔面板，使每个区域都读作同一套精量容器系统的一部分。
• 添加略微超出主外壳的竖向导轨、微小的角方块、内嵌描边或短扫描线，以强化技术框架感。
• 在高级面板周围使用边框渐变包裹，然后在其内部放置更暗的内填充，使边缘处理保持清晰可见。
• 交互行、权限列表、导航项与小控件模块应使用以线为主导的状态：激活侧边条、微妙的填充抬升、悬停提亮，以及锁定或静音的非激活行。
• 背景氛围应保持受控且单色：柔和的波场、淡淡的模糊泛光、温和的手电筒衰减或低对比的移动线条效果都很合适。
• 运动应显得平静且程序化，如遮罩文字显现、扫描条纹、线条扫掠或缓慢的环境 canvas 移动，而非炫目的转场。

推荐模式

• 大型主外壳，带 border-x 导轨、外探的外层引导线，以及标记容器边界的微小角方块。
• 由纤细白线或灰线分隔的暗色技术面板网格，含一个主视觉面板、一个实用或可视化面板，以及一个结构化列表面板。
• 等宽顶部导轨，以大写字距呈现区块代码、状态标签、序列标记与实用元数据。
• 边框渐变的按钮、药丸标签与卡片，带暗色内表面与克制的白光高光，而非饱和色彩。
• 激活列表行使用左缘条、更亮的文字与微妙的半透明填充，而非激活行保持描边或低对比。
• 在选定面板之后或之内使用柔和的单色 canvas 效果来增添氛围，同时不削弱可读性。

调节旋钮

• 边框亮度：根据框架应有的高级感或严峻感，增强或减弱白到透明的边缘渐变。
• 网格非对称：让面板比例足够不均以显得有构图感，但又足够平衡以保持可用与刻意。
• 技术密度：根据页面应有的仪器感，增删角标、外探导轨、扫描线与元数据。
• 面板不透明度：在哑光实心与轻微半透明的暗色玻璃之间调节内填充，同时不失清晰的框轮廓。
• 强调克制：默认单色，然后仅在页面需要更多个性时于小的激活提示中引入品牌色。

避免

• 没有可见容器逻辑或边界系统的扁平黑色布局。
• 压过单色框架语言的厚重彩色霓虹辉光。
• 使系统显得笨拙而非精准的厚边框、粗阴影或臃肿卡片。
• 移除工程化外壳与实用标签特征的柔软消费级应用风格。
• 只把渐变边框当装饰；它们应主动定义层级与高级结构。