webcake-landing-mcp 1.0.35 → 1.0.37

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.0.37",
+    "d": "08/06/2026",
+    "type": "Changed",
+    "en": "get_generation_guide now includes a HEADER section build hint directing the agent to place every header child (logo, brand text, CTA button) on a…",
+    "vi": "get_generation_guide nay bổ sung gợi ý dựng section HEADER yêu cầu agent đặt mọi phần tử con trong header (logo, tên thương hiệu, nút CTA) trên cùng…"
+  },
+  {
+    "v": "1.0.36",
+    "d": "08/06/2026",
+    "type": "Changed",
+    "en": "The GET / web guide page now lists \"Claude · Codex · Cursor, etc.\" instead of only \"Claude · Cursor\" in the AI assistant flow diagram, reflecting…",
+    "vi": "Trang hướng dẫn GET / nay hiển thị \"Claude · Codex · Cursor, v.v.\" thay vì chỉ \"Claude · Cursor\" trong sơ đồ luồng AI assistant, phản ánh danh sách…"
+  },
   {
     "v": "1.0.35",
     "d": "08/06/2026",
@@ -26,19 +40,5 @@
     "type": "Fixed",
     "en": "get_element for select now marks specials.field_placeholder as required (the published renderer crashes without it), the element seed now emits a…",
     "vi": "get_element cho select nay đánh dấu specials.field_placeholder là bắt buộc (renderer đã xuất bản sẽ crash nếu thiếu trường này), seed phần tử nay…"
-  },
-  {
-    "v": "1.0.31",
-    "d": "08/06/2026",
-    "type": "Fixed",
-    "en": "get_element for spin_wheel now correctly documents specials.code as a newline-delimited string (one line per segment in couponCode|Prize…",
-    "vi": "get_element cho spin_wheel nay ghi lại đúng specials.code là chuỗi phân cách bằng dấu xuống dòng (mỗi dòng một segment theo định dạng couponCode|Tên…"
-  },
-  {
-    "v": "1.0.30",
-    "d": "08/06/2026",
-    "type": "Changed",
-    "en": "The server instructions now direct the agent to gather all get_element and get_generation_guide results before assembling the page source, build the…",
-    "vi": "Hướng dẫn cho agent nay yêu cầu thu thập toàn bộ kết quả get_element và get_generation_guide trước khi lắp ráp nguồn trang, xây dựng cây phần tử đầy…"
   }
 ]

package/dist/domains/landing/guide.js

@@ -68,6 +68,7 @@ VISUAL VARIETY (make two pages of the SAME type still look different — driven
 
 SECTION BUILD HINTS (apply to whichever sections the chosen archetype uses)
 - Each section is one visual band: height that comfortably holds its content (taller on mobile since things stack), background that contrasts its text.
+- HEADER — logo/brand on the left, nav/CTA on the right, all on ONE shared vertical centerline: give every header child the SAME vertical center (match top + height/2 across the logo, brand text, and CTA button) so nothing sits higher/lower than the rest. Keep the same left/right margins as the sections below so the header lines up with the page's horizontal axis.
 - HERO — always a clear H1, a short supporting line, and the primary CTA visible without scrolling.
 - FEATURES / BENEFITS — a row of equal cards (icon + title + text) or a 2-column list. Center the row with the ROW math; on mobile shrink to one canvas width or stack.
 - PRODUCT / OFFER — image beside name + price + benefit list + CTA (swap sides per balance). Price and CTA stand out.
@@ -79,7 +80,7 @@ RULES
 - Visible content goes in "specials" (text-block.specials.text, image-block.specials.src…), NEVER in "styles".
 - Colors as rgba(r,g,b,a). fontSize/borderWidth/top/left/width/height are NUMBERS (px).
 - IMAGES: a real landing page has images (hero/product shot, feature icons, about photo). PREFER REAL PHOTOS: call search_images with a short English subject (e.g. 'fresh coffee cup', 'modern office team') and put a returned URL into image-block specials.src — use src.large for a hero/banner, src.medium for a card/thumb (avg_color helps pick a matching section background). ONLY if search_images returns ok:false (or is unreachable) FALL BACK to a PLACEHOLDER sized to the box: "https://placehold.co/<width>x<height>". NEVER leave src empty — it renders blank and the page looks broken. gallery.media = array of OBJECTS {type:'image', link:'<real-or-placeholder-url>', linkVideo:'', typeVideo:'youtube', imageCompression:true} (NOT plain URL strings — the gallery reads item.link); video.specials.img = a poster image (real photo, else placeholder).
-- CONTRAST: text must contrast with the section background (dark text on light sections, light text on dark sections). Don't put light-gray text on white or faint text on a dark background.
+- CONTRAST (check EVERY text element against the band it sits on, especially SATURATED / mid-tone bands like yellow, orange, teal, pink — there "light vs dark text" is not obvious, so decide by the band's luminance): light bands → near-black text (e.g. rgba(20,30,25,1)); dark bands → near-white text; a saturated/mid-tone band → whichever of near-black or near-white actually reads (for a bright yellow/amber band that means DARK text, not white/grey). NEVER use muted-grey, low-alpha (alpha < ~0.85), or near-white text on a colored band — that is exactly what makes labels look faded/sunken. Muted-grey is ONLY for secondary text on a white/very-light band. Icons and their captions follow the SAME rule as the text beside them.
 - movable:false for section/slide/grid-item/popup; otherwise true. runtime is always {}.
 - Every form input MUST have a unique specials.field_name.
 - events item: { "id", "type", "action", "target", ...action-specific extra fields }. TRIGGER (type): click & hover on any element; success & error on a FORM (success = after a successful submit, error = on validation failure); delay on any element (when it scrolls into view); unset on init. Action vocab per trigger: click→CLICK_ACTIONS, hover→HOVER_ACTIONS, success→SUCCESS_ACTIONS, error→ERROR_ACTIONS, delay→DELAY_ACTIONS (all returned by get_generation_guide). For element-targeting actions (open_popup, close_popup, scroll_to, show_section, hide_section, show_hide_element, change_tab, collapse) target = the target element's id; open_link/download_file target = URL; open_sms/send_email/phone_call target = phone/email; copy target = text (or element id when copyType='elementValue'); set_field_value target = field_name; target may be null (e.g. animation_hover). Each action also reads extra fields (e.g. open_link→targetURL/delayTime, scroll_to→scrollMore, change_tab→moveTo/tabIndex, lightbox→typeLightbox/alt, show_hide_element→onlyMode, open_app→appTarget+provider fields, set_field_value→set_value) — see the action maps for the full list.

package/dist/web-guide.js

@@ -149,7 +149,7 @@ const T = {
         flowH2: "Mô hình hoạt động",
         flow: [
             { icon: "bulb", t: "Bạn", s: "ý tưởng" },
-            { icon: "brain", t: "Trợ lý AI", s: "Claude · Cursor" },
+            { icon: "brain", t: "Trợ lý AI", s: "Claude · Codex · Cursor,etc..." },
             { icon: "server", t: "MCP", s: "webcake-landing" },
             { icon: "window", t: "WebCake", s: "trang thật" },
         ],
@@ -174,12 +174,36 @@ const T = {
         ],
         buildH2: "Bạn dựng được những gì",
         uses: [
-            { icon: "magnet", t: "Trang thu lead", e: '"Trang waitlist cho SaaS — hero, 3 lợi ích, form thu email."' },
-            { icon: "cart", t: "Bán hàng COD / online", e: '"Trang một sản phẩm — gallery, giá, biến thể, form đặt hàng có giỏ."' },
-            { icon: "ticket", t: "Sự kiện / webinar", e: '"Trang đăng ký — đếm ngược, agenda, form đăng ký."' },
-            { icon: "mail", t: "Thiệp mời", e: '"Thiệp cưới — tên, ngày, bản đồ, form RSVP."' },
-            { icon: "phone", t: "Quảng bá app", e: '"Mockup điện thoại, danh sách tính năng, nút App Store + Google Play."' },
-            { icon: "flame", t: "Flash sale", e: '"Đồng hồ đếm ngược to, lưới sản phẩm giảm giá, nút Mua dính."' },
+            {
+                icon: "magnet",
+                t: "Trang thu lead",
+                e: '"Trang waitlist cho SaaS — hero, 3 lợi ích, form thu email."',
+            },
+            {
+                icon: "cart",
+                t: "Bán hàng COD / online",
+                e: '"Trang một sản phẩm — gallery, giá, biến thể, form đặt hàng có giỏ."',
+            },
+            {
+                icon: "ticket",
+                t: "Sự kiện / webinar",
+                e: '"Trang đăng ký — đếm ngược, agenda, form đăng ký."',
+            },
+            {
+                icon: "mail",
+                t: "Thiệp mời",
+                e: '"Thiệp cưới — tên, ngày, bản đồ, form RSVP."',
+            },
+            {
+                icon: "phone",
+                t: "Quảng bá app",
+                e: '"Mockup điện thoại, danh sách tính năng, nút App Store + Google Play."',
+            },
+            {
+                icon: "flame",
+                t: "Flash sale",
+                e: '"Đồng hồ đếm ngược to, lưới sản phẩm giảm giá, nút Mua dính."',
+            },
         ],
         connectH2: "Kết nối — chọn 1 trong 2 cách",
         m1Tag: "Cách ① · npx — chạy trên máy bạn",
@@ -196,15 +220,24 @@ const T = {
         m2Steps: [
             '<b>Lấy link cá nhân</b> (đã gắn sẵn token) — mở trang sau rồi bấm <b>Copy</b>:<a class="btn" href="{REMOTE}">Mở {REMOTE_HOST} {ARROW}</a>',
             '<b>Mở phần thêm connector</b> trong client:<br>• claude.ai: <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: mở file <code class="inl">.mcp.json</code>',
-            '<b>Dán link</b> vừa copy (có dạng):<pre>{ENDPOINT}?jwt=&lt;TOKEN&gt;</pre>',
+            "<b>Dán link</b> vừa copy (có dạng):<pre>{ENDPOINT}?jwt=&lt;TOKEN&gt;</pre>",
             "<b>Bấm Add</b> (hoặc lưu file) → đợi kết nối → xong. Icon Webcake xanh hiện lên là chạy được.",
         ],
         m2Note: "⚠️ Link chứa token cá nhân — coi như mật khẩu, đừng chia sẻ, luôn dùng HTTPS.",
         afterH2: "Sau khi kết nối, bạn nói được",
         examples: [
-            { icon: "wand", t: '"Dựng landing bán khoá học, tông xanh, có form đăng ký + nút Zalo."' },
-            { icon: "edit", t: '"Mở trang <i>sale-hè</i>, đổi tiêu đề thành \'Giảm 50%\', nút sang màu đỏ."' },
-            { icon: "clock", t: '"Thêm section đếm ngược + 3 testimonial vào cuối trang."' },
+            {
+                icon: "wand",
+                t: '"Dựng landing bán khoá học, tông xanh, có form đăng ký + nút Zalo."',
+            },
+            {
+                icon: "edit",
+                t: "\"Mở trang <i>sale-hè</i>, đổi tiêu đề thành 'Giảm 50%', nút sang màu đỏ.\"",
+            },
+            {
+                icon: "clock",
+                t: '"Thêm section đếm ngược + 3 testimonial vào cuối trang."',
+            },
         ],
         newH2: "Có gì mới",
         newBadge: "MỚI",
@@ -227,7 +260,7 @@ const T = {
         flowH2: "How it flows",
         flow: [
             { icon: "bulb", t: "You", s: "your idea" },
-            { icon: "brain", t: "AI assistant", s: "Claude · Cursor" },
+            { icon: "brain", t: "AI assistant", s: "Claude · Codex · Cursor,etc..." },
             { icon: "server", t: "MCP", s: "webcake-landing" },
             { icon: "window", t: "WebCake", s: "a real page" },
         ],
@@ -237,7 +270,7 @@ const T = {
             {
                 icon: "brain",
                 t: "AI learns the real model",
-                d: 'Webcake\'s element catalog, <code class="inl">specials</code>, coordinate system and events — pulled straight from this server\'s tools.',
+                d: "Webcake's element catalog, <code class=\"inl\">specials</code>, coordinate system and events — pulled straight from this server's tools.",
             },
             {
                 icon: "check2",
@@ -252,12 +285,36 @@ const T = {
         ],
         buildH2: "What you can build",
         uses: [
-            { icon: "magnet", t: "Lead-gen page", e: '"A SaaS waitlist — hero, 3 benefits, an email-capture form."' },
-            { icon: "cart", t: "COD / online store", e: '"A one-product page — gallery, price, variations, an order form with cart."' },
-            { icon: "ticket", t: "Event / webinar", e: '"A registration page — countdown, agenda, sign-up form."' },
-            { icon: "mail", t: "Invitation", e: '"A wedding invite — names, date, a map, an RSVP form."' },
-            { icon: "phone", t: "App promo", e: '"Phone mockups, feature list, App Store + Google Play buttons."' },
-            { icon: "flame", t: "Flash sale", e: '"A big countdown, a discounted product grid, a sticky Buy button."' },
+            {
+                icon: "magnet",
+                t: "Lead-gen page",
+                e: '"A SaaS waitlist — hero, 3 benefits, an email-capture form."',
+            },
+            {
+                icon: "cart",
+                t: "COD / online store",
+                e: '"A one-product page — gallery, price, variations, an order form with cart."',
+            },
+            {
+                icon: "ticket",
+                t: "Event / webinar",
+                e: '"A registration page — countdown, agenda, sign-up form."',
+            },
+            {
+                icon: "mail",
+                t: "Invitation",
+                e: '"A wedding invite — names, date, a map, an RSVP form."',
+            },
+            {
+                icon: "phone",
+                t: "App promo",
+                e: '"Phone mockups, feature list, App Store + Google Play buttons."',
+            },
+            {
+                icon: "flame",
+                t: "Flash sale",
+                e: '"A big countdown, a discounted product grid, a sticky Buy button."',
+            },
         ],
         connectH2: "Connect — pick one of two ways",
         m1Tag: "Way ① · npx — runs on your machine",
@@ -274,15 +331,24 @@ const T = {
         m2Steps: [
             '<b>Get your personal link</b> (token baked in) — open the page below and hit <b>Copy</b>:<a class="btn" href="{REMOTE}">Open {REMOTE_HOST} {ARROW}</a>',
             '<b>Open the add-connector area</b> in your client:<br>• claude.ai: <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: open <code class="inl">.mcp.json</code>',
-            '<b>Paste the link</b> you copied (looks like):<pre>{ENDPOINT}?jwt=&lt;TOKEN&gt;</pre>',
+            "<b>Paste the link</b> you copied (looks like):<pre>{ENDPOINT}?jwt=&lt;TOKEN&gt;</pre>",
             "<b>Hit Add</b> (or save the file) → wait for it to connect → done. A green Webcake icon means it's live.",
         ],
         m2Note: "⚠️ The link carries your personal token — treat it like a password, never share it, always use HTTPS.",
         afterH2: "Once connected, you can say",
         examples: [
-            { icon: "wand", t: '"Build a landing page to sell a course, green theme, a sign-up form + a Zalo button."' },
-            { icon: "edit", t: "\"Open the <i>summer-sale</i> page, change the headline to 'Save 50%', make the button red.\"" },
-            { icon: "clock", t: '"Add a countdown section + 3 testimonials to the bottom of the page."' },
+            {
+                icon: "wand",
+                t: '"Build a landing page to sell a course, green theme, a sign-up form + a Zalo button."',
+            },
+            {
+                icon: "edit",
+                t: "\"Open the <i>summer-sale</i> page, change the headline to 'Save 50%', make the button red.\"",
+            },
+            {
+                icon: "clock",
+                t: '"Add a countdown section + 3 testimonials to the bottom of the page."',
+            },
         ],
         newH2: "What's new",
         newBadge: "NEW",
@@ -319,7 +385,7 @@ const CL_TYPE_VI = {
 function clTag(type, lang) {
     if (!type)
         return "";
-    const label = lang === "vi" ? CL_TYPE_VI[type] ?? "" : type;
+    const label = lang === "vi" ? (CL_TYPE_VI[type] ?? "") : type;
     return label ? ` <span class="cl-tag">${label}</span>` : "";
 }
 function steps(items) {
@@ -354,11 +420,20 @@ export function guideHtml(origin, lang = "vi") {
                 url: canonical,
                 image: ogImage,
                 offers: { "@type": "Offer", price: "0", priceCurrency: "USD" },
-                author: { "@type": "Organization", name: "Webcake", url: "https://webcake.io" },
+                author: {
+                    "@type": "Organization",
+                    name: "Webcake",
+                    url: "https://webcake.io",
+                },
                 softwareHelp: DOCS_URL,
                 installUrl: NPM_URL,
             },
-            { "@type": "WebSite", name: "Webcake Landing MCP", url: `${origin}/`, inLanguage: L },
+            {
+                "@type": "WebSite",
+                name: "Webcake Landing MCP",
+                url: `${origin}/`,
+                inLanguage: L,
+            },
             {
                 "@type": "FAQPage",
                 mainEntity: faq.map((f) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-landing-mcp",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "description": "MCP server exposing Webcake landing-page element schemas + AI usage hints, and persisting LLM-generated page sources to a Webcake backend.",
   "type": "module",
   "license": "MIT",