Figma-to-HTML 에이전트 초기 커밋
- 10단계 변환 프로세스 (PROCESS.md) - 수학 공식 레퍼런스 (MATH.md, gradient_math.py) - CSS 보정 규칙 R1~R16 (RULES.md) - 작업 규율 7개 규칙 (PROCESS-CONTROL.md) - 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/) - 8개 Jinja2 템플릿 staging (templates_staging/) - 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md) - 사용법 가이드 (README.md) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
98
block-tests/bim-figma-devmode.html
Normal file
98
block-tests/bim-figma-devmode.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>BIM 목표 — Figma Dev Mode 직접 적용</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
min-height: 100vh; background: #f5f5f5;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
/* 슬라이드 1280×720 */
|
||||
.slide {
|
||||
width: 1280px; height: 720px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
/* Figma 원본 frame 크기: 2062.21 × 957
|
||||
슬라이드에 맞추기 위해 스케일: 1280 / 2062.21 = 0.6207
|
||||
원본 그대로 두고 transform: scale로 축소 */
|
||||
.figma-frame {
|
||||
position: absolute;
|
||||
width: 2062.21px;
|
||||
height: 957px;
|
||||
top: 0; left: 0;
|
||||
transform: scale(0.6207);
|
||||
transform-origin: top left;
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="slide">
|
||||
<div class="figma-frame">
|
||||
|
||||
<!-- Figma Dev Mode HTML 그대로 -->
|
||||
<div style="width: 100%; height: 100%; position: relative">
|
||||
<img style="width: 1768px; height: 274px; left: 139px; top: 683px; position: absolute" src="assets/bg_bottom_image.png" />
|
||||
<div style="width: 350px; height: 350px; left: 694px; top: 480px; position: absolute; background: linear-gradient(219deg, #D5AA89 0%, #737373 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
|
||||
<div style="width: 280px; height: 280px; left: 728.06px; top: 514.06px; position: absolute; background: linear-gradient(154deg, #897445 0%, #3E3523 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; border: 5px white solid"></div>
|
||||
<div style="width: 262.92px; height: 114.08px; left: 737.46px; top: 604.49px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 50px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word">생산성<br/>향상</div>
|
||||
<div style="width: 350px; height: 350px; left: 853px; top: 206px; position: absolute; background: linear-gradient(145deg, #FDC69E 0%, #E0782C 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
|
||||
<div style="width: 280px; height: 280px; left: 887.06px; top: 240.06px; position: absolute; background: linear-gradient(145deg, #BC652B 0%, #A24200 100%), linear-gradient(148deg, #EB5F00 0%, #BC4C00 100%), linear-gradient(150deg, #EC8F53 0%, #CC5200 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 5px white solid"></div>
|
||||
<div style="width: 262.92px; height: 114.08px; left: 896.46px; top: 330.49px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 50px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">안전과<br/>품질</div>
|
||||
<div style="width: 350px; height: 350px; left: 1009px; top: 480px; position: absolute; background: linear-gradient(146deg, white 0%, #253E1F 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
|
||||
<div style="width: 280px; height: 280px; left: 1043.06px; top: 514.06px; position: absolute; background: linear-gradient(154deg, #296B55 0%, #123328 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; border: 5px white solid"></div>
|
||||
<div style="width: 262.92px; height: 114.08px; left: 1053.63px; top: 597.45px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 50px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word">소통과<br/>신뢰</div>
|
||||
<div style="width: 544.20px; height: 70.56px; left: 1518.01px; top: 754.21px; position: absolute; justify-content: center; display: flex; flex-direction: column; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">3D 모델을 통한 오류<br/>최소화 및 Claim 예방</div>
|
||||
<div style="left: 1518px; top: 664px; position: absolute; color: #124133; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">신뢰ㆍ투명성 강화</div>
|
||||
<div style="left: 1518px; top: 541px; position: absolute; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">성과품, Solution을 통한<br/>사용 편리성, 협업 및 의사소통 강화</div>
|
||||
<div style="left: 1518px; top: 456px; position: absolute; color: #124133; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">소통ㆍ이해 원할</div>
|
||||
<div style="width: 478.74px; height: 70.56px; left: 52.01px; top: 546px; position: absolute; text-align: right; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">Analogue 기반 업무를<br/>Digital화 하는 Process 혁신</div>
|
||||
<div style="width: 531.41px; height: 95.35px; left: 0px; top: 456px; position: absolute; text-align: right; color: #604F32; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">신속ㆍ정확성 증진</div>
|
||||
<div style="width: 428.31px; height: 91.34px; left: 102px; top: 734px; position: absolute; text-align: right; justify-content: center; display: flex; flex-direction: column; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">건설비용 및 유지관리비 감소,<br/>인력투입 최소화 등 생산성 향상</div>
|
||||
<div style="width: 446.05px; height: 96.42px; left: 84.68px; top: 662px; position: absolute; text-align: right; justify-content: center; display: flex; flex-direction: column; color: #604F32; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">비용저감ㆍ부가가치 창출</div>
|
||||
<div style="width: 508.49px; height: 91.34px; left: 1233px; top: 78px; position: absolute; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">Copy & Paste로 하향 평준화된<br/>기존 성과물의 품질 향상</div>
|
||||
<div style="left: 1233px; top: 0px; position: absolute; text-align: right; color: #CC5200; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">품질 향상</div>
|
||||
<div style="width: 508.49px; height: 91.34px; left: 331px; top: 78px; position: absolute; text-align: right; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">시설물의 요구성능의 만족, <br/>건설중 및 운영중 안전확보 </div>
|
||||
<div style="left: 645px; top: 0px; position: absolute; text-align: right; color: #CC5200; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">안전성 제고</div>
|
||||
<div style="width: 209px; height: 99px; left: 1135px; top: 233px; position: absolute; transform: rotate(-180deg); transform-origin: top left; border: 3px rgba(92, 78, 49, 0.70) solid"></div>
|
||||
<div style="width: 209px; height: 99px; left: 726px; top: 549px; position: absolute; transform: rotate(90deg); transform-origin: top left; border: 3px rgba(204, 82, 1, 0.70) solid"></div>
|
||||
<div style="width: 130.90px; height: 130.90px; left: 555px; top: 483px; position: absolute; background: linear-gradient(219deg, rgba(213, 170, 137, 0.30) 0%, rgba(115, 115, 115, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
|
||||
<div style="width: 78.96px; height: 78.96px; left: 580.47px; top: 508.47px; position: absolute; background: linear-gradient(154deg, #897445 0%, #3E3523 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
|
||||
<div style="width: 98.33px; height: 42.67px; left: 571.25px; top: 524.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">速</div>
|
||||
<div style="width: 130.90px; height: 130.90px; left: 555px; top: 689px; position: absolute; background: linear-gradient(219deg, rgba(213, 170, 137, 0.30) 0%, rgba(115, 115, 115, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
|
||||
<div style="width: 78.96px; height: 78.96px; left: 580.47px; top: 714.47px; position: absolute; background: linear-gradient(154deg, #897445 0%, #3E3523 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
|
||||
<div style="width: 98.33px; height: 42.67px; left: 571.25px; top: 730.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">利</div>
|
||||
<div style="width: 209px; height: 99px; left: 1329px; top: 758px; position: absolute; transform: rotate(-90deg); transform-origin: top left; border: 3px rgba(204, 82, 1, 0.70) solid"></div>
|
||||
<div style="width: 130.90px; height: 130.90px; left: 859px; top: 22px; position: absolute; background: linear-gradient(146deg, rgba(216.75, 199.77, 103.56, 0.30) 0%, rgba(219.58, 103.10, 14.03, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
|
||||
<div style="width: 78.96px; height: 78.96px; left: 884.47px; top: 47.47px; position: absolute; background: linear-gradient(145deg, #BC652B 0%, #A24200 100%), linear-gradient(148deg, #EB5F00 0%, #BC4C00 100%), linear-gradient(150deg, #EC8F53 0%, #CC5200 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
|
||||
<div style="width: 98.33px; height: 42.67px; left: 875.25px; top: 63.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">安</div>
|
||||
<div style="width: 130.90px; height: 130.90px; left: 1071px; top: 22px; position: absolute; background: linear-gradient(146deg, rgba(216.75, 199.77, 103.56, 0.30) 0%, rgba(219.58, 103.10, 14.03, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
|
||||
<div style="width: 78.96px; height: 78.96px; left: 1096.47px; top: 47.47px; position: absolute; background: linear-gradient(145deg, #BC652B 0%, #A24200 100%), linear-gradient(148deg, #EB5F00 0%, #BC4C00 100%), linear-gradient(150deg, #EC8F53 0%, #CC5200 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
|
||||
<div style="width: 98.33px; height: 42.67px; left: 1087.25px; top: 63.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">質</div>
|
||||
<div style="width: 130.90px; height: 130.90px; left: 1372px; top: 483px; position: absolute; background: linear-gradient(146deg, rgba(96.48, 164.33, 81.25, 0.30) 0%, rgba(36.60, 62.33, 30.82, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
|
||||
<div style="width: 78.96px; height: 78.96px; left: 1397.47px; top: 508.47px; position: absolute; background: linear-gradient(154deg, #296B55 0%, #123328 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
|
||||
<div style="width: 98.33px; height: 42.67px; left: 1388.25px; top: 524.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">通</div>
|
||||
<div style="width: 130.90px; height: 130.90px; left: 1372px; top: 689px; position: absolute; background: linear-gradient(146deg, rgba(96.48, 164.33, 81.25, 0.30) 0%, rgba(36.60, 62.33, 30.82, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
|
||||
<div style="width: 78.96px; height: 78.96px; left: 1397.47px; top: 714.47px; position: absolute; background: linear-gradient(154deg, #296B55 0%, #123328 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
|
||||
<div style="width: 98.33px; height: 42.67px; left: 1388.25px; top: 730.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">信</div>
|
||||
<div style="width: 763px; height: 351px; left: 452.50px; top: 874.28px; position: absolute; transform: rotate(-120deg); transform-origin: top left">
|
||||
<div style="width: 685.47px; height: 836.28px; left: 0px; top: 0px; position: absolute">
|
||||
<div style="width: 685.47px; height: 836.28px; left: 0px; top: 0px; position: absolute; background: linear-gradient(270deg, rgba(115, 115, 115, 0) 0%, rgba(213, 170, 137, 0.33) 100%); background-blend-mode: linear-burn; border-top-left-radius: 175.50px; border-bottom-left-radius: 175.50px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user