技能介绍

解决什么样的排版困境

在常规的 UI 或 Web 设计中，文本排版往往追求对齐、留白与和谐的视觉比例。然而，当项目需要强烈的视觉冲击、反主流的街头文化表达，或是打造一种“未完成”的粗犷质感时，标准的网格系统和精致的字体选择反而会成为束缚。如何在不依赖复杂第三方库的情况下，快速构建出具有攻击性、打破常规且极具辨识度的大字排版效果，是许多创意开发者面临的具体痛点。

核心原则与实现机制

这个技能并非一个可直接调用的代码库，而是一个设计子风格参考（child reference），隶属于 design-it 技能体系。它的核心逻辑在于通过反设计（Anti-Design）原则重塑文本的视觉表现：

规则打破与越界：放弃传统的文档流布局，在 Web 端使用 absolute 定位或负 margin 让文本相互重叠、截断屏幕边缘；在移动端，强制使用 .ignoresSafeArea() 或禁用 SafeArea，让大字直接侵入状态栏和刘海区域。
粗野主义字体与色彩：摒弃精致的定制字体，转而使用 Times New Roman、Courier New 等系统默认字体，并将其字号暴力放大至 150px 甚至更大。色彩上采用黑白红的工业风，或高饱和度的霓虹撞色（如纯蓝配纯红），并配合 marquee（跑马灯）、闪烁文本等复古 HTML 元素。
跨平台落地细节：

- SwiftUI：通过负间距的 VStack 或负 .offset() 强制文本重叠，利用 .foregroundColor(.clear) 配合 .stroke() 实现描边文字。
- Flutter：使用 Stack 和 Positioned 进行绝对定位，将 TextStyle 的 height 设为 0.8 以下以压缩行高，制造文本“粘”在一起的拥挤感。
- React Native：通过负 marginTop 和 marginLeft 制造布局混乱，使用 @shopify/react-native-skia 实现原生不支持的文本描边。
- Jetpack Compose：利用 Modifier.offset(x, y) 打破 Column/Row 网格，配合 drawStyle = Stroke(width = 5f) 轻松实现轮廓字体。

适用边界与避坑指南

这种风格极具攻击性，绝对不适合用于正文阅读、表单输入或需要高可用性的后台管理系统。它仅适用于海报生成器、活动落地页、个人作品集等追求极致视觉张力的场景。

此外，尽管该技能提供了详尽的跨平台实现方案，但它不能替代环境特定的验证、无障碍测试或专家审查。在实际应用中，必须单独验证文本的对比度是否符合无障碍标准（WCAG），并确保在不同屏幕尺寸下的响应式行为不会导致关键信息完全不可见。记住它的 Do's and Don'ts：必须混搭衬线与等宽字体，绝对不要添加投影、渐变或圆角，保持原始、未经修饰的“粗糙感”。