UI 프롬프트 만들기
실시간 타이포그래피, 색상, 간격 및 반경 제어로 시각 방향을 구축하십시오. 정확한 UI를 복사 프롬프트 또는 다운로드 CSS 변수.
세부사항을 조정하십시오. 그대에게는
인터페이스 미리보기
퀵메뉴방 만들기
새로운 것.
손에 세라믹스 작업장. 좋은 회사, 작은 찰흙, 그리고 더 느린 토요일.
스튜디오 세션
2 시간 · 8 장소
일러스트. 당신의 빌더는 최종 인터페이스를 구현합니다.
당신의 디자인 방향
UI design direction
Typography
Use Inter. Body text: 16px with 1.5 line height. Use a clear heading hierarchy and readable line lengths.
Palette
Background: #faf8f5. Text: #292521. Accent: #c65324. Text on accent: #000000. Check contrast for all final text and interactive states.
Layout and surfaces
Use 24px as the main panel padding and section gap, with a 4px spacing base. Corner radius: 12px. Surface shadow: 0 2px 12px rgb(0 0 0 / 0.06). Keep borders subtle and reuse existing components.
Responsive behavior
Stack panels on narrow screens. Keep controls within the viewport and interactive targets at least 44px. Preserve content order and visible keyboard focus. Respect reduced motion.
Implementation
Apply this direction to the requested screen using the project's existing architecture. Include relevant loading, empty, error, and success states. Do not add unrelated features.
내보내기 텍스트는 영어로 유지되며, 입력한 내용은 그대로 보존됩니다.
가입 없음. AI 크레딧 없음. 이 도구는 브라우저에서 출력을 조립합니다.
뭔가 유용한 아이디어에서.
- 01
미리 설치를 시작하면 세부 사항을 조정할 수 있습니다.
- 02
라이브 인터페이스 미리보기에서 선택 확인.
- 03
디자인의 간단한 복사 또는 다운로드 CSS 변수.
약간의 맥락.
시각적인 취향을 실제적인 손전등으로 설정 Lovable, Bolt, v0, 또는 당신의 기호화 대리인. 미리보기 및 프롬프트 동일한 설정을 사용하므로 선택한 간격, 유형 및 색상은 일관성을 유지합니다. 이 도구는 당신의 선택에서 지시를 조립합니다; 그것은 AI를 가진 디자인을 해석하거나 생성하지 않습니다.
좋은 질문.
내가 사용할 수 있습니다 프롬프트 어떤 앱 빌더에서?
예. 산출은 표준 공용영역 재산을 설명하고 디자인을 위한 방향으로 작동합니다 Lovable, Bolt, v0, 및 코딩 조수. 당신의 빌더는 여전히 그들을 구현하는 방법을 결정합니다.
에 포함 된 것 CSS 다운로드?
작은 세트의 CSS 당신의 악센트 색깔, 배경, 원본, 글꼴, 간격, 반경 및 그림자를 위한 주문 속성. 프로젝트에서 사용하기 전에 기존의 디자인 토큰에 접근하십시오.
미리보기는 접근 가능합니까?
도구는 악센트와 그 버튼 텍스트 사이의 대조를 보여줍니다. 이 좁은 색상 체크, 완벽한 접근성 감사입니다. 키보드 및 보조 기술로 최종 인터페이스를 테스트합니다.