# Y2k Design

> Y2K Design 的 Web 与 App 实现指南。当用户希望铬合金效果、2000 年代未来感、blob 形状和技术乐观主义时触发。

- Skill: `kscz0000/y2k-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/y2k-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/y2k-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/y2k-design

---


# Y2K Design

> "1999 年想象中的乐观、闪亮的未来。铬合金、blob 和外星科技。"


## 使用时机

当用户的请求匹配上述美学风格时使用此子风格。这是 `design-it` 技能的子参考，不应被直接触发。

## 核心原则
1. **金属与铬合金效果**：大量使用银色、铬合金和闪亮的金属渐变。
2. **有机、非定形形状**："Blob"架构、弯曲的交叉线条和液态般的形式。
3. **技术乐观主义**：电路板图案、目标十字准线和数字网格背景。

## 视觉 DNA
- **颜色**：银/铬合金、亮青、热粉、酸橙绿。**Industrial Chic** 混搭霓虹强调色效果很好。
- **排版**：扩展（宽）无衬线字体、像素字体或未来/外星显示字体（如 `Orbitron`、`Syncopate`）。
- **样式**：外发光、金属倒角和星形闪烁（sparkle ✨）。

## Web 实现
- 严重依赖复杂的线性和径向渐变来模拟闪亮的金属。
- **CSS 示例**：
```css
body {
  background-color: #000000;
  /* 数字网格背景 */
  background-image: linear-gradient(#333 1px, transparent 1px),
                    linear-gradient(90deg, #333 1px, transparent 1px);
  background-size: 20px 20px;
  color: #ffffff;
  font-family: 'Syncopate', sans-serif;
}

.y2k-chrome-text {
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  
  /* 铬合金渐变效果 */
  background: linear-gradient(
    to bottom, 
    #ffffff 0%, 
    #999999 45%, 
    #222222 50%, 
    #cccccc 55%, 
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* 外发光 */
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}

.y2k-blob-btn {
  background: linear-gradient(135deg, #00FFFF, #FF00FF);
  border: none;
  border-radius: 50% 20% / 10% 40%; /* 非定形 blob 形状 */
  padding: 20px 40px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  box-shadow: 0 0 15px #FF00FF;
}
```

## App 实现

### SwiftUI
```swift
struct Y2KDesignView: View {
    // 铬合金渐变
    let chromeGradient = LinearGradient(
        colors: [Color.white, Color(white: 0.6), Color(white: 0.2), Color(white: 0.8), Color.white],
        startPoint: .top,
        endPoint: .bottom
    )
    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            
            VStack(spacing: 40) {
                // 铬合金文字
                Text("Y2K FUTURE")
                    .font(.custom("Syncopate-Bold", size: 48))
                    .foregroundStyle(chromeGradient)
                    // 青色光晕
                    .shadow(color: Color(hex: "00FFFF"), radius: 10, x: 0, y: 0)
                
                // Blob 按钮（在标准 SwiftUI 中用 Capsule 伪造 blob，需要 Path 绘制真正的 blob）
                Button(action: {}) {
                    Text("ENTER CORE")
                        .font(.custom("Orbitron-Bold", size: 20))
                        .foregroundColor(.white)
                        .padding(.vertical, 20)
                        .padding(.horizontal, 40)
                        .background(
                            LinearGradient(colors: [Color(hex: "00FFFF"), Color(hex: "FF00FF")], startPoint: .topLeading, endPoint: .bottomTrailing)
                        )
                        .clipShape(Capsule())
                        // 光晕
                        .shadow(color: Color(hex: "FF00FF").opacity(0.8), radius: 15, x: 0, y: 0)
                }
            }
        }
    }
}
```
- SwiftUI 的 `.foregroundStyle()` 让将复杂多停顿的 `LinearGradient` 应用于文本变得轻而易举，这正是构建铬合金文字效果的方式。
- 添加一个无偏移的 `.shadow()` 使用霓虹色，创建 Y2K 外发光效果。

### Flutter
```dart
class Y2KDesignScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 通过 ShaderMask 实现铬合金文字
            ShaderMask(
              shaderCallback: (bounds) => const LinearGradient(
                begin: Alignment.topCenter, end: Alignment.bottomCenter,
                colors: [Colors.white, Color(0xFF999999), Color(0xFF222222), Color(0xFFCCCCCC), Colors.white],
                stops: [0.0, 0.45, 0.5, 0.55, 1.0],
              ).createShader(bounds),
              child: const Text(
                'Y2K FUTURE',
                style: TextStyle(
                  fontFamily: 'Syncopate', fontSize: 48, fontWeight: FontWeight.w900, color: Colors.white,
                  shadows: [Shadow(color: Color(0xFF00FFFF), blurRadius: 20)], // 光晕
                ),
              ),
            ),
            const SizedBox(height: 40),
            
            // 霓虹按钮
            Container(
              decoration: BoxDecoration(
                gradient: const LinearGradient(colors: [Color(0xFF00FFFF), Color(0xFFFF00FF)]),
                borderRadius: BorderRadius.circular(50),
                boxShadow: const [BoxShadow(color: Color(0xFFFF00FF), blurRadius: 20)],
              ),
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.transparent, shadowColor: Colors.transparent,
                  padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
                ),
                child: const Text('ENTER CORE', style: TextStyle(fontFamily: 'Orbitron', fontSize: 20, color: Colors.white)),
              ),
            )
          ],
        ),
      ),
    );
  }
}
```
- 你**必须**在 Flutter 中使用 `ShaderMask` 配合复杂多停顿的 `LinearGradient` 来渲染文字的金属铬合金效果。
- `stops` 属性 `[0.0, 0.45, 0.5, 0.55, 1.0]` 是出色金属渐变的秘密：在正中间的强烈对比模拟圆柱体表面的地平线反射。

### React Native
```jsx
// 需要 @react-native-masked-view/masked-view 和 react-native-linear-gradient
import MaskedView from '@react-native-masked-view/masked-view';
import LinearGradient from 'react-native-linear-gradient';

const Y2KDesignScreen = () => {
  return (
    <View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
      
      {/* 铬合金文字 */}
      <View style={{ height: 60, width: '100%', marginBottom: 40, shadowColor: '#00FFFF', shadowOffset: {width: 0, height: 0}, shadowOpacity: 1, shadowRadius: 10 }}>
        <MaskedView
          style={{ flex: 1 }}
          maskElement={<Text style={{ fontFamily: 'Syncopate-Bold', fontSize: 48, color: '#FFF', textAlign: 'center' }}>Y2K FUTURE</Text>}
        >
          <LinearGradient
            colors={['#FFFFFF', '#999999', '#222222', '#CCCCCC', '#FFFFFF']}
            locations={[0, 0.45, 0.5, 0.55, 1]}
            style={{ flex: 1 }}
          />
        </MaskedView>
      </View>

      {/* 霓虹渐变按钮 */}
      <View style={{ shadowColor: '#FF00FF', shadowOffset: {width: 0, height: 0}, shadowOpacity: 1, shadowRadius: 15 }}>
        <LinearGradient
          colors={['#00FFFF', '#FF00FF']} start={{x: 0, y: 0}} end={{x: 1, y: 1}}
          style={{ borderRadius: 50, paddingHorizontal: 40, paddingVertical: 20 }}
        >
          <Text style={{ fontFamily: 'Orbitron-Bold', fontSize: 20, color: '#FFF' }}>ENTER CORE</Text>
        </LinearGradient>
      </View>

    </View>
  );
};
```
- 在 React Native 中，你需要社区的 `MaskedView` 将渐变应用于文字。在 `maskElement` prop 中创建 `<Text>`，并将 `<LinearGradient>` 作为子项放入。
- 传递 `locations` 给渐变以创建锋利的金属反射线。

### Jetpack Compose
```kotlin
@Composable
fun Y2KDesignScreen() {
    Box(
        modifier = Modifier.fillMaxSize().background(Color.Black),
        contentAlignment = Alignment.Center
    ) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            
            // 铬合金文字
            Text(
                text = "Y2K FUTURE",
                fontSize = 48.sp,
                fontFamily = FontFamily.SansSerif, // 替换为 Syncopate
                fontWeight = FontWeight.Black,
                style = TextStyle(
                    // 将铬合金渐变应用于 Text
                    brush = Brush.verticalGradient(
                        0.0f to Color.White,
                        0.45f to Color(0xFF999999),
                        0.5f to Color(0xFF222222),
                        0.55f to Color(0xFFCCCCCC),
                        1.0f to Color.White
                    ),
                    shadow = Shadow(color = Color(0xFF00FFFF), blurRadius = 20f) // 光晕
                )
            )
            
            Spacer(Modifier.height(40.dp))
            
            // 霓虹按钮
            Box(
                modifier = Modifier
                    .shadow(20.dp, CircleShape, ambientColor = Color(0xFFFF00FF), spotColor = Color(0xFFFF00FF))
                    .background(Brush.linearGradient(listOf(Color(0xFF00FFFF), Color(0xFFFF00FF))), CircleShape)
                    .clickable { }
                    .padding(horizontal = 40.dp, vertical = 20.dp)
            ) {
                Text("ENTER CORE", color = Color.White, fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Bold, fontSize = 20.sp)
            }
        }
    }
}
```
- Jetpack Compose 通过 `TextStyle(brush = ...)` 让渐变文字变得极其简单。
- 向 `verticalGradient` 提供特定颜色停顿（`0.45f to ...`）来创建 2000 年代铬合金特征的硬反射线。

## 推荐与避免
- **推荐**：在标题和按钮周围使用 ✨ 装饰元素。
- **避免**：做成极简。Y2K 本质上是最大化主义和浮夸的。

## 限制
- 这是一个样式参考，不能替代特定环境的验证、可访问性测试或专家评审。
- 适当的对比度和响应式行为需要单独验证。