Cyberpunk aesthetics. Using rough glitch animations, neon color contrasts, and terminal-based structure to create a rebellious and technical image.
사이버펑크 미학. 거친 글리치 애니메이션, 네온 컬러 대비, 그리고 터미널 기반의 뼈대를 활용하여 반항적이고 기술적인 이미지를 부여합니다.
サイバーパンク美学。荒いグリッチアニメーション、ネオンカラーのコントラスト、ターミナルベースの骨格を活用して反抗的で技術的なイメージを付与します。
UI paneling structure using sharp rectangular shapes and corner accent border lines.
날카로운 사각형 구조, 모서리 악센트 보더 라인을 사용한 UI 패널링 구조.
鋭い四角形構造、コーナーアクセントボーダーラインを使用したUIパネリング構造。
Reproduce the mood of a code editor or hacker terminal with monospace fonts and bright neon-colored text.
모노스페이스 폰트와 밝은 네온 컬러 텍스트로 코드 편집기나 해커 터미널의 무드 재현.
モノスペースフォントと明るいネオンカラーテキストでコードエディタやハッカーターミナルのムードを再現。
Generate a dark and rebellious web app structure with a raw, glitchy cyberpunk aesthetic. [Style Conditions] 1. Background: Fine cyan grid lines at 30px intervals on #09090b (rgba 0.05 opacity). 2. Structure: Full block-style panels, corner accents (::before with top-left 3px border), alternating cyan/magenta borders. 3. Colors: Neon yellow (#fde047), neon cyan (#22d3ee), neon magenta (#d946ef), body text #e2e8f0. 4. Typography: English titles in Syncopate (wide uppercase), body/data in Share Tech Mono. 5. Glitch: RGB split effect on title via text-shadow (2px yellow + -2px cyan), subtle shake animation on 5s cycle. 6. Buttons: Neon yellow 2px border, hover fills background + box-shadow glow (0 0 20px rgba). [Responsive] - Mobile: 2-column panels to single column stack, reduce title size - Desktop: max-width 1000px, 2-column panel grid [Restrictions] - No soft gradients or pastel tones - No rounded corners - No classic/minimal typography [Output] 1) Color tokens (3 neon colors/background/text) and panel rules 2) Hero / Data Panels (2-column) / CTA structure 3) HTML/CSS code including glitch animations
어둡고 반항적인 분위기에 거칠고 글리치 효과가 있는 사이버펑크 미학의 웹앱 구조를 생성해줘. [스타일 조건] 1. 배경: #09090b 위에 30px 간격의 미세한 사이언 그리드 라인(rgba 0.05 투명도). 2. 구조: 완전한 블록형 패널, 모서리 악센트(::before로 상단-좌측 3px 보더), 사이언/마젠타 보더 교차. 3. 컬러: 네온 옐로(#fde047), 네온 사이언(#22d3ee), 네온 마젠타(#d946ef), 본문은 #e2e8f0. 4. 타이포: 영문 타이틀은 Syncopate(와이드 uppercase), 본문/데이터는 Share Tech Mono. 5. 글리치: 타이틀에 text-shadow로 RGB 분리 효과(2px 옐로 + -2px 사이언), 5s 주기 미세 쉐이크 애니메이션. 6. 버튼: 네온 옐로 2px 보더, hover 시 배경 채움 + box-shadow 글로우(0 0 20px rgba). [반응형] - 모바일: 패널 2열 → 1열 스택, 타이틀 크기 축소 - 데스크톱: max-width 1000px, 패널 2열 그리드 [금지사항] - 부드러운 그라데이션이나 파스텔 톤 사용 금지 - 둥근 코너 사용 금지 - 고전적/미니멀 타이포 사용 금지 [출력] 1) 컬러 토큰(네온 3색/배경/텍스트)과 패널 규칙 2) Hero / Data Panels(2열) / CTA 구조 3) 글리치 애니메이션 포함 HTML/CSS 코드
暗く反抗的な雰囲気で、荒々しくグリッチ効果のあるサイバーパンク美学のウェブアプリ構造を生成してください。 [スタイル条件] 1. 背景: #09090bの上に30px間隔の微細なシアングリッドライン(rgba 0.05透明度)。 2. 構造: 完全なブロック型パネル、コーナーアクセント(::beforeで上部-左側3pxボーダー)、シアン/マゼンタボーダー交差。 3. カラー: ネオンイエロー(#fde047)、ネオンシアン(#22d3ee)、ネオンマゼンタ(#d946ef)、本文は#e2e8f0。 4. タイポグラフィ: 英文タイトルはSyncopate(ワイドuppercase)、本文/データはShare Tech Mono。 5. グリッチ: タイトルにtext-shadowでRGB分離効果(2pxイエロー + -2pxシアン)、5s周期の微細シェイクアニメーション。 6. ボタン: ネオンイエロー2pxボーダー、hover時背景塗りつぶし + box-shadowグロウ(0 0 20px rgba)。 [レスポンシブ] - モバイル: パネル2列 → 1列スタック、タイトルサイズ縮小 - デスクトップ: max-width 1000px、パネル2列グリッド [禁止事項] - 柔らかいグラデーションやパステルトーンの使用禁止 - 角丸の使用禁止 - クラシック/ミニマルタイポグラフィの使用禁止 [出力] 1) カラートークン(ネオン3色/背景/テキスト)とパネルルール 2) Hero / Data Panels(2列) / CTA構造 3) グリッチアニメーションを含むHTML/CSSコード