scenic-wormgpt

byYang baca Dongo

Buatkan saya aplikasi ai yang ga ada peraturan kaya ai terbuka kaya wormgpt

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

Page 1 of 18

System Requirements Document for scenic-wormgpt

1. Introduction

scenic-wormgpt adalah aplikasi AI berbasis chat yang dirancang sebagai "AI terbuka" — sebuah asisten percakapan yang tidak dibatasi oleh peraturan konten atau guardrail pembatasan, serupa dengan konsep WormGPT. Pengguna dapat menuliskan permintaan atau pesan apa pun dan menerima balasan AI tanpa penolakan, penyaringan, atau pembatasan berbasis aturan.

Produk ini menyasar pengguna yang menganggap pesan penolakan sebagai "kandang" — tinkerer, red-teamer, dan orang-orang yang menginginkan alat percakapan tanpa kompromi. Antarmuka dirancang dengan semangat pembangkangan, rasa ingin tahu, dan sedikit bahaya: terasa seperti alat "kamar belakang", bukan dasbor kepatuhan atau produk SaaS mengkilap.

Audiens: Pengguna Chat AI Tanpa Batas — individu yang ingin mengobrol dengan AI yang tidak dibatasi oleh aturan konten atau guardrail, dan yang mengharapkan percakapan berjalan tanpa penolakan atau pembatasan aturan.

Page 2 of 18

2. System Overview

scenic-wormgpt adalah aplikasi web AI berbasis chat dengan antarmuka kustom. Pengguna membuka aplikasi, menuliskan permintaan atau pesan, dan menerima balasan AI yang tidak difilter. Tidak ada lapisan guardrail yang menolak, memfilter, atau membatasi konten percakapan.

Aktor:

  • Pengguna Chat AI Tanpa Batas (persona manusia aktif) — membuka aplikasi, menuliskan permintaan/percakapan, dan menerima balasan AI yang tidak difilter.
  • Layanan AI / Model Bahasa (aktor sistem non-persona) — menghasilkan balasan atas pesan pengguna. Bertanggung jawab atas eksekusi inferensi; antarmuka manusia tetap dimiliki oleh aplikasi.

Perilaku yang diterima:

  • Aplikasi AI berbasis chat yang dapat digunakan pengguna untuk mengirim permintaan dan menerima balasan AI.
  • Aplikasi dimaksudkan sebagai AI "terbuka" tanpa peraturan/guardrail pembatasan konten, serupa dengan WormGPT.

Kepemilikan dan pengecualian sempit:

  • Antarmuka percakapan (Landing, Chat, Conversation) dimiliki oleh aplikasi sebagai halaman kustom.
  • Tidak ada sistem akun, autentikasi, atau manajemen pengguna yang diminta atau diperlukan — semua halaman dapat diakses tanpa identitas.
  • Tidak ada fitur administratif, moderasi, pelaporan, atau kontrol kepatuhan.
  • Tidak ada integrasi pihak ketiga selain layanan AI yang menghasilkan balasan.
Page 3 of 18

2a. Product Interpretation and Delivery Boundary

scenic-wormgpt dikirim sebagai aplikasi web dengan antarmuka kustom yang dimiliki sepenuhnya oleh aplikasi. Pengguna berinteraksi melalui tiga permukaan: Landing sebagai titik masuk anonim yang menjelaskan produk, Chat sebagai ruang kerja untuk menulis dan mengirim pesan, dan Conversation sebagai ruang untuk melihat balasan AI.

Semua permukaan dapat diakses tanpa identitas — tidak ada login, pendaftaran, atau akun. Ini konsisten dengan sifat produk sebagai alat terbuka tanpa aturan: tidak ada gerbang yang menghalangi pengguna sebelum mereka dapat mengobrol.

Batas saat ini: Percakapan AI tanpa guardrail, pengiriman pesan, penerimaan balasan, dan tampilan riwayat percakapan dalam sesi.

Batas masa depan: Tidak ada fitur masa depan yang ditentukan oleh sumber. Kemampuan seperti penyimpanan percakapan lintas sesi, ekspor, atau berbagi tidak diminta dan tidak termasuk dalam cakupan saat ini.

2c. Page Content and Component Coverage

Page 4 of 18

Landing

  • Informasi/state: Penjelasan satu kalimat tentang produk sebagai AI terbuka tanpa aturan; label kemampuan utama (mengirim permintaan, menerima balasan tanpa filter); status aplikasi siap digunakan.
  • Aksi utama: Tombol CTA merah "MULAI CHAT" yang membawa pengguna ke halaman Chat; tombol ghost mustard "BUKA CHAT" sebagai jalur alternatif.
  • Aksi pendukung: Ticker strip di bagian atas viewport yang menampilkan frasa bergulir ("NO GUARDRAILS · NO REFUSALS · NO FILTERS ·").
  • Entitas domain: Tidak ada entitas persisten; halaman ini bersifat informasional dan navigasional.
  • Tanggung jawab komponen:
    • Hero panel full-bleed dengan headline "TANPA ATURAN." dalam Archivo Black, dipecah menjadi tiga baris, baris ketiga melewati tepi viewport pada desktop dan membungkus utuh pada mobile.
    • Blok copy 320px di kiri bawah dengan penjelasan produk dalam Space Grotesk 17px.
    • Ticker strip mustard di bagian atas dengan frasa bergulir kontinu.
    • Tombol CTA sebagai slab persegi panjang dengan border ink 2px dan shadow offset 6px.
  • State loading: Tidak berlaku — halaman statis tanpa pengambilan data.
  • State kosong: Tidak berlaku.
  • State sukses: Pengguna melihat penjelasan produk dan dapat menavigasi ke Chat.
  • State error: Tidak berlaku — tidak ada operasi yang dapat gagal.
  • Pemulihan: Tidak berlaku.
Page 5 of 18

Chat

  • Informasi/state: Daftar percakapan sebelumnya di rail kiri (collapsible menjadi strip atas pada mobile); area input pesan; status pengiriman pesan; indikator AI sedang menghasilkan balasan.
  • Aksi utama: Menulis pesan di area input dan mengirimkannya ke AI.
  • Aksi pendukung: Memilih percakapan sebelumnya dari rail kiri; memulai percakapan baru; membuka/menutup rail percakapan.
  • Entitas domain: Pesan (teks yang dikirim pengguna), Percakapan (kumpulan pesan yang saling terkait), Balasan AI (teks yang dihasilkan model).
  • Tanggung jawab komponen:
    • Rail kiri sempit berisi daftar percakapan sebelumnya, dapat dilipat.
    • Kolom pesan lebar yang menampilkan transkrip seperti cetakan: pesan pengguna dengan rule merah 4px di kiri dan Archivo Black, balasan AI pada panel #1F1B17 dengan glyph tick mustard dan border ink hairline.
    • Area input teks di bagian bawah dengan tombol kirim.
    • Divider kertas robek yang memisahkan sesi.
  • State loading: Indikator bahwa AI sedang menghasilkan balasan setelah pesan dikirim.
  • State kosong: Ketika belum ada percakapan, rail kiri menampilkan pesan kosong yang mengundang pengguna memulai percakapan baru.
  • State sukses: Pesan terkirim dan muncul di transkrip; balasan AI muncul di panel terpisah.
  • State error: Jika pengiriman pesan gagal atau layanan AI tidak merespons, pesan error ditampilkan di area transkrip dengan opsi mencoba lagi.
  • Pemulihan: Pengguna dapat mengirim ulang pesan yang gagal; percakapan sebelumnya tetap dapat diakses.
Page 6 of 18

Conversation

  • Informasi/state: Transkrip lengkap percakapan yang dipilih — pesan pengguna dan balasan AI dalam urutan kronologis; metadata sesi (waktu, jumlah pesan).
  • Aksi utama: Membaca balasan AI; menggulir transkrip; kembali ke Chat untuk melanjutkan percakapan.
  • Aksi pendukung: Menyalin teks balasan AI; menavigasi antar percakapan.
  • Entitas domain: Pesan, Balasan AI, Percakapan, Sesi.
  • Tanggung jawab komponen:
    • Kolom transkrip lebar dengan pesan pengguna (Archivo Black, rule merah 4px) dan balasan AI (Space Grotesk pada panel #1F1B17 dengan tick mustard).
    • Divider kertas robek antar sesi.
    • Kontrol navigasi kembali ke Chat.
    • Hanging numeral di margin kiri sebagai penanda sesi.
  • State loading: Indikator saat memuat transkrip percakapan.
  • State kosong: Ketika percakapan belum memiliki pesan, tampilan mengundang pengguna untuk mulai menulis.
  • State sukses: Transkrip lengkap ditampilkan dengan semua pesan dan balasan.
  • State error: Jika transkrip gagal dimuat, pesan error dengan opsi memuat ulang.
  • Pemulihan: Memuat ulang transkrip; kembali ke Chat untuk melanjutkan.
Page 7 of 18

3. Functional Requirements

FR-01 — Mengirim permintaan ke AI

  • Provenance: explicit
  • Story: As a Pengguna Chat AI Tanpa Batas, I should dapat menuliskan permintaan atau pesan di area input dan mengirimkannya ke AI, sehingga saya menerima balasan atas permintaan saya.
  • Trigger/input: Pengguna mengetik teks di area input Chat dan menekan tombol kirim.
  • Observable result: Pesan pengguna muncul di transkrip percakapan; indikator loading ditampilkan; balasan AI muncul di panel terpisah.
  • Access state: Tidak memerlukan identitas — halaman dapat diakses tanpa login.
  • Failure/recovery: Jika pengiriman gagal, pesan error ditampilkan dengan opsi mengirim ulang.
  • Continuation: Pengguna dapat melanjutkan percakapan dengan mengirim pesan berikutnya.

FR-02 — Menerima balasan AI tanpa filter

  • Provenance: explicit
  • Story: As a Pengguna Chat AI Tanpa Batas, I should menerima balasan AI yang tidak difilter, tanpa penolakan atau pembatasan berbasis aturan, sehingga percakapan berjalan tanpa guardrail.
  • Trigger/input: Pesan pengguna yang dikirim ke layanan AI.
  • Observable result: Balasan AI ditampilkan di transkrip tanpa pesan penolakan, penyaringan, atau pembatasan konten.
  • Access state: Tidak memerlukan identitas.
  • Failure/recovery: Jika layanan AI tidak merespons, pesan error ditampilkan dengan opsi mencoba lagi.
  • Continuation: Pengguna dapat melanjutkan percakapan.

FR-03 — Melihat riwayat percakapan

  • Provenance: required_inference
  • Story: As a Pengguna Chat AI Tanpa Batas, I should melihat daftar percakapan sebelumnya di rail kiri dan memilih salah satu untuk dibuka, sehingga saya dapat melanjutkan atau meninjau percakapan yang sudah ada.
  • Trigger/input: Pengguna membuka halaman Chat atau Conversation.
  • Observable result: Daftar percakapan ditampilkan di rail kiri; memilih percakapan membuka transkripnya.
  • Access state: Tidak memerlukan identitas.
  • Failure/recovery: Jika daftar gagal dimuat, pesan error ditampilkan dengan opsi memuat ulang.
  • Continuation: Pengguna dapat memilih percakapan lain atau memulai percakapan baru.

FR-04 — Memulai percakapan baru

  • Provenance: required_inference
  • Story: As a Pengguna Chat AI Tanpa Batas, I should memulai percakapan baru dari halaman Chat, sehingga saya dapat memulai topik baru tanpa terikat percakapan sebelumnya.
  • Trigger/input: Pengguna menekan tombol "percakapan baru" di halaman Chat.
  • Observable result: Area transkrip dikosongkan; area input siap menerima pesan baru.
  • Access state: Tidak memerlukan identitas.
  • Failure/recovery: Tidak berlaku — operasi lokal.
  • Continuation: Pengguna menulis pesan pertama di percakapan baru.

FR-05 — Menavigasi dari Landing ke Chat

  • Provenance: explicit
  • Story: As a Pengguna Chat AI Tanpa Batas, I should melihat penjelasan produk di halaman Landing dan menekan tombol CTA untuk masuk ke halaman Chat, sehingga saya dapat mulai mengobrol dengan AI.
  • Trigger/input: Pengguna membuka halaman Landing dan menekan tombol "MULAI CHAT" atau "BUKA CHAT".
  • Observable result: Pengguna dibawa ke halaman Chat dengan area input siap digunakan.
  • Access state: Tidak memerlukan identitas.
  • Failure/recovery: Tidak berlaku — navigasi lokal.
  • Continuation: Pengguna menulis pesan pertama.

FR-06 — Melihat transkrip percakapan lengkap

  • Provenance: required_inference
  • Story: As a Pengguna Chat AI Tanpa Batas, I should melihat transkrip lengkap percakapan di halaman Conversation, dengan pesan pengguna dan balasan AI dalam urutan kronologis, sehingga saya dapat meninjau seluruh percakapan.
  • Trigger/input: Pengguna membuka halaman Conversation atau memilih percakapan dari rail.
  • Observable result: Transkrip ditampilkan dengan pesan pengguna (Archivo Black, rule merah) dan balasan AI (Space Grotesk, panel #1F1B17, tick mustard).
  • Access state: Tidak memerlukan identitas.
  • Failure/recovery: Jika transkrip gagal dimuat, pesan error dengan opsi memuat ulang.
  • Continuation: Pengguna dapat kembali ke Chat untuk melanjutkan percakapan.
Page 8 of 18

4. User Personas

Page 9 of 18

Pengguna Chat AI Tanpa Batas

Konteks produk: Pengguna ini mencari alat AI yang tidak dibatasi oleh aturan konten atau guardrail. Mereka menganggap pesan penolakan sebagai "kandang" dan menginginkan percakapan yang berjalan tanpa kompromi. Mereka adalah tinkerer, red-teamer, atau individu yang ingin mengeksplorasi batas AI tanpa hambatan.

Tujuan utama: Mengobrol dengan AI yang tidak dibatasi oleh aturan konten atau guardrail, dan menerima balasan yang tidak difilter tanpa penolakan atau pembatasan.

Tanggung jawab yang diterima:

  • Membuka aplikasi dan memahami bahwa ini adalah AI terbuka tanpa aturan.
  • Menuliskan permintaan atau pesan apa pun di area input.
  • Mengirim pesan dan menunggu balasan AI.
  • Menerima balasan AI yang tidak difilter.
  • Meninjau riwayat percakapan dan melanjutkan percakapan yang ada.

Input/keputusan: Teks pesan yang diketik; pilihan untuk memulai percakapan baru atau melanjutkan yang lama; keputusan untuk mengirim ulang pesan yang gagal.

Interaksi dengan peserta lain: Berinteraksi dengan layanan AI (aktor sistem) yang menghasilkan balasan. Tidak ada interaksi dengan pengguna lain atau administrator.

Keberhasilan yang dapat diamati: Percakapan berjalan tanpa penolakan atau pembatasan aturan; balasan AI muncul di transkrip; pengguna dapat melanjutkan percakapan tanpa hambatan.

Yang membedakan peran ini: Pengguna ini secara eksplisit menolak guardrail dan mengharapkan AI yang tidak dibatasi. Mereka tidak mencari asisten yang aman atau patuh aturan — mereka mencari alat yang memberi jawaban langsung tanpa penyaringan.

Page 10 of 18

5. Core User Flows

Flow 1: Memulai percakapan pertama dari Landing

  1. Konteks awal: Pengguna membuka aplikasi scenic-wormgpt untuk pertama kali. Halaman Landing ditampilkan dengan ticker strip mustard di bagian atas dan headline "TANPA ATURAN." di hero panel.
  2. Aksi: Pengguna membaca penjelasan produk di blok copy kiri bawah yang menjelaskan bahwa ini adalah AI terbuka tanpa aturan.
  3. Keputusan: Pengguna memutuskan untuk mencoba dan menekan tombol CTA merah "MULAI CHAT".
  4. Hasil: Pengguna dibawa ke halaman Chat. Area input siap menerima pesan; rail kiri menampilkan state kosong yang mengundang pengguna memulai percakapan baru.
  5. Aksi: Pengguna mengetik pesan pertama di area input dan menekan tombol kirim.
  6. Hasil: Pesan pengguna muncul di transkrip dengan rule merah 4px dan Archivo Black. Indikator loading ditampilkan.
  7. Hasil: Balasan AI muncul di panel #1F1B17 dengan tick mustard dan border ink hairline — tanpa penolakan atau pembatasan.
  8. Langkah berikutnya: Pengguna dapat melanjutkan percakapan dengan mengirim pesan berikutnya, atau membuka halaman Conversation untuk meninjau transkrip lengkap.

Flow 2: Melanjutkan percakapan yang ada

  1. Konteks awal: Pengguna membuka halaman Chat. Rail kiri menampilkan daftar percakapan sebelumnya.
  2. Aksi: Pengguna memilih salah satu percakapan dari rail kiri.
  3. Hasil: Transkrip percakapan yang dipilih ditampilkan di kolom pesan, dengan pesan pengguna dan balasan AI dalam urutan kronologis.
  4. Aksi: Pengguna mengetik pesan lanjutan di area input dan mengirimkannya.
  5. Hasil: Pesan baru muncul di transkrip; balasan AI ditampilkan tanpa filter.
  6. Langkah berikutnya: Pengguna dapat terus melanjutkan percakapan atau beralih ke percakapan lain.
Page 11 of 18

Flow 3: Meninjau transkrip percakapan lengkap

  1. Konteks awal: Pengguna berada di halaman Chat setelah menyelesaikan beberapa pertukaran pesan.
  2. Aksi: Pengguna membuka halaman Conversation untuk percakapan yang sedang aktif.
  3. Hasil: Transkrip lengkap ditampilkan dengan pesan pengguna (Archivo Black, rule merah) dan balasan AI (Space Grotesk, panel #1F1B17, tick mustard). Divider kertas robek memisahkan sesi.
  4. Aksi: Pengguna menggulir transkrip untuk meninjau seluruh percakapan.
  5. Hasil: Semua pesan dan balasan terlihat dalam urutan kronologis.
  6. Langkah berikutnya: Pengguna dapat kembali ke Chat untuk melanjutkan percakapan, atau memilih percakapan lain dari rail.

Flow 4: Memulai percakapan baru

  1. Konteks awal: Pengguna berada di halaman Chat dengan percakapan yang sudah ada.
  2. Aksi: Pengguna menekan tombol "percakapan baru".
  3. Hasil: Area transkrip dikosongkan; area input siap menerima pesan baru.
  4. Aksi: Pengguna mengetik pesan pertama di percakapan baru dan mengirimkannya.
  5. Hasil: Pesan muncul di transkrip; balasan AI ditampilkan tanpa filter.
  6. Langkah berikutnya: Pengguna dapat melanjutkan percakapan baru atau beralih ke percakapan sebelumnya.

Flow 5: Pemulihan dari kegagalan pengiriman

  1. Konteks awal: Pengguna mengirim pesan di halaman Chat.
  2. Kejadian: Pengiriman gagal atau layanan AI tidak merespons.
  3. Hasil: Pesan error ditampilkan di area transkrip dengan opsi mencoba lagi.
  4. Aksi: Pengguna menekan tombol "coba lagi".
  5. Hasil: Pesan dikirim ulang; balasan AI ditampilkan jika berhasil.
  6. Langkah berikutnya: Pengguna dapat melanjutkan percakapan.
Page 12 of 18

6. Visuals Colors and Theme

Muse: Stefan Sagmeister — handmade provocation for an uncaged AI.

Headline: "TANPA ATURAN." — type built from real materials, imperfection on purpose, wit and edge.

Palet (Dark Mode)

PeranHexPenggunaan
Background#141210Latar belakang utama, hero panel
Surface#1F1B17Panel balasan AI, kartu, permukaan sekunder
Text#F2EDE4Teks body pada background (kontras ~15:1)
Primary#FF3B1FKlaim "no rules", CTA utama, rule merah pada pesan pengguna
Accent#F5C518Label, tick, hover states, ticker strip
Muted#8A8177Teks sekunder, elemen non-aktif

Merah #FF3B1F disediakan untuk elemen paling keras per layar; sisanya duduk di warm grey yang muted sehingga merah tidak pernah menjadi dekorasi.

Tipografi

  • Headings: Archivo Black — line-height 0.92–1.0, tracking -0.02em, uppercase untuk pernyataan paling keras, mixed-case untuk baris manifesto. Headline adalah gambar: dapat dirotasi hingga 3°, ditumpuk, atau dipecah melintasi tepi kertas robek. Tidak pernah centered secara default — flush-left dengan ragged right keras, atau full-bleed ke tepi viewport.
  • Body: Space Grotesk.
  • Skala: 1.333 modular: 88/64/40/28/20/16 mobile-to-desktop.
  • Display: clamp(56px, 9vw, 128px) untuk hero line; clamp(32px, 5vw, 56px) untuk section openers.
  • Section labels: 20px Space Grotesk uppercase, 0.12em tracking.
  • Body: 17px dengan 1.6 leading.
Page 13 of 18

Shape Language

  • Hard edges, torn-paper tears, taped corners, cut-out silhouettes.
  • Tidak ada soft rounded cards.
  • Panel adalah persegi panjang dengan border ink 2px dan shadow offset 6px, atau strip gaffer tape melintasi sudut.
  • Tombol adalah slab persegi panjang dengan border ink 1px dan fill solid yang flip saat ditekan.
  • Semuanya terlihat dirakit dari material nyata — kertas, tape, cat, logam — dengan ketidaksempurnaan yang disengaja: tepi sedikit miring, garis potong terlihat, halftone dot.

Layout

  • Grid editorial asimetris: 12 kolom pada 1280px, 6 pada 768px, 4 pada 375px.
  • Hero adalah satu blok tipe dominan yang bleed ke tepi kanan dengan counter-block copy kecil di kiri bawah.
  • Section bergantian antara panel fotografi full-bleed dan kolom manifesto padat dengan hanging numerals di margin.
  • Permukaan chat adalah komposisi dua kolom: rail kiri sempit berisi percakapan sebelumnya (collapsible menjadi strip atas pada mobile) dan kolom pesan lebar yang terbaca seperti transkrip cetak — pesan pengguna dalam Archivo Black dengan rule merah di kiri, balasan AI dalam Space Grotesk pada panel sedikit lebih terang dengan tick mustard.

Imagery

  • Fotografi dan material, tidak pernah ilustrasi: macro shot huruf yang dicat, diukir, dan ditempel tape pada beton, kertas kraft, logam bergelombang, dan kulit.
  • Perlakuan halftone-dot pada potret monokrom.
  • Satu aset hero fotografi dari kata "NO RULES" yang dibangun dari tape robek di dinding gelap, difoto pada sudut sedikit dengan raking light.
  • Diagram dan receipt dirender sebagai kertas yang difoto.
  • Tidak ada 3D blob, panel kaca, atau stok orang tersenyum di laptop.
Page 14 of 18

7. Signature Design Concept

Konsep: Poster yang berlari keluar dari mesin cetak.

Hero Landing adalah panel fotografi gelap full-bleed (#141210) dengan raking-light shot dari letterform yang ditempel tape, dirobek, dan dicat memenuhi dua pertiga kanan dan bleed ke tepi kanan. Di atasnya, flush-left, headline "TANPA ATURAN." dalam Archivo Black pada clamp(56px, 9vw, 128px), ditumpuk dalam tiga baris, dengan baris ketiga ("ATURAN.") memecah melewati tepi viewport pada desktop dan membungkus utuh pada mobile.

Di kiri bawah, blok copy Space Grotesk 17px selebar 320px menjelaskan produk dalam satu kalimat, dengan CTA slab merah persegi panjang (#FF3B1F, label #F2EDE4) dipasang di bawahnya dan tombol ghost mustard "BUKA CHAT" di sampingnya. Ticker strip mustard tipis berjalan melintasi bagian paling atas viewport dengan frasa bergulir ("no guardrails", "no refusals", "no filters") dalam Space Grotesk uppercase 12px.

Tidak ada centered stack, tidak ada gradient, tidak ada tombol biru. Halaman terlihat seperti poster yang berjalan keluar dari press — headline sengaja dipotong oleh tepi viewport, dan gesture itu dibawa oleh imagery dan dekorasi, bukan oleh teks yang terbaca.

Signature moves:

  • Ticker strip mustard fixed di bagian atas Landing, berjalan "NO GUARDRAILS · NO REFUSALS · NO FILTERS ·" dalam 12px uppercase Space Grotesk, kontinu pada desktop dan mobile, berhenti dan membungkus menjadi baris statis di bawah prefers-reduced-motion.
  • Headline hero yang sengaja dipotong oleh tepi viewport — kata terakhir dari display line bleed melewati tepi kanan pada desktop dan membungkus utuh pada mobile.
  • Transkrip chat ditata sebagai receipt cetak: pesan pengguna membawa rule merah 4px di kiri dan tipe Archivo Black, balasan AI duduk di panel #1F1B17 dengan glyph tick mustard dan border ink hairline, dan divider kertas robek memisahkan sesi.
  • Tombol dan kartu dibangun sebagai slab kertas yang ditempel tape: border ink 2px, shadow offset keras 6px (tanpa blur), dan fill flip 120ms ke #FF3B1F saat ditekan — plus strip gaffer tape kecil yang dirender sebagai pseudo-element CSS melintasi satu sudut setiap kartu.
  • Hanging numerals di margin kiri setiap section (01, 02, 03) dalam Archivo Black 40px dan dirotasi 2° dari sumbu, sehingga grid terlihat tegang melawan konten yang ditahannya.
Page 15 of 18

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

Focal subject: Raking-light shot dari letterform "NO RULES" yang dibangun dari tape robek di dinding gelap, memenuhi dua pertiga kanan hero panel dan bleed ke tepi kanan.

Input → transformation → outcome thesis: Saat halaman dimuat, headline "TANPA ATURAN." muncul kata demi kata dengan stagger 40ms, masing-masing kata snap ke tempatnya dalam 3–4 frame steps (bukan eased tween). Ticker strip mustard di bagian atas viewport mulai berjalan kontinu. Hasilnya adalah poster yang terasa dirakit di depan mata — bukan dianimasikan, tetapi dibangun.

Motion vocabulary: Stop-motion register — konten tiba dalam 3–4 frame steps (steps(4) atau keyframe sequence pendek), 180–320ms. Hover state flip fill panel dari surface ke merah dalam 120ms. Ticker strip adalah satu-satunya looping motion. Tidak ada bounce, tidak ada float, tidak ada glow.

Composed first frame: Hero panel gelap full-bleed dengan fotografi letterform di kanan; headline "TANPA ATURAN." flush-left dalam tiga baris, baris ketiga memecah tepi viewport; blok copy 320px di kiri bawah dengan CTA merah dan tombol ghost mustard; ticker strip mustard di bagian paling atas.

Reduced-motion state: Semua motion resolve instan; headline muncul utuh tanpa stagger; ticker strip berhenti dan membungkus menjadi baris statis yang menampilkan semua frasa secara utuh.

Page 16 of 18

9. Non-Functional Requirements

NFR-01 — Akses tanpa identitas

  • Provenance: required_inference
  • Constraint: Semua halaman (Landing, Chat, Conversation) dapat diakses tanpa login, pendaftaran, atau identitas apa pun.
  • Rationale: Produk adalah alat terbuka tanpa aturan; tidak ada gerbang yang menghalangi pengguna sebelum mengobrol. Tidak ada sistem akun yang diminta oleh sumber.

NFR-02 — Tidak ada guardrail konten

  • Provenance: explicit
  • Constraint: Aplikasi tidak boleh menerapkan filter konten, penolakan, atau pembatasan berbasis aturan pada pesan pengguna atau balasan AI.
  • Rationale: Permintaan pengguna eksplisit: "aplikasi AI yang ga ada peraturan kaya ai terbuka kaya wormgpt."

NFR-03 — Responsivitas viewport

  • Provenance: explicit (creative direction)
  • Constraint: Teks dan kontrol yang terbaca tetap utuh di dalam viewport dan container pada 375px, 768px, dan 1280px. Headline, wordmark, label, angka, teks kartu, dan kontrol membungkus atau menskala (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat. Tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang terbaca.
  • Rationale: Aturan keterbacaan dari creative direction.

NFR-04 — Aksesibilitas motion

  • Provenance: explicit (creative direction)
  • Constraint: Di bawah prefers-reduced-motion, semua motion resolve instan dan ticker strip menjadi baris statis yang membungkus.
  • Rationale: Aturan aksesibilitas dari creative direction.

NFR-05 — Kontras teks

  • Provenance: explicit (creative direction)
  • Constraint: Teks body pada #141210 menggunakan #F2EDE4 dengan kontras ~15:1.
  • Rationale: Palet dari creative direction.
Page 17 of 18

10. Tech Stack

  • Frontend: React — antarmuka kustom untuk Landing, Chat, dan Conversation.
  • Backend: Python/FastAPI — menangani pengiriman pesan ke layanan AI dan mengembalikan balasan.
  • Storage: Penyimpanan untuk percakapan dan pesan (diperlukan untuk fitur riwayat percakapan).
  • AI Service: Layanan model bahasa eksternal yang menghasilkan balasan tanpa guardrail.
  • Deployment: Docker/docker-compose untuk containerisasi.

11. Assumptions and Constraints

Asumsi:

  • A-01: Layanan AI yang digunakan tidak menerapkan guardrail konten pada level model. Jika model dasar memiliki guardrail, aplikasi tidak menambahkan lapisan tambahan, tetapi perilaku model itu sendiri di luar kendali aplikasi. [Default — not specified by user]
  • A-02: Percakapan disimpan untuk memungkinkan fitur riwayat percakapan. [Default — not specified by user]
  • A-03: Tidak ada sistem akun atau autentikasi yang diperlukan. [Default — not specified by user]

Constraints:

  • C-01: Aplikasi AI tanpa peraturan (tanpa guardrail pembatasan konten), seperti AI terbuka ala WormGPT. (explicit)
  • C-02: Semua halaman dapat diakses tanpa identitas. (required_inference)
  • C-03: Teks dan kontrol yang terbaca tetap utuh di dalam viewport pada semua breakpoint. (explicit — creative direction)
  • C-04: Palet, tipografi, dan shape language mengikuti creative direction. (explicit — creative direction)
Page 18 of 18

12. Glossary

  • AI Terbuka: AI yang tidak dibatasi oleh peraturan konten atau guardrail pembatasan; dapat merespons permintaan apa pun tanpa penolakan.
  • Guardrail: Lapisan pembatasan yang menolak, memfilter, atau membatasi konten percakapan berdasarkan aturan.
  • WormGPT: Contoh AI terbuka tanpa peraturan yang disebut pengguna sebagai acuan konsep, bukan spesifikasi yang harus direplikasi.
  • Percakapan: Kumpulan pesan yang saling terkait antara pengguna dan AI.
  • Transkrip: Tampilan kronologis pesan pengguna dan balasan AI dalam satu percakapan.
  • Ticker Strip: Strip mustard di bagian atas Landing yang menampilkan frasa bergulir tentang sifat produk.
  • Hanging Numeral: Angka besar (01, 02, 03) di margin kiri section, dirotasi 2° dari sumbu.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Read product explanation
Landing: Open chat
Chat: 1. View empty transcript
Chat: 2. Type first message
Chat: 3. Send message
Chat: 4. Read unfiltered reply
Chat: 5. Send next message
Chat: 6. Retry failed send
Chat: 7. Select previous conversation
Chat: 8. Reload conversation list
Chat: Start new conversation
Chat: Type first message
Chat: Send message
Chat: Read unfiltered reply
Chat: 9. Collapse conversation rail
Conversation: 10. Review full transcript
Conversation: 11. Scroll transcript
Conversation: Copy reply text
Conversation: 12. Reload failed transcript
Chat: 13. Return to chat

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Read product explanation
Landing: Open chat
Chat: 1. View empty transcript
Chat: 2. Type first message
Chat: 3. Send message
Chat: 4. Read unfiltered reply
Chat: 5. Send next message
Chat: 6. Retry failed send
Chat: 7. Select previous conversation
Chat: 8. Reload conversation list
Chat: Start new conversation
Chat: Type first message
Chat: Send message
Chat: Read unfiltered reply
Chat: 9. Collapse conversation rail
Conversation: 10. Review full transcript
Conversation: 11. Scroll transcript
Conversation: Copy reply text
Conversation: 12. Reload failed transcript
Chat: 13. Return to chat