@ohos-ports/slides-grab 1.5.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/LICENSE +21 -0
  2. package/README-ko.md +292 -0
  3. package/README.md +301 -0
  4. package/bin/ohos-postinstall.cjs +118 -0
  5. package/bin/ppt-agent.js +620 -0
  6. package/convert.cjs +20 -0
  7. package/native/@img/sharp-libvips-openharmony-arm64/lib/glib-2.0/include/glibconfig.h +220 -0
  8. package/native/@img/sharp-libvips-openharmony-arm64/lib/index.js +1 -0
  9. package/native/@img/sharp-libvips-openharmony-arm64/lib/libexpat.so +0 -0
  10. package/native/@img/sharp-libvips-openharmony-arm64/lib/libffi.so +0 -0
  11. package/native/@img/sharp-libvips-openharmony-arm64/lib/libjpeg.so +0 -0
  12. package/native/@img/sharp-libvips-openharmony-arm64/lib/libpcre2-8.so.0 +0 -0
  13. package/native/@img/sharp-libvips-openharmony-arm64/lib/libvips-cpp.so.42.20.3 +0 -0
  14. package/native/@img/sharp-libvips-openharmony-arm64/lib/libvips.so.42.20.3 +0 -0
  15. package/native/@img/sharp-libvips-openharmony-arm64/package.json +13 -0
  16. package/native/@img/sharp-openharmony-arm64/lib/sharp-openharmony-arm64.node +0 -0
  17. package/native/@img/sharp-openharmony-arm64/package.json +16 -0
  18. package/package.json +95 -0
  19. package/runtimes/claude-code/agents/design-critic-agent.md +23 -0
  20. package/runtimes/codex/agents/slides-grab-design-critic.md +22 -0
  21. package/scripts/build-viewer.js +444 -0
  22. package/scripts/design-gate.js +258 -0
  23. package/scripts/download-video.js +213 -0
  24. package/scripts/editor-server.js +1167 -0
  25. package/scripts/figma-export.js +169 -0
  26. package/scripts/generate-image.js +116 -0
  27. package/scripts/generate-images.js +164 -0
  28. package/scripts/html2pdf.js +822 -0
  29. package/scripts/html2png.js +246 -0
  30. package/scripts/html2pptx.js +162 -0
  31. package/scripts/import-template.js +86 -0
  32. package/scripts/install-runtime.js +216 -0
  33. package/scripts/render-tldraw.js +44 -0
  34. package/scripts/validate-slides.js +221 -0
  35. package/skills/slides-grab/SKILL.md +65 -0
  36. package/skills/slides-grab/references/presentation-workflow-reference.md +61 -0
  37. package/skills/slides-grab-card-news/SKILL.md +35 -0
  38. package/skills/slides-grab-design/SKILL.md +88 -0
  39. package/skills/slides-grab-design/references/beautiful-slide-defaults.md +88 -0
  40. package/skills/slides-grab-design/references/design-gate.md +349 -0
  41. package/skills/slides-grab-design/references/design-rules.md +76 -0
  42. package/skills/slides-grab-design/references/design-system-full.md +568 -0
  43. package/skills/slides-grab-design/references/detailed-design-rules.md +70 -0
  44. package/skills/slides-grab-export/SKILL.md +55 -0
  45. package/skills/slides-grab-export/references/export-rules.md +27 -0
  46. package/skills/slides-grab-export/references/html2pptx.md +627 -0
  47. package/skills/slides-grab-export/references/ooxml.md +427 -0
  48. package/skills/slides-grab-export/references/pptx-skill-reference.md +189 -0
  49. package/skills/slides-grab-html/SKILL.md +67 -0
  50. package/skills/slides-grab-image/SKILL.md +82 -0
  51. package/skills/slides-grab-plan/SKILL.md +68 -0
  52. package/skills/slides-grab-plan/references/design-md-to-slides-conversion.md +135 -0
  53. package/skills/slides-grab-plan/references/outline-format.md +47 -0
  54. package/skills/slides-grab-plan/references/plan-workflow-reference.md +140 -0
  55. package/src/codex-imagen.js +182 -0
  56. package/src/design-diversity-data.js +6932 -0
  57. package/src/design-gate-report.js +244 -0
  58. package/src/design-gate-state.js +329 -0
  59. package/src/design-import.js +164 -0
  60. package/src/design-md-parser.js +415 -0
  61. package/src/design-styles-data.js +1928 -0
  62. package/src/design-styles.js +209 -0
  63. package/src/editor/codex-edit.js +584 -0
  64. package/src/editor/edit-subprocess.js +170 -0
  65. package/src/editor/editor-codex-prompt.md +50 -0
  66. package/src/editor/editor.html +1785 -0
  67. package/src/editor/js/editor-bbox.js +332 -0
  68. package/src/editor/js/editor-chat.js +56 -0
  69. package/src/editor/js/editor-direct-edit.js +238 -0
  70. package/src/editor/js/editor-dom.js +59 -0
  71. package/src/editor/js/editor-init.js +405 -0
  72. package/src/editor/js/editor-navigation.js +54 -0
  73. package/src/editor/js/editor-select.js +558 -0
  74. package/src/editor/js/editor-send.js +175 -0
  75. package/src/editor/js/editor-sse.js +163 -0
  76. package/src/editor/js/editor-state.js +41 -0
  77. package/src/editor/js/editor-type.js +71 -0
  78. package/src/editor/js/editor-utils.js +167 -0
  79. package/src/editor/js/model-registry.js +37 -0
  80. package/src/editor/screenshot.js +82 -0
  81. package/src/export-resolution.cjs +68 -0
  82. package/src/figma.js +71 -0
  83. package/src/html2pptx-scale.cjs +120 -0
  84. package/src/html2pptx.cjs +1262 -0
  85. package/src/image-contract.js +329 -0
  86. package/src/image-native.js +468 -0
  87. package/src/nano-banana.js +841 -0
  88. package/src/ohos-browser-bridge.cjs +272 -0
  89. package/src/pptx-raster-export.cjs +299 -0
  90. package/src/resolve.js +110 -0
  91. package/src/slide-mode.cjs +72 -0
  92. package/src/template-fidelity.js +267 -0
  93. package/src/template-import.js +505 -0
  94. package/src/template-layout.js +261 -0
  95. package/src/template-pack.js +255 -0
  96. package/src/tldraw/render.js +473 -0
  97. package/src/validation/cli.js +120 -0
  98. package/src/validation/core.js +1023 -0
  99. package/templates/chart.html +121 -0
  100. package/templates/closing.html +54 -0
  101. package/templates/content.html +50 -0
  102. package/templates/contents.html +60 -0
  103. package/templates/cover.html +64 -0
  104. package/templates/custom/.gitkeep +0 -0
  105. package/templates/custom/README.md +7 -0
  106. package/templates/design-styles/README.md +20 -0
  107. package/templates/design-styles/preview.html +4438 -0
  108. package/templates/diagram-tldraw.html +56 -0
  109. package/templates/diagram.html +98 -0
  110. package/templates/quote.html +31 -0
  111. package/templates/section-divider.html +43 -0
  112. package/templates/split-layout.html +43 -0
  113. package/templates/statistics.html +55 -0
  114. package/templates/team.html +49 -0
  115. package/templates/timeline.html +59 -0
package/templates/chart.html ADDED
@@ -0,0 +1,121 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
6
+ <style>
7
+ * { margin: 0; padding: 0; box-sizing: border-box; }
8
+ body {
9
+ width: 720pt;
10
+ height: 405pt;
11
+ font-family: 'Pretendard', sans-serif;
12
+ background: #ffffff;
13
+ padding: 36pt 40pt;
14
+ display: flex;
15
+ flex-direction: column;
16
+ color: #111827;
17
+ }
18
+ .chart-grid {
19
+ flex: 1;
20
+ display: grid;
21
+ grid-template-columns: repeat(3, 1fr);
22
+ gap: 14pt;
23
+ margin-top: 18pt;
24
+ }
25
+ .chart-card {
26
+ border: 1px solid #e5e7eb;
27
+ border-radius: 10pt;
28
+ padding: 10pt;
29
+ display: flex;
30
+ flex-direction: column;
31
+ }
32
+ .chart-canvas-wrap {
33
+ flex: 1;
34
+ min-height: 0;
35
+ position: relative;
36
+ }
37
+ canvas {
38
+ width: 100% !important;
39
+ height: 100% !important;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body>
44
+ <div style="display: flex; justify-content: space-between; align-items: baseline;">
45
+ <h2 style="font-size: 28pt; font-weight: 700; letter-spacing: -0.01em;">Quarterly Performance</h2>
46
+ <p style="font-size: 10pt; color: #6b7280;">DATA / CHART.JS</p>
47
+ </div>
48
+
49
+ <p style="font-size: 12pt; color: #4b5563; margin-top: 8pt;">
50
+ Bar, line, pie 차트를 하나의 슬라이드에서 비교하는 템플릿
51
+ </p>
52
+
53
+ <div class="chart-grid">
54
+ <div class="chart-card">
55
+ <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Bar Chart</p>
56
+ <div class="chart-canvas-wrap">
57
+ <canvas id="barChart"></canvas>
58
+ </div>
59
+ </div>
60
+ <div class="chart-card">
61
+ <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Line Chart</p>
62
+ <div class="chart-canvas-wrap">
63
+ <canvas id="lineChart"></canvas>
64
+ </div>
65
+ </div>
66
+ <div class="chart-card">
67
+ <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Pie Chart</p>
68
+ <div class="chart-canvas-wrap">
69
+ <canvas id="pieChart"></canvas>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <p style="font-size: 9pt; color: #9ca3af; margin-top: 10pt;">Source: Sample Dataset</p>
75
+
76
+ <script>
77
+ const labels = ['Q1', 'Q2', 'Q3', 'Q4'];
78
+ const values = [14, 22, 19, 27];
79
+ const colors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444'];
80
+ const shared = { animation: false, responsive: true, maintainAspectRatio: false };
81
+
82
+ new Chart(document.getElementById('barChart'), {
83
+ type: 'bar',
84
+ data: { labels, datasets: [{ data: values, backgroundColor: colors, borderRadius: 4 }] },
85
+ options: {
86
+ ...shared,
87
+ plugins: { legend: { display: false } },
88
+ scales: { y: { beginAtZero: true, grid: { color: '#e5e7eb' } } }
89
+ }
90
+ });
91
+
92
+ new Chart(document.getElementById('lineChart'), {
93
+ type: 'line',
94
+ data: {
95
+ labels,
96
+ datasets: [{
97
+ data: values,
98
+ borderColor: '#2563eb',
99
+ backgroundColor: 'rgba(37,99,235,0.15)',
100
+ fill: true,
101
+ tension: 0.35
102
+ }]
103
+ },
104
+ options: {
105
+ ...shared,
106
+ plugins: { legend: { display: false } },
107
+ scales: { y: { beginAtZero: true, grid: { color: '#e5e7eb' } } }
108
+ }
109
+ });
110
+
111
+ new Chart(document.getElementById('pieChart'), {
112
+ type: 'pie',
113
+ data: { labels, datasets: [{ data: [34, 26, 21, 19], backgroundColor: colors }] },
114
+ options: {
115
+ ...shared,
116
+ plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 9 } } } }
117
+ }
118
+ });
119
+ </script>
120
+ </body>
121
+ </html>
package/templates/closing.html ADDED
@@ -0,0 +1,54 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #1a1a1a;
12
+ padding: 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ justify-content: space-between;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <!-- 로고 -->
21
+ <div style="display: flex; align-items: center; gap: 8pt;">
22
+ <div style="width: 20pt; height: 20pt; background: #fff; border-radius: 4pt; display: flex; align-items: center; justify-content: center;">
23
+ <p style="color: #1a1a1a; font-size: 12pt;">*</p>
24
+ </div>
25
+ <p style="font-size: 12pt; font-weight: 600; color: #ffffff;">LogoName</p>
26
+ </div>
27
+
28
+ <!-- 메인 메시지 -->
29
+ <div>
30
+ <h1 style="font-size: 56pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
31
+ Thank You
32
+ </h1>
33
+ <p style="font-size: 16pt; color: #888; margin-top: 16pt;">
34
+ Questions? Let's discuss.
35
+ </p>
36
+ </div>
37
+
38
+ <!-- 연락처 정보 -->
39
+ <div style="display: flex; gap: 64pt;">
40
+ <div>
41
+ <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Email</p>
42
+ <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">hello@company.com</p>
43
+ </div>
44
+ <div>
45
+ <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Phone</p>
46
+ <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">+82 10-1234-5678</p>
47
+ </div>
48
+ <div>
49
+ <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Website</p>
50
+ <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">www.company.com</p>
51
+ </div>
52
+ </div>
53
+ </body>
54
+ </html>
package/templates/content.html ADDED
@@ -0,0 +1,50 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #ffffff;
12
+ padding: 40pt 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <!-- 헤더 -->
20
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
21
+ <div style="display: flex; align-items: center; gap: 12pt;">
22
+ <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
23
+ <h2 style="font-size: 24pt; font-weight: 600; color: #1a1a1a;">Main Topic</h2>
24
+ </div>
25
+ <p style="font-size: 10pt; color: #999;">02</p>
26
+ </div>
27
+
28
+ <!-- 콘텐츠 영역 -->
29
+ <div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32pt;">
30
+ <div>
31
+ <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point One</h3>
32
+ <p style="font-size: 13pt; color: #666; line-height: 1.7;">
33
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
34
+ </p>
35
+ </div>
36
+ <div>
37
+ <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point Two</h3>
38
+ <p style="font-size: 13pt; color: #666; line-height: 1.7;">
39
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
40
+ </p>
41
+ </div>
42
+ </div>
43
+
44
+ <!-- 푸터 -->
45
+ <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 16pt; border-top: 1px solid #eee;">
46
+ <p style="font-size: 9pt; color: #999;">www.yourwebsite.com</p>
47
+ <p style="font-size: 9pt; color: #999;">©2025 YOUR BRAND</p>
48
+ </div>
49
+ </body>
50
+ </html>
package/templates/contents.html ADDED
@@ -0,0 +1,60 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #b8c4b8;
12
+ padding: 48pt;
13
+ display: grid;
14
+ grid-template-columns: 1fr 1.8fr;
15
+ gap: 48pt;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <!-- 왼쪽: 타이틀 -->
21
+ <div style="display: flex; flex-direction: column; justify-content: flex-end;">
22
+ <p style="font-size: 9pt; color: #3d3d3d; margin-bottom: 16pt;">©2025 YOUR BRAND. ALL RIGHTS RESERVED.</p>
23
+ <h1 style="font-size: 56pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
24
+ Our<br>Contents
25
+ </h1>
26
+ <div style="width: 32pt; height: 32pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 24pt;">
27
+ <p style="font-size: 14pt; color: #1a1a1a;">↗</p>
28
+ </div>
29
+ </div>
30
+
31
+ <!-- 오른쪽: 목차 리스트 -->
32
+ <div style="display: flex; flex-direction: column; justify-content: center; gap: 16pt;">
33
+ <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
34
+ <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
35
+ <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
36
+ <p style="font-size: 14pt; color: #666;">(1)</p>
37
+ </div>
38
+ <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
39
+ <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 2</p>
40
+ <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
41
+ <p style="font-size: 14pt; color: #666;">(2)</p>
42
+ </div>
43
+ <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
44
+ <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 3</p>
45
+ <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
46
+ <p style="font-size: 14pt; color: #666;">(3)</p>
47
+ </div>
48
+ <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
49
+ <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 4</p>
50
+ <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
51
+ <p style="font-size: 14pt; color: #666;">(4)</p>
52
+ </div>
53
+ <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0;">
54
+ <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 5</p>
55
+ <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
56
+ <p style="font-size: 14pt; color: #666;">(5)</p>
57
+ </div>
58
+ </div>
59
+ </body>
60
+ </html>
package/templates/cover.html ADDED
@@ -0,0 +1,64 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #f5f5f0;
12
+ padding: 32pt 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <!-- 헤더 -->
20
+ <div style="display: flex; justify-content: space-between; align-items: center;">
21
+ <div style="display: flex; align-items: center; gap: 16pt;">
22
+ <div style="display: flex; align-items: center; gap: 8pt;">
23
+ <div style="width: 18pt; height: 18pt; background: #1a1a1a; border-radius: 3pt; display: flex; align-items: center; justify-content: center;">
24
+ <p style="color: #fff; font-size: 10pt;">*</p>
25
+ </div>
26
+ <p style="font-size: 11pt; font-weight: 600; color: #1a1a1a;">LogoName</p>
27
+ </div>
28
+ <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">PRESENTATION</p>
29
+ </div>
30
+ <div style="display: flex; align-items: center; gap: 8pt;">
31
+ <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">OUR PROJECT</p>
32
+ <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
33
+ <p style="font-size: 12pt; color: #1a1a1a;">↘</p>
34
+ </div>
35
+ </div>
36
+ </div>
37
+
38
+ <!-- 메인 타이틀 -->
39
+ <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
40
+ <h1 style="font-size: 72pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
41
+ Business Deck
42
+ </h1>
43
+ <p style="font-size: 14pt; color: #666; margin-top: 24pt;">
44
+ <span style="color: #999;">Presented by</span> <span style="font-weight: 500; color: #1a1a1a;">Luna Martinez</span>
45
+ </p>
46
+ </div>
47
+
48
+ <!-- 푸터 정보 -->
49
+ <div style="display: flex; gap: 64pt;">
50
+ <div>
51
+ <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Contact</p>
52
+ <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">334556774</p>
53
+ </div>
54
+ <div>
55
+ <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Date</p>
56
+ <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">March 2025</p>
57
+ </div>
58
+ <div>
59
+ <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Website</p>
60
+ <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">www.yourwebsite.com</p>
61
+ </div>
62
+ </div>
63
+ </body>
64
+ </html>
package/templates/custom/.gitkeep ADDED
File without changes
package/templates/custom/README.md ADDED
@@ -0,0 +1,7 @@
1
+ # Custom Templates
2
+
3
+ 사용자 커스텀 템플릿을 이 디렉토리에 추가하세요.
4
+
5
+ - 파일 형식: `.html`
6
+ - 권장 명명: `kebab-case.html`
7
+ - 기본 템플릿은 상위 `templates/` 디렉토리를 참고해 복사/수정하세요.
package/templates/design-styles/README.md ADDED
@@ -0,0 +1,20 @@
1
+ # Design Style Collections
2
+
3
+ slides-grab bundles 95 design styles: 30 derived from [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles) (MIT), 5 slides-grab originals, and 60 PPT packs derived from [epoko77-ai/design-diversity](https://github.com/epoko77-ai/design-diversity) (MIT).
4
+
5
+ These styles are reference directions for slide generation, not drop-in HTML slide templates. Agents may also design fully custom visuals beyond the bundled collection.
6
+
7
+ ## Recommended workflow
8
+
9
+ 1. `slides-grab list-styles`
10
+ 2. `slides-grab preview-styles` to open the visual gallery in browser
11
+ 3. Tell the agent which style to use, or ask for something custom
12
+
13
+ The preview/select flow is intentionally simple: it keeps design approval inside the CLI and a local HTML preview page instead of adding a separate app.
14
+
15
+ ## Citation
16
+
17
+ - Upstream collection: `corazzon/pptx-design-styles`
18
+ - Upstream design catalog: `epoko77-ai/design-diversity`
19
+ - URL: <https://github.com/corazzon/pptx-design-styles>
20
+ - Reference used in this repo: `references/styles.md`