awsm

Toolkit untuk agent yang peduli desain.

ENID

Kode rapi.Desain berani.

Bekali coding agent dengan konteks desain, aset nyata, dan pemeriksaan UI di browser.

Pasang AWSM
Coding agent kamu

Bikin antarmuka ini layak dilihat.Bikin layak dilihat.

Konteks masuk. Keputusan lebih baik.
Satu pintu MCP lokal
awsm

23 tool. Satu MCP lokal.

Bekal desain, di komputermu sendiri.

ASET & TIPOGRAFIAa / Bb
localhost / Bukti dari browser
DESAIN → KODE → CEK UI
LokalOpen sourceTanpa layanan hosting
Ikuti alurnya

Dari “yang penting jalan” ke “bagus juga, ya.”

Agent kamu menulis kode. AWSM menyiapkan bekal desain dan bukti dari hasil render.

  1. 01

    AI coding agent

    Bawa brief-nya

  2. 02

    AWSM

    Satu MCP lokal

  3. 03

    Bekal desain

    Konteks + fondasi

  4. 04

    Aset & tipografi

    Cari bahan yang tepat

  5. 05

    Handoff FigCraft

    Inspeksi + ekspor¹

  6. 06

    Kode

    Agent yang mengerjakan

  7. 07

    Pemeriksaan UI

    Cek di browser nyata

¹ Inspeksi dan ekspor kanvas memakai MCP asli FigCraft yang dikonfigurasi terpisah. AWSM menyiapkan handoff, bukan mengedit kanvas.

SATU TUGAS. BERAGAM TOOL. AGENT YANG SAMA.

Rancang komponen aplikasi ini. Cari aset yang kurang. Cek tampilannya di ponsel.

inspect_ui_project({ root: "." })

Alur yang berguna, bukan ekspor ajaib.

Periksa proyek. Pilih bahan. Implementasikan bersama agent. Tinjau UI yang berjalan, lalu perbaiki temuan di browser.

AWSM menyediakan tool. Agent kamu yang memakainya.

Kurangi tebakan. Mulai berkarya.

Pilih kelompok tool. Lihat bahan yang benar-benar bisa dipakai agent kamu.

02 / ASET & TIPOGRAFI

Tipografi dengan file font sungguhan.

Temukan font, periksa bobot yang tersedia, dan pasang file WOFF2 secara lokal. Tinjau lisensi dan cakupan karakter sebelum rilis.

Referensi desain dari kamu
Referensi desain dari kamu
google_font / find_icons / palette / check_contrast

23 tool bertipe / satu koneksi. Aset, fondasi, handoff, tinjauan browser, utilitas, dan bridge MCP lokal opsional.

Referensi visual: Hero.png dari pemilik proyek. Ditampilkan sebagai konteks desain, bukan situs yang dibuat AWSM.

Kanvas adalah titik awal.

Teks tetap bisa diedit. Komponen tetap nyata. Periksa hasilnya di tempat orang memakainya: browser.

LAYER / MCP FigCraft
Frame
Teks
Komponen
Aset visual
KOMPONEN SEMANTIK
<main>
  <Hero />
  <Workflow />
</main>
BROWSER / HASIL NYATA

Cek hasil akhirnya.

375 × 812 1440 × 900

Audit DOM + screenshot + perbandingan

  1. 01 / MCP asli FigCraft

    Periksa layer dan ekspor aset. Konfigurasikan FigCraft secara terpisah.

  2. 02 / Handoff AWSM

    Kelompokkan data layer dengan prepare_web_handoff. Salin ekspor asli lewat sync_figcraft_assets.

  3. 03 / Agent + browser

    Implementasikan UI, lalu jalankan review_ui di localhost dengan Playwright lokal proyek.

AWSM tidak mengedit kanvas FigCraft, bukan editor Figma, dan tidak membuat situs lengkap sendiri. QA visual menyediakan bukti, bukan sertifikat WCAG atau jaminan hasil yang persis sama.

Pasang FigCraft

Halaman unduhan resmi ArtCraft. Pasang FigCraft dan konfigurasikan MCP-nya secara terpisah.

Bawa coding agent favoritmu.

Pilih client saat pemasangan. AWSM tetap satu koneksi MCP lokal.

--client opencode | claude | codex | antigravity | copilot | zed

Pemasangan MCP Zed memakai --global.

Pasang sebentar. Eksplorasi lebar.

Node.js 18+ / npx / coding agent yang mendukung MCP. Jalankan di dalam proyek.

PEMASANGAN PROYEK/OpenCode dipilih
npx -y github:rikoarik/figcraft-mcp-awsm setup \
  --client opencode \
  --source github:rikoarik/figcraft-mcp-awsm

Lalu mulai ulang agent atau hubungkan ulang MCP. Cari “awsm” dan skill awsm-design.

Konfigurasi: .opencode/opencode.json

 

01 koneksi

23 tool bertipe. Tanpa layanan hosting atau VPS.

01 skill bawaan

awsm-design memandu alurnya. Tambah 21 spesialis dengan --all-skills.

Bridge opsional

Konfigurasikan MCP stdio lokal tepercaya secara eksplisit. Server turunannya tetap terpisah.

Dipasang dari GitHub, bukan paket npm bernama my-awsm-mcp. Tinjau kode pihak ketiga sebelum menjalankannya.

QA browser memerlukan Playwright + Chromium lokal proyek. Proses turunan bridge berjalan dengan izin akun lokalmu; tinjau perintah dan tool tepercaya.

Kenali yang kamu hubungkan.

AWSM adalah server Model Context Protocol (MCP) lokal dan open source yang menyediakan utilitas desain UI, pencarian aset, handoff FigCraft ke kode, dan QA visual berbasis browser untuk coding agent melalui satu koneksi MCP.

Koneksi
Stdio lokal. Tidak memerlukan layanan hosting atau VPS.
Isi toolkit
23 tool bertipe, skill bawaan awsm-design, dan 21 skill spesialis opsional melalui --all-skills.
Agent
OpenCode, Claude Code, Codex, Google Antigravity, GitHub Copilot CLI, Zed.
Runtime & lisensi
Node.js 18+ untuk AWSM. Lisensi MIT; gratis digunakan. Pembuat: rikoarik di GitHub.

Jawaban yang perlu kamu tahu.

Apa fungsi MCP di AWSM?

Model Context Protocol memungkinkan coding agent memanggil tool melalui koneksi standar. AWSM menyediakan satu koneksi MCP stdio lokal untuk utilitas desain, pencarian aset, persiapan handoff, dan QA browser. AWSM berjalan di komputermu, bukan pada layanan hosting wajib.

Baca sumbernya
Coding agent apa saja yang didukung AWSM?

AWSM menyediakan setup untuk OpenCode, Claude Code, Codex, Google Antigravity, GitHub Copilot CLI, dan Zed. Zed memakai konfigurasi tingkat pengguna dan memerlukan --global; client lain yang didokumentasikan memakai setup lokal proyek secara default.

Baca sumbernya
Apa isinya, dan apa syarat menjalankannya?

AWSM berisi 23 tool bertipe dan skill bawaan awsm-design. Opsi --all-skills memasang 21 skill spesialis tambahan. AWSM memerlukan Node.js 18 atau lebih baru dan berjalan lokal melalui stdio; tidak perlu VPS.

Baca sumbernya
Apakah AWSM mengedit kanvas FigCraft?

Tidak. AWSM menyiapkan konteks handoff FigCraft ke kode, bukan mengedit kanvas. Pengeditan melalui MCP native FigCraft memerlukan koneksi terpisah yang dikonfigurasi di aplikasi FigCraft. Handoff bukan janji ekspor pixel-perfect sekali klik.

Baca sumbernya
Apa yang diperiksa oleh QA browser?

QA browser memakai Playwright dan Chromium yang terpasang lokal untuk memeriksa antarmuka yang dirender serta mengumpulkan screenshot, pemeriksaan DOM, dan bukti perbandingan visual. Ini bukan sertifikasi WCAG atau jaminan bahwa semua masalah aksesibilitas ditemukan.

Baca sumbernya
Dari mana asal perintah instalasinya?

Perintah di halaman ini memakai entry point setup dari repositori GitHub publik rikoarik/figcraft-mcp-awsm. Tinjau panduan instalasi dan lisensi MIT sebelum menjalankannya. Situs ini tidak pernah mengeksekusi perintah untukmu.

Baca sumbernya

Tool lokal.Selera merdeka.

Open source dengan lisensi MIT. Jalankan di komputermu, baca kodenya, ubah tool-nya, dan biarkan agent kamu memegang kendali.

Lihat di GitHub
github.com/rikoarik/figcraft-mcp-awsmMIT

Digerakkan rasa ingin tahu.Ditemani secangkir kopi.

Kalau AWSM membantumu membuat sesuatu yang layak dirilis, kamu bisa mendukung eksperimen di baliknya.

Traktir kopi

Dukungan opsional. AWSM tetap open source dengan lisensi MIT. Tidak perlu donasi untuk memakainya.