한국어 웹앱을 위한 디자인 시스템, dsui

컴포넌트, 블록, 테마를 미리 보고 소스째 가져가요. 이제 AI가 만드는 화면도 같은 부품으로 그려요.

npx shadcn@latest add https://dsui.vercel.app/r/gen-ui.json

response.openuitext

root = Card([
  Input("이메일", "email"),
  Button("보내기", "primary")
], "가입하기")

이메일

같은 컴포넌트 정의 하나로 두 프레임워크가 모두 그려요.

dsui에는 이런 것이 있어요

한 페이지로 줄이면 이래요. 자세한 것은 항목마다 있는 상세 페이지에서 볼 수 있어요.

컴포넌트와 블록
버튼부터 차트까지 화면의 부품, 그리고 머리글과 히어로처럼 바로 쓰는 화면 단위예요. 호버, 눌림, 포커스마다 효과음이 따라와요.
토큰과 테마
색, 간격, 모서리, 그림자, 모션을 토큰으로 정했어요. 시즌 테마는 색뿐 아니라 아이콘, 소리, 글꼴, 일러스트까지 바꿔요.
소스째 설치
패키지가 아니라 shadcn 레지스트리예요. 명령 한 줄로 컴포넌트와 필요한 파일이 들어오고, 복사된 코드는 내 코드예요.
일러스트
히어로, 404, 카드 커버에 쓰는 도형 그림이에요. 테마마다 따로 그릴 수 있고, 그리지 않으면 base 그림이 테마 색으로 나와요.
AI와 MCP
llms.txt, MCP 서버, dsui 스킬을 열어 두었어요. AI 도구가 항목을 찾고 규칙대로 조합해요.
생성형 UI
OpenUI와 json-render에서 dsui 컴포넌트를 모델이 직접 쓸 수 있어요. 한 번 정의하면 두 프레임워크에서 같이 써요.

컴포넌트를 두 번 만들지 않아요. 중립 스펙 하나가 두 프레임워크의 어댑터로 바뀌어요.

한 번 정의해요
이름, 언제 쓰는지, 속성(zod), 슬롯, 이벤트를 스펙으로 적어요. 콜백과 노드 대신 직렬화되는 속성만 써요.
어댑터가 바꿔요
OpenUI는 defineComponent와 createLibrary로, json-render는 defineCatalog와 defineRegistry로 바뀌고 시스템 프롬프트도 나와요.
모델이 화면을 만들어요
모델이 쓴 OpenUI Lang이나 JSON 스펙이 dsui 컴포넌트로 그려져요. 문구는 해요체 규칙을 따라요.

지금은 Button, Input, Select, Switch, Alert, MetricCard, Card 같은 열두 개로 먼저 열었어요. 나머지는 차례로 늘려 가요.

항목 하나를 설치해 보는 데 1분이면 돼요.

가입 없이 쓸 수 있어요