用途
赛博朋克 UI 是一份面向 Web 与 App 的界面实现指南，定位为「design-it」技能的子风格参考（child reference）。它不是独立触发的技能，而是在用户需求符合该美学时被调用，例如用户想要霓虹配色、深色背景、高科技反乌托邦视觉、黑客风格界面时。文档自述的基调是「High tech, low life」，即霓虹灯刺穿雾霾中的反乌托邦巨型都市。
主要能力
该指南提供了一套可落地的视觉规则与跨平台实现代码：
- 霓虹与黑底：以绝对黑（#000000）或深炭灰为基底，用极高亮度的霓虹色作为强调。
- 斜切几何：使用切角（chamfers）取代圆角，使 UI 元素看起来像由金属板切割而成。
- 故障与数据：加入随机的十六进制数据流、条形码装饰，以及有意的视觉撕裂效果。
- 视觉 DNA：颜色为酸黄 #FCE205、青色 #00FFFF、品红 #FF003C 配黑色；字体为工业化、方正的无衬线体（如 Rajdhani、Blender Pro、Teko），并混用小号等宽字体展示数据；样式上使用斜条纹、警示胶带图案与强烈的外发光。
使用方式
文档按平台给出了具体做法：
- Web：依赖 clip-path 实现斜切角。示例中 body 使用 repeating-linear-gradient 制造斜向条纹背景，按钮用 polygon 的 clip-path 切角，并在 hover 时改变底色并用偏移 box-shadow 制造故障/阴影效果；另有 .data-stream 用等宽字体呈现半透明青色数据流。
- SwiftUI：定义自定义 Shape，在 path 中逐点绘制切角轮廓，绕过标准 cornerRadius；用 .clipShape() 做背景，用 .overlay() 配合 .stroke() 绘制高科技边框。
- Flutter：继承 CustomClipper<Path> 计算精确的切角路径，用 ClipPath 包裹容器；边框需要用 CustomPaint 与 CustomPainter 沿同一路径描边。
- React Native：由于原生不易对视图做裁剪路径，方案是使用 react-native-svg 绘制一个绝对定位的 <Polygon> 作为背景，文字置于其上。
- Jetpack Compose：通过重写 createOutline 并描绘 Path 创建自定义 Shape，直接用于 Modifier.clip() 和 Modifier.background()，并可用 Modifier.border() 为自定义形状描边。
适用场景
适合需要强视觉风格的界面，例如强调霓虹与暗色基调、未来科技感或黑客主题的 Web 与 App 页面。也适合作为跨平台实现切角与故障效果的技术参考。
限制
文档明确指出，这只是一份样式参考，并不替代针对具体环境的验证、无障碍测试或专家评审；对比度比例与响应式行为需要另行验证。此外，它依赖「design-it」技能体系作为子参考，本身并非直接触发的独立技能。关于收费、价格、平台支持范围等商业信息，资料未提供。