Workflow AI untuk Desain: Bukan Cuma Sekali Prompt

Banyak designer sudah memakai AI untuk mencari ide, membuat copy, menyusun user flow, sampai menghasilkan UI dalam bentuk code. Namun, cara pakainya sering masih sama: kita memberi satu prompt, AI membuat sesuatu, lalu kita memperbaikinya lewat prompt berikutnya.

Cara ini memang cepat. Masalahnya, kita tetap harus mengawasi hampir setiap langkah.

AI juga bisa mengulang kesalahan yang sama. Spacing kembali terlalu rapat, hierarchy kurang jelas, komponen tidak konsisten, atau hasilnya terlihat seperti template AI yang generik.

Karena itu, saya tertarik dengan konsep workflow AI untuk desain yang tidak berhenti pada satu prompt. AI diberi brief, membuat solusi, menerima kritik, mengevaluasi hasil, memperbaiki desain, lalu menyimpan pelajaran untuk pekerjaan berikutnya.

Konsep ini sering disebut sebagai loop designing. Bagi saya, cara paling mudah memahaminya adalah seperti membimbing junior designer. Kita tidak mengatur setiap pixel. Kita memberi arah, mengecek hasilnya, menjelaskan apa yang kurang, lalu berharap ia tidak mengulangi kesalahan yang sama.

Namun, bagaimana cara menerapkannya secara nyata? Apakah cukup membuat file Markdown? Apakah kita perlu membuat agent? Lalu, apa hubungan antara harness, skill, CLAUDE.md, AGENTS.md, dan design system?

Mari kita bahas satu per satu.

Fokusnya bukan membuat sistem yang terlihat canggih, tetapi membangun workflow AI untuk desain yang bisa dicoba pada project kecil.

Biasanya saya menggunakan AI untuk membuat prototipe dalam bentuk web. Biasanya saya akan memulai dengan memberikan prompt untuk melihat AI membaca frame Figma, dan itu biasanya tidak akan langsung berhasil 100%, paling 70% sesuai desain, sisanya tidak. nah ini lah yang sering tejadi. Dan biasanya perlu 2–5 kali prompt agar Ai bisa mengikuti apa yang kita inginkan dan sesuai dengan desain.

Kenapa Workflow AI untuk Desain Tidak Bisa Hanya Mengandalkan Prompt

Saat hasil AI kurang bagus, kita sering menyimpulkan bahwa modelnya belum cukup pintar. Padahal, kadang masalah utamanya ada pada cara kerja yang kita berikan.

Misalnya, kita hanya menulis:

Buat dashboard analytics yang modern dan clean.

Prompt dalam bahasa Inggris atau Indonesia sama saja, karena AI pintar ya, jangan berpikir AI hanya bisa 1 bahasa saja. Masa iya AI cuman mampu di bahasa inggris saja, namanya bukan AI, bener gak? 😅

Prompt tersebut tidak menjelaskan siapa penggunanya, apa tugas utamanya, komponen apa yang boleh digunakan, seperti apa visual hierarchy yang diinginkan, atau kapan pekerjaan dianggap selesai.

AI kemudian mengisi bagian yang kosong dengan asumsi. Hasilnya mungkin terlihat bagus secara visual, tetapi belum tentu cocok dengan produk, design system, atau kebutuhan user.

Dalam workflow AI untuk desain, prompt bukan satu-satunya sumber arahan. Agent juga membaca beberapa konteks lain, seperti:

• product brief;
• design principles;
• design tokens;
• component rules;
• screenshot referensi;
• evaluation rubric;
• feedback dari iterasi sebelumnya;
• acceptance criteria.

Dengan begitu, AI tidak hanya menerima perintah untuk “membuat UI”. AI menerima sistem kerja yang lebih lengkap.

Perbedaan sederhananya seperti ini:

One-shot prompting:
Prompt → Output → Revisi manual

Design loop:
Brief → Plan → Build → Render → Evaluate → Fix → Human review → Memory

Dalam workflow AI untuk desain, loop tersebut tidak berarti AI dibiarkan bekerja tanpa kontrol. Justru, kita membuat batas dan standar yang lebih jelas agar prosesnya bisa berjalan dengan lebih aman.

Must Read

• AI untuk UI/UX Designer: 6 Rahasia Workflow Lebih Cepat
• Apa Itu DESIGN.md untuk Designer dan Kenapa Penting di Era AI?
• Struktur Komponen Figma: Cara Membuat Design System yang Rapi dan Scalable
• Apa itu Generative UI : Pengertian dan Cara Kerjanya

Apa Itu Harness dalam Workflow AI?

Istilah harness terdengar teknis, tetapi konsepnya cukup sederhana.

Model AI seperti Claude atau GPT bisa dianggap sebagai otak. Namun, otak tersebut tetap membutuhkan aturan, tools, memory, permission, dan cara mengecek hasil kerja.

Harness adalah sistem yang menghubungkan semua bagian tersebut.

Dalam praktiknya, harness dapat berisi:

• instruction files;
• skill;
• subagent;
• browser atau terminal tools;
• Figma MCP;
• test dan validation;
• memory;
• aturan kapan loop berhenti.

Karena itu, Codex, Claude Code, Droid, dan OpenCode bukan sekadar chat dengan model AI. Tool tersebut sudah memiliki agent harness yang dapat membaca file, menjalankan perintah, mengubah code, memakai tools, dan melakukan iterasi.

Kita kemudian menambahkan workflow AI untuk desain di atas harness tersebut.

Jadi, kita tidak harus membangun agent dari nol. Kita bisa memakai agentic coding tool yang sudah ada, lalu memberinya protocol khusus desain.

Contohnya:

Claude Code / Codex / Droid
        ↓
Project instructions
        ↓
Design-loop skill
        ↓
UI evaluator
        ↓
Browser + screenshot + tests
        ↓
Design memory

Dalam workflow AI untuk desain, AI tidak lagi hanya menjadi generator. Ia berubah menjadi worker yang mengikuti proses tertentu.

Cara Membuat Workflow AI untuk Desain Versi Sederhana

Kita tidak perlu langsung membuat sistem dengan satu planner, lima builder, dan tiga evaluator. Sistem yang terlalu kompleks justru lebih sulit dipahami dan diperbaiki.

Untuk eksperimen pertama, gunakan:

• satu agent utama;
• satu design-loop skill;
• satu UI evaluator;
• satu file memory;
• satu flow kecil untuk diuji.

Misalnya, kamu ingin memperbaiki modal pemilihan wilayah pada sebuah dashboard.

1. Buat brief yang tidak ambigu

Simpan requirement di design/brief.md. (contoh ya)

# Goal

Membantu user memilih satu atau beberapa wilayah dengan cepat.

# Main tasks

- Mencari provinsi atau kota.
- Memilih shortcut wilayah populer.
- Melihat item yang sudah dipilih.
- Menghapus pilihan.
- Menerapkan filter.

# Constraints

- Modal memiliki lebar 600px.
- Maksimal lima shortcut utama.
- Hindari horizontal carousel.
- Gunakan existing search, chip, checkbox, dan button components.

# Required states

- Default
- Search result
- No result
- Selected
- Loading

Brief ini menjaga agar workflow AI untuk desain tetap mengarah pada problem yang sama selama proses iterasi.

2. Buat DESIGN.md

DESIGN.md bukan hanya daftar warna dan typography. File ini sebaiknya menjelaskan cara design system digunakan.

# Layout

- Gunakan spacing scale 4, 8, 12, 16, 24, dan 32.
- Hindari card di dalam card.
- Primary action berada di sisi kanan footer modal.
- Search harus menjadi elemen paling dominan setelah title.

# Components

- Reuse SearchField.
- Reuse SelectableChip.
- Reuse CheckboxListItem.
- Jangan membuat button variant baru.

# Visual direction

- Clean dan practical.
- Hindari gradient dekoratif.
- Selected state harus terlihat dari background, border, dan check icon.

Semakin jelas constraint-nya, semakin sedikit ruang bagi AI untuk membuat asumsi yang tidak perlu.

3. Buat evaluation rubric

AI perlu tahu seperti apa hasil yang dianggap baik.

Contohnya:

# Evaluation Rubric

## Usability — 30
- User dapat menemukan wilayah.
- User memahami item yang terpilih.
- Tidak ada interaction dead end.

## Visual hierarchy — 25
- Search mudah ditemukan.
- Shortcut tidak mengalahkan konten utama.
- Primary action terlihat jelas.

## Design system — 25
- Menggunakan existing component.
- Tidak ada arbitrary spacing atau color.
- State konsisten.

## Accessibility — 20
- Focus state terlihat.
- Label mudah dipahami.
- Keyboard navigation bekerja.

Passing score: 85

Dalam workflow AI untuk desain, rubric membuat review lebih konsisten. Tanpa rubric, evaluator mudah memberikan komentar umum seperti “desain sudah modern dan clean”, tetapi tidak menjelaskan apa yang perlu diperbaiki.

4. Buat design memory

Simpan feedback yang bisa digunakan kembali di design/design-memory.md.

# Learned Preferences

- Hindari horizontal carousel untuk opsi singkat.
- Jangan memberikan visual weight yang sama pada filter sekunder dan search utama.
- Untuk modal 600px, prioritaskan satu kolom.
- Selected state perlu memakai lebih dari perubahan warna teks.

Memory inilah yang membuat workflow AI untuk desain terasa seperti “belajar”.

Namun, kita perlu jujur: model AI biasanya tidak dilatih ulang berdasarkan feedback tersebut. Agent hanya membaca kembali catatan dan aturan yang kita simpan.

Jadi, “AI belajar taste kita” sebenarnya lebih dekat dengan:

Sistem menyimpan preferensi kita, lalu memasukkannya kembali sebagai context pada task berikutnya.

Hal ini tetap berguna. Bahkan, menurut saya lebih mudah dikontrol karena kita bisa membuka, mengedit, atau menghapus memory yang sudah tidak relevan.

Bagaimana Workflow AI untuk Desain Berjalan?

Setelah semua context tersedia, kita dapat memanggil skill dengan task yang spesifik:

/design-loop Improve the region selection modal based on design/brief.md

Agent utama kemudian menjalankan proses berikut:

1. Membaca brief, DESIGN.md, rubric, dan memory
2. Memeriksa UI dan komponen yang sudah ada
3. Membuat rencana singkat
4. Mengimplementasikan satu complete flow
5. Menjalankan aplikasi
6. Mengambil screenshot
7. Memanggil UI evaluator
8. Memperbaiki masalah dengan impact terbesar
9. Menjalankan evaluasi ulang
10. Menulis iteration log dan learning

Dalam workflow AI untuk desain, proses evaluasi tidak boleh hanya berdasarkan “kelihatan bagus”.

Agent juga perlu memeriksa:

• apakah user task dapat diselesaikan;
• apakah semua state tersedia;
• apakah komponen existing digunakan;
• apakah design tokens konsisten;
• apakah keyboard navigation bekerja;
• apakah console memiliki error;
• apakah perubahan membuat UI sebelumnya rusak.

Kita juga perlu memberi batas.

Contohnya:

Stop jika:
- score minimal 85;
- tidak ada critical issue;
- semua test berhasil;
- maksimal tiga iterasi;
- dua iterasi tidak menghasilkan peningkatan.

Tanpa stop condition, AI dapat terus mengubah UI tanpa arah yang jelas. Lebih banyak iterasi tidak selalu berarti hasilnya lebih baik.

Peran Figma dalam Workflow AI untuk Desain

Figma tetap punya peran penting. Namun, Figma tidak harus menjadi satu-satunya tempat AI bekerja.

Figma bisa menjadi sumber:

• design system;
• variables dan design tokens;
• component reference;
• layout reference;
• visual direction;
• prototype untuk human review.

Dengan Figma MCP, agent dapat menerima design context dari frame atau layer yang dipilih. Beberapa workflow juga memungkinkan agent membawa hasil code kembali ke Figma sebagai native content.

Namun, untuk proses loop yang membutuhkan test, coded prototype biasanya lebih mudah dievaluasi.

Code memungkinkan agent untuk:

• membuka UI di browser;
• mencoba interaction;
• membaca DOM;
• mengambil screenshot;
• menjalankan visual test;
• mengecek accessibility;
• melihat console error.

Karena itu, saya melihat pola yang cukup masuk akal:

Figma Design System
        ↓
DESIGN.md + Design Tokens
        ↓
Agent membangun coded prototype
        ↓
Browser test + screenshot evaluation
        ↓
Human review
        ↓
Final refinement di Figma atau code

Pendekatan ini tidak berarti code menggantikan Figma. Keduanya menjadi bagian dari workflow AI untuk desain yang sama, tetapi memiliki fungsi berbeda.

Figma kuat untuk eksplorasi, visual decision, dan collaboration. Code kuat untuk interaction, validation, responsive behavior, dan complete product flow.

Human Judgment dalam Workflow AI untuk Desain

Evaluator AI bisa mengecek aturan, tetapi ia belum tentu memahami konteks bisnis, kondisi user, atau kualitas pengalaman secara mendalam.

AI mungkin memberikan skor tinggi karena layout konsisten. Namun, designer tetap perlu bertanya:

• Apakah ini problem yang tepat?
• Apakah flow ini lebih sederhana bagi user?
• Apakah informasi yang paling penting sudah terlihat?
• Apakah solusi ini sesuai dengan cara kerja user sebenarnya?
• Apakah visual direction-nya cocok dengan brand?
• Apakah desain ini terasa generic?

Karena itu, tahap human verdict tidak boleh dihapus.

Dalam workflow AI untuk desain, AI dapat membantu mempercepat produksi dan menemukan masalah. Namun, designer tetap menjadi orang yang memilih arah.

Peran designer bergeser dari hanya membuat screen menjadi:

• menetapkan tujuan;
• memberi constraint;
• membangun standard;
• mengkritik hasil;
• memilih trade-off;
• menjaga taste;
• menentukan kapan hasil sudah cukup baik.

Bagi saya, ini bukan berarti craft menjadi tidak penting. Justru, pengetahuan craft dibutuhkan agar kita bisa menulis aturan dan memberikan feedback yang baik.

AI yang diberi arahan buruk hanya akan menghasilkan kesalahan dengan lebih cepat. Karena itu, kualitas workflow AI untuk desain tetap bergantung pada kualitas keputusan designer.

Kenapa Workflow AI untuk Desain Tidak Perlu Banyak Agent

Artikel tentang agent sering memperlihatkan struktur yang menarik:

1 planner agent
1 evaluator agent
3 builder agents
1 design-system agent

Secara konsep, struktur tersebut memang memungkinkan. Namun, untuk penggunaan sehari-hari, lebih banyak agent juga berarti:

• lebih banyak context;
• biaya lebih besar;
• proses lebih sulit dilacak;
• feedback bisa saling bertentangan;
• hasil lebih sulit direproduksi.

Untuk memulai workflow AI untuk desain, satu agent utama dan satu evaluator sudah cukup.

Setelah sistem sederhana tersebut stabil, baru tambahkan agent lain ketika ada alasan yang jelas.

Misalnya:

• tambahkan accessibility reviewer karena pemeriksaan accessibility sering terlewat;
• tambahkan UX reviewer karena evaluator visual terlalu fokus pada tampilan;
• tambahkan design-system guardian karena agent sering membuat komponen duplikat.

Jangan membuat agent hanya karena terdengar canggih. Buat agent ketika ada pekerjaan khusus yang memang perlu dipisahkan.

Contoh Setup Workflow AI untuk Desain

Struktur awalnya dapat dibuat seperti ini:

project/
├── AGENTS.md atau CLAUDE.md
├── design/
│   ├── brief.md
│   ├── DESIGN.md
│   ├── evaluation-rubric.md
│   └── design-memory.md
├── .agents atau .claude/
│   ├── skills/
│   │   └── design-loop/
│   │       └── SKILL.md
│   └── agents/
│       └── ui-evaluator.md
├── iterations/
├── screenshots/
└── src/

Lalu, jalankan satu task kecil:

Use the design-loop skill to improve the product selection flow.

Read the design brief and design system first.
Run a maximum of three iterations.
Use the UI evaluator after every implementation.
Do not change the product requirement.
Save reusable feedback into design-memory.md.

Dari sini, kamu bisa melihat apakah workflow AI untuk desain benar-benar mengurangi jumlah revisi manual.

Jangan menilai hanya dari kualitas hasil pertama. Perhatikan juga:

• apakah AI mengulangi kesalahan lama;
• apakah feedback tersimpan dengan benar;
• apakah evaluator menemukan masalah yang relevan;
• apakah iterasi kedua lebih baik dari iterasi pertama;
• apakah jumlah arahan manual berkurang.

Itulah ukuran keberhasilan loop yang lebih realistis.

Penutup

AI untuk desain tidak harus berhenti pada satu prompt dan satu output.

Dengan brief yang jelas, design system sebagai constraint, skill sebagai SOP, evaluator sebagai reviewer, dan memory sebagai catatan pembelajaran, kita dapat membuat proses yang lebih konsisten.

Namun, tidak perlu langsung membangun sistem yang rumit.

Mulailah dari satu complete flow. Buat DESIGN.md, satu evaluation rubric, satu file memory, dan satu skill sederhana. Jalankan maksimal tiga iterasi, lalu bandingkan hasilnya.

Tujuan utama workflow AI untuk desain bukan membuat AI bekerja tanpa manusia. Tujuannya adalah mengurangi pekerjaan berulang agar designer bisa lebih fokus pada problem, direction, quality, dan keputusan yang membutuhkan judgment.

Pada akhirnya, workflow AI untuk desain yang baik tetap memberi ruang bagi manusia untuk menentukan arah dan kualitas.

Kita bukan hanya meminta AI membuat UI lebih cepat.

Kita sedang merancang cara AI bekerja bersama kita.

Referensi

• OpenAI Codex: Customization, AGENTS.md, skills, dan MCP
• OpenAI Codex: Agent Skills
• Anthropic Claude Code: Skills
• Anthropic Claude Code: Subagents
• Factory Droid: Skills
• Factory Droid: Custom Droids
• Figma MCP Server