industrial-brutalist-ui
设计工业野兽派网页界面
创建大胆、机械化的网页界面，融合瑞士字体排印和军事终端美学。生成数据密集型仪表盘和编辑网站，展现原始功能性极致字体排版对比。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“industrial-brutalist-ui”。 Create a hero section with industrial brutalist style
预期结果:
生成CSS Grid布局，超大字号标题横跨整个视口宽度，可见1px边框分隔各区域，角落处的等宽字体元数据标签，以及标记关键数据点的红色强调线。
正在使用“industrial-brutalist-ui”。 Design a data table for tactical terminal interface
预期结果:
创建固定宽度的等宽字体表格，深色背景，白色文字，可选的绿色状态单元格，横跨全宽的水平分隔线，以及括号框住的分节标题如[ SYSTEM STATUS ]。
安全审计
安全Static analysis detected 71 potential security issues, all are FALSE POSITIVES. The backtick patterns are CSS code examples in markdown documentation, not shell execution. Color hex codes were misidentified as cryptographic weaknesses. ASCII bracket decorations were misidentified as Windows system references. This skill contains only design guidelines with no executable code.
质量评分
你能构建什么
数据仪表盘设计
为分析平台创建高密度监控仪表盘，具备战术终端美学、等宽遥测数据和清晰的视觉层次
编辑作品集网站
使用瑞士工业印刷美学构建视觉冲击力的作品集或编辑网站，具有超大字体排版和非对称布局
技术文档界面
设计感觉像解密蓝图或军事手册的文档界面，具有刚性网格和实用主义样式
试试这些提示
Create a landing page using Swiss industrial print style. Use a light substrate with #F4F4F0 background, heavy sans-serif headers at massive scale, and red #E61919 accents. Include visible grid lines and uppercase monospace metadata.
Build a data dashboard using tactical telemetry aesthetics. Use dark mode with #0A0A0A background, JetBrains Mono font for all data displays, white phosphor #EAEAEA text, and optional green #4AF626 for one status indicator only.
Generate CSS typography variables for a brutalist interface with macro-headers using Inter Black at clamp(4rem, 10vw, 15rem) with -0.05em letter-spacing, and micro-text using JetBrains Mono at 12px with 0.08em tracking. All uppercase.
Add CSS effects for analog degradation including halftone pattern overlay using SVG radial dots, CRT scanlines with repeating-linear-gradient, and global mechanical noise using SVG filter on the root element.
最佳实践
- 每个项目选择一种视觉原型（瑞士工业印刷或战术遥测），切勿在同一界面中混用两者
- 始终使用CSS clamp()函数处理宏标题，确保在视口尺寸变化时流体缩放同时保持视觉冲击力
- 在DOM根级别应用全局噪点滤镜和纹理效果，以实现所有元素的统一模拟退化
避免
- 切勿在同一界面中混用浅色和深色底材配色方案——必须选定一种模式
- 避免在任何元素上使用border-radius——所有边角必须精确为90度以保持机械刚性
- 不要使用渐变、柔和投影或现代半透明效果，因为它们违反了实用主义美学