复古设计提示词

灵感来自 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.

适用场景

最佳使用场景

音乐娱乐

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

游戏界面

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

创意作品集

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

品牌活动

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

常见问题

常见问题解答

什么是复古网页设计?
复古网页设计引用过去几十年(70s、80s、90s、Y2K)的视觉风格,使用时代特定的色彩、排版、纹理和布局模式。流行的子风格包括 Synthwave(80 年代霓虹)、Y2K(2000 年代初气泡美学)、VHS(模拟视频噪点)、Frutiger Aero(2000 年代光泽感)和像素艺术(8-bit/16-bit 时代)。
如何在 CSS 中创建霓虹发光效果?
用多层 text-shadow 实现霓虹文字:text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #ff00de, 0 0 82px #ff00de。元素发光用 box-shadow 扩展:box-shadow: 0 0 15px rgba(255,0,222,0.5), 0 0 30px rgba(255,0,222,0.3)。用 CSS keyframes 添加脉动动画。
复古设计还流行吗?
是的。复古美学不断循环流行,Y2K 和 Frutiger Aero 在 2024-2026 年经历了重大复兴。复古风格有效是因为它们通过怀旧感建立情感连接,并从大量干净的现代设计中脱颖而出。关键是通过现代网页标准来诠释复古元素,而非原封不动地重建旧界面。
复古网页设计应该用什么字体?
字体要对准年代。70 年代:厚重圆润的展示字体(Cooper Black;Google 替代品 Chango、Shrikhand)。80 年代 Synthwave:Monoton、Audiowide 这类金属感几何标题字体。Y2K:Orbitron、Comfortaa 等圆润科技字体。终端/街机:VT323 或 Press Start 2P。早期 GUI:Silkscreen 这类像素系统字体。关键规则:年代字体只用于标题和 Logo,正文搭配中性易读字体(16px 以上的系统无衬线或衬线)——整段使用展示体或像素体在可读性和无障碍上都不合格。
如何让复古设计满足无障碍要求?
复古配色和特效经常与 WCAG 冲突,必须刻意审计。每一组文字/背景都要过 4.5:1 检测——霓虹粉 #ff006e 配深底 #0a0015 能通过,但霓虹配霓虹会失败,发光效果应放进 text-shadow 而把填充色调亮。闪烁动画控制在每秒 3 次以下,并在 prefers-reduced-motion 下关闭扫描线、故障和跑马灯效果。像素体和展示体不进正文。色差和噪点覆层保持低不透明度(0.08 以下),确保不遮挡内容;交互控件即使在 CRT 美学里也要有可见的焦点环。

想要完整的设计系统?

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