Get StartedGet Started
Horon 디자인 시스템은 Horon 제품의 디자인과 코드가 같은 값을 바라보게 만드는 공통 언어입니다.Horon Design System is the shared language that keeps design and code for Horon products on the same values.
Horon 디자인 시스템이란?What is the Horon Design System?
색, 글자, 간격 같은 값부터 버튼과 패널 같은 컴포넌트까지 하나의 체계로 정리했습니다. 값은 Figma Horon 파일에서 읽어 @horon-ai/tokens에 한 번만 적고, 웹(React)과 앱(Flutter)이 같은 값을 씁니다.Values like color, type and spacing, and components like buttons and panels, live in one system. Values are read from the Figma Horon file and written once in @horon-ai/tokens, so web (React) and app (Flutter) share them.
시스템 이해하기Understand the system
FoundationsFoundations 색, 글자, 간격, 반경, 유리 표면 등 화면의 바탕이 되는 값.Color, type, spacing, radius and glass: the values every screen sits on. ComponentsComponents 84개 컴포넌트의 프리뷰와 코드.Previews and code for 84 components. MascotMascot 마스코트 컷과 로고, 쓰는 규칙.Mascot cuts, the logo, and how to use them.
개발 시작하기Start building
ReactReact 웹 앱에 @horon-ai/react를 설치하고 컴포넌트를 불러옵니다.Install @horon-ai/react in a web app and import components. FlutterFlutter Flutter 앱에 horon_ui와 테마를 연결합니다.Wire horon_ui and its theme into a Flutter app. AI 도구AI tools 에이전트가 읽을 문서 요약(llms.txt)을 받습니다.Give your agent the docs summary in llms.txt.