Interface Lab

Generated Interfacev1.0 已发布

221.4K

Generated Interface Design SystemGenerated Interface 建立了一套Glass、Grid 的电商首屏系统。可复用层是字体、色彩、间距、圆角、表面、组件和基础动效；特殊 Skill 单独映射。

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#1A1A1A

6% usage signal

Secondary#FFFFFF

89% usage signal

Tertiary#0C0C0C

6% usage signal

Neutral#3B82F6

6% usage signal

Layout

LayoutGridWidthFull BleedGridStrongFramingGlass

导航与入口主叙事区视觉场与背景层内容/数据表面行动路径

Spacing

16px8pxTitle block

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

8px16px24px32px48px64px

Icons

LinearPreserve the specified radii, aspect ratios, buttons, icon strokes, and responsive sizing.

Elevation & Depth

Follow the specified overlays, cards, shadows, blur, opacity, z-index, and depth layering.

Blur / backdrop filterBlur / backdrop filter / Reusable shadows

Surface sampleGlass

SurfaceGlassBorder1px solid currentColor / low opacityShadow0 25px 50px rgba(0,0,0,.35)Blur12px

Shapes

Preserve the specified radii, aspect ratios, buttons, icon strokes, and responsive sizing.

9999pxradius-1

Card surfaceInput fieldStatus pill

Do's and Don'ts

Use these constraints as design lint rules for future generations.

Dokeep the prompt as authoritative. Do not: replace exact URLs, colors, copy, or timing with placeholders.

Don't