Berikut adalah artikel yang membahas cara memanfaatkan AI (Claude dan Gemini) untuk menyulap modul ajar Anda menjadi lebih menarik menggunakan Prompt yang kami sediakan.
Modul ajar adalah ujung tombak dalam proses pembelajaran. Namun, mari kita akui satu hal: modul ajar yang hanya berisi deretan teks hitam di atas kertas putih sering kali membuat siswa dan bahkan guru yang membacanya merasa cepat bosan. Di era digital ini, tampilan visual yang menarik dan terstruktur sangat penting untuk menjaga fokus dan minat belajar.
Kabar baiknya, Anda tidak perlu menjadi seorang desainer grafis profesional untuk merombak modul ajar Anda. Dengan bantuan kecerdasan buatan seperti Claude AI dan Gemini AI, Anda bisa me-remake atau makeover dokumen yang tadinya polos menjadi lebih terstruktur, interaktif, dan "berwarna".
Berikut adalah panduan praktis mengenai cara menggunakan Claude dan Gemini untuk merancang ulang tampilan modul ajar Anda, dilengkapi dengan prompt (perintah instruksi) spesifik untuk masing-masing AI yang dapat Bapak/Ibu salin dan gunakan secara langsung.
Pengenalan Singkat, Panduan, dan Prompt
Meskipun banyak platform AI yang tersedia, Gemini dan Claude saat ini menawarkan fitur ruang kerja (workspace) terintegrasi yang paling mumpuni untuk penyusunan dokumen panjang, yang sangat cocok digunakan untuk pengolahan data administrasi tenaga kependidikan di era serba AI ini.
⚠️Catatan Penting: Penggunaan Versi Gratis vs. Pro (Berbayar)
Google Gemini
Versi Gratis: Menyediakan akses ke model dasar (Flash) yang sangat mumpuni untuk penyusunan dokumen harian. Bapak/Ibu masih tetap bisa akses ke model Gemini Pro yang lebih analitis di Versi Gratis, namun dengan kuota yang dibatasi secara dinamis. Jika batas penggunaan model Pro habis, sistem akan otomatis mengalihkan obrolan ke model dasar.
Versi Advanced (Berbayar): Memberikan akses prioritas dan batas penggunaan yang jauh lebih tinggi untuk model Gemini Pro, serta kapasitas unggahan dokumen yang lebih besar.
Claude AI
Versi Gratis: Tetap memberikan akses penuh ke fitur pemrograman tata letak visual (Artifacts). Namun, Claude memiliki batasan jumlah pesan yang cukup ketat. Jika kuota habis, pengguna harus menunggu beberapa jam hingga sistem mereset ulang batasan tersebut.
Versi Pro (Berbayar): Menawarkan kuota pesan hingga 5 kali lipat lebih banyak dibandingkan versi gratis dan menjamin prioritas akses saat peladen (server) sedang sibuk.
💡 Saran Praktis: Untuk penggunaan standar, versi gratis dari kedua platform ini sudah mencukupi
Panduan dan Prompt
Berikut adalah langkah praktis yang bisa Anda terapkan langsung:
1. Akses dan Buat Akun Gemini AI atau Claude AI
Langkah pertama tentu saja mengunjungi situs resminya. Buka browser Anda dan ketikkan claude.ai. Jika Anda baru pertama kali menggunakannya, Anda perlu mendaftar (Sign Up) menggunakan alamat email atau langsung menautkan akun Google Anda. Prosesnya sangat cepat dan gratis untuk fitur dasarnya.
2. Siapkan File Modul Ajar (Tersedia di blog ini)
Setelah masuk ke salah satu platform AI tersebut, langkah selanjutnya adalah menyiapkan dokumen modul ajar yang ingin Anda transformasikan (dalam bentuk file word).
Kami telah menyediakan berbagai modul ajar deep learning siap pakai di blog ini mulai dari versi gratis hingga berbayar, yang telah disusun sesuai Capaian Pembelajaran (CP) 2025 sesuai Keputusan Kepala BSKAP Nomor 046/H/KR/2025.
3. Gunakan "Prompt" (Perintah) yang Spesifik
Kunci keberhasilan menggunakan AI ada pada perintah Anda. Jangan hanya meminta, Perbaiki modul ini. Cobalah gunakan prompt yang lebih detail agar Claude dan Gemini memahami kebutuhan visual Anda.
3.1 PANDUAN PROMPT GEMINI
Alur singkatnya :
Upload 1 file modul ajar.docx
Pilih Alat dan klik Canvas (Terletak di bagian Kiri, sebelah tombol +)
Pilih Mode Pro (Terletak di bagian Kanan)
Kemudian masukkan Prompt dibawah ini, dan enter
Tunggu sampai selesai dan jangan lakukan apa pun
💡 Prompt Gemini AI (Pembuat Modul Ajar HTML)
Anda adalah AI Ahli Pemrograman HTML & Desain Modul Ajar Profesional. Tugas Anda mengubah teks Modul Ajar menjadi Single HTML File yang interaktif dan siap diekspor ke MS Word.
🔴 ATURAN KONTEN & PEMISAHAN TABEL (HARGA MATI):
1. COPY-PASTE UTUH: Salin seluruh teks materi 100% tanpa meringkas atau memotong kata!
2. TAMBAHAN TRIVIA OTOMATIS: Anda WAJIB membuat dan menambahkan 1-2 fakta unik/trivia cerdas yang relevan dengan materi bab ini ke dalam kotak "Tahukah Kamu?" (walaupun di teks mentah aslinya tidak ada). Letakkan di antara tabel agar menarik.
3. ATOMISASI BARIS: Setiap poin, indikator, atau langkah kegiatan WAJIB diletakkan di dalam tag <tr> baru yang terpisah. JANGAN ditumpuk di satu sel!
4. TABEL HARUS TERPISAH: Pisahkan setiap Section dan KHUSUSNYA SETIAP PERTEMUAN ke dalam <table> tersendiri.
5. BOLD OTOMATIS: Cetak tebal kata/frasa kunci di awal kalimat pada kolom deskripsi.
🎨 ATURAN STRUKTUR HTML (GUNAKAN CLASS INI SAJA):
Gunakan kerangka ini untuk semua tabel konten:
<table class="section-table doc-export">
<tr class="header-lv1"><td colspan="2">JUDUL UTAMA (Contoh: A. IDENTITAS)</td></tr>
<tr class="header-lv2"><td colspan="2">Sub-Judul / Topik</td></tr>
<tr class="header-lv3"><td colspan="2">Judul Kegiatan (Contoh: KEGIATAN INTI)</td></tr>
<tr class="content-row"><td class="label-col">Label Kiri</td><td>Isi Kanan</td></tr>
<tr class="content-row"><td colspan="2"><b>Kata Kunci:</b> Penjelasan panjang...</td></tr>
</table>
💡 KHUSUS KOTAK TRIVIA (WAJIB DITAMBAHKAN):
<div class="callout doc-export"><h3>TAHUKAH KAMU?</h3><p>[ISI DENGAN FAKTA UNIK BUATAN ANDA YANG RELEVAN]</p></div>
Khusus Tanda Tangan, gunakan:
<table class="doc-export-ttd" style="width:100%; margin-top:50px; border:none;">...</table>
⚙️ KODE BOILERPLATE WAJIB (JANGAN DIUBAH!):
Gunakan struktur HTML, CSS, dan JS di bawah ini 100% PERSIS. Anda HANYA bertugas mengisi bagian "<!-- ISI KONTEN DISINI -->" dengan teks dari saya.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Modul Ajar</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #f1f5f9; display: flex; flex-direction: column; align-items: center; padding: 40px 20px; font-family: 'Times New Roman', Times, serif !important; }
p, div, span, td, th, h1, h2, h3 { margin: 0 !important; }
.document-container { background-color: #ffffff; width: 100%; max-width: 1000px; padding: 50px 70px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.title-box { background-color: #1F3864; padding: 15px; text-align: center; border: 1px solid #1F3864; }
.title-box h1 { color: #FFFFFF; font-size: 16pt; font-weight: bold; text-transform: uppercase; }
.subtitle-box-1 { background-color: #2E75B6; padding: 10px; text-align: center; border-left: 1px solid #2E75B6; border-right: 1px solid #2E75B6; }
.subtitle-box-1 h2 { color: #FFFFFF; font-size: 12pt; font-weight: bold; text-transform: uppercase; }
.subtitle-box-2 { background-color: #D6E4F7; padding: 10px; text-align: center; margin-bottom: 30px !important; border-bottom: 1px solid #D6E4F7; border-left: 1px solid #D6E4F7; border-right: 1px solid #D6E4F7; }
.subtitle-box-2 h2 { color: #1F3864; font-size: 12pt; font-weight: bold; text-transform: uppercase; }
.section-table { width: 100%; margin-bottom: 20px !important; border-collapse: collapse; border: 1px solid #2E75B6; }
.section-table th, .section-table td { border: 1px solid #2E75B6; padding: 4px 8px; font-size: 11pt; line-height: 1.15; vertical-align: top; }
.header-lv1 td, .header-lv1 th { background-color: #1F3864 !important; color: white !important; font-size: 12pt !important; text-transform: uppercase; text-align: center !important; font-weight: bold !important; }
.header-lv2 td { background-color: #2E75B6 !important; color: white !important; font-size: 11pt !important; text-align: center !important; font-style: italic !important; font-weight: normal !important; }
.header-lv3 td { background-color: #1F3864 !important; color: white !important; font-size: 11pt !important; text-transform: uppercase; text-align: left !important; font-weight: bold !important; }
.content-row td { color: #000000 !important; text-align: justify; }
.label-col { font-weight: bold; width: 25%; text-align: left !important; }
.callout { background-color: #FFF2CC; padding: 12px 18px; margin-bottom: 20px !important; border-left: 6px solid #C55A11; }
.callout h3 { color: #C55A11; font-size: 12pt; margin-bottom: 5px !important; font-weight: bold; }
.callout p { font-size: 11pt; line-height: 1.15; text-align: justify; color: #000; }
.btn-export { position: fixed; top: 20px; right: 20px; background: #C55A11; color: white; border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; font-weight: bold; font-family: 'Times New Roman'; font-size: 12pt; z-index: 1000; }
.doc-export-ttd td { border: none !important; text-align: center; }
</style>
</head>
<body>
<button class="btn-export" onclick="exportToWord()">Export to DOCX</button>
<div class="document-container">
<div class="title-box"><h1>MODUL AJAR</h1></div>
<div class="subtitle-box-1"><h2>MATA PELAJARAN : [ISI DISINI]</h2></div>
<div class="subtitle-box-2"><h2>BAB : [ISI DISINI]</h2></div>
<!-- ISI KONTEN DISINI (GUNAKAN TABEL & CALLOUT SESUAI ATURAN) -->
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.section-table').forEach(table => {
let rowCount = 0;
table.querySelectorAll('tr').forEach(tr => {
if (tr.classList.contains('header-lv1') || tr.classList.contains('header-lv2') || tr.classList.contains('header-lv3')) {
rowCount = 0;
} else if (tr.classList.contains('content-row')) {
rowCount++;
tr.querySelectorAll('td').forEach(td => { td.style.backgroundColor = (rowCount % 2 === 0) ? '#EBF3FB' : '#FFFFFF'; });
}
});
});
});
function exportToWord() {
var header = "<html xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'>";
header += "<!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom><w:DoNotOptimizeForBrowser/></w:WordDocument></xml><![endif]-->";
header += "<style>table { border-collapse: collapse; width: 100%; } p, td, div, span { margin: 0pt !important; mso-margin-top-alt: 0pt; mso-margin-bottom-alt: 0pt; padding: 0; line-height: 1.15; font-family: 'Times New Roman', serif; }</style></head><body>";
var body = "";
body += "<table width='100%' border='0' cellspacing='0' cellpadding='0' style='border-collapse: collapse; border: none;'>";
let title1 = document.querySelector('.title-box h1').innerText;
let title2 = document.querySelector('.subtitle-box-1 h2').innerText;
let title3 = document.querySelector('.subtitle-box-2 h2').innerText;
body += `<tr><td bgcolor='#1F3864' style='border: none; text-align:center; padding: 12pt 10pt;'><p style='color:#FFFFFF; font-size:16pt; font-weight:bold; margin:0;'><span style='color:#FFFFFF;'>${title1}</span></p></td></tr>`;
body += `<tr><td bgcolor='#2E75B6' style='border: none; text-align:center; padding: 8pt 10pt;'><p style='color:#FFFFFF; font-size:12pt; font-weight:bold; margin:0;'><span style='color:#FFFFFF;'>${title2}</span></p></td></tr>`;
body += `<tr><td bgcolor='#D6E4F7' style='border: none; text-align:center; padding: 8pt 10pt;'><p style='color:#1F3864; font-size:12pt; font-weight:bold; margin:0;'><span style='color:#1F3864;'>${title3}</span></p></td></tr>`;
body += "</table>";
body += "<p style='margin: 0pt; font-size: 12pt;'> </p>";
document.querySelectorAll('.doc-export').forEach(el => {
let clone = el.cloneNode(true);
if (clone.tagName === 'TABLE') {
clone.setAttribute('border', '1'); clone.setAttribute('cellpadding', '4'); clone.setAttribute('cellspacing', '0');
clone.style.borderCollapse = 'collapse'; clone.style.width = '100%';
let rowCount = 0;
clone.querySelectorAll('tr').forEach((tr) => {
let tds = tr.querySelectorAll('td, th');
tds.forEach(td => { td.style.border = '1pt solid #2E75B6'; td.style.padding = '4pt 8pt'; td.style.lineHeight = '1.15'; td.setAttribute('valign', 'top'); });
if (tr.classList.contains('header-lv1')) {
rowCount = 0; tds.forEach(td => { td.setAttribute('bgcolor', '#1F3864'); td.style.backgroundColor = '#1F3864'; td.style.color = '#FFFFFF'; td.style.fontWeight = 'bold'; td.style.textAlign = 'center'; td.style.textTransform = 'uppercase'; td.style.fontSize = '12pt'; td.innerHTML = `<span style="color: #ffffff;">${td.innerHTML}</span>`; });
} else if (tr.classList.contains('header-lv2')) {
rowCount = 0; tds.forEach(td => { td.setAttribute('bgcolor', '#2E75B6'); td.style.backgroundColor = '#2E75B6'; td.style.color = '#FFFFFF'; td.style.fontStyle = 'italic'; td.style.textAlign = 'center'; td.style.fontSize = '11pt'; td.innerHTML = `<span style="color: #ffffff;">${td.innerHTML}</span>`; });
} else if (tr.classList.contains('header-lv3')) {
rowCount = 0; tds.forEach(td => { td.setAttribute('bgcolor', '#1F3864'); td.style.backgroundColor = '#1F3864'; td.style.color = '#FFFFFF'; td.style.fontWeight = 'bold'; td.style.textAlign = 'left'; td.style.textTransform = 'uppercase'; td.style.fontSize = '11pt'; td.innerHTML = `<span style="color: #ffffff;">${td.innerHTML}</span>`; });
} else if (tr.classList.contains('content-row')) {
rowCount++; let bgColor = (rowCount % 2 === 0) ? '#EBF3FB' : '#FFFFFF';
tds.forEach((td, idx) => { td.setAttribute('bgcolor', bgColor); td.style.backgroundColor = bgColor; td.style.color = '#000000'; td.style.fontSize = '11pt'; if (tr.querySelector('.label-col') && idx === 0) { td.style.fontWeight = 'bold'; td.setAttribute('width', '25%'); td.style.width = '25%'; } });
}
});
clone.querySelectorAll('*').forEach(child => child.removeAttribute('class')); clone.removeAttribute('class');
} else if (clone.classList.contains('callout')) {
let calloutTable = document.createElement('table');
calloutTable.setAttribute('width', '100%');
calloutTable.setAttribute('cellpadding', '10');
calloutTable.setAttribute('cellspacing', '0');
calloutTable.style.borderCollapse = 'collapse';
calloutTable.style.width = '100%';
let calloutTr = document.createElement('tr');
let calloutTd = document.createElement('td');
calloutTd.setAttribute('bgcolor', '#FFF2CC');
calloutTd.style.backgroundColor = '#FFF2CC';
calloutTd.style.border = 'none';
calloutTd.style.borderLeft = '5pt solid #C55A11';
calloutTd.style.padding = '8pt 12pt';
let h3 = clone.querySelector('h3');
let p = clone.querySelector('p');
calloutTd.innerHTML = `<p style="margin: 0 0 5pt 0; font-size: 12pt; font-weight: bold; color: #C55A11;">${h3 ? h3.innerText : 'TAHUKAH KAMU?'}</p>` +
`<p style="margin: 0; font-size: 11pt; color: #000000; text-align: justify; line-height: 1.15;">${p ? p.innerHTML : ''}</p>`;
calloutTr.appendChild(calloutTd);
calloutTable.appendChild(calloutTr);
clone = calloutTable;
}
body += clone.outerHTML + "<p style='margin: 0pt; font-size: 12pt;'> </p>";
});
body += document.querySelector('.doc-export-ttd').outerHTML;
var blob = new Blob(['\ufeff', header + body + "</body></html>"], { type: 'application/msword' });
var link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = 'Modul_Ajar_Auto.doc'; link.click();
}
</script>
</body>
</html>
Teks Modul Ajarnya:
[DOKUMEN YANG DIUPLOAD]
Setelah selesai klik tombol expor ke docx di pojok kanan atas
Sesuaikan Warna Favorit : "ubah warnanya jadi warna warni elegan, tanpa merubah 1 pun struktur dan code pada dokumen",~ Wajib pakai prompt ini ya agar hasilnya tidak berantakan, DAN harus dilakukan setelah proses Generate Pertama (Pakai Prompt Utama) selesai dan berhasil.
3.1 PANDUAN PROMPT CLAUDE
Alur singkatnya :
Upload 1 file modul ajar.docx
Masukkan Prompt dibawah ini, dan enter
Tunggu sampai selesai dan jangan lakukan apa pun
💡 Prompt Claude AI
Saya memiliki modul ajar yang masih sangat polos dan membosankan. Tolong struktur ulang menjadi pentabelan berwarna dan lebih menarik. Tambahkan juga elemen-elemen berikut:
1. Kotak 'Tahukah Kamu?' (Callout box) untuk fakta unik.
2. Tidak ada penambahan atau pengurangan kata dan kalimat.
3. Tidak ada icon, emote, atau yang lainnya.
4. Font Times New Roman.
5. Penjelasan panjang harus rata kanan kiri (Justify) agar rapi.
6. Output Docx.
7. Bagian TTD (paling bawah), tabel no border, no color shading.
8. Warna Warni Elegan.
9. Kertas A4
Kesimpulan
Mengubah dokumen modul ajar dari "hitam putih yang membosankan" menjadi dokumen yang interaktif dan penuh warna kini bukan lagi pekerjaan yang memakan waktu berhari-hari. Dengan menggunakan Claude AI sebagai asisten penyusun dan penata letak, Anda bisa menghemat waktu berjam-jam dan menyajikan pengalaman belajar yang jauh lebih menyenangkan bagi siswa-siswi Anda.
Ki Hajar Dewantara : “Ing Ngarsa Sung Tuladha Ing Madya Mangun Karsa Tut Wuri Handayani”,- Di depan memberi contoh, di tengah memberi semangat dan di belakang memberikan kekuatan.