시작하기

RefineUI는 Pelagornis 제품을 위한 통합 디자인 시스템입니다. 파운데이션 변수는 @refineui/tokens가 되고, UI는 @refineui/react입니다. 디자인하는 Web Kit이 그대로 배포하는 React입니다.

아키텍처

• 파운데이션 — 비주얼 언어, 디자인 토큰, 레이아웃
• 컴포넌트 — Actions, Forms, Navigation, Feedback, Overlays, Data Display, Content, Layout
• 개발 — 제품 코드에서의 설치, 테마, 모션
• AI & 도구 — DESIGN.md, llms.txt, Skill, Doctor, MCP

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens @refineui/web-icons

스타일시트

앱 루트에서 토큰 CSS와 컴포넌트 인터랙션 스타일을 한 번 로드하세요.

@import "@refineui/tokens/tailwind.css";
@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";
@import "@refineui/react/refineui.css";

또는 JS에서:

import "@refineui/react/refineui.css";

예제

import { Button, Input, Card } from "@refineui/react";
import "@refineui/react/refineui.css";

export function Example() {
  return (
    <Card>
      <Input placeholder="Email" />
      <Button variant="primary">Continue</Button>
    </Card>
  );
}

다음 단계

• 파운데이션 — 토큰과 레이아웃
• 컴포넌트 — 인터랙티브 UI 프리미티브
• 개발 / 설치 — 자세한 설정 노트
• DESIGN.md — 에이전트용 디자인 아이덴티티
• 아이코노그래피 — 시스템 아이콘 (별도 사이트 / 저장소)