Pencil.dev 프로페셔널 프론트엔드 디자인 프롬프트 100선

01

랜딩 페이지 히어로 섹션

02

반응형 네비게이션 바

03

푸터 컴포넌트

04

모바일 햄버거 메뉴

05

카드 컴포넌트 그리드

06

버튼 시스템

07

폼 입력 필드 세트

08

모달/다이얼로그 컴포넌트

09

탭 네비게이션

10

브레드크럼 네비게이션

11

페이지네이션

12

검색 바 + 필터 UI

13

드롭다운 메뉴

14

토스트/알림 메시지

15

프로그레스 인디케이터

16

툴팁 컴포넌트

17

아바타 컴포넌트

18

태그/뱃지 시스템

19

별점/평점 컴포넌트

20

토글 스위치

21

SaaS 랜딩 페이지

22

블로그 목록 페이지

23

블로그 상세 페이지

24

포트폴리오 갤러리 페이지

25

가격 정책 페이지

26

About/팀 소개 페이지

27

연락처 페이지

28

404 에러 페이지

29

로그인/회원가입 페이지

30

대시보드 메인 화면

31

설정 페이지

32

프로필 편집 페이지

33

검색 결과 페이지

34

FAQ 페이지

35

타임라인/연혁 페이지

36

KPI 카드 그리드

37

차트 위젯 시스템

38

데이터 테이블

39

사이드바 네비게이션

40

알림 센터 드롭다운

41

활동 피드

42

캘린더 뷰

43

칸반 보드

44

파일 매니저

45

실시간 모니터링 대시보드

46

멀티 탭 워크스페이스

47

드래그 앤 드롭 위젯 그리드

48

데이터 필터 패널

49

비교 뷰

50

인사이트/요약 카드 섹션

51

iOS 탭 바 네비게이션

52

Android Material 바텀 시트

53

스와이프 카드 인터페이스

54

온보딩 스크린 시퀀스

55

모바일 채팅 인터페이스

56

상품 상세 페이지 (모바일)

57

모바일 결제 플로우

58

모바일 지도 인터페이스

59

소셜 피드 인터페이스

60

플로팅 액션 버튼

61

Pull-to-Refresh 인디케이터

62

제스처 힌트 오버레이

63

모바일 폼 레이아웃

64

앱 스플래시 스크린

65

권한 요청 다이얼로그

66

상품 카드 그리드

67

상품 상세 페이지 (웹)

68

장바구니 사이드 패널

69

체크아웃 단계 UI

70

주소 폼

71

결제 수단 선택 UI

72

주문 완료 페이지

73

위시리스트 페이지

74

프로모션/쿠폰 코드 UI

75

리뷰 작성 폼

76

사용자 가입 플로우

77

결제 프로세스 플로우

78

에러 처리 분기

79

페이지 네비게이션 맵

80

조건부 UI 표시 로직

81

드래그 앤 드롭 상호작용

82

무한 스크롤 시퀀스

83

폼 유효성 검사 피드백 흐름

84

다크모드 전환 상태

85

애니메이션 트랜지션 타이밍

86

디자인 시스템 컬러 팔레트

87

타이포그래피 스케일

88

스페이싱/그리드 시스템

89

아이콘 시스템

90

버튼 Variants 매트릭스

91

입력 필드 상태 가이드

92

그림자/엘리베이션 스케일

93

반응형 브레이크포인트 시스템

94

컴포넌트 조합 예시

95

접근성 색상 조합 테스트

96

디자인 Git 워크플로우

97

Before/After 비교 캔버스

98

디자인-개발 핸드오프 문서

99

팀 피드백 주석 시스템

100

A/B 테스트 디자인 버전 관리