Panduan alur kerja

Frontend dan UI produk alur kerja

Alur kerja agent yang dapat ditinjau untuk Frontend dan UI produk.

Alur kerja agent yang dapat ditinjau untuk Frontend dan UI produk.

Hasil yang diharapkan

  • Perjelas tujuan Frontend dan UI produk
  • Pilih kemampuan yang cocok
  • Validasi hasil sebelum langkah berikutnya

Peta alur kerja

Ikuti urutan ini

01

Rumuskan

Ubah hasil yang diminta menjadi tugas agent yang jelas dan dapat ditinjau.

02

Pilih

Pilih kemampuan untuk tahap saat ini, bukan kategori yang terlalu luas.

03

Jalankan

Lakukan langkah berguna terkecil setelah memeriksa sumber, izin, dan cakupan.

04

Validasi

Tinjau bukti dan hasil sebelum melanjutkan ke tahap berikutnya.

Kemampuan yang disarankan

Pilih skill untuk setiap langkah

Diurutkan berdasarkan relevansi alur kerja, kualitas, adopsi GitHub, dan kebaruan pemeliharaan. Ini panduan keputusan, bukan satu perintah pemasangan.

#1Frontend DesignKualitas · 100

Deskripsi repositori (asli)

Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.

180K starsSource terms (see LICENSE.txt)design-creative
Bandingkan
$ npx skills add anthropics/skills --skill frontend-design
#2Web Design GuidelinesKualitas · 100

Deskripsi repositori (asli)

Review UI code for web interface guidelines, UX quality, accessibility, and interaction design best practices.

32K starsSource terms (see source)design-creative
Bandingkan
$ npx skills add vercel-labs/agent-skills --skill web-design-guidelines
#3Figma Implement DesignKualitas · 100

Deskripsi repositori (asli)

Translate Figma designs into production-ready UI code with close visual fidelity and component-level detail.

28K starsSource terms (see source)design-creative
Bandingkan
$ npx skills add openai/skills --skill figma-implement-design

Deskripsi repositori (asli)

Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.

94K starsMITdesign-creative
Bandingkan
$ npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
#5Ui Ux Pro Max SkillKualitas · 100

Deskripsi repositori (asli)

An AI agent skill that provides design intelligence and UI/UX guidelines for building professional interfaces across multiple platforms.

107K starsMITdevelopment
Bandingkan
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill
#6Webapp TestingKualitas · 100

Deskripsi repositori (asli)

Use Playwright to interact with and test local web applications, capture screenshots, debug UI behavior, and inspect browser logs.

180K starsSource terms (see LICENSE.txt)browser-automation
Bandingkan
$ npx skills add anthropics/skills --skill webapp-testing

Deskripsi repositori (asli)

React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.

32K starsMITcoding-agents
Bandingkan
$ npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
#8Playwright Browser SkillKualitas · 100

Deskripsi repositori (asli)

Automate a real browser from the terminal for navigation, form filling, snapshots, screenshots, extraction, and UI-flow debugging.

28K starsSource terms (see source)browser-automation
Bandingkan
$ npx skills add openai/skills --skill playwright

Cocok untuk

  • - Alur kerja Frontend dan UI produk
  • - Keputusan agent yang dapat diaudit
  • - Uji coba di ruang kerja terkontrol

Bukan jalur yang tepat ketika

  • - Tugas memerlukan akses tanpa pengawasan ke sistem sensitif
  • - Sumber atau kualitas hasil tidak dapat ditinjau

Butuh paket yang dapat dijalankan?

Skill Pack mencakup urutan pemasangan, tautan audit, dan rencana Agent yang dapat dibaca mesin.

Lihat packs