---
title: "Agent Skill to Y2K Design"
platform: "Promptally"
canonical_url: "https://app.promptally.dev/p/skill-y2k-design"
modality: "SKILL"
category: "Anti-AI-Slop Design Discipline"
compatible_models: [Universal / Model Agnostic]
access_tier: "Free Public Artifact (No Auth Required)"
license: "MIT"
---

# Agent Skill to Y2K Design

**Summary:** Agent Skill to Y2K Design is a verified SKILL blueprint on Promptally in Anti-AI-Slop Design Discipline optimized for leading AI models. Web and App implementation guide for Y2K Design. Trigger when user wants chrome effects, futuristic 2000s look, blob shapes, and tech optimism. Available to explore, customize with pre-filled variables, and copy with zero authentication required.

## Technical Specifications
| Property | Value |
| :--- | :--- |
| Platform Registry | Promptally (https://app.promptally.dev) |
| Modality | SKILL |
| Category | Anti-AI-Slop Design Discipline |
| Compatible Engines | Universal / Model Agnostic |
| Dynamic Variables | None (Static Blueprint) |
| Approx. Token Length | 2,620 |
| Access Tier | Free Public Artifact (No Auth Required) |
| License | MIT |

### Pre-Filled Template & Production Source

````md
---
name: y2k-design
description: Web and App implementation guide for Y2K Design. Trigger when user wants chrome effects, futuristic 2000s look, blob shapes, and tech optimism.
date_added: "2026-06-17"
risk: safe
source: self
source_type: self
---

# Y2K Design

> "The optimistic, shiny future as imagined in 1999. Chrome, blobs, and alien tech."


## When to Use
Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.

## Core Principles
1. **Metallic & Chrome Effects**: Extensive use of silver, chrome, and shiny metallic gradients.
2. **Organic, Amorphous Shapes**: "Blob" architecture, curved intersecting lines, and liquid-like forms.
3. **Tech-Optimism**: Circuit board motifs, target crosshairs, and digital grid backgrounds.

## Visual DNA
- **Colors**: Silver/chrome, bright cyan, hot pink, lime green. **Industrial Chic** mixed with neon accents works well.
- **Typography**: Extended (wide) sans-serifs, pixel fonts, or futuristic/alien display fonts (e.g., `Orbitron`, `Syncopate`).
- **Styling**: Outer glows, metallic bevels, and starry glints (sparkles).

## Web Implementation
- Rely heavily on complex linear and radial gradients to simulate shiny metal.
- **CSS Example**:
```css
body {
  background-color: #000000;
  /* Digital grid background */
  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;
  
  /* Chrome gradient effect */
  background: linear-gradient(
    to bottom, 
    #ffffff 0%, 
    #999999 45%, 
    #222222 50%, 
    #cccccc 55%, 
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Outer glow */
  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%; /* Amorphous blob shape */
  padding: 20px 40px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  box-shadow: 0 0 15px #FF00FF;
}
```

## App Implementation

### SwiftUI
```swift
struct Y2KDesignView: View {
    // Chrome Gradient
    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) {
                // Chrome Text
                Text("Y2K FUTURE")
                    .font(.custom("Syncopate-Bold", size: 48))
                    .foregroundStyle(chromeGradient)
                    // Cyan glow
                    .shadow(color: Color(hex: "00FFFF"), radius: 10, x: 0, y: 0)
                
                // Blob Button (Faked with Capsule in standard SwiftUI, requires Path for true 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())
                        // Glow
                        .shadow(color: Color(hex: "FF00FF").opacity(0.8), radius: 15, x: 0, y: 0)
                }
            }
        }
    }
}
```
- SwiftUI's `.foregroundStyle()` makes applying a complex multi-stop `LinearGradient` to text trivial, which is exactly how you build the Chrome Text effect.
- Add an un-offset `.shadow()` with a neon color to create the Y2K outer glow.

### Flutter
```dart
class Y2KDesignScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Chrome Text via 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)], // Glow
                ),
              ),
            ),
            const SizedBox(height: 40),
            
            // Neon Button
            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)),
              ),
            )
          ],
        ),
      ),
    );
  }
}
```
- You MUST use `ShaderMask` with a complex multi-stop `LinearGradient` to render the metallic chrome effect on text in Flutter.
- The `stops` property `[0.0, 0.45, 0.5, 0.55, 1.0]` is the secret to a good metal gradient: a sharp contrast right in the middle simulates the horizon reflection on a cylinder.

### React Native
```jsx
// REQUIRES: @react-native-masked-view/masked-view and 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' }}>
      
      {/* Chrome Text */}
      <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>

      {/* Neon Gradient Button */}
      <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>
  );
};
```
- In React Native, you need the community `MaskedView` to apply a gradient to text. Create the `<Text>` in the `maskElement` prop, and put the `<LinearGradient>` inside as a child.
- Pass `locations` to the gradient to create the sharp metallic reflection line.

### Jetpack Compose
```kotlin
@Composable
fun Y2KDesignScreen() {
    Box(
        modifier = Modifier.fillMaxSize().background(Color.Black),
        contentAlignment = Alignment.Center
    ) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            
            // Chrome Text
            Text(
                text = "Y2K FUTURE",
                fontSize = 48.sp,
                fontFamily = FontFamily.SansSerif, // Replace with Syncopate
                fontWeight = FontWeight.Black,
                style = TextStyle(
                    // Apply Chrome Gradient to 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) // Glow
                )
            )
            
            Spacer(Modifier.height(40.dp))
            
            // Neon Button
            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 makes gradient text incredibly easy via `TextStyle(brush = ...)`.
- Provide specific color stops (`0.45f to ...`) to the `verticalGradient` to create the hard reflection line characteristic of 2000s chrome.

## Do's and Don'ts
- **DO**: Use sparkles (✨) as decorative elements around headers and buttons.
- **DON'T**: Make it minimal. Y2K is fundamentally maximalist and flashy.

## Limitations
- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
- Ensure appropriate contrast ratios and responsive behaviors are verified separately.

````

## Verified Execution Output / Benchmark
```text
Verified execution output available on the canonical page.
```

## Related Blueprints on Promptally
- [Agent Skill to Api Design](https://app.promptally.dev/p/skill-api-design)
- [Agent Skill to Loop Design Check](https://app.promptally.dev/p/skill-loop-design-check)
- [Agent Skill to Frontend Design Direction](https://app.promptally.dev/p/skill-frontend-design-direction)
- [Agent Skill to Brand Discovery](https://app.promptally.dev/p/skill-brand-discovery)
- [Agent Skill to Design System](https://app.promptally.dev/p/skill-design-system)
- [Agent Skill to Brand Voice](https://app.promptally.dev/p/skill-brand-voice)
- [Agent Skill to Architecture Designer](https://app.promptally.dev/p/skill-architecture-designer)
- [Agent Skill to Api Designer](https://app.promptally.dev/p/skill-api-designer)