21st.dev Magic

디자인

OpenClaw의 Neotask을 통해 세련된 UI 컴포넌트를 즉시 생성하세요

수행할 수 있는 작업

Neotask은 OpenClaw를 통해 21st.dev Magic에 연결되어 대화를 통해 방대한 프로덕션 수준의 UI 컴포넌트 라이브러리와 AI 기반 컴포넌트 생성에 즉시 접근할 수 있습니다.

컴포넌트 생성

  • 설명으로 생성 — 필요한 UI를 일반 영어로 설명하면 Tailwind CSS, shadcn/ui 또는 선호하는 라이브러리를 사용한 완성된 스타일의 React 컴포넌트를 받습니다
  • 피드백으로 반복 — "더 컴팩트하게 만들어 주세요" 또는 "로딩 상태를 추가해 주세요"라고 말하면 Neotask이 피드백을 즉시 적용하여 새로운 코드 출력을 제공합니다
  • 다중 변형 생성 — 여러 디자인 변형을 한 번에 요청하여 프로젝트에 가장 적합한 것을 선택할 수 있습니다
  • 접근성 기본 내장 — 생성된 컴포넌트는 처음부터 ARIA 모범 사례와 키보드 탐색 패턴을 따릅니다

    • 컴포넌트 라이브러리 검색

  • 패턴으로 검색 — 사용 사례에 맞는 컴포넌트를 찾으세요: "월간/연간 요금제 토글이 있는 가격표" 또는 "읽지 않은 수가 표시되는 알림 서랍"
  • 카테고리별 탐색 — 유형별로 컴포넌트를 탐색하세요: 내비게이션 바, 모달, 폼, 카드, 데이터 테이블, 대시보드 등
  • 기술 스택별 필터 — 기술 스택(React, Vue, Tailwind, shadcn, Radix UI)에 맞는 컴포넌트를 검색합니다
  • 바로 복사 가능한 스니펫 — 라이브러리의 모든 컴포넌트는 코드베이스에서 즉시 사용할 수 있도록 포맷되어 있습니다

    • 디자인 시스템 통합

  • 기존 스타일에 맞추기 — 색상 토큰이나 Tailwind 설정을 제공하면 Neotask이 디자인 시스템에 맞는 컴포넌트를 생성합니다
  • 컴포넌트 구성 — 여러 컴포넌트 스니펫을 조합하여 전체 페이지 레이아웃을 요청합니다
  • 다크 모드 변형 — 일관된 토큰 사용으로 모든 컴포넌트의 다크 모드 버전을 요청합니다

    • 이렇게 질문해 보세요

  • "Tailwind를 사용하여 인기 배지, 기능 목록 및 CTA 버튼이 있는 가격 카드 컴포넌트를 생성해 주세요"
  • "왼쪽에 로고, 중앙에 내비게이션 링크, 오른쪽에 로그인 버튼이 있는 반응형 내비게이션 바가 필요합니다"
  • "21st.dev에서 정렬, 필터링 및 페이지네이션이 있는 데이터 테이블 컴포넌트를 검색해 주세요"
  • "큰 제목, 부제목, 두 개의 CTA 버튼, 오른쪽에 목업 이미지가 있는 히어로 섹션을 만들어 주세요"
  • "컴포넌트를 더 컴팩트하게 만들고 스켈레톤 로딩 상태를 추가해 주세요"
  • "오른쪽에서 슬라이드 형태로 열리는 모달 다이얼로그 컴포넌트를 찾아 주세요"
  • "4단계와 진행 표시기가 있는 온보딩 스테퍼를 생성해 주세요"
  • "오른쪽 하단에 알림이 쌓이는 토스트 알림 시스템이 필요합니다"

    • 전문가 팁

  • 디자인 의도를 구체적으로 명시하세요 — "미묘한 테두리가 있는 엔터프라이즈 SaaS 스타일" 또는 "둥근 모서리와 부드러운 그림자가 있는 소비자 앱 스타일"은 매우 다른 결과를 만들어 냅니다
  • Neotask에 기본/보조 색상 값을 제공하여 찾은 21st.dev 컴포넌트를 기존 색상 팔레트에 맞게 조정하도록 요청하세요
  • 완전한 디자인 시스템에 착수하기 전에 컴포넌트 생성을 디자인 프로세스 초기에 활용하여 레이아웃을 빠르게 프로토타이핑하세요
  • OpenClaw를 통해 코드 편집기 워크플로와 결합하세요 — 컴포넌트를 생성하고, 대화형으로 다듬은 후, 최종 파일을 프로젝트에 직접 출력합니다

    • Works Well With