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.

170K 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.

30K 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.

25K 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.

78K starsMITdesign-creative
Bandingkan
$ npx skills add Leonxlnx/taste-skill --skill design-taste-frontend

Deskripsi repositori (asli)

Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.

170K starsSource terms (see LICENSE.txt)design-creative
Bandingkan
$ npx skills add anthropics/skills --skill brand-guidelines

Deskripsi repositori (asli)

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

30K starsMITcoding-agents
Bandingkan
$ npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
#7Webapp TestingKualitas · 100

Deskripsi repositori (asli)

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

170K starsSource terms (see LICENSE.txt)browser-automation
Bandingkan
$ npx skills add anthropics/skills --skill webapp-testing
#8Canvas DesignKualitas · 100

Deskripsi repositori (asli)

Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.

170K starsSource terms (see LICENSE.txt)design-creative
Bandingkan
$ npx skills add anthropics/skills --skill canvas-design

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