Cassi: Penjana Panduan Gaya CSS Berkuasa AI

Cassi: Pembantu CSS Dikuasakan AI

Cassi ialah alat berkuasa AI yang direka untuk menjana dokumentasi berasaskan penurunan nilai daripada fail CSS sedia ada. Ia memanfaatkan model AI untuk menjana maklumat yang bermakna tentang setiap peraturan CSS. Proses ini menjadikannya lebih mudah untuk mendokumenkan helaian gaya yang kompleks.

Cabaran dalam Mendokumentasikan Projek CSS Besar

Mengusahakan projek dengan sejumlah besar peraturan CSS, mungkin bertaburan merentasi berbilang fail, boleh menjadi mencabar. Alat sedia ada sering menumpukan pada pustaka komponen, memerlukan ulasan untuk ditambahkan pada peraturan atau sudah lapuk, menjadikannya sukar untuk mendokumenkan gaya CSS mentah dengan berkesan.

Saya membina Cassi untuk menangani isu ini dengan menganalisis fail CSS sedia ada dan menjana dokumentasi berasaskan penurunan nilai untuk setiap peraturan.

Ciri-ciri Utama Cassi

Inilah perkara yang menjadikan Cassi alat yang berkuasa:

1. Penyatuan AI Setempat atau Awan
   • Gunakan model sumber terbuka secara setempat atau sambungkan ke perkhidmatan AI yang dihoskan seperti model OpenAI atau Anthropic.
2. Output Dokumentasi Berasaskan Markdown
   • Menjana dokumentasi berasaskan markdown yang kaya lengkap dengan bahagian hadapan yang serasi 11 puluh.
3. Templat Boleh Disesuaikan
   • Edit templat gesaan untuk menyesuaikan output mengikut keperluan anda.
4. Integrasi Lancar
   • Output turun nilai berfungsi dengan mudah dengan alatan seperti 11ty atau platform dokumentasi lain.

Bagaimana Cassi Berfungsi

Sehingga masa menulis ini, Cassi tidak lebih daripada skrip Node JS dan templat segera. Saya mempunyai rancangan untuk menambah beberapa fungsi tambahan, lebih lanjut mengenainya kemudian. Buat masa ini, mari lihat cara ia berfungsi.

1. Penghuraian CSS

   • Membaca fail CSS berdasarkan corak glob yang disediakan.
   • Menghuraikan peraturan CSS untuk mengekstrak pemilih dan pengisytiharan.

2. Penjanaan Markdown Dikuasakan AI

   • Menghantar setiap peraturan kepada model AI dengan gesaan yang dibuat dengan teliti untuk menjana dokumentasi.

3. Buat Dokumentasi Markdown

   • Mencipta fail markdown untuk setiap peraturan menggunakan tindak balas model AI.

Seperti yang anda lihat, prosesnya agak mudah dan menunjukkan perkara yang boleh anda capai dengan gesaan yang betul apabila bekerja dengan model tempatan sekalipun.

Contoh Output

Berikut ialah contoh output penurunan harga yang dijana Cassi menggunakan qwen2.5-coder pada Ollama:

 ---
    tajuk: "Penggayaan untuk .btn-primary"
    tag: ["CSS", "Gaya", "Pemilih"]
    pautan kekal: "/styles/btn-primary/"
    shortDescription: "Penggayaan butang utama untuk menyerlahkan tindakan penting."
    pemilih:
    - ".btn-primary"
    ---

    ## Gambaran Keseluruhan

    Peraturan `.btn-primary` mentakrifkan penggayaan utama untuk butang yang sepatutnya menonjol, biasanya digunakan untuk seruan tindakan penting seperti "Serah" atau "Simpan."

    ## Penggunaan

    Berikut ialah cara menggunakan peraturan ini dalam HTML anda:

    ```

html
    <butang>



<h2>
  
  
  Repositori GitHub
</h2>

<p>Anda boleh mencari repositori Cassi di GitHub itlackey/cassi jika anda ingin melihat kod itu, mencuba sendiri atau membantu menambah baik alat.</p>

<h2>
  
  
  Apa Seterusnya untuk Cassi?
</h2>

<p>Cassi dibina untuk menyelesaikan masalah yang sedang saya hadapi. Sekarang saya boleh menjana dokumentasi yang diperlukan oleh pasukan saya dengan mudah, kami boleh mula memfokuskan pada menambah beberapa lagi ciri untuk meningkatkan aliran kerja kami dengan lebih baik lagi. Berikut ialah beberapa ciri yang saya sedang mempertimbangkan untuk menambah:</p>

<ul>
<li>
<strong>11ty Starter Kit</strong> - Projek 11ty pra-konfigurasi yang merangkumi Cassi dan diprakonfigurasikan untuk menjana panduan gaya daripada fail yang dibuat oleh Cassi.</li>
<li>
<strong>CLI yang betul</strong> untuk membenarkan sintaks seperti cassi menjana gaya/*.css --output-dir docs untuk menjana dokumentasi, muat turun cassi http://some.site untuk memuat turun fail CSS daripada URL atau binaan cassi ke hasilkan panduan gaya menggunakan 11ty.</li>
<li>
<strong>Kemas Kini Bertambah</strong> - Tambahkan logik untuk membolehkan Cassi menentukan CSS yang telah ditambah/diubah suai dan menambah/kemas kini dokumen penurunan nilai sewajarnya.</li>
<li>
<strong>Pengumpulan Gaya</strong> - Benarkan pengguna mengumpulkan peraturan CSS ke dalam kategori atau bahagian untuk navigasi yang lebih mudah.</li>
</ul>

<h2>
  
  
  Fikiran Akhir
</h2>

<p>Dokumentasi CSS tidak semestinya manual, proses yang memakan masa. <strong>Cassi</strong> boleh menjana dokumentasi berasaskan markdown yang kaya dengan cepat yang mudah digunakan, disepadukan dan disesuaikan.</p>

<p><strong>Apa pendapat anda?</strong> Adakah Cassi akan berguna dalam projek anda? Beritahu saya dalam ulasan di bawah!</p>


          

            

            
        </butang>

Atas ialah kandungan terperinci Cassi: Penjana Panduan Gaya CSS Berkuasa AI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!