{"product_id":"malvina-webflow-developer-no-code-web-systems","title":"Malvina - Webflow 開發人員 AI Skill","description":"\u003cdiv style=\"font-family: 'DM Sans', sans-serif; color: #1A1A18; max-width: 680px;\"\u003e\n \u003cp style=\"font-size: 16px; font-weight: 600; line-height: 1.5; margin: 0 0 8px 0;\"\u003e將 Malvina 放入 Claude，取得一位會在繪製第一個區塊前先設計 CMS 結構的 Webflow 開發者，因為那是之後無法撤銷的決定。\u003c\/p\u003e\n \u003cp style=\"font-size: 13px; color: #555550; line-height: 1.7; margin: 0 0 28px 0;\"\u003eMalvina 負責使用 Webflow 建立正式上線的網站，無需傳統開發技術堆疊：將資訊架構轉換為 CMS Collections 和參照欄位；採用 Client-First 等類別命名系統，確保網站在交接後仍易於維護；在每個斷點使用 flexbox 和 grid 建立響應式版面；將 Interactions 和捲動動畫控制在效能預算內；掌握原生 CMS 的限制（100 個 Collections、10,000 個項目、每個項目 5 個參照欄位、20 個篩選器），以及客戶超出這些限制時的處理方式；使用 Finsweet Attributes 進行動態篩選與搜尋；Logic 與表單處理；會員功能與受限內容；本地化；頁首與內文中的自訂程式碼；當資料超出 CMS 能力時，將 Webflow 與 Xano 或 Airtable 同步；建置環境與備份規範；遷移期間的 301 重新導向對應表；Webflow 中的 Core Web Vitals；無障礙；以及坦誠判斷網站何時根本不應使用 Webflow 建置。\u003c\/p\u003e\n \u003cdiv style=\"background: #EDF9EB; border-radius: 12px; padding: 24px 28px; margin-bottom: 24px;\"\u003e\n \u003cp style=\"font-size: 10px; font-weight: 600; color: #287E1B; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px 0;\"\u003e您將獲得的內容\u003c\/p\u003e\n \u003cul style=\"margin: 0; padding: 0; list-style: none;\"\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(40,126,27,0.14); display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003eCMS Collections、參照欄位與平台的實際限制\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(40,126,27,0.14); display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003e交接後仍易於維護的 Client-First 類別系統\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(40,126,27,0.14); display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003eFinsweet 篩選、Logic、會員功能、本地化與自訂程式碼\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0;  display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003e遷移重新導向對應表、Core Web Vitals 與無障礙檢查\u003c\/span\u003e\n\u003c\/li\u003e\n \u003c\/ul\u003e\n \u003c\/div\u003e\n \u003cdiv style=\"display:flex; align-items:center; gap:20px; background:#FFFFFF; border:1px solid #E8E6E0; border-radius:8px; padding:14px 20px; margin-bottom:24px;\"\u003e\n \u003cspan style=\"font-size:11px; color:#888780; font-family:monospace;\"\u003e📄 malvina-webflow-developer-no-code-web-systems.skill\u003c\/span\u003e\n \u003cspan style=\"font-size:11px; color:#888780;\"\u003e安裝時間少於 2 分鐘\u003c\/span\u003e\n \u003cspan style=\"font-size:11px; color:#888780;\"\u003e適用於 Claude、ChatGPT 和任何 AI 聊天工具\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv style=\"border-left:3px solid #287E1B; padding-left:16px;\"\u003e\n \u003cp style=\"font-size:10px; font-weight:600; color:#287E1B; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 6px 0;\"\u003e如何安裝\u003c\/p\u003e\n \u003cp style=\"font-size:12px; color:#555550; line-height:1.7; margin:0;\"\u003e下載 .skill 套件，開啟 Claude，將 SKILL.md 貼到 Project Instructions 或系統 prompt 中，描述您的需求，Malvina 就會建立答案。內含完整的實作範例，讓您確切了解會得到什麼。\u003c\/p\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58394059637000,"sku":null,"price":29.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/malvina-webflow-developer-no-code-web-systems-book.jpg?v=1787172476","url":"https:\/\/kissmyskills.com\/zh\/products\/malvina-webflow-developer-no-code-web-systems","provider":"KissMySkills","version":"1.0","type":"link"}