큐레이션 · 오픈 · 무료

Webstudio

속도와 동적 렌더링에 중점을 둔 매끄러운 다크 테마 개발자 도구 플랫폼.

designnocode
Webstudio 스크린샷
↓ 디자인 시스템 다운로드 (44 MB)OpenDesign 에서 열기

원본 사이트: https://webstudio.is

📦 팩 내용 보기 →

01

디자인 DNA

웹 개발노코드성능호스팅빌더

개발자 중심의 현대적인 IDE 인터페이스

02

컬러

linear-gradient(135deg, #92FDDC 0%, #7D7FFB 31.94%, #ED72FE 64.24%, #FDD791 100%)Accent
#E6E7E9Ink
#D0D3D4Ink soft
#11181CBG
#1A1D1EBG soft
rgba(255,255,255,0.05)BG quiet
#A6A9ABMuted
rgba(208,211,212,0.19)Line

미세한 테두리가 있는 어두운 배경 위의 고대비 잉크

03

타이포그래피

humanist-sans · monospace

본문 텍스트에 400 굵기 사용 · 강조 및 UI 요소에 600 굵기 사용 · 큰 디스플레이 텍스트에 좁은 자간 (-1.5px) 적용

04

여백

4px
9px
18px
27px
36px
72px
144px

수직 리듬 배수를 적용한 4.5px 기본 단위

05

표면 (라운드 / 그림자 / 경계선)

sm · 4px
md · 9px
lg · 18px
pill · 100000px

1px solid rgba(208,211,212,0.19)

0 2px 3px rgba(0,0,0,0.13) · 0 0 32px rgba(74,78,250,0.5)

06

레이아웃

1200container
12columns
27pxgutter
768 / 1024breakpoints

수직 패딩을 넉넉히 둔 중앙 정렬 콘텐츠

07

모션과 인터랙션

150msmicro
250mssmall
1500msmedium
cubic-bezier(0.33, 1, 0.68, 1)easing

호버 시 부드러운 색상 및 스케일 전환 · 연속 동작을 위한 선형 슬라이드 애니메이션 · 장난스러운 상호작용을 위한 스프링 같은 바운스

약간 확대되고 부드러운 전환으로 색상 변경 · 미세한 축소 효과

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Webstudio — 桌面首屏（hero）
桌面首屏（hero）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webstudio — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

다크 테마를 적용한 개발자 중심 웹 애플리케이션 빌더 플랫폼. 주 배경은 깊은 차콜(#11181C)이며 밝은 다크 표면(#1A1D1E)을 사용합니다. 텍스트는 어두운 배경 위의 밝은 회색(#E6E7E9)입니다. 액센트는 청록색에서 보라색, 분홍색, 금색으로 이어지는 선명한 다색 그래디언트입니다. 타이포그래피는 휴머니스트산세리프인 Manrope를 사용하며 헤드라인에 좁은 자간을 적용합니다. 주요 요소에는 둥근 버튼(100px radius), 미세한 테두리(rgba(208,211,212,0.19)), 카드 기반 레이아웃이 포함됩니다. 중요 금지 사항: 라이트 모드 사용 금지, 세리프 폰트 사용 금지, 날카로운 모서리 사용 금지, 단색 액센트 색상 사용 금지, 무거운 섀도우 사용 금지, 본문 텍스트에 전부 대문자 사용 금지. 성능 메시징과 개발자 경험에 초점을 맞추세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

en · zh-CN · zh-TW · ja · ko