Full Promptv1.0 已发布
0
Full Prompt Design System本设计系统专为旅游网站定制,以深色背景为基础,通过柔和的色彩、细腻的阴影和渐进模糊,构建出层次丰富、视觉舒适的界面。图像优先的网格布局让目的地照片成为主角,GSAP动效增添流畅的交互感,整体传递出值得信赖、现代简洁且鼓舞人心的品牌调性。
Typography
Heading systemui-sans-serif / 48px / 600 / - / -Body systemui-sans-serif / 14px / 400 / - / -ui-sans-serif
LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09
Colors
Primary#0B1A2A

28% usage signal

Secondary#5EEAD4

29% usage signal

Tertiary#8B5CF6

6% usage signal

Neutral#E2E8F0

39% usage signal

linear-gradient(to bottom, var(--tw-gradient-stops))linear-gradient(to bottom right, var(--tw-gradient-stops))linear-gradient(to right, var(--tw-gradient-stops))linear-gradient(to top, var(--tw-gradient-stops))
Layout
LayoutGridWidthFull BleedGridStrongFramingGlass
导航与入口主叙事区视觉场与背景层内容/数据表面行动路径
Spacing
12px10pxTitle block

Description copy reflects measured rhythm, icon offset, and CTA spacing.

10px12px16px20px24px40px50px60px80px100px
Icons
LinearborderRadius: 12px 用于卡片和按钮,8px 用于输入框和小型组件。 rationale: 圆角半径较大,传递友好、现代的感觉,与旅行主题的轻松氛围相符,同时减少尖锐边角带来的紧张感。
Elevation & Depth

shadows: 1: 0 2px 8px rgba(0,0,0,0.3): 轻微悬浮的卡片,如目的地卡片 2: 0 4px 16px rgba(0,0,0,0.4): 弹窗、下拉菜单 3: 0 8px 32px rgba(0,0,0,0.5): 模态框、重要提示 rationale: 精致阴影在深色背景下营造出清晰的层次感,模拟真实世界的光影,使界面元素具有浮起的效果,增强可点击性和空间感。

Blur / backdrop filterBlur / backdrop filter / Reusable shadows / Gradient surfaces
Surface sampleGlass
SurfaceGlassBorder1px solid currentColor / low opacityShadow0 25px 50px rgba(0,0,0,.35)Blur12px
Shapes

borderRadius: 12px 用于卡片和按钮,8px 用于输入框和小型组件。 rationale: 圆角半径较大,传递友好、现代的感觉,与旅行主题的轻松氛围相符,同时减少尖锐边角带来的紧张感。

4pxradius-19999pxradius-2
Card surfaceInput fieldStatus pill
Do's and Don'ts

Use these constraints as design lint rules for future generations.

Dodos: 使用图像优先的网格展示目的地,确保图片高质量且色彩丰富。保持充足的留白,避免信息过载。在交互元素上使用GSAP微动效,如悬停、点击反馈。利用渐进模糊突出前景内容,如模态框打开时。
Don't