이 상황에 대한 바닥 시트 (Bottom Sheet)를 디자인하세요: 전화 지도 필터는 드래그 가능한 시트에서 열립니다. 살짝 보여질 수도 있고, 완전히 열리거나 닫힐 수도 있습니다. 절제된 시각적 방향으로 글래스모피즘 (Glassmorphism)을 사용하고 피드백에는 스프링 애니메이션 (Spring Animation)을 사용하세요. 의미 있는 HTML, 키보드 접근성, 시각적 포커스, 모션 감소 지원 및 프로젝트의 기존 규칙을 유지하세요.
UI 용어를 명확한 빌드 요청으로 전환하세요.
UI가 하는 일, 모양, 움직임을 선택하세요. 그런 다음 개발자나 AI 코딩 도우미를 위해 명확한 요청을 복사하세요.
Start with your own situation
Open request builder Build a request you can hand off.
Choose what the UI does, how it looks, and how it moves. Then copy a clear request that includes states, accessibility needs, and checks for done.
이 상황에 대한 명령 팔레트 (Command Palette)를 디자인하세요: Command-K를 누르고, “팀원 초대” 입력 후 목록에서 해당 작업 실행. 절제된 시각적 방향으로 미니멀리즘 (Minimalism)을 사용하고 피드백에는 축소된 움직임 (Reduced Motion)을 사용하세요. 의미 있는 HTML, 키보드 접근성, 시각적 포커스, 모션 감소 지원 및 프로젝트의 기존 규칙을 유지하세요.
이 상황에 대한 양식 검증 (Form Validation)를 디자인하세요: 비밀번호가 규칙을 위반하면, 페이지는 필드 옆에 이를 설명합니다. 화면 읽기 도구는 해당 메시지를 필드와 연결할 수 있습니다. 절제된 시각적 방향으로 네오브루탈리즘 (Neobrutalism)을 사용하고 피드백에는 마이크로인터랙션 (Microinteraction)을 사용하세요. 의미 있는 HTML, 키보드 접근성, 시각적 포커스, 모션 감소 지원 및 프로젝트의 기존 규칙을 유지하세요.
이 상황에 대한 검사자 (Inspector)를 디자인하세요: 차트를 선택하면 축, 색상 및 레이블에 대한 검사기가 열립니다. 캔버스는 계속 표시됩니다. 절제된 시각적 방향으로 리퀴드 글래스 (Liquid Glass)을 사용하고 피드백에는 전환 (Transition)을 사용하세요. 의미 있는 HTML, 키보드 접근성, 시각적 포커스, 모션 감소 지원 및 프로젝트의 기존 규칙을 유지하세요.
이 상황에 대한 로그인 폼 (Sign-In Form)를 디자인하세요: 돌아온 고객은 이메일과 비밀번호로 로그인해요. 비밀번호를 보이거나 비밀번호 관리자에서 붙여넣거나, 자리를 잃지 않고 계정을 복구할 수 있어요. 절제된 시각적 방향으로 스위스 스타일 (Swiss Style)을 사용하고 피드백에는 입력, 종료 및 크로스페이드 (Enter, Exit & Crossfade)을 사용하세요. 의미 있는 HTML, 키보드 접근성, 시각적 포커스, 모션 감소 지원 및 프로젝트의 기존 규칙을 유지하세요.
이 상황에 대한 비어 있음, 오류 및 성공 상태 — 학습 번들 (Empty, Error & Success State — Learning Bundle)를 디자인하세요: 새 프로젝트 목록은 첫 항목을 어떻게 만드는지 알려줘요. 인터넷이 끊기면 다시 시도 버튼이 나타나고 필터는 그대로 저장돼요. 절제된 시각적 방향으로 클레이모피즘 (Claymorphism)을 사용하고 피드백에는 이징 (Easing)을 사용하세요. 의미 있는 HTML, 키보드 접근성, 시각적 포커스, 모션 감소 지원 및 프로젝트의 기존 규칙을 유지하세요.