Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

figma_to_html_agent 추가 + MCP/Claude 설정

Browse Source 
figma_to_html_agent/:
- Figma MCP 기반 블록 추출 에이전트 (CLAUDE.md, PLAN.md, PROCESS.md 등)
- block-tests/: Figma→HTML 변환 결과물 (bim-3roles-cards 등)
- templates_staging/: Jinja2 템플릿 + meta.yaml + example.yaml
- figma-analysis/, figma-assets/: Figma 분석 데이터 + 에셋
- scripts/: gradient_math.py 등 유틸리티

설정:
- .mcp.json: Figma MCP 서버 연결 설정
- .claude/settings.json: Claude Code 프로젝트 설정

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
이경민
2026-04-13 11:00:31 +09:00
parent 360cd8e44c
commit 51548fdc41
467 changed files with 25280 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
figma_to_html_agent/block-tests/comparison-table.html Normal file
View File

@@ -0,0 +1,278 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>comparison-table</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 비교 테이블: BIM vs DX 스타일 3단 테이블 -->
<!--
📋 comparison-table
─────────────────
용도: 다항목 비교 (좌측 A | 중앙 기준 | 우측 B)
슬롯: headers[] (3개), rows[][] (각 행 3칸)
Figma 원본: 2-1_02 > BIM VS D/X 테이블
특징: 중앙 칼럼에 파란 그라데이션 배지, 좌우 불릿 대비
-->
<div class="block-table-figma">
<table>
<thead>
<tr>
<th class="th-left">
BIM
</th>
<th class="th-center">
<span class="th-badge">VS</span>
</th>
<th class="th-right">
D/X
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-left">• Only 3D</td>
<td class="td-center">BIM · D/X</td>
<td class="td-right">• BIM ≪ D/X (ENG. + Management 포함)</td>
</tr>
<tr>
<td class="td-left">• 모델 제작용 상용 S/W
(Civil 3D, Revit, Navisworks, Autocad)</td>
<td class="td-center">S/W</td>
<td class="td-right">• 제작 및 운영(상용 + 전용 40~80개)
[Rhino, Sketchup, Blender...] + [EG-BIM 등]</td>
</tr>
<tr>
<td class="td-left">• 기존 2D 설계방식 유지</td>
<td class="td-center">프로세스</td>
<td class="td-right">• 근본적 문제의식을 통한 개선</td>
</tr>
<tr>
<td class="td-left">• 3D 모델 중심
• 기존 성과품 유지</td>
<td class="td-center">성과물</td>
<td class="td-right">• 공학 정보 및 콘텐츠 연계에 집중
• 도면, 수량, 시공계획 등 일식</td>
</tr>
<tr>
<td class="td-left">• 3D 모델에 의한 일반적 이해 향상</td>
<td class="td-center">활용</td>
<td class="td-right">• 설계/시공의 혁신(개념의 재정립)</td>
</tr>
<tr>
<td class="td-left">• (설계/시공/운영) 분야별 단절</td>
<td class="td-center">확장성</td>
<td class="td-right">• 전 생애주기 활용 시스템</td>
</tr>
<tr>
<td class="td-left">• 단순화(오류) - 수동적/집단적 동질화</td>
<td class="td-center">수행개념</td>
<td class="td-right">• 구체화(복잡) - 적극/구체적 실현 방안</td>
</tr>
<tr>
<td class="td-left">• 소극적, 상용 기술에 의존</td>
<td class="td-center">CIVIL + IT</td>
<td class="td-right">• 적극적, 주체적인 기술 접목/융합</td>
</tr>
<tr>
<td class="td-left">• S/W 제작사 판매 정책에 의존</td>
<td class="td-center">주체</td>
<td class="td-right">• 자체 수행능력 - 지속가능성 확보</td>
</tr>
<tr>
<td class="td-left">• 평준화, 국내 중심</td>
<td class="td-center">발주처</td>
<td class="td-right">• 차별화 및 경쟁력 확보, 해외 진출</td>
</tr>
<tr>
<td class="td-left">• 소규모 BIM팀 운영 + 단순교육에 집중</td>
<td class="td-center">설계사</td>
<td class="td-right">• IT + CIVIL ENG 220명 운영 + 기술 개발</td>
</tr>
<tr>
<td class="td-left">• 국내 토목 소극적/ 해외 토목증가</td>
<td class="td-center">시공사</td>
<td class="td-right">• 분야 확장 모델 및 시스템</td>
</tr>
</tbody>
</table>
</div>
<style>
.block-table-figma {
overflow: auto;
}
.block-table-figma table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
line-height: 1.7;
}
/* 헤더 */
.block-table-figma thead th {
padding: 14px 12px;
font-size: 16px;
font-weight: 700;
border-bottom: 2px solid #e8edf2;
}
.th-left {
text-align: center;
color: #6bcdff;
}
.th-center {
text-align: center;
width: 120px;
}
.th-badge {
display: inline-block;
background: linear-gradient(135deg, #006eff 0%, #00aaff 100%);
color: #ffffff;
font-size: 15px;
font-weight: 700;
padding: 8px 28px;
border-radius: 25px;
}
.th-right {
text-align: center;
color: #006eff;
}
/* 본문 */
.block-table-figma tbody td {
padding: 10px 14px;
border-bottom: 1px solid #f0f2f5;
vertical-align: middle;
}
.td-left {
text-align: center;
color: #444;
}
.td-center {
text-align: center;
font-weight: 700;
color: #333;
background: #f6f8fb;
font-size: 13px;
}
.td-right {
text-align: center;
color: #444;
}
.block-table-figma tbody tr:hover {
background: #fafbfd;
}
</style></div></body>
</html>