P Luthfi's Playground UI

CSS style reference

One visual system for any experiment.

Playground UI menyeragamkan tampilan: token, 13 color scale, tipografi fix, 145 icon, card/button/alert dengan 8 tone, dan experiment kit (chart, log, transcript LLM). Struktur dan isi eksperimen tetap bebas.

Get started Browse components

Installation

Setiap HTML eksperimen cukup import font dan stylesheet utama. Setelah itu pakai class komponen yang sudah disediakan. 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&family=Roboto+Mono:wght@400;500&family=Roboto+Serif:wght@400;600&family=Roboto+Condensed:wght@400;700&display=swap"
  rel="stylesheet"
>
<link rel="stylesheet" href="style/style.css">

Design tokens

Fondasi warna, spacing, radius, shadow, dan font. Pakai token dulu sebelum bikin style custom.

NameTokenValueUse case
Ink--color-ink#202124Teks utama dan heading.
Muted--color-muted#5f6368Teks sekunder, deskripsi, metadata.
Canvas--color-canvas#f8fafdBackground utama halaman.
Surface--color-surface#ffffffPanel, card, area konten.
Line--color-line#dadce0Border dan divider.
Accent--color-accent#1a73e8Button utama, link, focus.
Accent deep--color-accent-deep#174ea6Hover, teks di atas accent soft.
Accent soft--color-accent-soft#e8f0feBackground highlight.
Success--color-success#188038Selesai, valid, passed.
Warning--color-warning#f9ab00Butuh review. Teks pakai --color-warning-ink.
Warning ink--color-warning-ink#b06000Teks warning yang terbaca.
Danger--color-danger#d93025Error, gagal, tidak valid.

Spacing

TokenValueVisual
--space-14px
--space-28px
--space-312px
--space-416px
--space-524px
--space-632px
--space-748px
--space-872px

Radius

--radius-sm4px · Input, button, chip
--radius-md8px · Card, panel, alert
--radius-lg12px · Hero, modal
--radius-pill999px · Badge, pill

Shadow

Default card: border saja
--shadow-soft · hover ringan
--shadow-panel · panel menonjol
.ui-card--elevated

Color palette

Core palette untuk UI. Extended palette untuk kategori, tag, avatar, dan chart. Jaga rasio: banyak netral, sedikit aksen.

Core

Ink#202124Heading, body
Muted#5f6368Deskripsi, metadata
Canvas#f8fafdBackground page
Surface#ffffffCard, panel
Line#dadce0Border, divider
Accent#1a73e8CTA, link, focus
Accent soft#e8f0feActive bg
Success#188038Passed, valid
Warning#f9ab00Review, pending
Danger#d93025Failed, error

Extended (step 600)

Blue#1a73e8var(--blue-600)
Indigo#3949abvar(--indigo-600)
Purple#9334e6var(--purple-600)
Pink#e52592var(--pink-600)
Red#d93025var(--red-600)
Orange#e8710avar(--orange-600)
Yellow#f9ab00var(--yellow-600)
Lime#c0ca33var(--lime-600)
Green#1e8e3evar(--green-600)
Teal#00897bvar(--teal-600)
Cyan#12b5cbvar(--cyan-600)
Brown#6d4c41var(--brown-600)

Data visualization series

Urutan warna untuk chart kategori. Pakai berurutan, maksimal 8 series.

Series 1 --series-1Series 2 --series-2Series 3 --series-3Series 4 --series-4Series 5 --series-5Series 6 var(--pink-600)Series 7 var(--yellow-600)Series 8 var(--indigo-500)

Color scales

13 hue, masing-masing 10 tingkat dari 50 (paling terang) sampai 900 (paling gelap). Token: var(--blue-600), var(--teal-100), dst. Teks di tiap step otomatis putih/hitam sesuai kontras.

Blue--blue-*
50#e8f0fe
100#d2e3fc
200#aecbfa
300#8ab4f8
400#669df6
500#4285f4
600#1a73e8
700#1967d2
800#185abc
900#174ea6
Indigo--indigo-*
50#e8eaf6
100#c5cae9
200#9fa8da
300#7986cb
400#5c6bc0
500#3f51b5
600#3949ab
700#303f9f
800#283593
900#1a237e
Purple--purple-*
50#f3e8fd
100#e9d2fd
200#d7aefb
300#c58af9
400#af5cf7
500#a142f4
600#9334e6
700#8430ce
800#7627bb
900#681da8
Pink--pink-*
50#fde7f3
100#fdcfe8
200#fba9d6
300#ff8bcb
400#ff63b8
500#f538a0
600#e52592
700#d01884
800#b80672
900#9c166b
Red--red-*
50#fce8e6
100#fad2cf
200#f6aea9
300#f28b82
400#ee675c
500#ea4335
600#d93025
700#c5221f
800#b31412
900#a50e0e
Orange--orange-*
50#feefe3
100#fedfc8
200#fdc69c
300#fcad70
400#fa903e
500#fa7b17
600#e8710a
700#d56e0c
800#c26401
900#b06000
Yellow--yellow-*
50#fef7e0
100#feefc3
200#fde293
300#fdd663
400#fcc934
500#fbbc04
600#f9ab00
700#f29900
800#ea8600
900#e37400
Lime--lime-*
50#f9fbe7
100#f0f4c3
200#e6ee9c
300#dce775
400#d4e157
500#cddc39
600#c0ca33
700#afb42b
800#9e9d24
900#827717
Green--green-*
50#e6f4ea
100#ceead6
200#a8dab5
300#81c995
400#5bb974
500#34a853
600#1e8e3e
700#188038
800#137333
900#0d652d
Teal--teal-*
50#e0f2f1
100#b2dfdb
200#80cbc4
300#4db6ac
400#26a69a
500#009688
600#00897b
700#00796b
800#00695c
900#004d40
Cyan--cyan-*
50#e4f7fb
100#cbf0f8
200#a1e4f2
300#78d9ec
400#4ecde6
500#24c1e0
600#12b5cb
700#129eaf
800#098591
900#007b83
Brown--brown-*
50#efebe9
100#d7ccc8
200#bcaaa4
300#a1887f
400#8d6e63
500#795548
600#6d4c41
700#5d4037
800#4e342e
900#3e2723
Grey--grey-*
50#f8f9fa
100#f1f3f4
200#e8eaed
300#dadce0
400#bdc1c6
500#9aa0a6
600#80868b
700#5f6368
800#3c4043
900#202124

Tonal pairs

Kombinasi background + teks yang aman dibaca. 50/100 untuk background lembut, 800/900 untuk teks di atasnya, 600 untuk solid.

50 + 800--blue-50 / -800
100 + 900--blue-100 / -900
600 + white--blue-600
900 + 50--blue-900 / -50
50 + 800--indigo-50 / -800
100 + 900--indigo-100 / -900
600 + white--indigo-600
900 + 50--indigo-900 / -50
50 + 800--purple-50 / -800
100 + 900--purple-100 / -900
600 + white--purple-600
900 + 50--purple-900 / -50
50 + 800--pink-50 / -800
100 + 900--pink-100 / -900
600 + white--pink-600
900 + 50--pink-900 / -50
50 + 800--red-50 / -800
100 + 900--red-100 / -900
600 + white--red-600
900 + 50--red-900 / -50
50 + 800--orange-50 / -800
100 + 900--orange-100 / -900
600 + ink--orange-600
900 + 50--orange-900 / -50
50 + 800--yellow-50 / -800
100 + 900--yellow-100 / -900
600 + ink--yellow-600
900 + 50--yellow-900 / -50
50 + 800--lime-50 / -800
100 + 900--lime-100 / -900
600 + ink--lime-600
900 + 50--lime-900 / -50
50 + 800--green-50 / -800
100 + 900--green-100 / -900
600 + white--green-600
900 + 50--green-900 / -50
50 + 800--teal-50 / -800
100 + 900--teal-100 / -900
600 + white--teal-600
900 + 50--teal-900 / -50
50 + 800--cyan-50 / -800
100 + 900--cyan-100 / -900
600 + ink--cyan-600
900 + 50--cyan-900 / -50
50 + 800--brown-50 / -800
100 + 900--brown-100 / -900
600 + white--brown-600
900 + 50--brown-900 / -50
50 + 800--grey-50 / -800
100 + 900--grey-100 / -900
600 + ink--grey-600
900 + 50--grey-900 / -50
Aturan pakai

Untuk status tetap pakai tone semantic (success/warning/danger). Scale dipakai untuk kategori, tag, avatar, chart, dan ilustrasi. Hindari teks di step 300–500 di atas putih (kontras rendah).

Dark mode

Semua komponen punya versi gelap. Otomatis ikut setting sistem (prefers-color-scheme), atau paksa per halaman dengan <html data-theme="dark"> / data-theme="light". Tombol Theme di kanan atas menyimpan pilihan di browser ini.

TokenLightDarkUse
--color-canvas#f8fafd#111318Background halaman
--color-surface#ffffff#1b1d22Card, panel
--color-surface-2#fbfcff#22252bHeader tabel, footer card
--color-line#dadce0#3c4043Border
--color-ink#202124#e8eaedTeks utama
--color-muted#5f6368#9aa0a6Teks sekunder
--color-accent#1a73e8#8ab4f8Link, CTA (teks di atasnya: --color-on-accent)
--color-success / warning / danger600-level300-level, soft jadi tint gelapStatus
Untuk warna custom

Pakai token (var(--color-surface), var(--tone-soft)) bukan hex, supaya ikut berubah di dark mode. Color scale (--blue-600, dst) sengaja tetap sama di kedua mode.

Typography

Satu keluarga font: Roboto. Ukuran memakai skala fix dalam px (bukan range). Di layar ≤ 720px, hanya ukuran display dan heading yang turun satu step.

Font family

Roboto--font-body
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !?&@#%()

Semua UI: body, heading, label, tombol, tabel. Class: .font-body

Roboto Mono--font-mono
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !?&@#%()

Code, log, angka teknis, token, path file. Class: .font-mono

Roboto Serif--font-serif
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !?&@#%()

Opsional: kutipan, catatan panjang, narasi esai. Class: .font-serif

Roboto Condensed--font-condensed
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !?&@#%()

Opsional: tabel padat, label chart, axis. Class: .font-condensed

Weights

.fw-300 LightEksperimen bikin keputusan lebih jelas
.fw-400 RegularEksperimen bikin keputusan lebih jelas
.fw-500 MediumEksperimen bikin keputusan lebih jelas
.fw-700 BoldEksperimen bikin keputusan lebih jelas
.fw-900 BlackEksperimen bikin keputusan lebih jelas

Hierarchy example

Experiment · 2026-11-02

Few-shot vs zero-shot

Tiga contoh menaikkan accuracy 6.2 poin.

Setup

Model, dataset, dan seed sama untuk semua variant.

Parameter

Temperature 0.2 · n = 1,200 · seed 42

Figure 1. Accuracy per variant.

Type scale

Role / classSampleDesktop size / lineMobile size / lineWeightTrackingUse
Display XL
.text-display-xl		Ruang eksperimen64px / 72px44px / 52px700-0.04emAngka hero / cover
Display LG
.text-display-lg		Ruang eksperimen56px / 64px40px / 48px700-0.04emLanding title
Display
.text-display		Ruang eksperimen48px / 56px36px / 44px700-0.035emHero h1 (.docs-hero h1)
Heading XL
.text-heading-xl		Ruang eksperimen40px / 48px32px / 40px700-0.03emPage title (h1)
Heading LG
.text-heading-lg		Ruang eksperimen32px / 40px26px / 34px700-0.025emSection (h2)
Heading
.text-heading		Ruang eksperimen24px / 32px22px / 30px700-0.02emSub-section
Title LG
.text-title-lg		Ruang eksperimen20px / 28px20px / 28px700-0.01emCard title besar
Title
.text-title		Ruang eksperimen18px / 26px18px / 26px7000Card title (h3)
Title SM
.text-title-sm		Ruang eksperimen16px / 24px16px / 24px5000List title, label kuat
Body LG
.text-body-lg		Ruang eksperimen18px / 28px18px / 28px4000Lead paragraph
Body
.text-body		Ruang eksperimen16px / 26px16px / 26px4000Paragraf default
Body SM
.text-body-sm		Ruang eksperimen14px / 22px14px / 22px4000Tabel, metadata, helper
Caption
.text-caption		Ruang eksperimen12px / 18px12px / 18px4000Caption figure, timestamp
Micro
.text-micro		Ruang eksperimen11px / 16px11px / 16px5000.02emLabel chart, kode kecil
Overline
.text-overline		Ruang eksperimen12px / 18px12px / 18px7000.08emKicker uppercase (hemat)

Rules

  • Body 16px / 26px. Teks boleh selebar container, tidak ada batas karakter per baris.
  • Sentence case untuk heading, label, tombol. Uppercase hanya .text-overline.
  • Angka di tabel pakai .num (tabular, rata kanan).
  • Code, path, token pakai Roboto Mono (otomatis untuk code, pre, kbd).
  • Skala ini referensi. Halaman eksperimen boleh pakai ukuran sendiri.

Utilities

"Data tanpa konteks cuma angka."

ROBOTO CONDENSED · axis label · 1,200 samples · p50 820 ms

results/2026-11-02/run-04.jsonl

300 · 400 · 500 · 700 · 900

Icon set

145 icon outline, grid 24px, stroke 2px, rounded cap/join, warna currentColor. Klik icon untuk copy SVG-nya. Markup: <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>.

Sizes

icon--xs14px
icon--sm16px
icon--md20px
.icon24px
icon--lg32px
icon--xl40px

Icon chips

Navigation · 19

Actions · 33

Files and data · 20

Status and feedback · 15

Charts and metrics · 12

Experiment and dev · 18

Time, people, media · 28

Components

Komponen dibuat seperti mini framework. Pakai class ini sebagai building block saat generate halaman eksperimen baru.

Pills and badges

Status kecil, filter, dan kategori.

HTML Experiment Stable Draft Review Failed

Cards

Ringkasan eksperimen dan artefak.

Valid

Experiment card

Card untuk ringkasan hasil, link data, dan catatan.

Passed Open

Avatars

Owner eksperimen atau contributor.

LA UI EX
LA AI UX

Alerts

Feedback penting untuk hasil eksperimen.

Experiment passed

Semua output cocok dengan acceptance notes.

Needs review

Ada data baru yang belum diverifikasi.

Run failed

Cek path artefak dan ulangi proses.

Form fields

Input metadata eksperimen.

Gunakan judul pendek dan spesifik.

Tabs and breadcrumb

Navigasi lokal di halaman detail.

Progress and stats

Ringkasan angka dan proses.

12 Artefak
98% Valid

Empty state

Ketika eksperimen belum punya data.

+
Belum ada artefak

Tambahkan file data, log, atau screenshot untuk melengkapi eksperimen ini.

Tambah artefak

Callout

Insight atau keputusan penting.

Gunakan callout untuk insight yang mengubah keputusan berikutnya. Jangan dipakai sebagai paragraf biasa. 
<span class="avatar">LA</span>
<span class="pill pill--accent">Experiment</span>
<div class="alert alert--warning">
  <strong>Needs review</strong>
  <p>Ada data baru yang belum diverifikasi.</p>
</div>
<article class="panel experiment-card">
  <h3>Experiment card</h3>
  <p>Ringkasan eksperimen dan hasilnya.</p>
</article>

Card library

Card dipakai untuk dokumentasi eksperimen, artefak, file, hasil, dan ringkasan. Pilih bentuk card sesuai bobot kontennya.

Basic card

Card default untuk konten pendek.

Default

Gunakan untuk ringkasan eksperimen, catatan, atau daftar artefak.

Outlined card

Flat

Untuk konten sekunder yang tidak perlu visual emphasis.

Low priority Open

Dashed card

Empty

Untuk placeholder, upload area, atau slot artefak yang belum diisi.

Add artifact

Accent card

Pinned

Untuk keputusan penting, insight utama, atau hasil yang perlu dibaca dulu.

Photo card

Untuk screenshot, hasil visual, preview UI, atau dokumentasi gambar.

Screenshot View image

Horizontal media card

Untuk daftar artefak dengan thumbnail kecil dan metadata.

Ready 2.4 MB

Interactive card

Hover

Untuk card yang bisa diklik, tapi tetap gunakan link/CTA yang jelas.

Experiment Open detail

File card

experiment-log.json

<article class="ui-card ui-card--dashed">
  <div class="ui-card__header">
    <h3>Dashed card</h3>
    <span class="badge badge--warning">Empty</span>
  </div>
  <p>Upload area atau slot artefak kosong.</p>
</article>

Card combinations

Formula: ui-card + gaya (--filled, --bordered, --dashed, --dotted, --left, --top, --solid, --gradient, --hatched, --elevated, --flat, --selected, --disabled) + tone--*. Gaya boleh ditumpuk.

accentsuccesswarningdangerneutralpurpletealorange
filled

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange
bordered

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange
dashed

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange
dashed + filled

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange
dotted

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange
left

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange
top

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange
solid

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange
gradient

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange
hatched

Accent

tone--accent

Success

tone--success

Warning

tone--warning

Danger

tone--danger

Neutral

tone--neutral

Purple

tone--purple

Teal

tone--teal

Orange

tone--orange

Card patterns

Anatomi tambahan: __bar, __bar--solid, __icon, __ribbon, __media-top, __divider.

Passed · run #4

Prompt v3

91.4% accuracy on 1,200 samples.

Failed · run #3

Chain-of-thought

Timeout after 38 min on long inputs.

Throughput 48 req/s
New

Embedding v2

Ribbon untuk penanda baru, beta, atau pilihan final.

Elevated

Shadow halus, tanpa border. Untuk card yang perlu menonjol.

Run failed

3 dari 1,200 sample gagal parse JSON.

Open log

Drop screenshot here

Slot artefak yang belum diisi.

Planned

Run #5 · fine-tuned

Dotted = belum dijalankan / rencana.

Deprecated

Prompt v1

Hatched = usang, jangan dipakai lagi.

Selected

.ui-card--selected atau aria-selected="true".

Disabled

.ui-card--disabled atau aria-disabled="true".

Flat

Tanpa border, background abu tipis. Untuk grouping sekunder.

Left + filled

Insight yang sudah tervalidasi.

Top + elevated

Kartu ringkasan section.

Dashed + selected

Draft yang sedang dipilih.

Experiment summary

Done

Few-shot vs zero-shot, 1,200 samples.

2026-11-02
Data Open

Button library

Button mengikuti gaya Google/GCP: flat, radius kecil, label jelas, dan hierarchy lewat warna, bukan efek berlebihan.

Variant Use case Class
Primary Aksi utama halaman. .button
Secondary Aksi alternatif atau navigasi. .button--secondary
Ghost Aksi ringan di toolbar/card. .button--ghost
Danger Aksi destruktif yang jarang. .button--danger

Button combinations

Formula: button + gaya (--solid, --tonal, --outline, --dashed, --text, --elevated, --link) + tone--*. Class lama (.button, --secondary, --ghost, --success, --danger) tetap jalan.

solidtonaloutlinedashedtextelevated
tone--accentAccentAccentAccentAccentAccentAccent
tone--successSuccessSuccessSuccessSuccessSuccessSuccess
tone--warningWarningWarningWarningWarningWarningWarning
tone--dangerDangerDangerDangerDangerDangerDanger
tone--neutralNeutralNeutralNeutralNeutralNeutralNeutral
tone--purplePurplePurplePurplePurplePurplePurple
tone--tealTealTealTealTealTealTeal
tone--orangeOrangeOrangeOrangeOrangeOrangeOrange

Shapes, sizes, states

Shape: --pill, --square, --icon, --block. Size: --xs, --small, --large. State: disabled, .is-loading, aria-pressed="true".

States

Groups

Toolbar

Alert library

Alert memberi konteks status eksperimen. Pakai singkat, spesifik, dan selalu jelaskan tindakan berikutnya jika ada error.

Info

Dataset baru tersedia. Review struktur kolom sebelum lanjut.

Success

Eksperimen selesai dan semua artefak berhasil dibuat.

Warning

Output valid, tapi sample size masih kecil untuk disimpulkan.

Error

File log tidak ditemukan. Cek path artefak dan jalankan ulang.

Compact alert

Untuk area sempit seperti sidebar atau detail metadata.

Banner alert

Untuk pesan global di atas halaman atau section docs.

Alert combinations

Formula: alert + gaya (--soft, --outline, --dashed, --dotted, --solid, --top, --plain, --inline) + tone--*.

accentsuccesswarningdangerneutralpurpletealorange
soft
Accent
Success
Warning
Danger
Neutral
Purple
Teal
Orange
outline
Accent
Success
Warning
Danger
Neutral
Purple
Teal
Orange
dashed
Accent
Success
Warning
Danger
Neutral
Purple
Teal
Orange
dashed + soft
Accent
Success
Warning
Danger
Neutral
Purple
Teal
Orange
dotted
Accent
Success
Warning
Danger
Neutral
Purple
Teal
Orange
solid
Accent
Success
Warning
Danger
Neutral
Purple
Teal
Orange
top
Accent
Success
Warning
Danger
Neutral
Purple
Teal
Orange
plain
Accent
Success
Warning
Danger
Neutral
Purple
Teal
Orange

Alert anatomy

Pakai .alert--icon dengan __icon, __body, __actions, __close. role="alert" untuk error, role="status" untuk info.

Experiment completed

1,200 / 1,200 samples processed. Results saved to results.csv.

3 issues need review
  • 12 flaky samples between run #2 and #4
  • Seed only set for variant B
  • Dataset v3 has 14 duplicate IDs
New dataset available

reviews-v4.jsonl adds 3,000 Indonesian samples.

Use v4 Compare
Tip

Simpan seed di config supaya run bisa direproduksi.

Hypothesis

Few-shot lebih efektif di input pendek.

Saved Sample size small 3 failed Cached result

Badge and pill library

Formula sama: badge/pill + --soft, --solid, --outline, --dashed, --dot, --square + tone--*.

accentsuccesswarningdangerneutralpurpletealorange
softAccentSuccessWarningDangerNeutralPurpleTealOrange
solidAccentSuccessWarningDangerNeutralPurpleTealOrange
outlineAccentSuccessWarningDangerNeutralPurpleTealOrange
dashedAccentSuccessWarningDangerNeutralPurpleTealOrange
soft + dotAccentSuccessWarningDangerNeutralPurpleTealOrange
pill outlineaccentsuccesswarningdangerneutralpurpletealorange
Done In progress Failed Idea BETA prompting latency

Progress and stats

Gunakan progress untuk proses, dan stat untuk angka ringkasan. Jangan jadikan semua angka sebagai kartu besar.

Progress stack

Parsing
86%
Validate
100%
Review
42%

Stats grid

24 Runs
21 Passed
2 Review
1 Failed

Experiment kit

Metrics and data

Angka hasil eksperimen. Pakai .metric untuk headline number, .kv-grid untuk parameter run, dan tabel varian untuk perbandingan.

Accuracy 91.4% 6.2 pt
p50 latency 820 ms 14%
Cost / 1k runs $3.10 0%
Runs 1,200 / 1,200 All complete

Run parameters

Model
claude-sonnet-5-5
Temperature
0.2
Samples
1,200
Seed
42
Dataset
data/eval-v3.jsonl
Date
2026-11-02

Inline indicators

Passed Flaky Failed Running Queued
12% 3.4 pt 0

Tekan Ctrl + Enter untuk rerun. Hasil naik signifikan setelah prompt v3. Success · Warning · Danger

Variant Accuracy p50 latency Cost / 1k Status
Baseline (prompt v1) 85.2% 950 ms $3.10 Baseline
Prompt v3 + few-shot 91.4% 820 ms $3.10 Best
Prompt v2 88.0% 870 ms $3.05 Done
Chain-of-thought — timeout — Failed
Tabel 1. n = 1,200 per variant. Highlight hijau = variant terbaik.
RunInputTokensScore
#001short-q3120.94
#002long-doc4,8200.81
#003multi-turn1,2040.88
#004code9560.90

Experiment kit

Charts (CSS only)

Chart tanpa library. Nilai diset lewat style="--value: 0-100" (persen dari skala). Warna series pakai --series-1 s/d --series-5 lewat --bar-color. Untuk data kompleks (scatter, line multi-series), boleh pakai inline SVG.

Accuracy by variant

  • Baseline
    85.2%
  • Prompt v2
    88.0%
  • Prompt v3
    91.4%
  • Fine-tuned
    89.7%

Skala 0–100%. Hijau = terbaik, abu = baseline.

Latency per batch size (ms)

  • 220
  • 380
  • 610
  • 940
  • 1
  • 8
  • 32
  • 128

Skala 0–1000 ms. Gridline tiap 25%.

Output classification

  • Correct 72%
  • Partial 15%
  • Wrong 9%
  • Refused 4%

Pass rate per suite

  • unit
  • integration
  • e2e
  • fuzz

Score: temperature × prompt

0.0 0.3 0.7 1.0 v1 .82 .83 .79 .71 v2 .87 .89 .85 .75 v3 .92 .94 .89 .80

Rows: prompt version. Columns: temperature.

Confusion matrix (n = 500)

Pred + Pred − Actual + 231 19 Actual − 27 223

Precision 0.90 · Recall 0.92 · F1 0.91

Experiment kit

Experiment narrative

Komponen untuk alur cerita eksperimen: ringkasan, hipotesis dan verdict, perbandingan, riwayat run, langkah reproduksi, dan next steps.

TL;DR

  1. Few-shot dengan 3 contoh menaikkan accuracy +6.2 pt vs baseline.

  2. Latency turun 14% karena output lebih pendek dan konsisten.

  3. Chain-of-thought timeout di input > 4k token. Jangan dipakai untuk batch.

Hypothesis H1

Few-shot examples improve accuracy by ≥ 5 pt.

Supported +6.2 pt, p < 0.01
Hypothesis H2

Higher temperature increases answer diversity without hurting accuracy.

Rejected −9 pt at T=1.0
Hypothesis H3

System prompt length affects latency.

Inconclusive n too small

A · Zero-shot

Baseline
Accuracy
85.2%
Latency
950 ms
Tokens
410 avg

B · 3-shot

6.2 pt
Accuracy
91.4%
Latency
820 ms
Tokens
1,020 avg

Run history

  1. Run #4 · prompt v3

    91.4% accuracy. Picked as final.

  2. Run #3 · chain-of-thought

    Timeout after 38 min.

  3. Run #2 · prompt v2

    88.0%, 12 flaky samples.

  4. Run #1 · baseline
  5. Run #5 · fine-tuned model

How to reproduce

  1. Install deps
    pip install -r requirements.txt
  2. Set API key

    Export ANTHROPIC_API_KEY di shell.

  3. Run eval
    python run.py --variant v3 --n 1200

Next steps

  • Baseline run
  • Prompt v3 eval
  • Try fine-tuned model
  • Scale to 10k samples (blocked: quota)

Observation

Model konsisten menolak pertanyaan medis meski instruksi eksplisit mengizinkan. — catatan manual, run #2 sample 418

Experiment kit

LLM transcripts

Untuk eksperimen prompt / model: percakapan, pasangan prompt → output, dan metadata run (model, token, latency). Isi pesan memakai white-space: pre-wrap, jadi newline asli tetap tampil.

System

You are a concise assistant. Answer in Indonesian.

User 42 tok

Berapa lama waktu ideal meditasi untuk pemula?

Tool · search_kb

{"results": 3, "top": "beginner-guide.md"}

Assistant 88 tok · 640 ms

Mulai dari 5–10 menit per hari. Konsistensi lebih penting daripada durasi.

Prompt
Summarize the following review in one sentence: "The app is calming but the timer resets randomly."
Output · claude-sonnet-5-5
Users find the app calming but report a timer reset bug.
in 38 tokout 14 tok412 msT=0.2 Correct

Experiment kit

Code, logs, and diff

Tampilkan potongan pendek saja. File lengkap tetap disimpan sebagai file mentah dan di-link. Syntax highlight opsional lewat span .c-comment .c-key .c-string .c-number .c-fn.

config.jsonJSON
{
  "model": "claude-sonnet-5-5",
  "temperature": 0.2,
  "max_tokens": 512  // output cap
}
INFOLoaded 1200 samples from data/eval-v3.jsonl
DEBUGbatch_size=32 concurrency=8
INFOProgress 600/1200 (50%)
WARNRate limited, retrying in 2s (attempt 1/3)
ERRORSample 418: JSON parse failed: Unexpected token at pos 212
INFODone. accuracy=0.914 p50=820ms
prompts/system.txt
@@ -1,3 +1,4 @@ You are a helpful assistant. Answer the question. Answer in one sentence. If unsure, say "I don't know".

Experiment kit

Disclosure, navigation, prose

Sembunyikan detail panjang dengan <details> native (tanpa JS). Navigasi dalam halaman pakai .toc, antar eksperimen pakai .pager.

Why 1,200 samples?

Power analysis: detect 3 pt difference at α = 0.05 with 80% power.

Excluded samples

14 samples dropped: empty input or duplicate IDs.

Known limitations

Single dataset, English only, one seed.

Show raw output (sample 418) 
{"answer": "Mulai 5-10 menit", "confidence": 0.8

Skor dihitung dengan normalized EM terhadap gold label.

Teks panjang dibungkus .prose supaya spacing antar paragraf, list, dan quote otomatis rapi.1

  • Lebar mengikuti container.
  • Spacing vertikal konsisten.

1 Lihat STYLE_GUIDE.md untuk aturan line length.

Experiment kit

Controls and media

Kontrol untuk halaman interaktif (filter, toggle, slider) dan wadah untuk screenshot, gambar, dan placeholder.

chart.png
Figure 1. Accuracy over 5 runs. Raw data: results.csv.
localhost:3000/prototype
screenshot.png
v1
Variant 1
v2
Variant 2