2,480
+12.6%
범용 CSS 인프라
모든 인터페이스에기성 답변
Gardener는 기본 CSS, 대화형 구성요소, 비즈니스 레시피, 데스크탑 적응 및 기계 판독 가능 매니페스트를 하나의 시스템에 통합합니다. 사람이 직접 개발할 수 있고, AI가 매번 스타일을 재구성할 필요 없이 정확하게 선택해서 사용할 수 있다.
- 런타임 종속성 없음
- 흰색 바탕에 중립 기본값
- 작은 둥근 모서리 시스템
- 웹 및 데스크탑 공유
94%
기업사이트 조립
42컬러테마
506컴포넌트 등록
11,498도구
52기계 판독 가능 페이지 레시피
버튼 하나부터 슈퍼CMS까지
기본 원자, 공통 구성 요소, 고밀도 백엔드, 모바일 단말, 콘텐츠 상용화, AI 작업 공간 및 데스크톱 WebView를 다룹니다. 기본은 충분히 억제되어 있고 조합 능력도 충분히 넓습니다.
베이스 레이어 완성
재설정, 토큰, 24/12 그리드, 타이포그래피, 간격, 크기, 논리적 방향, 색상, 테두리, 그림자, 상태 및 5단계 반응형 도구 클래스.
즉시 배송 가능한 구성품
양식, 탐색, 오버레이, 데이터, 미디어, 비즈니스, 통신, 법률, 작업 흐름 및 대시보드는 모두 안정적인 구조와 상태 규칙을 가지고 있습니다.
AI 네이티브 상호작용
메시지 흐름, 사고 프로세스, 도구 호출, 승인, 에이전트 상태, 일정, 참조, 아티팩트, 모델 선택 및 다중 모드 생성.
복잡한 비즈니스 레시피
로그인, 모바일 카테고리, CMS 편집기, 미디어 라이브러리, 받은 편지함, 파일 관리, 양식 작성, 스토어 목록, 청구 및 기업 설정.
데스크탑 애플리케이션 적응
Tauri와 Electron은 제목 표시줄, 창 컨트롤, 활동 표시줄, 편집 영역, 검사기, 열 및 상태 표시줄을 공유하며 브리지 인터페이스는 안전하게 유지됩니다.
환경 매트릭스가 완료되었습니다.
밝음, 어두움, 시스템, 고대비, RTL, 움직임 감소, 강제 색상, 인쇄, 모바일, 태블릿 및 데스크탑.
공식 Vue 3 바인딩 · 1.0.0 안정
CSS의 모든 힘이 Vue API가 되었습니다
@gardener/vue 플러그인, 유형 안전 구성 요소, 지시문, 구성 가능, 10축 테마 제공자, v-모델, SSR 및 Tauri/Electron 적응을 제공하는 506개 구성 요소 및 66개 DOM 동작의 완전한 매핑입니다. 각 CSS 구성요소에는 고유한 속성이 있습니다. G* 내보낼 때 AI는 스타일을 다시 조립하지 않고도 구성요소를 직접 선택할 수 있습니다.
506개 부품
538 런타임 내보내기
진입점 29개
CSS 팩 28개
Vue 3.4 이상
App.vue주문형 수입·완전형
<script setup lang="ts">
import { GButton, GCard, GardenerProvider } from "@gardener/vue";
import "@gardener/vue/style.css";
</script>
<template>
<GardenerProvider theme="garden" mode="light" shape="subtle">
<GCard>
<GButton variant="primary">저장</GButton>
</GCard>
</GardenerProvider>
</template>
공식 React 바인딩 · 1.0.0 안정
동일한 CSS 세트에는 완전한 React 구성 요소 모델도 있습니다.
@gardener/react Maps 506 CSS components and 66 DOM behaviors into a type-safe React API, providing precise native element types, ten-axis theme providers, controlled and uncontrolled value bridging, Imperative Handles, 7 Hooks, SSR / Hydration, and isolated Tauri / Electron adaptation entrances. Components, styles, and machine-readable directories maintain a one-to-one correspondence.
506개 부품
538 런타임 내보내기
진입점 29개
CSS 팩 28개
React 18.3–19.x
App.tsx주문형 수입·완전형
import { GButton, GCard, GardenerProvider } from "@gardener/react";
import "@gardener/react/style.css";
export function App() {
return (
<GardenerProvider theme="garden" mode="light" shape="subtle">
<GCard>
<GButton variant="primary">저장</GButton>
</GCard>
</GardenerProvider>
);
}
공식 AngularJS 바인딩 · 1.0.0 안정
대규모 AngularJS 레거시 시스템이 전체 Gardener API를 계속 사용하도록 허용
@gardener/angularjs 506개의 CSS 구성 요소와 66개의 DOM 동작을 AngularJS 요소/속성 지시어로 매핑하여 모듈 팩토리, 엄격한 구성 요소 하위 설정, 기본 ngModel, 10축 테마, 3개의 주입 가능한 서비스, 동적 수명 주기 및 격리된 Tauri/Electron 항목을 제공합니다. 이는 AngularJS 1.8.x를 유지해야 하는 재고 제품을 대상으로 하며 프레임워크의 EOL 보안 경계를 명시적으로 노출합니다.
506 지시어
535 런타임 내보내기
진입점 29개
CSS 팩 28개
AngularJS 1.8.2–1.8.3
app.js모듈공장·ngModel·완전형
import "angular/angular.js";
import { createGardenerAngularJS } from "@gardener/angularjs";
import "@gardener/angularjs/style.css";
const gardener = createGardenerAngularJS(window.angular, {
components: ["button", "input", "card"],
});
window.angular.module("app", [gardener]);
// <button g-button gardener-variant="primary">저장</button>
// <input g-input ng-model="vm.keyword">
공식 Blazor RCL · 1.0.0 안정
동일한 Razor 구성 요소 세트를 사용하여 정적 SSR에서 데스크톱 WebView로
Gardener.Blazor 506개의 CSS/하이브리드 구성 요소, 66개의 DOM 동작 및 75개의 이벤트를 강력한 형식의 Razor API에 매핑합니다. 안정적인 패키지
net10.0 는 기준선이며 검증되었습니다. net11.0
Blazor Web App, WebAssembly, Hybrid, Tauri 및 Electron 시나리오를 다루고 SSR, 양식, 접근성 및 10축 테마 계약을 보존하는 소비입니다.
506개 부품
66가지 행동
이벤트 75개
정적 자산 43개
.NET 10/11
Dashboard.razorRCL · SSR · 강력한 유형의 이벤트
@using Gardener.Blazor.Components
<GardenerProvider Theme="garden" Mode="light"
Shape="small" Platform="desktop">
<GAppShell>
<GSidebar>내비게이션</GSidebar>
<GMainRegion>
<GButton Variant="primary" @onclick="Save">
저장
</GButton>
</GMainRegion>
</GAppShell>
</GardenerProvider>정확한 열 분할, 더 이상 임시 계산이 아닙니다.
24그리드는 엔터프라이즈 백엔드, CMS 및 복잡한 형태를 다루며, 12그리드는 전통적인 디자인 초안과 호환됩니다. 열 너비, 오프셋, 순서, 눈금선, 간격, 컨테이너 쿼리, RTL 및 인쇄를 위한 안정적인 인터페이스가 있습니다.
뷰포트 응답 5단계 + 컨테이너 응답 3단계480 / 768 / 1024 / 1280 / 1536px · CQ 480 / 768 / 1024px
전체 래스터 문서 보기
전통적인 페이지 뼈대에도 안정적인 인터페이스가 있습니다
상단 및 하단 메인 영역부터 왼쪽 및 오른쪽 열부터 Holy Grail, Master/Detail, Dock, 조정 가능한 열 및 전체 화면 작업 공간, 웹, 모바일 터미널 및 Tauri/Electron까지 페이지 수준 레이아웃 CSS를 임시로 작성할 필요 없이 직접 선택할 수 있습니다.
상단/메인/하단시작/메인/종료성배마스터/디테일목록/상세/검사자고정 헤더고정 사이드바끈끈한 옆으로고정 바닥글독분할보기전체화면모바일 안전지역데스크탑 쉘컨테이너 쿼리RTL/인쇄
완성된 뼈대 16종 + 부위통합파츠뷰포트 응답성 · 컨테이너 응답성 · 논리적 방향 · 인쇄 병합 · 데스크탑 워크벤치
전체 영역 레이아웃 문서 보기
공간이 레이아웃을 결정하도록 하고 중단점이 레이아웃을 추측하도록 하지 마십시오.
Stack, Cluster, Sidebar, Switcher, Reel, Media Object, Masonry, Bento 등의 클래식 패턴이 내장된 응답 인터페이스로 구체화되었습니다. AI는 의도와 몇 가지 변수만 선택하면 되며 Flex, Grid, 오버플로 및 안전 영역 규칙을 다시 만들 필요가 없습니다.
스택
클러스터랩태그
리펠
엠
미디어 개체미디어·바디·액션
→
스택클러스터센터사이드바스위처표지릴프레임미디어 개체자동맞춤자동 채우기블리드리펠임포스터오버레이벽돌도시락화면 비율스크롤 영역스크롤스냅안전지역끈끈한 영역
안정적인 프리미티브 22개 + JavaScript 레이아웃 없음고유 응답 · 컨테이너 쿼리 · RTL · 안전 영역 · 모션 감소 · 인쇄
전체 기본 문서 보기
페이지 공개 구조, 전달 상태 직접 입력
페이지 헤더, 도구 모음, 명령 모음, 필터링 및 일괄 작업을 통합하고 로드 중, 비어 있음, 오류, 403, 404, 500, 오프라인 및 유지 관리 상태를 완벽하게 준비합니다. AI가 생성한 페이지는 더 이상 단순한 "일반 데이터"가 아닙니다.
콘텐츠 작업공간
페이지 관리
콘텐츠, 상태, 게시 시간을 관리합니다.
∅
비어 있음
최초 사용을 위한 명확한 다음 단계도 있습니다.
404
찾을 수 없음
유효하지 않은 링크에 대한 안정적인 대체.
⌁
오프라인
네트워크 연결이 끊어져도 데이터 보안 상태가 계속 알려집니다.
페이지 헤더섹션 헤더하위 헤더툴바액션바상태 표시줄명령 모음컨텍스트 바필터바대량 작업 표시줄바닥글 표시줄플로팅 액션바맨 위로 돌아가기텍스트가 있는 구분선고정 작업페이지 로딩 중페이지가 비어 있음페이지 오류403404500오프라인유지보수
23개의 완전한 페이지 상태 및 공통 구조컨테이너 쿼리 · 고정 · 안전 영역 · RTL · 런타임 · 인쇄
전체 페이지 구성요소 문서 보기
TIP에서 완전한 도움말 폐쇄 루프까지
도구 설명, 팝오버, 콜아웃, FAQ, 도움말 센터, 둘러보기, 스포트라이트, 새로운 기능 팁, 문제 해결 및 피드백은 모두 안정적인 인터페이스를 사용합니다. 사용자는 어느 쪽에서든 질문을 만나면 적절하고 일관된 표현을 사용합니다.
프로덕션 환경에 게시하기 전에 미리보기 환경을 사용하여 콘텐츠를 확인하세요.
- 도움말 열기?
- 명령 패널Ctrl+케이
팁인라인 힌트도움말 텍스트도움말 트리거툴팁리치 툴팁팝오버 도움말정의콜아웃참고하다/하지 마세요핵심힌트바로가기 목록도움말 카드도움말 패널도움말 센터도움말 항목FAQ상황별 도움말마크코치가이드 투어스포트라이트핫스팟기능 힌트새로운 소식도움말 체크리스트문제 해결도움말 피드백
28개의 프롬프트, 안내 및 지원 모드충돌 인식 · 키보드 · 초점 복원 · RTL · 동작 감소 · 인쇄
전체 도움말 시스템 문서 보기
양식은 더 이상 여러 개의 입력으로 시작되지 않습니다.
필드, 파티션, 수평 및 인라인 레이아웃, 검색/비밀번호/계산, 그룹 선택, 유효성 검사, 이름/주소/금액, 조건 및 반복 가능 항목, 검토 및 제출 작업이 모두 결합됩니다. AI는 비즈니스 의도만 선택하면 되며 양식 CSS를 반복해서 구성할 필요가 없습니다.
양식양식 섹션필드필드셋양식 행폼 그리드가로형인라인 양식콤팩트한 형태입력 그룹입력부호검색 필드비밀번호 필드삭제 가능 필드캐릭터 카운터유효성 검사 상태검증 요약체크박스 그룹라디오 그룹스위치 행초이스카드이름 그룹주소 그룹전화그룹머니그룹날짜 범위시간 범위단위 필드범위 필드파일 필드반복 가능한 필드조건부 필드양식 작업자동 저장 상태양식 진행양식 검토동의 그룹
37개의 전통적인 형태 구조 + 5가지 유형의 대화형 동작컨테이너 쿼리 · 검증 · 비즈니스 그룹 · RTL · 안전 영역 · 인쇄
전체 양식 조합 문서 보기
데이터는 표시되어야 할 뿐만 아니라 즉시 사용할 수 있어야 합니다.
테이블, 레코드, 목록, 계층 구조, 지표, 계획, 지도 및 작업을 포괄하는 48개 데이터 모드. 정렬, 선택, 확장, 열 관리, 필터링 및 보기 전환을 위한 통합 런타임이 있습니다.
고객 수익286천엔
128활성
6위험
선택됨 0 아이템
| 상태 | 작동 | |||
|---|---|---|---|---|
| 갤럭시 테크놀로지 | 활성 | ¥128,000 | ||
|
Enterprise Edition 고객 · 마지막으로 연락한 날짜: 2일 전
|
||||
| 위안산 디자인 | 후속조치 예정 | ¥86,000 | 보기 | |
| 임해교육 | 위험 | ¥42,000 | 보기 | |
테이블반응 테이블데이터 그리드편집 가능한 그리드트리 테이블그룹화된 테이블확장형 테이블비교피벗설명 목록키 값기록상세목록 그룹미디어 목록밀집 목록가상 목록나무타임라인활동 피드감사 로그KPI통계 목록미터법 카드스파크라인진행 상태차트범례순위상태 요약달력의제칸반간트조직도지도매트릭스히트맵데이터 툴바열 선택기저장된 보기내보내기 패널데이터 상태뷰 전환기선택 요약밀도필터 요약정렬 빌더데이터 검사기
48개 데이터 표시 및 작동 모드 + 8가지 재사용 상호작용테이블 · 레코드 · 미터법 · 계획 · 공간 · 키보드 · RTL · 인쇄
전체 데이터 조합 문서 보기
항목 1개 선택부터 100,000건 처리까지
모두 선택, 선택 반전, 범위 선택, 일괄 도구 모음, 전송, 트리 및 계단식 선택, 사람/조직/자원/미디어 선택기, 날짜 시간 범위, 구성 저장 및 정렬/그룹 작성기 모두 안정적인 인터페이스를 갖추고 있습니다. AI는 복잡한 백엔드 선택 프로세스를 즉석에서 만들 필요가 없습니다.
선택 제어모두 선택반전범위배치 도구 모음선택 범위전송듀얼리스트트리 선택캐스케이더멘션 선택기사용자 선택기조직 선택기리소스 선택기미디어 선택기아이콘 선택기색상 선택기날짜 범위시간 범위저장된 필터저장된 보기열 선택기정렬 빌더그룹 빌더엔터티 선택기태그 선택기관계 선택기대량확인대량 진행피커 패널선택기 요약선택 요약
32개 선택이 배치 모드와 상호 작용 + 7개 다중화 범주다중 선택 · 계층 · 검색 · 안전 영역 · 키보드 · RTL · 인쇄
전체 선택 구성요소 문서 보기
파일 업로드부터 전체 콘텐츠 제작 완료까지
업로드 대기열, 파일 탐색, 미디어 라이브러리, 이미지 처리, 문서/PDF/오디오 및 비디오 보기, 코드 및 서식 있는 텍스트 편집, 마크다운, 블록, 개정, 주석 및 자동 저장 등 모두 이미 만들어진 구조를 가지고 있습니다.
기업 브랜드 매뉴얼.pdf
홈페이지표지.jpg
PDF
브랜드 매뉴얼.pdf
IMG
홈페이지표지.jpg
파일 드롭파일 목록업로드 대기열청크 업로드업로드 진행업로드 실패파일카드폴더 트리파일 브라우저파일 미리보기미디어 라이브러리미디어 그리드미디어 세부정보이미지 자르기이미지 주석문서뷰어PDF 뷰어비디오 플레이어오디오 플레이어코드 에디터리치 텍스트 편집기마크다운 편집기블록 에디터개정판 비교자동 저장콘텐츠 개요에디터 툴바찾기 및 바꾸기코멘트 스레드버전 기록파일 속성수납미터
32개의 파일 및 콘텐츠 모드 + 6가지 유형의 재사용 상호작용업로드 · 브라우저 · 편집자 · 개정 · 키보드 · RTL · 인쇄
전체 콘텐츠 시스템 문서 보기
최초 로그인부터 모든 보안감사까지
로그인, 등록, 인증, MFA, 패스키, SSO, QR 코드, 초대, 계정 및 테넌트 선택, 잠금 화면, 세션 복구, 장치 관리 및 보안 이벤트가 웹 사이트, 모바일 단말기, 대시보드 및 Tauri/Electron에 적합한 안정적인 페이지 구조로 결합되었습니다.
+86 138****6608로 전송된 인증번호를 입력하세요
새로운 장치가 감지되었습니다.
리눅스 · Firefox, 베이징에서 시작.
중앙 인증분할 인증로그인등록비밀번호 복구비밀번호 재설정이메일 인증전화인증MFAOTP패스키SSOQR 로그인매직링크초대장첫 번째 설정잠금화면세션이 만료되었습니다.계정 선택기테넌트 선택자신원 전환기프로필 설정계정 보안장치로그인 활동보안 경고복구 코드신뢰할 수 있는 장치연결된 계정비밀번호 강도동의인증 결과
32개의 로그인 및 계정 모드 + 8가지 유형의 재사용 상호작용비밀번호 · OTP · MFA · 패스키 · SSO · 세션 · ID · 보안
전체 계정 시스템 문서 보기
상품을 보시고 거래완료 및 환불까지
제품 카드, 세부정보, SKU, 장바구니, 결제, 주소, 배송, 제안, 송장, 결제, 주문, 구독, 사용, 청구 및 환불이 안정적인 구조로 되었습니다. 전자상거래, 디지털 상품, SaaS, 기업 조달, CMS 상용화 및 데스크톱 클라이언트에 적합합니다.
엔터프라이즈 에디션Gardener 스튜디오
스튜디오 비즈니스 스위트
¥699¥899-22%
플랫폼
지
스튜디오 비즈니스 스위트Windows·엔터프라이즈 라이선스
¥699.00
장바구니가 비어있습니다.
제품
할인
배달
대처
제품카드제품목록상품상세정보제품갤러리SKU 선택기수량 스테퍼가격 표시장바구니 품목카트미니카트장바구니 요약결제결제 단계주소 선택기주소카드배송 방법픽업 셀렉터쿠폰프로모션 목록송장정보결제 방법결제 명세서결제 결과주문 요약주문 타임라인주문 세부정보구독 요금제가격비교사용량 측정기청구 내역환불 상태세금 요약
32가지 비즈니스 및 결제 모델 + 7가지 유형의 재사용 상호작용카탈로그·장바구니·결제·이행·결제·주문·청구
전체 비즈니스 및 결제 문서 보기
더 작은 데스크탑이 아닌, 완전한 모바일 앱 레이어
안전 영역, 동적 뷰포트, 상단 표시줄, 하단 탐색, 하단/작업/필터 시트, 당겨서 새로 고침, 무한 로드, 슬라이딩 작업, 휠 선택, 키보드 회피, 모바일 인증 및 결제, 권한 및 오프라인 상태가 안정적인 계약을 가지며 모바일 웹 페이지, PWA 및 Tauri/Electron 모바일 WebView에 직접 사용할 수 있습니다.
컨텐츠 센터
노치 및 홈 표시기 자동 보호.
PWA, Tauri 및 Electron 공유 구조.
모바일 콘텐츠 스트리밍
안정적인 미디어, 본체 및 테일 동작 슬롯.
안전지역쉘상단 앱바하단 탐색바텀시트액션 시트당겨서 새로고침무한부하스와이프 동작스와이프 탭모바일 카테고리모바일 필터고정구매바모바일 검색모바일 피커휠피커플로팅 액션 버튼전체화면 대화상자키보드 회피제스처 힌트오프라인 배너분할제어모바일 피드카드 회전목마모바일폼모바일 인증모바일 결제미디어뷰어키보드 툴바선택 모드스낵바권한 프롬프트비어 있음/오류 상태
32개의 모바일 전용 모드 + 14가지 유형의 재사용 상호작용안전 영역 · 터치 · 시트 · 제스처 · 키보드 · PWA · WebView
전체 모바일 문서 보기
웹 기술을 완전한 데스크탑 작업 공간으로 전환
기본 제목 표시줄, 창 버튼, 메뉴 및 활동 표시줄은 시작점일 뿐입니다. 문서 레이블, 조정 가능한 열, Dock, 검사기, 명령 패널, 파일 선택, 트레이, 다중 창, 백그라운드 작업, 업데이트, 권한 및 충돌 복구가 모두 안정적으로 결합되었으며 Tauri 및 Electron에서 직접 구현할 수 있습니다.
데스크톱 CMS
고밀도 작업 공간을 위해 재조립이 필요하지 않습니다.
윈도우 크롬, 네비게이션, 편집 영역, 상태 영역, 호스트 브리지는 각각 독립적인 계약을 갖고 있습니다.
네이티브 제목 표시줄창 컨트롤메뉴바활동 표시줄도크 패널크기 조정 가능한 분할 창검사관상태 표시줄명령 팔레트단축녹화기컨텍스트 메뉴저장되지 않은 탭드래그 영역창 로딩업데이트 가능권한 요청네이티브 파일 선택기트레이 메뉴멀티윈도우데스크탑 작업공간윈도우 스위처최근 문서데스크톱 도구 모음하단 패널백그라운드 작업알림 센터동기화 상태업데이트 진행충돌 복구단일 인스턴스딥링크대화상자 정보
32가지 데스크톱 전용 모드 + 11가지 유형의 재사용 가능한 상호작용Tauri · Electron · 창 크롬 · 작업 공간 · 네이티브 브리지 · 라이프 사이클
전체 데스크탑 문서 보기
AI 상호작용은 채팅창이 아니다
대화 외에도 작성기 및 스트리밍 답변, 추론 요약, 도구 호출 및 승인, 다중 에이전트 오케스트레이션, 소스 인용, 아티팩트, 상황별 메모리, 토큰/수수료, 음성, 권한, 개인 정보 보호, 보안 검토 및 피드백 평가도 필요합니다. Gardener는 전체 AI 작업 체인을 직접 재사용할 수 있는 32가지 모드로 만듭니다.
Super CMS용 엔터프라이즈 포털 홈 페이지를 생성합니다.
Enterprise Portal 레시피가 선택되어 구성 요소 및 권한을 확인합니다.
대시보드, CMS, 권한 및 데스크톱 작업 공간이 일치합니다.
페이지 템플릿에 쓰기를 허용하시겠습니까?
현재 프로젝트의 생성된 디렉터리만 수정합니다.
AI 작업공간대화 목록채팅 스레드AI 메시지프롬프트 작성기부착프롬프트 스타터프롬프트 라이브러리멘션/슬래시 메뉴모델 선택기생각하다스트리밍 응답공구 호출도구 승인에이전트 상태에이전트 계획멀티 에이전트 보드에이전트 핸드오프출처/인용아티팩트 작업공간아티팩트 패널AI 파일 트리버전 기록제너레이션 갤러리세대 자리 표시자컨텍스트/메모리비용 / 요율 제한음성 세션권한 범위개인정보 보호정책안전 주의사항피드백/평가
AI 네이티브 모드 32개 + 런타임 9종채팅 · 멀티모달 · 도구 · 에이전트 · 아티팩트 · 컨텍스트 · 안전 · 평가
전체 AI 구성 요소 문서 보기
컴포넌트 라이브러리에서 직접 생성할 수 있는 전체 페이지로 이동합니다.
카테고리 16은 공개 웹사이트, 개인 콘텐츠, 기업 백엔드, 비즈니스 워크벤치 및 수직 산업 포털을 32개의 전체 페이지 계약으로 통합합니다. AI는 먼저 페이지 유형을 선택한 다음 비즈니스 구성 요소와 콘텐츠를 채웁니다. 더 이상 머리글, 탐색, 기본 영역, 측면 영역 및 모바일 접기 규칙을 일시적으로 만들지 않습니다.
기업개요
슈퍼CMS 운영개요
동일한 전체 페이지 계약으로 비즈니스, 개인, 의료, 금융 또는 공공 서비스 주제를 전환할 수 있습니다.
게시된 사이트28,640↑ 12.4%
페이지 템플릿486k전체 페이지 항목 32개
검토 대기 중138처리 필요
제품 랜딩기업홈개인홈포트폴리오블로그 색인기사문서포털도움말 센터검색결과연락처가격대시보드관리자 목록기록상세설정사용자 센터알림온보딩CRM프로젝트 작업공간지원센터승인센터기술 자료학습포털이벤트 포털예약포털헬스케어금융공공 서비스마켓플레이스커뮤니티상태 센터
32개의 전체 페이지 모드 + 52개의 기계 판독 가능한 레시피개인 · 기업 · 콘텐츠 · 운영 · 산업 · 크로스 플랫폼
전체 솔루션 문서 보기
42가지 색상 테마
브랜드는 바꾸되 구성품은 바꾸지 마세요
색상 테마는 중성색, 글꼴, 모양, 밀도, 레이어, 애니메이션, 플랫폼 및 운영 체제와 직교적으로 결합됩니다. 여기에는 흰색과 밝은 인터페이스가 항상 유지되며 주요 브랜드 색상만 전환됩니다.
기본
과하게 장식적이지 않고 깔끔함
버튼, 링크, 포커스 및 선택 상태가 자동으로 테마를 따릅니다.
키보드 조작 가능; 각 테마는 50~950개의 전체 색상 그라데이션과 독립적으로 읽을 수 있는 전경 색상을 제공합니다.
예측 가능한 저작 · Stable 1.0.0
HTML은 인터페이스이다
통일
g-
접두사, 안정적인 구성 요소 명명 및 선언
data-g-* 인간과 AI 모두 빠르게 이해할 수 있는 행동.
- 레이어별 가져오기핵심/테마/유틸리티/컴포넌트/AI
- 선언적 런타임자동 초기화 및 동적 DOM 관찰
- 기계 판독 가능공개 API, 구성 요소, 도구 클래스, 레시피 및 기능 목록
- 엄격한 검증폐쇄형 스키마 11세트, 표준 스키마 사용 사례 48개, 빌드별 사용 사례 10개, 런타임 단위 테스트 66개, 실제 브라우저 사용 사례 125개, 구조적 사용 사례 24개
index.html
<html data-g-theme="garden" data-g-mode="light">
<link rel="stylesheet" href="gardener.css">
<main class="g-dashboard">
<article class="g-card g-p-5">...</article>
</main>
<script type="module" src="gardener.runtime.js"></script>
</html>현재 페이지에 실제로 필요한 플랫폼과 구성요소만 제공
5개의 플랫폼 파일, 28개의 안정적인 구성 요소 패키지 및 506개의 구성 요소 소유권 매핑을 통해 개발자와 AI는 일시적으로 CSS를 분해하지 않고도 공식 제품을 직접 선택할 수 있습니다. 구문 수준 압축, 소스 맵, SHA-256/SRI 무결성, 재현 가능한 빌드, TypeScript 입력, 버전 간 호환성 기준 및 릴리스 패키지 게이팅이 빌드와 함께 제공됩니다.
플랫폼 파일
웹, 모바일, 데스크톱, Tauri 및 Electron은 해당 최종 기능을 자동으로 유지합니다.
컴포넌트 패키지
레이아웃, 양식, 탐색, 데이터, 콘텐츠, 계정, 커머스, 모바일, 데스크톱 및 AI를 모두 독립적으로 도입할 수 있습니다.
구성요소 소유권
각 공용 구성 요소는 자신이 속한 전체 패키지를 확인하며 명시적인 포함 항목이 나열됩니다.
이중 제품 예산
raw, gzip, Brotli 및 0.9.0 기준 증가의 절대 상한은 제한을 초과하는 경우 릴리스를 차단합니다.
호환 가능한 베이스라인
항목, 테마, 런타임, 구성 요소 및 레시피만 추가할 수 있습니다. 삭제하려면 먼저 두 개 이상의 부 버전의 지원 중단 기간을 통과해야 합니다.
npm run build:platform -- --platform mobile --out dist/custom/mobile-app
npm run build:custom -- --components button,card,dialog --out dist/custom/account-ui
npm run verify:reproducible
npm run verify:compatibility
npm run test:types
npm run verify:package
npm run budget모든 페이지는 실제 환경을 견뎌야 합니다.
기본적으로 125개의 실제 브라우저 사용 사례와 24개의 HTML 구조 사용 사례를 실행합니다. 전체 구성에는 데스크톱 3개 엔진, Android/iPhone 장치 초상화 및 WCAG 자동 검사가 포함됩니다.
데스크탑 멀티브라우저
Chromium 및 WebKit은 기본 액세스 제어를 시작합니다. Firefox는 독립적인 3개 엔진의 완전한 액세스 제어를 제공합니다.
모바일 기기
픽셀 7과 아이폰 13은 21개의 샘플과 홈 2페이지로 완전히 커버되었으며, 320px 좁은 화면, 가로 화면, 리플로우 및 44px 터치 대상을 확인합니다.
접근성
Axe WCAG 2 A/AA 모든 자동적인 위반은 키보드와 초점 회복, RTL, 감소된 운동, 강제적인 색깔을 포함합니다.
구조적 무결성
모든 21개 예시, 홈 랜딩 페이지 및 문서 확인 구문 분석, ID, ARIA 참조, 제목 및 뷰포트.
모든 단말기에 동일한 언어가 적용됩니다.
페이지 구조, 테마 토큰 및 상호 작용 의미 체계는 일관되며 필요한 밀도, 창 및 안전 영역 적응만 각 끝에 추가됩니다.
PC사이트
기업 웹사이트, 포털, 콘텐츠 웹사이트, 전자상거래 및 SaaS.
모바일웹/PWA
안전 영역, 터치 밀도, 하단 탐색 및 카테고리 페이지.
대시보드
고밀도 데이터, 테이블, 필터 및 다중 열 애플리케이션.
Tauri/Electron
데스크탑 제목 표시줄, 창 브리징 및 워크벤치 레이아웃.
AI 제품
스트리밍 메시지, 도구, 에이전트, 아티팩트 및 빌드 상태.
빈도가 높은 페이지는 다시 조립할 필요가 없습니다.
복잡하지만 재사용 가능성이 높은 페이지가 레시피로 결합되었습니다. AI는 먼저 레시피를 선택한 다음 구성 요소와 도구 클래스를 사용하여 제한적으로 조정해야 합니다.
AI가 선택하게 하고 AI가 추측하게 하지 마세요
공용 API, 구성 요소, 도구 클래스, 레시피 및 산업 기능의 5개 범주 목록은 허용된 이름, 입구, 플랫폼, 상태 및 응답 조건을 구조화된 방식으로 노출합니다. 페이지 생성 프로세스를 제한하고 검증하고 재현할 수 있습니다.
페이지 의도 식별
최종 유형, 비즈니스 카테고리, 밀도, 콘텐츠 규모 및 상호 작용 복잡성.
레시피 선택 우선순위
완성된 구조 52개 중에서 가장 가까운 페이지 뼈대를 선택합니다.
구성요소 및 도구 결합
매니페스트에 실제로 존재하는 공개 API와 클래스 및 동작만 사용하세요.
계약 및 환경 확인
스키마, 키보드, 접근성, RTL, 인쇄 및 응답 엔드포인트 검사를 통과합니다.
완전한 시스템으로 시작하십시오.
다음 페이지를 위해 인프라 재창조를 중단하세요.