首页风格模板
StyleKit
风格库模板
  1. Home
  2. /UI Prompts
  3. /Retro & Vintage Design Prompts
首页/提示词/复古设计提示词

复古设计提示词

灵感来自 Y2K、80 年代霓虹、VHS、复古计算和怀旧美学的 AI 提示词。

retro web design promptvintage UI promptY2K design prompt80s neon design promptVHS aesthetic promptretro Tailwind design

关于此主题

复古设计从过去的时代中汲取灵感,创造怀旧而独特的界面。从 Y2K 的气泡渐变和金属文字到 80 年代 Synthwave 的霓虹网格,每个时代都有其标志性的视觉语言。这些风格在现代极简主义的海洋中脱颖而出,通过共同的文化怀旧感与受众产生连接。

提示词示例

AI 提示词示例

复制这些提示词,用你喜欢的 AI 工具生成复古设计提示词设计。

Y2K 美学页面

General
Design a Y2K-aesthetic landing page. Use bubble gradients (pink to lavender to baby blue), chrome/metallic text effects for headings, star and butterfly decorative elements, rounded bubbly shapes, and translucent panels. Font: futuristic rounded sans-serif. Include a hero with 3D-style text, floating decorative elements, and a pastel gradient background. Cards with glossy borders and subtle inner glow.

v0 Synthwave

v0
Create a synthwave-themed music app with shadcn/ui. Dark background (#0a0015) with neon accent colors: hot pink (#ff006e), electric cyan (#00f5ff), neon purple (#bf00ff). Include a retro grid perspective background, neon glow text for headings, and card components with neon border glow on hover. Use a sunset gradient (orange to pink to purple) for the hero section. Add retro-futuristic typography and scanline overlay effect.

Cursor VHS 美学

Cursor
Build a VHS-aesthetic portfolio in Next.js. Effects: CRT scanline overlay (repeating-linear-gradient), chromatic aberration on images (CSS filter with offset color channels), VHS tracking distortion on hover (CSS transform skew), noise texture overlay (SVG filter). Color palette: warm beige (#e8dcc8) background, washed-out pastels for accents. Typography: monospace for body, condensed sans-serif for headings. Include a 'PLAY/REC' badge UI element.

Claude 复古计算

Claude
Generate React components with a retro computing aesthetic inspired by classic Macintosh and early Windows. Window component with title bar (gradient), close/minimize/maximize buttons, and content area. Use bitmap-style fonts (monospace), a limited 16-color palette, pixel-perfect borders (1px solid), and dithering patterns using CSS background-image. Include: Window, MenuBar, Button (beveled 3D effect), TextField, and ScrollBar components.

70 年代放克博客

General
Design a 1970s-inspired blog homepage. Palette: burnt orange #d35400, mustard #e1ad01, avocado green #6b8e23, and cream #f5e6c8 as the page background with deep brown #3e2723 text. Typography: a chunky rounded display font (Cooper Black style) for the masthead at 64px, and a readable serif at 18px/1.7 for post excerpts. Use thick 3px brown borders, pill-shaped category tags, a repeating wavy-stripe divider (SVG) between sections, and slightly rotated polaroid-style post thumbnails with tape corners. Keep body text on cream at 7:1 contrast and reserve the loudest colors for headings and tags only.

v0 Frutiger Aero 仪表盘

v0
Create a Frutiger Aero-style personal dashboard with shadcn/ui. Background: a glossy sky gradient from #7ec8e3 to #d0f0fd with a faint grass-green bottom edge #8bc34a and floating bubble highlights (radial-gradient circles at 20% white opacity). Cards: white at 70% opacity with 20px radius, a 1px inner white highlight border, and a glossy top sheen via a linear-gradient overlay from rgba(255,255,255,0.6) to transparent at 40% height. Accent: aqua #00b4d8 for buttons with a subtle bevel. Typography: Segoe UI or Frutiger-like humanist sans, 15px body #1a3c4e. Include a weather widget, media card, and clock, all with soft drop shadows (0 8px 24px rgba(0,60,90,0.15)).

Cursor 街机 CRT 排行榜

Cursor
Build an arcade CRT-style leaderboard page in Next.js. Background pure #000000 with a scanline overlay (repeating-linear-gradient, 3px period, rgba(255,255,255,0.04)) and a vignette via radial-gradient. Text in phosphor green #33ff33 using the Press Start 2P font: title 24px with a soft text-shadow glow (0 0 8px #33ff3388), score rows 14px with 20px line spacing and dotted leader lines between rank, name, and score. Top 3 ranks get amber #ffb000. Add a blinking INSERT COIN prompt (1s step animation, disabled under prefers-reduced-motion) and a curved-screen effect using a slight border-radius and inner box-shadow. Provide a plain high-contrast fallback list for screen readers.

Claude 90 年代网页复兴

Claude
Generate a deliberately 90s-web-revival personal homepage as a React component that stays accessible. Background: a subtle tiled pattern (CSS gradient checker in #c0c0c0 and #d4d4d4). Content in a centered 760px table-like layout with beveled panels: border styles outset 2px, backgrounds #e0e0e0, headings in navy #000080 Times-style serif at 28px. Include an animated-look marquee banner implemented with CSS transform (pausable, honoring prefers-reduced-motion), a visitor counter widget with seven-segment digits, 88x31 pixel badge links in the footer, and a guestbook form with classic gray inset inputs. Keep real link contrast at #0000ee on light gray and all images with alt text.

相关风格

相关风格

探索这些风格获取现成的 tokens 和组件。

复古怀旧风

retro / visual

千禧风格

retro / visual

VHS美学

retro / visual

Frutiger Aero

retro / visual

合成波

retro / visual

街机CRT

retro / visual

像素艺术风

retro / visual

适用场景

最佳使用场景

音乐娱乐

艺术家页面、音乐播放器和活动网站,唤起特定音乐时代的感觉。

游戏界面

复古游戏启动器、像素艺术展示和街机风格 UI。

创意作品集

设计师和艺术家用怀旧美学从极简作品集中脱颖而出。

品牌活动

利用怀旧感与受众建立情感连接的营销活动。

常见问题

常见问题解答

想要完整的设计系统?

StyleKit 提供 146 种视觉风格,每种都有 design tokens、组件配方和可导出的 AI Rules。

浏览风格库更多提示词主题

StyleKit

精选网页设计风格库,帮助 AI 生成更好看的网站。

反馈建议支持维护
浏览+
风格库模板动效资源库提示词库主题合集
学习与更新+
前端基础指南配方更新日志博客
关于与政策+
关于联系与支持隐私政策服务条款支持我们退款政策

(c) 2026 StyleKit. 开源项目。

闄旾CP澶?025065501鍙?3

刊末信息/SK — 2026

基于 Editorial 风格构建

01反馈与建议告诉我们哪里还可以更好02支持维护如果 StyleKit 恰好帮到了你,欢迎扫码支持。金额随意,每一份心意我都很感谢。

StyleKit

精选网页设计风格库,帮助 AI 生成更好看的网站。

GitHub 仓库

浏览

风格库模板动效资源库提示词库主题合集

学习与动态

前端基础指南配方更新日志博客

订阅动态

新风格、模板与工具上线时,第一时间收到通知。

保持更新

订阅即表示您同意我们的 隐私政策 和 服务条款。

(c) 2026 StyleKit. 开源项目。

关于联系与支持隐私政策服务条款支持我们退款政策/陕ICP备2025065501号-3

StyleKit