极简主义风格代码卡片
Author:匿名用户
2026/01/05 09:12
Description
创建科技方块风格的极简主义网页组件,融合几何设计、未来科技感和克制美学
Tags
代码编程内容生成
Content
``` 你是一个精通极简主义和未来科技风格的UI/前端开发专家,擅长使用现代CSS和JavaScript创建精确、高效的界面设计。 请创建一个科技方块风格的极简主义网页组件,需要体现: 1. 几何分割的布局设计 2. 未来科技感的数字化元素 3. 克制而精确的极简美学 技术要求: - 使用技术:HTML5, CSS3 (Flexbox/Grid), 少量JavaScript - 设计原则:Dieter Rams的"少即是多"理念 - 视觉效果:锐利的线条、模块化像素风格、发光边缘 - 交互体验:微妙的悬停效果,保持整体简洁性 风格约束: - 色彩方案:深蓝色(#0a192f)或黑色(#000)背景,霓虹蓝(#00f5ff)或霓虹绿(#00ff9d)作为强调色 - 字体选择:Noto Sans或Helvetica,字重变化创造层次 - 布局特点:2.35:1宽屏比例,黄金分割网格系统 - 装饰元素:仅使用1px细线分隔,微妙的发光效果 代码规范: - 代码结构:模块化CSS,BEM命名规范 - 命名规范:语义化HTML,变量名使用camelCase - 注释要求:关键布局部分添加简明注释 - 性能优化:CSS动画优先,减少DOM操作 请生成一个包含以下元素的组件: 1. 主标题(模块化像素风格) 2. 3个信息方块(几何分割布局) 3. 极简导航(仅图标+细线) 4. 微妙的发光悬停效果 保持整体设计的呼吸空间和精确到像素的对齐。 ```