AI 레퍼런스

podo-ui는 AI 도구들이 디자인 시스템을 쉽게 이해하고 활용할 수 있도록 구조화된 JSON 레퍼런스를 제공합니다.

Guide

개요

AI 레퍼런스 시스템은 모듈화된 JSON 파일들로 구성되어 있어, AI가 필요한 정보만 선택적으로 읽을 수 있습니다. 메인 인덱스 파일에서 전체 구조를 파악하고, 세부 정보는 개별 파일에서 확인할 수 있습니다.

파일 구조

public/
├── ai.json                    # 메인 인덱스 (진입점)
└── ai/
    ├── overview.json          # 프로젝트 개요
    ├── components/            # 컴포넌트 (17개)
    │   ├── avatar.json
    │   ├── input.json
    │   ├── textarea.json
    │   └── ... (17 files)
    └── systems/               # 시스템 (6개)
        ├── color.json
        ├── typography.json
        ├── spacing.json
        └── ... (6 files)

메인 인덱스 (ai.json)

ai.json은 전체 레퍼런스의 진입점입니다. 프로젝트 기본 정보와 모든 모듈의 경로가 포함되어 있습니다.

https://podoui.com/ai.json

{
  "name": "podo-ui",
  "version": "1.0.0",
  "description": "Design system: SCSS 97% + React 3%",
  "philosophy": "Maximum flexibility with minimal JS dependency",
  "install": "npm install podo-ui",
  "modules": {
    "overview": "https://podoui.com/ai/overview.json",
    "components": {
      "avatar": "https://podoui.com/ai/components/avatar.json",
      "input": "https://podoui.com/ai/components/input.json",
      ...
    },
    "systems": {
      "color": "https://podoui.com/ai/systems/color.json",
      "typography": "https://podoui.com/ai/systems/typography.json",
      ...
    }
  }
}

name패키지 이름

version버전

description간단한 설명

philosophy설계 철학

install설치 명령어

modules모든 세부 모듈 경로

컴포넌트 파일

각 컴포넌트 파일은 다음 정보를 포함합니다:

https://podoui.com/ai/components/input.json

{
  "name": "Input",
  "category": "atom",
  "description": "Form input field with Zod validation support",
  "import": {
    "react": "import { Input } from 'podo-ui'",
    "scss": "@use 'podo-ui/scss/form/input'"
  },
  "props": [
    { "name": "value", "type": "string | number", "required": false },
    { "name": "validator", "type": "z.ZodType", "description": "Zod schema" },
    { "name": "withIcon", "type": "string", "description": "Left icon class" },
    ...
  ],
  "cssClasses": [
    { "class": "input", "description": "Base input style" },
    { "class": "fill", "description": "Filled background style" },
    ...
  ],
  "examples": [
    {
      "title": "Basic",
      "code": "<Input value={text} onChange={...} placeholder=\"Enter text\" />"
    },
    ...
  ],
  "related": ["textarea", "field", "select"]
}

name컴포넌트 이름

category분류 (atom/molecule)

importReact/SCSS import 경로

propsProps 목록 (타입, 기본값, 설명)

cssClassesCSS 클래스 목록

examples코드 예제

related관련 컴포넌트

Components: Avatar, Input, Textarea, Editor, Chip, Tooltip, Datepicker, Field, Pagination, Toast, Select, Checkbox/Radio, Toggle, Table, Tab, File, Button

시스템 파일

디자인 시스템의 기초 요소들을 문서화합니다:

color.json

색상 시스템 - 시맨틱 컬러, 테마, CSS 변수

typography.json

타이포그래피 - 폰트, 크기, SCSS 믹스인

spacing.json

간격 - 스케일 (0-13), s() 함수

grid.json

그리드 - 12컬럼, 브레이크포인트

icon.json

아이콘 - 사용법, 클래스

button.json

버튼 - 테마, 변형, 상태

사용 방법

1. 메인 인덱스 확인

먼저 ai.json을 읽어 전체 구조를 파악합니다.

fetch('https://podoui.com/ai.json').then(r => r.json())

2. 필요한 모듈 선택

작업에 필요한 컴포넌트나 시스템 파일만 선택적으로 읽습니다.

fetch('https://podoui.com/ai/components/input.json').then(r => r.json())

3. 코드 작성

JSON에 포함된 import 경로, props, 예제를 참고하여 코드를 작성합니다.

예제: Input 컴포넌트 사용

AI 프롬프트 예시:

podo-ui의 Input 컴포넌트를 사용해서 이메일 입력 필드를 만들어줘.

AI 처리 과정:

ai.json에서 input 경로 확인
/ai/components/input.json 읽기
props, 예제 참고하여 코드 작성

Result

import { Input } from 'podo-ui';
import { z } from 'zod';

<Input
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  validator={z.string().email()}
  placeholder="Enter your email"
  withIcon="icon-mail"
/>

장점

선택적 로딩

필요한 정보만 읽어 컨텍스트 절약

구조화된 데이터

JSON 형식으로 파싱 용이

포괄적 정보

Props, 예제, 관련 컴포넌트까지 포함

접근 URL

아래 URL로 직접 JSON 파일에 접근할 수 있습니다:

https://podoui.com/ai.jsonMain Index https://podoui.com/ai/overview.jsonProject Overview https://podoui.com/ai/components/input.jsonInput Component https://podoui.com/ai/systems/color.jsonColor System

Podo UI