极简主义风格代码卡片

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. 微妙的发光悬停效果
保持整体设计的呼吸空间和精确到像素的对齐。
```
极简主义风格代码卡片 - AI Prompt - PromptHub