如何使用 AI 设计工业粗野主义与战术遥测 UI

解决现代 UI 过于“圆润”和“通用”的问题：通过 AI 实现一种极致刚硬、强调机械感和高信息密度的工业粗野主义（Brutalism）或战术终端（Tactical Telemetry）视觉风格。

为什么需要这个技能

当前的 SaaS 产品大多遵循一套相似的设计语言：圆角、渐变、玻璃拟态和大量留白。但在某些特定场景（如数据密集型仪表盘、极客个人主页、命令行工具界面或品牌实验性页面）中，这种“温和”的设计无法传达出力量感和精确度。

工业粗野主义设计通过拒绝圆角，采用极端的排版对比、刚性的 CSS 网格以及模拟模拟信号的退化效果（如 CRT 扫描线），能够创造出一种如机械说明书或军事指挥中心般的视觉冲击力。

本技能将 UI 分为两种互不兼容的视觉原型，使用时必须二选一：

瑞士工业印刷风 (Light)：背景为米白色（如 #F4F4F0），使用粗重的无衬线体，强调极高对比度和纯红色的警告色，像一份 60 年代的重型机械手册。
战术遥测终端风 (Dark)：背景为深黑色（如 #0A0A0A），主色为白磷光色，大量使用等宽字体（Monospace）和 ASCII 符号，模拟 CRT 监视器。

排版架构：
- 宏观标题：使用 clamp() 实现超大字号，字符间距设为负值（-0.03em），强制文字形成紧实的建筑块状感。
- 微观数据：统一使用 10px-14px 的等宽字体，增加字符间距，模拟打字机效果。
空间工程：
- 严禁使用 border-radius，所有角必须是 90 度直角。
- 使用 display: grid 构建刚性网格，通过 1px 实体边框对信息区域进行严格切分。
模拟退化处理：
- CRT 效果：使用 repeating-linear-gradient 叠加一层微小的水平扫描线。
- 噪点处理：在 DOM 根节点覆盖一层低不透明度的 SVG 噪声滤镜，消除数字产品的过度纯净感。

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

暂无推荐