027 · 디자인 에이전트 팀
디자인 포트폴리오 카탈로그
9-에이전트 파이프라인이 분석한 디자인 보드 모음 · 팀 전체 디자인 방향성과 다양성을 한 곳에
각 카드를 클릭하면 해당 소스의 상세 디자인 보드(색상·타이포·레이아웃·컴포넌트·모션·접근성·브랜드 분석)가 열립니다. 새 보드 추가:
python3 main.py <소스경로 또는 URL>
🧠 프롬프트 집약체
Sonnet 4.6 실무 성능 극대화 · 사내 학습용
회사 망 Sonnet으로 상위 모델급 결과를 내기 위한 실전 도구 15종. 프롬프트 5 + 에이전트 구성 5 + MD 파일 5, 전부 원클릭 복사.
프롬프트 5
에이전트 5
MD 파일 5
복사 버튼
학습하러 가기 →
📝 029 보고서 슬라이드 에디터
React + Vite · react-moveable · zustand
A4 가로 캔버스에 텍스트·이미지·표를 자유 배치하고 PPT/PDF로 내보내는 웹 에디터. 단일 데이터 모델(비율 좌표) 아키텍처 + 전체 소스코드 수록.
진행 중 4/7단계
간격 스냅
mm 정밀 편집
코드 1,437줄
프로젝트 보기 →
🌐 21st.dev (라이브 URL)
https://21st.dev
실 프로덕션 CSS 436KB 자동 수집. 컴포넌트 마켓플레이스의 풀 디자인 시스템.
색상 40종
ABC Diatype
Averia Serif
GeistPixel
요소 1,164
보드 열기 →
🧩 21st.dev (수동 결합)
styles.css + page.html + home.html
CSS 토큰 + 렌더 HTML 결합 분석. shadcn/ui + Tailwind 유틸리티 우선 설계.
CSS변수 60
Geist · Averia
3파일 결합
보드 열기 →
🎨 Tailwind + shadcn 토큰
pasted_design_system.css
전체 Tailwind 팔레트 + shadcn HSL 시멘틱 토큰. 라이트/다크 테마 시스템.
색상 40종
radius 7단
spin·ping·pulse
보드 열기 →
🧪 샘플 랜딩 (검증용)
sample_landing.html
파이프라인 검증용 샘플. 단일 HTML의 인라인 토큰 추출 데모.
#5b8def
Pretendard
단일 파일
보드 열기 →