funky-purple-container-tech

name	funky-purple-container-tech
description	创建一个以容器为主导的暗色技术设计系统，带有品红紫强调色、层叠的圆角外壳、清晰的框架线与俏皮的未来感焦点物体。

Funky Purple Container Tech Skill

何时使用

• 创建一个以容器为主导的暗色技术设计系统，带有品红紫强调色、层叠的圆角外壳、清晰的框架线与俏皮的未来感焦点物体。

工作流程

范围

• 将其作为一套完整的设计系统方向，贯穿外层外壳、容器、卡片、搜索栏、导航、强调物体与配套运动。
• 当界面应显得技术感强且高级，同时又略带俏皮、富表现力与时尚前卫，而非纯企业风时使用。
• 这不是平庸的赛博朋克，也不是普通的仪表盘暗色模式。它应将强有力的容器结构与鲜活的紫色能量以及几笔俏皮的未来感手势相融合。

视觉目标

• 在近黑基底上搭建体验，用一个或多个大型框选容器来定义构图。
• 以紫色、品红或洋红作为主强调色系，可选蓝色底调用于增加纵深、辉光或次级照明。
• 让容器主导系统：带边框的外壳、圆角的搜索/输入栏、悬浮卡片、内嵌面板与框选侧导轨应构建页面层级。
• 用细边框、角方块、竖向框架线与精量的间距保持结构的技术感，但允许几个俏皮的主视觉元素，如发光球体、旋转文字环、悬浮卡片或夸张的照明泛光。
• 最终成果应显得像一个未来感的人才平台、产品外壳或创意科技网络，而非严格的企业仪表盘。

实现指引

• 偏好居中的最大宽度主容器，带可见的外层边界、边框导轨与角标，使页面显得被安置在一套刻意的系统外壳之内。
• 使用层叠的容器处理：圆角药丸、框选卡片、边框渐变包裹，以及带微妙模糊的半透明暗色面板。
• 引入一个紫色焦点物体或氛围锚点，如发光球体、径向地面光、悬浮徽章或动画线场，为构图注入能量。
• 排版可保持干净现代，但配套 UI 应使用大写实用文字、微标签与结构化元数据来建立技术可信度。
• 搜索栏、动作行与悬浮卡片应显得高级且有触感，带暗色填充、柔和内阴影、渐变边缘处理与强调色悬停响应。
• 运动应显得流畅时尚：遮罩文字显现、悬浮主视觉物体、辉光上的缓慢脉动、漂移线条动画或温和的环旋转都很契合。

推荐模式

• 大型暗色容器，带 border-x 导轨、微小角方块，以及在清晰技术网格内排布的内部区块。
• 圆角搜索或筛选栏，包裹在微妙的渐变边框中，置于暗色玻璃状外壳内。
• 悬浮信息卡片，使用紫到蓝的强调边缘、高圆角半径，与背景形成强烈的纵深分隔。
• 装饰性焦点物体，如发光紫球、轨道环、氛围底部照明或动画线场，置于内容之后。
• 页脚或动作栏延续容器语言，带分段输入与克制的强调箭头或标签。

调节旋钮

• 紫色情绪：根据页面应有的俏皮或高级感，在更浓郁的洋红、电光品红或更冷的紫罗兰之间切换。
• 容器圆度：让外壳保持圆润精致，但用清晰的框架逻辑加以平衡，使设计保持技术感。
• 俏皮系数：根据设计应有的实验程度，增删戏剧性焦点物体、辉光与动画装饰元素。
• 照明：让泛光与底部辉光集中在主视觉物体或焦点面板周围，而非冲刷整个页面。
• 结构密度：增删导轨、角标与侧模块，使布局能更偏干净或更偏仪器化。

避免

• 有紫色强调但没有实质容器层级的扁平暗色页面。
• 把每个面板都做成霓虹，导致构图失焦。
• 无视中央框选外壳的平庸 SaaS 卡片网格。
• 把怪诞玩过头，直到界面不再显得高级与可用。
• 混入过多不相关的强调色，削弱以紫色为主导的个性。