{"id":43234,"date":"2026-08-14T16:55:19","date_gmt":"2026-08-14T09:55:19","guid":{"rendered":"https:\/\/interdata.vn\/blog\/?p=43234"},"modified":"2026-08-14T16:56:23","modified_gmt":"2026-08-14T09:56:23","slug":"claude-skill-thiet-ke-web","status":"publish","type":"post","link":"https:\/\/interdata.vn\/blog\/claude-skill-thiet-ke-web\/","title":{"rendered":"15 Claude Skill Thi\u1ebft K\u1ebf Web &#8211; Claude Skill Frontend Design, UI Chu\u1ea9n \u0110\u1eb9p"},"content":{"rendered":"<p style=\"text-align: justify;\"><span style=\"font-size: 100%;\"><strong>Claude Skill thi\u1ebft k\u1ebf web<\/strong> l\u00e0 l\u1edbp ch\u1ec9 d\u1eabn thi\u1ebft k\u1ebf m\u00e0 Claude Code \u0111\u1ecdc tr\u01b0\u1edbc khi vi\u1ebft t\u1eebng d\u00f2ng code giao di\u1ec7n \u2013 gi\u1ea3i ph\u00e1p tr\u1ef1c ti\u1ebfp cho b\u00e0i to\u00e1n &#8220;AI t\u1ea1o UI x\u1ea5u, generic, \u0111\u1ea7y d\u1ea5u v\u1ebft AI slop&#8221; m\u00e0 h\u00e0ng ngh\u00ecn developer \u0111ang g\u1eb7p khi <a href=\"https:\/\/interdata.vn\/blog\/vibe-coding-la-gi\/\">Vibe Coding<\/a>. B\u00e0i vi\u1ebft t\u1eeb <a href=\"https:\/\/interdata.vn\/\">InterData<\/a> d\u01b0\u1edbi \u0111\u00e2y t\u1ed5ng h\u1ee3p 15 Skill \u0111\u00e3 ki\u1ec3m ch\u1ee9ng tr\u00ean GitHub, ph\u00e2n lo\u1ea1i theo ch\u1ee9c n\u0103ng, k\u00e8m combo g\u1ee3i \u00fd v\u00e0 h\u01b0\u1edbng d\u1eabn c\u00e0i \u0111\u1eb7t th\u1ef1c t\u1ebf.<\/span><\/p>\n<div style=\"background-color: #eff6ff; padding: 20px; border: 1.5px solid #BFDBFE; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 8px 20px rgba(37,99,235,0.05);\">\n<p style=\"font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; font-size: 18px; margin: 0 0 15px; color: #1e3a8a;\">N\u1ed8I DUNG B\u00c0I VI\u1ebeT<\/p>\n<ul style=\"list-style-type: none; padding-left: 0; margin: 0;\">\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section1\">1. Claude Skill thi\u1ebft k\u1ebf web l\u00e0 g\u00ec? V\u00ec sao giao di\u1ec7n AI m\u1eb7c \u0111\u1ecbnh x\u1ea5u?<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section2\">2. Ph\u00e2n bi\u1ec7t Claude Skill, Plugin v\u00e0 Prompt th\u01b0\u1eddng<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section3\">3. 15 Claude Skill thi\u1ebft k\u1ebf web chi ti\u1ebft \u2013 ph\u00e2n lo\u1ea1i theo ch\u1ee9c n\u0103ng<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section4\">4. B\u1ea3ng so s\u00e1nh t\u1ed5ng h\u1ee3p 15 Claude Skill thi\u1ebft k\u1ebf web<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section5\">5. Combo Claude Skill thi\u1ebft k\u1ebf web theo lo\u1ea1i d\u1ef1 \u00e1n<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section6\">6. C\u00e1ch c\u00e0i \u0111\u1eb7t Claude Skill thi\u1ebft k\u1ebf web \u2013 h\u01b0\u1edbng d\u1eabn t\u1eebng b\u01b0\u1edbc<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section7\">7. Deploy s\u1ea3n ph\u1ea9m Vibe Coding l\u00ean server \u2013 ch\u1ecdn VPS hay Cloud Server?<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section8\">8. C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Claude Skill thi\u1ebft k\u1ebf web<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n<style>\n.interdata-plan-carousel,.interdata-plan-carousel *{box-sizing:border-box}\n.interdata-plan-carousel{--blue:#005bea;--blue-dark:#004dcc;--text:#071832;--muted:#516173;--border:#d8e6fb;--bg:#f3f8ff;--shadow:0 5px 14px rgba(0,62,145,.08);background:var(--bg);padding:14px 56px 18px;position:relative;overflow:hidden;border-radius:20px;}\n.interdata-carousel-heading{color:#f00;font-family:Roboto,sans-serif;font-size:18px;line-height:1.35;font-weight:800;text-align:center;margin:0 0 14px}\n.interdata-plan-viewport{overflow:hidden;width:100%}\n.interdata-plan-track{display:flex;align-items:stretch;gap:12px;overflow:visible;padding:0 0 4px;transform:translate3d(0,0,0);transition:transform .45s ease;will-change:transform;touch-action:pan-y}\n.interdata-plan-card{flex:0 0 calc((100% - 24px)\/3);min-width:0;min-height:0!important;height:auto;background:#fff;border:1px solid var(--border);border-radius:8px;padding:15px 12px 13px;display:flex;flex-direction:column;box-shadow:var(--shadow)}\n.interdata-plan-title{color:var(--blue-dark);font-size:16px;line-height:1.22;font-weight:800;text-align:center;margin:0 0 7px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.interdata-plan-price{color:var(--blue-dark);font-size:24px;line-height:1;font-weight:900;text-align:center;margin-bottom:12px;white-space:nowrap;letter-spacing:0}\n.interdata-plan-price span{font-size:10px;font-weight:800;margin-left:2px}\n.interdata-plan-badge{align-self:center;display:inline-flex;align-items:center;justify-content:center;background:#ff3934;color:#fff;border-radius:5px;padding:7px 8px;font-size:9px;line-height:1;font-weight:800;margin-bottom:15px;white-space:nowrap;max-width:100%}\n.interdata-plan-features{list-style:none!important;padding:0!important;margin:0!important}\n.interdata-plan-features li{display:flex;gap:7px;align-items:flex-start;color:var(--text);font-size:12px;line-height:1.35;font-weight:700;text-align:left;margin:0 0 10px!important;padding:0!important}\n.interdata-plan-icon{width:14px;min-width:14px;height:14px;color:#0069ff;margin-top:2px}\n.interdata-plan-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}\n.interdata-plan-spacer{flex:1;min-height:16px}\n.interdata-plan-button{display:flex;align-items:center;justify-content:center;min-height:42px;width:100%;margin-top:auto!important;margin-bottom:0!important;background:var(--blue);color:#fff!important;border-radius:5px;font-size:13px;font-weight:800;text-decoration:none!important;box-shadow:0 7px 14px rgba(0,91,234,.24);transition:transform .2s ease,background .2s ease}\n.interdata-plan-button:hover{background:var(--blue-dark);color:#fff!important;transform:translateY(-1px)}\n.interdata-carousel-arrow{position:absolute;top:50%;z-index:5;width:44px;height:54px;border:2px solid #fff!important;border-radius:999px;background:var(--blue)!important;color:#fff!important;box-shadow:0 8px 22px rgba(0,62,145,.32);display:flex!important;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-35%);transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease}\n.interdata-carousel-arrow:hover{background:var(--blue-dark)!important;color:#fff!important;transform:translateY(-35%) scale(1.04)}\n.interdata-carousel-arrow:disabled{opacity:.78;cursor:not-allowed;background:#8aa6cf!important;color:#fff!important}\n.interdata-carousel-arrow:disabled:hover{background:#8aa6cf!important;color:#fff!important;transform:translateY(-35%)}\n.interdata-carousel-arrow svg{display:none!important}\n.interdata-carousel-arrow:before{content:none!important;display:none!important}\n.interdata-carousel-mark{display:block!important;color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:38px!important;font-weight:900!important;line-height:1!important;text-align:center!important;pointer-events:none!important;transform:translateY(-2px)}\n.interdata-carousel-prev{left:14px}\n.interdata-carousel-prev .interdata-carousel-mark{margin-left:-2px}\n.interdata-carousel-next{right:14px}\n.interdata-carousel-next .interdata-carousel-mark{margin-right:-2px}\n@media (max-width:800px){.interdata-plan-carousel{padding:12px 44px 16px}.interdata-plan-card{flex-basis:calc((100% - 12px)\/2)}.interdata-carousel-heading{font-size:16px}.interdata-carousel-prev{left:6px}.interdata-carousel-next{right:6px}}\n@media (max-width:480px){.interdata-plan-carousel{padding:12px 38px 16px}.interdata-plan-card{flex-basis:100%}.interdata-plan-price{font-size:23px}.interdata-carousel-arrow{width:34px;height:44px}.interdata-carousel-mark{font-size:32px!important}.interdata-carousel-prev{left:3px}.interdata-carousel-next{right:3px}}\n<\/style>\n\n<div class=\"interdata-plan-carousel\" data-interdata-carousel>\n  <div class=\"interdata-carousel-heading\">Si\u00eau \u01afu \u0110\u00e3i VPS \/ CLOUD SERVER - Ti\u1ebft Ki\u1ec7m \u0110\u1ebfn 70%<\/div>\n\n  <svg width=\"0\" height=\"0\" style=\"position:absolute;visibility:hidden\" aria-hidden=\"true\">\n    <symbol id=\"id-icon-cpu\" viewBox=\"0 0 24 24\"><rect x=\"7\" y=\"7\" width=\"10\" height=\"10\" rx=\"2\"><\/rect><path d=\"M4 9h3M4 15h3M17 9h3M17 15h3M9 4v3M15 4v3M9 17v3M15 17v3\"><\/path><path d=\"M10 10h4v4h-4z\"><\/path><\/symbol>\n    <symbol id=\"id-icon-ram\" viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"8\" rx=\"2\"><\/rect><path d=\"M7 16v2M11 16v2M15 16v2M19 16v2M7 11h1M11 11h1M15 11h1\"><\/path><\/symbol>\n    <symbol id=\"id-icon-storage\" viewBox=\"0 0 24 24\"><rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\"><\/rect><path d=\"M9 7h6\"><\/path><circle cx=\"12\" cy=\"16\" r=\"1.5\"><\/circle><\/symbol>\n    <symbol id=\"id-icon-network\" viewBox=\"0 0 24 24\"><path d=\"M5 12.5a10 10 0 0 1 14 0\"><\/path><path d=\"M8.5 16a5 5 0 0 1 7 0\"><\/path><path d=\"M12 19h.01\"><\/path><\/symbol>\n    <symbol id=\"id-icon-gift\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"13\" rx=\"2\"><\/rect><path d=\"M12 8v13M3 12h18\"><\/path><path d=\"M7.5 8C6.1 8 5 6.9 5 5.5S6.1 3 7.5 3C10 3 12 8 12 8\"><\/path><path d=\"M16.5 8C17.9 8 19 6.9 19 5.5S17.9 3 16.5 3C14 3 12 8 12 8\"><\/path><\/symbol>\n  <\/svg>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-prev\" type=\"button\" aria-label=\"Xem 3 g\u00f3i tr\u01b0\u1edbc\" onclick=\"var r=this.closest('[data-interdata-carousel]');if(!r)return false;var t=r.querySelector('.interdata-plan-track'),c=t?t.querySelectorAll('.interdata-plan-card'):[];if(!t||!c.length)return false;var v=window.matchMedia('(max-width:480px)').matches?1:(window.matchMedia('(max-width:800px)').matches?2:3),m=Math.max(0,c.length-Math.min(v,c.length||1)),s=[],i=0;while(i&lt;m){s.push(i);i+=v}if(!s.length||s[s.length-1]!==m)s.push(m);var p=parseInt(r.getAttribute('data-inline-page')||'0',10);p=(p-1+s.length)%s.length;r.setAttribute('data-inline-page',p);var g=parseFloat(window.getComputedStyle(t).gap)||12,w=c[0].getBoundingClientRect().width;t.style.transition='transform .45s ease';t.style.transform='translate3d('+(-(w+g)*s[p])+'px,0,0)';return false;\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 18l-6-6 6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8249;<\/span>\n  <\/button>\n\n  <div class=\"interdata-plan-viewport\">\n    <div class=\"interdata-plan-track\">\n      <!-- 7 card d\u1ef1 ph\u00f2ng: JavaScript s\u1ebd \u0111\u1ed3ng b\u1ed9 l\u1ea1i t\u1eeb API portal khi trang t\u1ea3i. -->\n      <article class=\"interdata-plan-card\" data-plan-pid=\"490\">\n        <h3 class=\"interdata-plan-title\">Premium Base<\/h3>\n        <div class=\"interdata-plan-price\">299.000 \u0111<span>\/3 th\u00e1ng<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 vCore Intel Xeon Scalable<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>2 GB <a href=\"https:\/\/interdata.vn\/blog\/ram-server\/\">RAM<\/a><\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-value-plans-2026\/best-value-plans-premium-base\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"529\">\n        <h3 class=\"interdata-plan-title\">INTER PLATINUM 1<\/h3>\n        <div class=\"interdata-plan-price\">998.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>3 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/inter-platinum-series-2026\/inter-platinum-1\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"530\">\n        <h3 class=\"interdata-plan-title\">INTER PLATINUM 2<\/h3>\n        <div class=\"interdata-plan-price\">2.666.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>5 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>70 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/inter-platinum-series-2026\/inter-platinum-2\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"531\">\n        <h3 class=\"interdata-plan-title\">INTER PLATINUM 3<\/h3>\n        <div class=\"interdata-plan-price\">5.888.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>9 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>16 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>140 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/inter-platinum-series-2026\/inter-platinum-3\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"521\">\n        <h3 class=\"interdata-plan-title\">BD-Cloud 1<\/h3>\n        <div class=\"interdata-plan-price\">988.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>3 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>3 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-plan-real-cloud\/bd-cloud-1\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"522\">\n        <h3 class=\"interdata-plan-title\">BD-Cloud 2<\/h3>\n        <div class=\"interdata-plan-price\">2.988.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>4 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>80 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300 Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-plan-real-cloud\/bd-cloud-2\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"523\">\n        <h3 class=\"interdata-plan-title\">BD-Cloud 3<\/h3>\n        <div class=\"interdata-plan-price\">5.999.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>8 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>16 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>140 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>400 Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-plan-real-cloud\/bd-cloud-3\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n    <\/div>\n  <\/div>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-next\" type=\"button\" aria-label=\"Xem 3 g\u00f3i ti\u1ebfp theo\" onclick=\"var r=this.closest('[data-interdata-carousel]');if(!r)return false;var t=r.querySelector('.interdata-plan-track'),c=t?t.querySelectorAll('.interdata-plan-card'):[];if(!t||!c.length)return false;var v=window.matchMedia('(max-width:480px)').matches?1:(window.matchMedia('(max-width:800px)').matches?2:3),m=Math.max(0,c.length-Math.min(v,c.length||1)),s=[],i=0;while(i&lt;m){s.push(i);i+=v}if(!s.length||s[s.length-1]!==m)s.push(m);var p=parseInt(r.getAttribute('data-inline-page')||'0',10);p=(p+1)%s.length;r.setAttribute('data-inline-page',p);var g=parseFloat(window.getComputedStyle(t).gap)||12,w=c[0].getBoundingClientRect().width;t.style.transition='transform .45s ease';t.style.transform='translate3d('+(-(w+g)*s[p])+'px,0,0)';return false;\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 18l6-6-6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8250;<\/span>\n  <\/button>\n<\/div>\n\n<script>\n(function(){\n  var API_GROUPS=[\n    {url:'https:\/\/support.interdata.vn\/packages.php?gid=89&module',pids:[490]},\n    {url:'https:\/\/support.interdata.vn\/packages.php?gid=100&module',pids:[529,530,531]},\n    {url:'https:\/\/support.interdata.vn\/packages.php?gid=97&module',pids:[521,522,523]}\n  ];\n  var PLAN_CYCLES={\n    490:{key:'quarterly',label:'3 th\u00e1ng'},\n    529:{key:'annually',label:'n\u0103m'},\n    530:{key:'annually',label:'n\u0103m'},\n    531:{key:'annually',label:'n\u0103m'},\n    521:{key:'annually',label:'n\u0103m'},\n    522:{key:'annually',label:'n\u0103m'},\n    523:{key:'annually',label:'n\u0103m'}\n  };\n\n  function fetchPlanData(){\n    if(window.interdataPlanApiPromise)return window.interdataPlanApiPromise;\n\n    window.interdataPlanApiPromise=Promise.all(API_GROUPS.map(function(group){\n      return fetch(group.url,{method:'GET',mode:'cors',cache:'no-store'})\n        .then(function(response){\n          if(!response.ok)throw new Error('API '+response.status);\n          return response.json();\n        })\n        .then(function(data){\n          if(!data||data.success!==true||!Array.isArray(data.products))return [];\n          return data.products.filter(function(product){\n            return group.pids.indexOf(Number(product.pid))!==-1;\n          });\n        })\n        .catch(function(error){\n          console.warn('Kh\u00f4ng th\u1ec3 c\u1eadp nh\u1eadt nh\u00f3m g\u00f3i InterData:',group.url,error);\n          return [];\n        });\n    })).then(function(groups){\n      return groups.reduce(function(all,products){return all.concat(products);},[]);\n    });\n\n    return window.interdataPlanApiPromise;\n  }\n\n  function parseDescription(html){\n    var source=String(html||'')\n      .replace(\/<brs*\/?>\/gi,'n')\n      .replace(\/<\/(p|div|li)>\/gi,'n');\n    var holder=document.createElement('div');\n    holder.innerHTML=source;\n    var strong=holder.querySelector('strong');\n    var badge=strong?strong.textContent.trim():'';\n    var lines=(holder.textContent||'').split(\/r?n\/).map(function(line){\n      return line.trim();\n    }).filter(Boolean);\n    if(badge&&lines[0]===badge)lines.shift();\n    return {badge:badge,features:lines};\n  }\n\n  function iconForFeature(feature){\n    if(\/ram\/i.test(feature))return 'id-icon-ram';\n    if(\/ssd|nvme|storage|disk\/i.test(feature))return 'id-icon-storage';\n    if(\/vcore|vcpu|cpu|xeon|amd\/i.test(feature))return 'id-icon-cpu';\n    if(\/ipv4|network|mbps|gbps|bandwidth\/i.test(feature))return 'id-icon-network';\n    return 'id-icon-gift';\n  }\n\n  function createFeatureItem(feature){\n    var item=document.createElement('li');\n    var icon=document.createElement('span');\n    var svg=document.createElementNS('http:\/\/www.w3.org\/2000\/svg','svg');\n    var use=document.createElementNS('http:\/\/www.w3.org\/2000\/svg','use');\n    icon.className='interdata-plan-icon';\n    use.setAttribute('href','#'+iconForFeature(feature));\n    svg.appendChild(use);\n    icon.appendChild(svg);\n    item.appendChild(icon);\n    item.appendChild(document.createTextNode(feature));\n    return item;\n  }\n\n  function updateCardFromApi(root,product){\n    var pid=Number(product.pid);\n    var cycle=PLAN_CYCLES[pid];\n    var card=root.querySelector('[data-plan-pid=\"'+pid+'\"]');\n    if(!card||!cycle)return;\n\n    var title=card.querySelector('.interdata-plan-title');\n    var priceBox=card.querySelector('.interdata-plan-price');\n    var badgeBox=card.querySelector('.interdata-plan-badge');\n    var featureList=card.querySelector('.interdata-plan-features');\n    var button=card.querySelector('.interdata-plan-button');\n    var description=parseDescription(product.description);\n    var pricing=product.pricing&&product.pricing.VND;\n    var price=pricing?Number(pricing[cycle.key]):-1;\n\n    if(title&&product.name)title.textContent=product.name;\n    if(priceBox&&Number.isFinite(price)&&price>=0){\n      priceBox.textContent=Math.round(price).toLocaleString('vi-VN')+' \u0111';\n      var suffix=document.createElement('span');\n      suffix.textContent='\/'+cycle.label;\n      priceBox.appendChild(suffix);\n    }\n    if(badgeBox&&description.badge)badgeBox.textContent=description.badge;\n    if(featureList&&description.features.length){\n      featureList.textContent='';\n      description.features.forEach(function(feature){\n        featureList.appendChild(createFeatureItem(feature));\n      });\n    }\n    if(button&&product.product_url)button.href=product.product_url;\n  }\n\n  function setupInterDataCarousel(root){\n    var track=root.querySelector('.interdata-plan-track');\n    var prev=root.querySelector('.interdata-carousel-prev');\n    var next=root.querySelector('.interdata-carousel-next');\n    if(!track||!prev||!next||track.dataset.ready==='1')return;\n    track.dataset.ready='1';\n    prev.disabled=false;\n    next.disabled=false;\n    var activePage=0;\n    var touchStartX=null;\n\n    function visibleCards(){\n      if(window.matchMedia&&window.matchMedia('(max-width:480px)').matches)return 1;\n      if(window.matchMedia&&window.matchMedia('(max-width:800px)').matches)return 2;\n      return 3;\n    }\n\n    function pageStarts(){\n      var total=track.querySelectorAll('.interdata-plan-card').length;\n      var visible=Math.min(visibleCards(),total||1);\n      var maxStart=Math.max(0,total-visible);\n      var starts=[];\n      var start=0;\n      while(start<maxStart){\n        starts.push(start);\n        start+=visible;\n      }\n      if(!starts.length||starts[starts.length-1]!==maxStart)starts.push(maxStart);\n      return starts;\n    }\n\n    function renderSlide(animate){\n      var cards=track.querySelectorAll('.interdata-plan-card');\n      var starts=pageStarts();\n      if(!cards.length||!starts.length)return;\n      if(activePage>=starts.length)activePage=starts.length-1;\n      if(activePage<0)activePage=0;\n\n      var cardWidth=cards[0].getBoundingClientRect().width;\n      var trackStyle=window.getComputedStyle?window.getComputedStyle(track):null;\n      var gap=trackStyle?parseFloat(trackStyle.columnGap||trackStyle.gap):12;\n      if(!Number.isFinite(gap))gap=12;\n      if(cardWidth<=0)return;\n\n      track.style.transition=animate?'transform .45s ease':'none';\n      track.style.transform='translate3d('+(-(cardWidth+gap)*starts[activePage])+'px,0,0)';\n      prev.setAttribute('aria-disabled',starts.length>1?'false':'true');\n      next.setAttribute('aria-disabled',starts.length>1?'false':'true');\n    }\n\n    function move(direction){\n      var starts=pageStarts();\n      if(starts.length<=1)return;\n      activePage=parseInt(root.getAttribute('data-inline-page')||activePage,10)||0;\n      activePage=(activePage+direction+starts.length)%starts.length;\n      root.setAttribute('data-inline-page',activePage);\n      renderSlide(true);\n    }\n\n    track.addEventListener('touchstart',function(event){\n      touchStartX=event.touches&&event.touches[0]?event.touches[0].clientX:null;\n    },{passive:true});\n    track.addEventListener('touchend',function(event){\n      if(touchStartX===null)return;\n      var endX=event.changedTouches&&event.changedTouches[0]?event.changedTouches[0].clientX:touchStartX;\n      var distance=endX-touchStartX;\n      touchStartX=null;\n      if(Math.abs(distance)>=40)move(distance<0?1:-1);\n    },{passive:true});\n\n    function resetAfterResize(){\n      activePage=0;\n      root.setAttribute('data-inline-page','0');\n      renderSlide(false);\n    }\n\n    window.addEventListener('resize',resetAfterResize);\n    window.addEventListener('load',resetAfterResize);\n    if('ResizeObserver' in window){\n      var resizeObserver=new ResizeObserver(function(){renderSlide(false);});\n      resizeObserver.observe(root);\n    }\n    window.requestAnimationFrame(function(){renderSlide(false);});\n    window.setTimeout(function(){renderSlide(false);},250);\n    window.setTimeout(function(){renderSlide(false);},1000);\n\n    fetchPlanData().then(function(products){\n      products.forEach(function(product){updateCardFromApi(root,product);});\n      renderSlide(false);\n    });\n  }\n\n  function initInterDataCarousels(){\n    document.querySelectorAll('[data-interdata-carousel]').forEach(setupInterDataCarousel);\n  }\n\n  if(document.readyState==='loading'){\n    document.addEventListener('DOMContentLoaded',initInterDataCarousels);\n  }else{\n    initInterDataCarousels();\n  }\n\n  if('MutationObserver' in window){\n    var initQueued=false;\n    new MutationObserver(function(){\n      if(initQueued)return;\n      initQueued=true;\n      window.requestAnimationFrame(function(){\n        initQueued=false;\n        initInterDataCarousels();\n      });\n    }).observe(document.documentElement,{childList:true,subtree:true});\n  }\n})();\n<\/script>\n\n\t<div id=\"gap-1987423344\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1987423344 {\n  padding-top: 15px;\n}\n<\/style>\n\t<\/div>\n\t\n<h2 id=\"section1\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">Claude Skill thi\u1ebft k\u1ebf web l\u00e0 g\u00ec? V\u00ec sao giao di\u1ec7n AI m\u1eb7c \u0111\u1ecbnh x\u1ea5u?<\/h2>\n<p style=\"text-align: justify;\">Claude Skill thi\u1ebft k\u1ebf web l\u00e0 file ch\u1ec9 d\u1eabn (th\u01b0\u1eddng \u1edf \u0111\u1ecbnh d\u1ea1ng Markdown) ch\u1ee9a c\u00e1c quy t\u1eafc v\u1ec1 b\u1ed1 c\u1ee5c, m\u00e0u s\u1eafc, typography, animation v\u00e0 component m\u00e0 Claude Code ph\u1ea3i tu\u00e2n theo khi sinh code giao di\u1ec7n. Kh\u00e1c v\u1edbi prompt m\u1ed9t l\u1ea7n, Skill \u0111\u01b0\u1ee3c l\u01b0u trong d\u1ef1 \u00e1n v\u00e0 t\u1ef1 \u0111\u1ed9ng \u00e1p d\u1ee5ng cho m\u1ecdi l\u1ea7n Claude vi\u1ebft code \u2013 t\u1ea1o ra h\u1ec7 th\u1ed1ng thi\u1ebft k\u1ebf nh\u1ea5t qu\u00e1n xuy\u00ean su\u1ed1t s\u1ea3n ph\u1ea9m.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">V\u1ea5n \u0111\u1ec1 &#8220;distributional convergence&#8221; \u2013 g\u1ed1c r\u1ec5 giao di\u1ec7n AI x\u1ea5u<\/h3>\n<p style=\"text-align: justify;\">Khi kh\u00f4ng c\u00f3 Skill, Claude Code (v\u00e0 c\u00e1c <a href=\"https:\/\/interdata.vn\/blog\/cong-cu-ai-viet-code\/\">c\u00f4ng c\u1ee5 AI vi\u1ebft code<\/a> kh\u00e1c) m\u1eb7c \u0111\u1ecbnh ch\u1ecdn style ph\u1ed5 bi\u1ebfn nh\u1ea5t trong d\u1eef li\u1ec7u hu\u1ea5n luy\u1ec7n. K\u1ebft qu\u1ea3: button bo g\u00f3c 4px, font system-ui, layout 2 c\u1ed9t Bootstrap, gradient xanh-t\u00edm \u2013 c\u00e1i m\u00e0 c\u1ed9ng \u0111\u1ed3ng g\u1ecdi l\u00e0 &#8220;AI slop&#8221;. M\u1ecdi s\u1ea3n ph\u1ea9m tr\u00f4ng gi\u1ed1ng nhau v\u00ec AI h\u1ed9i t\u1ee5 v\u1ec1 ph\u00e2n ph\u1ed1i trung b\u00ecnh c\u1ee7a h\u00e0ng tri\u1ec7u website n\u00f3 \u0111\u00e3 \u0111\u1ecdc.<\/p>\n<p style=\"text-align: justify;\">V\u1ea5n \u0111\u1ec1 n\u00e0y c\u00f3 t\u00ean k\u1ef9 thu\u1eadt: <strong>distributional convergence<\/strong>. Frontend-Design <a href=\"https:\/\/interdata.vn\/blog\/plugin-la-gi\/\">Plugin<\/a> c\u1ee7a Anthropic g\u1ecdi th\u1eb3ng ra v\u00e0 \u0111\u1eb7t lu\u1eadt c\u1ea5m font generic, \u00e9p bold aesthetics, b\u1eaft bu\u1ed9c CSS animation thu\u1ea7n \u2013 ch\u00ednh l\u00e0 c\u00e1ch &#8220;ph\u00e1 v\u1ee1&#8221; h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh \u0111\u00f3.<\/p>\n<p style=\"text-align: justify;\">Skill thi\u1ebft k\u1ebf web gi\u1ea3i quy\u1ebft g\u1ed1c r\u1ec5 b\u1eb1ng c\u00e1ch \u00e9p Claude tu\u00e2n theo design rules c\u1ee5 th\u1ec3 tr\u01b0\u1edbc khi vi\u1ebft b\u1ea5t k\u1ef3 d\u00f2ng code n\u00e0o. Thay v\u00ec \u0111\u1ec3 AI t\u1ef1 ch\u1ecdn, b\u1ea1n ch\u1ec9 \u0111\u1ecbnh r\u00f5: d\u00f9ng palette n\u00e0o, typography n\u00e0o, spacing system ra sao, animation \u1edf m\u1ee9c n\u00e0o. \u0110\u00f3 l\u00e0 l\u00fd do giao di\u1ec7n output ra kh\u00e1c bi\u1ec7t r\u00f5 r\u1ec7t so v\u1edbi kh\u00f4ng d\u00f9ng Skill.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43256\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Skill-thiet-ke-web.jpg\" alt=\"Claude Skill thi\u1ebft k\u1ebf web\" width=\"700\" height=\"350\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Skill-thiet-ke-web.jpg 1050w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Skill-thiet-ke-web-300x150.jpg 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Skill-thiet-ke-web-1024x512.jpg 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Skill-thiet-ke-web-768x384.jpg 768w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2 id=\"section2\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">Ph\u00e2n bi\u1ec7t Claude Skill, Plugin v\u00e0 Prompt th\u01b0\u1eddng<\/h2>\n<p style=\"text-align: justify;\">Ba kh\u00e1i ni\u1ec7m n\u00e0y hay b\u1ecb nh\u1ea7m l\u1eabn, \u0111\u1eb7c bi\u1ec7t v\u1edbi ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u d\u00f9ng Claude Code. Hi\u1ec3u r\u00f5 s\u1ef1 kh\u00e1c bi\u1ec7t gi\u00fap b\u1ea1n ch\u1ecdn \u0111\u00fang c\u00f4ng c\u1ee5 cho t\u1eebng t\u00ecnh hu\u1ed1ng.<\/p>\n<table style=\"width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px;\">\n<thead>\n<tr style=\"background-color: #1e3a8a; color: #fff;\">\n<th style=\"padding: 12px 15px; text-align: left; border: 1px solid #BFDBFE;\">Ti\u00eau ch\u00ed<\/th>\n<th style=\"padding: 12px 15px; text-align: left; border: 1px solid #BFDBFE;\">Prompt th\u01b0\u1eddng<\/th>\n<th style=\"padding: 12px 15px; text-align: left; border: 1px solid #BFDBFE;\">Claude Skill<\/th>\n<th style=\"padding: 12px 15px; text-align: left; border: 1px solid #BFDBFE;\">Plugin<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB; font-weight: 600;\">C\u00e1ch ho\u1ea1t \u0111\u1ed9ng<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">G\u1eedi m\u1ed9t l\u1ea7n trong chat<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">File .md l\u01b0u trong d\u1ef1 \u00e1n, t\u1ef1 \u0111\u1ed9ng \u00e1p d\u1ee5ng<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">G\u00f3i g\u1ed3m Skill + MCP server + config<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB; font-weight: 600;\">Ph\u1ea1m vi t\u00e1c \u0111\u1ed9ng<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Ch\u1ec9 l\u1ea7n chat \u0111\u00f3<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">To\u00e0n b\u1ed9 d\u1ef1 \u00e1n<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">To\u00e0n b\u1ed9 d\u1ef1 \u00e1n + c\u00f4ng c\u1ee5 b\u1ed5 sung<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB; font-weight: 600;\">T\u00ednh nh\u1ea5t qu\u00e1n<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Th\u1ea5p \u2013 ph\u1ea3i nh\u1eafc l\u1ea1i m\u1ed7i l\u1ea7n<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Cao \u2013 \u00e1p d\u1ee5ng t\u1ef1 \u0111\u1ed9ng<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Cao \u2013 k\u00e8m tool h\u1ed7 tr\u1ee3<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB; font-weight: 600;\">V\u00ed d\u1ee5 d\u00f9ng cho thi\u1ebft k\u1ebf<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">&#8220;D\u00f9ng Tailwind, bo g\u00f3c 8px&#8221;<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Design system 192 b\u1ea3ng m\u00e0u + 74 c\u1eb7p typography<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Frontend-Design Plugin: Skill + audit t\u1ef1 \u0111\u1ed9ng<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: justify;\">N\u00f3i ng\u1eafn g\u1ecdn: Prompt l\u00e0 l\u1eddi d\u1eb7n m\u1ed9t l\u1ea7n, Skill l\u00e0 b\u1ed9 lu\u1eadt thi\u1ebft k\u1ebf l\u01b0u c\u1ed1 \u0111\u1ecbnh, Plugin l\u00e0 Skill c\u1ed9ng th\u00eam c\u00f4ng c\u1ee5. V\u1edbi thi\u1ebft k\u1ebf web, Skill v\u00e0 Plugin cho k\u1ebft qu\u1ea3 \u1ed5n \u0111\u1ecbnh h\u01a1n prompt \u0111\u01a1n thu\u1ea7n v\u00ec Claude kh\u00f4ng &#8220;qu\u00ean&#8221; ch\u1ec9 d\u1eabn gi\u1eefa ch\u1eebng.<\/p>\n<p><!-- BOX CTA #1 \u2013 VPS VIBE CODING --><\/p>\n<div style=\"display: flex; flex-wrap: wrap; background-color: #fff; border: 1.5px solid #BFDBFE; box-shadow: 0 8px 20px rgba(37,99,235,0.08); border-radius: 12px; overflow: hidden; margin: 35px 0;\">\n<div style=\"flex: 1; min-width: 250px; background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center;\">\n<div>\n<p style=\"color: #fff; font-size: 34px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; margin: 0; line-height: 1.1;\">VPS Vibe Coding<\/p>\n<p style=\"color: #dbeafe; font-size: 15px; font-weight: 600; margin-top: 12px;\">T\u00edch h\u1ee3p EzyPlatform \u2013 t\u1eeb \u00fd t\u01b0\u1edfng \u0111\u1ebfn s\u1ea3n ph\u1ea9m ch\u1ea1y th\u1eadt<\/p>\n<\/div>\n<\/div>\n<div style=\"flex: 2; padding: 25px; min-width: 300px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 0; font-size: 20px;\">Giao di\u1ec7n \u0111\u1eb9p r\u1ed3i \u2013 gi\u1edd c\u1ea7n n\u01a1i deploy ch\u1ea1y th\u1eadt?<\/h3>\n<p style=\"text-align: justify; font-size: 15px; margin-bottom: 15px;\">Claude Skill gi\u00fap giao di\u1ec7n \u0111\u1eb9p chu\u1ea9n tay ng\u01b0\u1eddi, nh\u01b0ng s\u1ea3n ph\u1ea9m ch\u1ec9 ch\u1ea1y tr\u00ean localhost th\u00ec ch\u01b0a c\u00f3 ng\u01b0\u1eddi d\u00f9ng th\u1eadt. VPS Vibe Coding c\u1ee7a InterData t\u00edch h\u1ee3p s\u1eb5n EzyPlatform \u2013 b\u1ea1n push code l\u00ean, h\u1ec7 th\u1ed1ng lo ph\u1ea7n server, database, t\u00e0i kho\u1ea3n, email, thanh to\u00e1n. Kh\u00f4ng c\u1ea7n t\u1ef1 c\u1ea5u h\u00ecnh t\u1eeb \u0111\u1ea7u.<\/p>\n<p><a style=\"background: linear-gradient(90deg, #2563EB 0%, #1E3A8A 100%); color: #fff; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 8px; font-size: 15px; display: inline-block; box-shadow: 0 5px 15px rgba(37,99,235,0.3);\" href=\"https:\/\/interdata.vn\/vps-vibe-coding\/\" target=\"_blank\" rel=\"noopener\">Thu\u00ea VPS Vibe Coding \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<h2 id=\"section3\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">15 Claude Skill thi\u1ebft k\u1ebf web chi ti\u1ebft \u2013 ph\u00e2n lo\u1ea1i theo ch\u1ee9c n\u0103ng<\/h2>\n<p style=\"text-align: justify;\">D\u01b0\u1edbi \u0111\u00e2y l\u00e0 15 Claude Skill thi\u1ebft k\u1ebf web \u0111\u00e3 \u0111\u01b0\u1ee3c ki\u1ec3m ch\u1ee9ng tr\u1ef1c ti\u1ebfp tr\u00ean GitHub. M\u1ed7i skill k\u00e8m link repo g\u1ed1c \u0111\u1ec3 b\u1ea1n t\u1ef1 \u0111\u1ecdc source tr\u01b0\u1edbc khi c\u00e0i. Ph\u00e2n nh\u00f3m theo ch\u1ee9c n\u0103ng ch\u00ednh, kh\u00f4ng theo th\u1ee9 t\u1ef1 x\u1ebfp h\u1ea1ng.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">Nh\u00f3m 1: Official v\u00e0 Enterprise-backed<\/h3>\n<p style=\"text-align: justify;\">Hai skill n\u00e0y \u0111\u1ebfn t\u1eeb Anthropic v\u00e0 Vercel \u2013 hai \u0111\u01a1n v\u1ecb tr\u1ef1c ti\u1ebfp ph\u00e1t tri\u1ec3n c\u00f4ng c\u1ee5 Vibe Coding. M\u1ee9c \u0111\u1ed9 b\u1ea3o tr\u00ec v\u00e0 c\u1eadp nh\u1eadt cao h\u01a1n skill c\u1ed9ng \u0111\u1ed3ng.<\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">1. Frontend-Design Plugin (Anthropic Official)<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/anthropics\/claude-code\" target=\"_blank\" rel=\"noopener\">github.com\/anthropics\/claude-code \u2192 plugins\/frontend-design<\/a><\/p>\n<p style=\"text-align: justify;\">Plugin ch\u00ednh th\u1ee9c t\u1eeb Anthropic v\u1edbi h\u01a1n 277.000 l\u01b0\u1ee3t c\u00e0i \u0111\u1eb7t. C\u1ed1t l\u00f5i c\u1ee7a plugin l\u00e0 t\u1eadp lu\u1eadt c\u1ea5m font generic (system-ui, sans-serif m\u1eb7c \u0111\u1ecbnh), \u00e9p bold aesthetics v\u00e0 y\u00eau c\u1ea7u CSS animation thu\u1ea7n \u2013 kh\u00f4ng ph\u1ee5 thu\u1ed9c th\u01b0 vi\u1ec7n animation b\u00ean ngo\u00e0i. Plugin n\u00e0y nh\u1eafm th\u1eb3ng v\u00e0o v\u1ea5n \u0111\u1ec1 distributional convergence: khi AI m\u1eb7c \u0111\u1ecbnh ra UI gi\u1ed1ng nhau, b\u1ed9 lu\u1eadt n\u00e0y bu\u1ed9c output ph\u1ea3i kh\u00e1c bi\u1ec7t.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> \u0110\u01b0\u1ee3c Anthropic b\u1ea3o tr\u00ec, c\u1eadp nh\u1eadt theo phi\u00ean b\u1ea3n Claude Code m\u1edbi. Lu\u1eadt thi\u1ebft k\u1ebf r\u00f5 r\u00e0ng, \u00e9p output tho\u00e1t kh\u1ecfi &#8220;v\u00f9ng an to\u00e0n&#8221; AI m\u1eb7c \u0111\u1ecbnh.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> M\u1ecdi d\u1ef1 \u00e1n d\u00f9ng Claude Code \u2013 n\u00ean c\u00e0i l\u00e0m baseline tr\u01b0\u1edbc khi th\u00eam skill chuy\u00ean bi\u1ec7t kh\u00e1c.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43238\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Plugin-Anthropic-Official.png\" alt=\"Frontend-Design Plugin (Anthropic Official)\" width=\"1000\" height=\"482\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Plugin-Anthropic-Official.png 1855w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Plugin-Anthropic-Official-300x145.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Plugin-Anthropic-Official-1024x494.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Plugin-Anthropic-Official-768x371.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Plugin-Anthropic-Official-1536x741.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">2. Vercel Labs Agent Skills<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/vercel-labs\/agent-skills\" target=\"_blank\" rel=\"noopener\">github.com\/vercel-labs\/agent-skills<\/a><\/p>\n<p style=\"text-align: justify;\">B\u1ed9 6 skills t\u1eeb Vercel Labs g\u1ed3m: web-design-guidelines (h\u01a1n 100 quy t\u1eafc thi\u1ebft k\u1ebf), react-best-practices (h\u01a1n 40 quy t\u1eafc), react-view-transitions, composition-patterns, react-native-guidelines v\u00e0 vercel-deploy. C\u00e1c skill audit code theo accessibility, performance, <a href=\"https:\/\/interdata.vn\/blog\/ux-la-gi\/\">UX<\/a>, animation, typography v\u00e0 dark mode.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> H\u01a1n 100 quy t\u1eafc design c\u1ee5 th\u1ec3, bao ph\u1ee7 c\u1ea3 frontend l\u1eabn deploy flow (vercel-deploy). Quy t\u1eafc dark mode v\u00e0 view transitions s\u1eb5n \u2013 hai th\u1ee9 dev hay qu\u00ean khi d\u00f9ng AI.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> D\u1ef1 \u00e1n React\/Next.js deploy tr\u00ean Vercel, ho\u1eb7c b\u1ea5t k\u1ef3 d\u1ef1 \u00e1n n\u00e0o c\u1ea7n b\u1ed9 quy t\u1eafc design ch\u1eb7t ch\u1ebd c\u1ea5p production.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43239\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Vercel-Labs-Agent-Skills.png\" alt=\"Vercel Labs Agent Skills\" width=\"1000\" height=\"479\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Vercel-Labs-Agent-Skills.png 1868w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Vercel-Labs-Agent-Skills-300x144.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Vercel-Labs-Agent-Skills-1024x490.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Vercel-Labs-Agent-Skills-768x368.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Vercel-Labs-Agent-Skills-1536x735.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">Nh\u00f3m 2: Design System to\u00e0n di\u1ec7n<\/h3>\n<p style=\"text-align: justify;\">Nh\u00f3m skill n\u00e0y t\u1ea1o ra h\u1ec7 th\u1ed1ng thi\u1ebft k\u1ebf ho\u00e0n ch\u1ec9nh \u2013 t\u1eeb b\u1ea3ng m\u00e0u, typography, spacing cho \u0111\u1ebfn component patterns. Ph\u00f9 h\u1ee3p khi b\u1ea1n c\u1ea7n output nh\u1ea5t qu\u00e1n xuy\u00ean su\u1ed1t c\u1ea3 s\u1ea3n ph\u1ea9m, kh\u00f4ng ch\u1ec9 \u0111\u1eb9p \u1edf m\u1ed9t trang.<\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">3. UI\/UX Pro Max<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/nextlevelbuilder\/ui-ux-pro-max-skill\" target=\"_blank\" rel=\"noopener\">github.com\/nextlevelbuilder\/ui-ux-pro-max-skill<\/a><\/p>\n<p style=\"text-align: justify;\">T\u1ea1o design system ho\u00e0n ch\u1ec9nh t\u1ef1 \u0111\u1ed9ng v\u1edbi 79 UI styles, 192 b\u1ea3ng m\u00e0u ph\u00e2n theo ng\u00e0nh ngh\u1ec1, 74 c\u1eb7p typography v\u00e0 192 reasoning rules. H\u1ed7 tr\u1ee3 h\u01a1n 22 tech stack: React, Vue, Tailwind CSS, SwiftUI, Flutter v\u00e0 nhi\u1ec1u framework kh\u00e1c.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> B\u1ea3ng m\u00e0u ph\u00e2n theo ng\u00e0nh (fintech, healthcare, e-commerce&#8230;) gi\u00fap giao di\u1ec7n ph\u00f9 h\u1ee3p b\u1ed1i c\u1ea3nh kinh doanh thay v\u00ec d\u00f9ng palette chung chung. S\u1ed1 l\u01b0\u1ee3ng style v\u00e0 quy t\u1eafc l\u1edbn nh\u1ea5t trong c\u00e1c skill hi\u1ec7n t\u1ea1i.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> Prototype nhanh c\u1ea7n design system nh\u1ea5t qu\u00e1n, \u0111\u1eb7c bi\u1ec7t khi build s\u1ea3n ph\u1ea9m <a href=\"https:\/\/interdata.vn\/blog\/saas-la-gi\/\">SaaS<\/a> ho\u1eb7c dashboard cho ng\u00e0nh c\u1ee5 th\u1ec3.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43240\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/UI_UX-Pro-Max.png\" alt=\"UI\/UX Pro Max\" width=\"1000\" height=\"486\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/UI_UX-Pro-Max.png 1851w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/UI_UX-Pro-Max-300x146.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/UI_UX-Pro-Max-1024x497.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/UI_UX-Pro-Max-768x373.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/UI_UX-Pro-Max-1536x746.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">4. Taste Skill<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/Leonxlnx\/taste-skill\" target=\"_blank\" rel=\"noopener\">github.com\/Leonxlnx\/taste-skill<\/a><\/p>\n<p style=\"text-align: justify;\">Framework ch\u1ed1ng giao di\u1ec7n generic b\u1eb1ng h\u1ec7 th\u1ed1ng &#8220;design dials&#8221; \u2013 c\u00e1c n\u00fat v\u1eb7n \u0111i\u1ec1u ch\u1ec9nh layout variance, animation intensity v\u00e0 information density. M\u1ed7i dial c\u00f3 thang \u0111o r\u00f5 r\u00e0ng, gi\u00fap b\u1ea1n ki\u1ec3m so\u00e1t m\u1ee9c \u0111\u1ed9 &#8220;c\u00e1 t\u00ednh&#8221; c\u1ee7a giao di\u1ec7n thay v\u00ec \u0111\u1ec3 AI t\u1ef1 quy\u1ebft.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Nhi\u1ec1u bi\u1ebfn th\u1ec3 phong c\u00e1ch: soft, brutalist, minimalist. C\u00f3 kh\u1ea3 n\u0103ng t\u1ea1o \u1ea3nh reference board tr\u01b0\u1edbc khi code \u2013 gi\u00fap h\u00ecnh dung tr\u01b0\u1edbc k\u1ebft qu\u1ea3. H\u1ed7 tr\u1ee3 React, Vue, Svelte.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> D\u1ef1 \u00e1n c\u1ea7n giao di\u1ec7n c\u00f3 c\u00e1 t\u00ednh ri\u00eang, kh\u00e1c bi\u1ec7t r\u00f5 so v\u1edbi &#8220;template AI&#8221; \u2013 landing page, portfolio, trang s\u1ea3n ph\u1ea9m s\u00e1ng t\u1ea1o.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43241\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Taste-Skill.png\" alt=\"Taste Skill\" width=\"1000\" height=\"488\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Taste-Skill.png 1854w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Taste-Skill-300x146.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Taste-Skill-1024x499.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Taste-Skill-768x374.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Taste-Skill-1536x749.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">5. Garden Skills \/ Web Design Engineer<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/ConardLi\/garden-skills\" target=\"_blank\" rel=\"noopener\">github.com\/ConardLi\/garden-skills<\/a><\/p>\n<p style=\"text-align: justify;\">Bi\u1ebfn Claude th\u00e0nh &#8220;design engineer&#8221; \u2013 kh\u00f4ng ch\u1ec9 code giao di\u1ec7n m\u00e0 hi\u1ec3u product context, khai b\u00e1o design system v\u00e0 x\u00e2y tr\u1ea3i nghi\u1ec7m ho\u00e0n ch\u1ec9nh. \u0110i\u1ec3m n\u1ed5i b\u1eadt l\u00e0 &#8220;Five-dial Design Read&#8221; v\u1edbi 5 chi\u1ec1u \u0111i\u1ec1u ch\u1ec9nh: variance, motion, density, asset dependence v\u00e0 brand fidelity.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> 6 design schools k\u00e8m 25 style recipes d\u1ef1a tr\u00ean c\u00e1c trang th\u1eadt nh\u01b0 Linear, Aesop, Stripe Press. Ph\u00e2n bi\u1ec7t r\u00f5 3 ch\u1ebf \u0111\u1ed9 redesign: extension (m\u1edf r\u1ed9ng hi\u1ec7n c\u00f3), preserve (gi\u1eef nguy\u00ean c\u1ed1t, c\u1ea3i ti\u1ebfn chi ti\u1ebft), overhaul (l\u00e0m l\u1ea1i t\u1eeb \u0111\u1ea7u).<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> D\u1ef1 \u00e1n c\u1ea7n ch\u1ea5t l\u01b0\u1ee3ng design engineer, \u0111\u1eb7c bi\u1ec7t khi redesign s\u1ea3n ph\u1ea9m hi\u1ec7n c\u00f3 ho\u1eb7c mu\u1ed1n giao di\u1ec7n theo phong c\u00e1ch m\u1ed9t brand n\u1ed5i ti\u1ebfng c\u1ee5 th\u1ec3.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43242\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Garden-Skills.png\" alt=\"Garden Skills\" width=\"1000\" height=\"484\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Garden-Skills.png 1851w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Garden-Skills-300x145.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Garden-Skills-1024x495.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Garden-Skills-768x371.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Garden-Skills-1536x743.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">6. Designer Skills (julianoczkowski)<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/julianoczkowski\/designer-skills\" target=\"_blank\" rel=\"noopener\">github.com\/julianoczkowski\/designer-skills<\/a><\/p>\n<p style=\"text-align: justify;\">B\u1ed9 8 skills tu\u1ea7n t\u1ef1 t\u1eeb <code>\/grill-me<\/code> (interrogation \u2013 Claude h\u1ecfi ng\u01b0\u1ee3c b\u1ea1n v\u1ec1 d\u1ef1 \u00e1n) \u0111\u1ebfn <code>\/design-flow<\/code> (orchestration to\u00e0n b\u1ed9 flow thi\u1ebft k\u1ebf). Skill n\u00e0y \u0111\u1eb7c bi\u1ec7t \u1edf ch\u1ed7 t\u00edch h\u1ee3p 8 tri\u1ebft l\u00fd th\u1ea9m m\u1ef9: Dieter Rams, Swiss Typographic, Japanese Minimalism, Brutalist, Scandinavian, Art Deco, Neo-Memphis v\u00e0 Editorial.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Mobile-first v\u00e0 dark mode m\u1eb7c \u0111\u1ecbnh \u2013 hai y\u00eau c\u1ea7u production m\u00e0 nhi\u1ec1u skill kh\u00e1c b\u1ecf qua. T\u1ef1 l\u01b0u design docs v\u00e0o folder <code>.design\/<\/code> trong d\u1ef1 \u00e1n.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> Designer chuy\u1ec3n sang code b\u1eb1ng AI, mu\u1ed1n gi\u1eef quy tr\u00ecnh thi\u1ebft k\u1ebf chuy\u00ean nghi\u1ec7p t\u1eeb kh\u1ea3o s\u00e1t \u0111\u1ebfn output cu\u1ed1i.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43243\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills.png\" alt=\"Designer Skills\" width=\"1000\" height=\"488\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills.png 1858w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-300x146.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-1024x499.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-768x374.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-1536x749.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">Nh\u00f3m 3: Audit ch\u1ea5t l\u01b0\u1ee3ng v\u00e0 Accessibility<\/h3>\n<p style=\"text-align: justify;\">Giao di\u1ec7n \u0111\u1eb9p ch\u01b0a \u0111\u1ee7 \u2013 c\u00f2n c\u1ea7n nhanh, d\u1ec5 truy c\u1eadp v\u00e0 \u0111\u1ea1t chu\u1ea9n. Nh\u00f3m skill n\u00e0y ki\u1ec3m tra output theo c\u00e1c ti\u00eau chu\u1ea9n k\u1ef9 thu\u1eadt: Core Web Vitals, WCAG, Lighthouse v\u00e0 best practices.<\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">7. Web Quality Skills (Addy Osmani)<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/addyosmani\/web-quality-skills\" target=\"_blank\" rel=\"noopener\">github.com\/addyosmani\/web-quality-skills<\/a><\/p>\n<p style=\"text-align: justify;\">T\u1eeb Addy Osmani \u2013 k\u1ef9 s\u01b0 thu\u1ed9c Google Chrome team. B\u1ed9 6 skills chuy\u00ean s\u00e2u: audit t\u1ed5ng h\u1ee3p, performance, Core Web Vitals (LCP, INP, CLS), accessibility, SEO v\u00e0 best practices. X\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean h\u01a1n 150 Lighthouse audits v\u00e0 chu\u1ea9n WCAG 2.2.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Stack-agnostic \u2013 ho\u1ea1t \u0111\u1ed9ng v\u1edbi React, Vue, Angular, Svelte, <a href=\"https:\/\/interdata.vn\/blog\/next-js-la-gi\/\">Next.js<\/a>, Nuxt, Astro. Kh\u00f4ng d\u1ea1y c\u00e1ch thi\u1ebft k\u1ebf, m\u00e0 ki\u1ec3m tra ch\u1ea5t l\u01b0\u1ee3ng code sau khi thi\u1ebft k\u1ebf xong.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> Ch\u1ea1y song song v\u1edbi b\u1ea5t k\u1ef3 design skill n\u00e0o \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o output \u0111\u1ea1t chu\u1ea9n production, \u0111\u1eb7c bi\u1ec7t khi b\u1ea1n quan t\u00e2m \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang v\u00e0 \u0111i\u1ec3m SEO k\u1ef9 thu\u1eadt.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43244\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Quality-Skills.png\" alt=\"Web Quality Skills\" width=\"1000\" height=\"485\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Quality-Skills.png 1851w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Quality-Skills-300x146.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Quality-Skills-1024x497.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Quality-Skills-768x373.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Quality-Skills-1536x745.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">8. AI-Friendly Web Design Skill<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/ianho7\/ai-friendly-web-design-skill\" target=\"_blank\" rel=\"noopener\">github.com\/ianho7\/ai-friendly-web-design-skill<\/a><\/p>\n<p style=\"text-align: justify;\">Gi\u00fap build, review v\u00e0 refactor UI v\u1edbi tr\u1ecdng t\u00e2m accessibility v\u00e0 operability. Focus v\u00e0o semantic HTML, component states, stable locators cho screen readers v\u00e0 Playwright tests. Khi review code, skill n\u00e0y ph\u00e2n lo\u1ea1i l\u1ed7i theo severity-level: High, Medium, Low.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Giao di\u1ec7n v\u1eeba \u0111\u1eb9p v\u1eeba &#8220;AI-friendly&#8221; \u2013 ngh\u0129a l\u00e0 d\u1ec5 test t\u1ef1 \u0111\u1ed9ng (Playwright) v\u00e0 d\u1ec5 truy c\u1eadp (screen reader). Severity-level gi\u00fap bi\u1ebft l\u1ed7i n\u00e0o c\u1ea7n fix tr\u01b0\u1edbc.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> D\u1ef1 \u00e1n c\u1ea7n tu\u00e2n th\u1ee7 chu\u1ea9n accessibility (WCAG), ho\u1eb7c team d\u00f9ng automated testing v\u00e0 c\u1ea7n code giao di\u1ec7n c\u00f3 locator \u1ed5n \u0111\u1ecbnh.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43245\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/AI-Friendly-Web-Design-Skill.png\" alt=\"AI-Friendly Web Design Skill\" width=\"1000\" height=\"482\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/AI-Friendly-Web-Design-Skill.png 1860w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/AI-Friendly-Web-Design-Skill-300x145.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/AI-Friendly-Web-Design-Skill-1024x494.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/AI-Friendly-Web-Design-Skill-768x370.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/AI-Friendly-Web-Design-Skill-1536x741.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">9. Awesome UX Skills<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/tommyjepsen\/awesome-ux-skills\" target=\"_blank\" rel=\"noopener\">github.com\/tommyjepsen\/awesome-ux-skills<\/a><\/p>\n<p style=\"text-align: justify;\">H\u01a1n 25 skills cho UX research v\u00e0 AI product design, chia 3 nh\u00f3m: UX research (personas, journey mapping, empathy mapping), UI analysis (accessibility audits, heuristic reviews, cognitive load) v\u00e0 AI product design (trust patterns, user input design).<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Skill duy nh\u1ea5t trong danh s\u00e1ch bao ph\u1ee7 c\u1ea3 UX research (kh\u00f4ng ch\u1ec9 code giao di\u1ec7n). Gi\u00fap Claude ph\u00e2n t\u00edch h\u00e0nh vi ng\u01b0\u1eddi d\u00f9ng tr\u01b0\u1edbc khi quy\u1ebft \u0111\u1ecbnh thi\u1ebft k\u1ebf.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> Startup, product team c\u1ea7n Claude h\u1ed7 tr\u1ee3 c\u1ea3 giai \u0111o\u1ea1n nghi\u00ean c\u1ee9u ng\u01b0\u1eddi d\u00f9ng l\u1eabn thi\u1ebft k\u1ebf \u2013 t\u1eeb persona \u0111\u1ebfn prototype.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43246\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Awesome-UX-Skills.png\" alt=\"Awesome UX Skills\" width=\"1000\" height=\"483\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Awesome-UX-Skills.png 1854w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Awesome-UX-Skills-300x145.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Awesome-UX-Skills-1024x495.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Awesome-UX-Skills-768x371.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Awesome-UX-Skills-1536x742.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><!-- BOX CTA #2 \u2013 CANH ME --><\/p>\n<div style=\"background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); border: 1.5px solid #2563EB; border-radius: 12px; padding: 28px; margin: 35px 0; text-align: center;\">\n<p style=\"font-family: 'Be Vietnam Pro', sans-serif; font-size: 22px; font-weight: bold; color: #1e3a8a; margin: 0 0 8px;\">S\u0103n Deal VPS &amp; Cloud Server<\/p>\n<p style=\"font-size: 15px; color: #4b5563; margin-bottom: 20px;\">Canh Me t\u1ed5ng h\u1ee3p Hot Deals, khuy\u1ebfn m\u00e3i, m\u00e3 gi\u1ea3m gi\u00e1, th\u1eddi gian \u00e1p d\u1ee5ng v\u00e0 \u0111i\u1ec1u ki\u1ec7n \u0111\u0103ng k\u00fd m\u1edbi nh\u1ea5t \u2013 xem tr\u01b0\u1edbc \u0111\u1ec3 ch\u1ecdn g\u00f3i deploy s\u1ea3n ph\u1ea9m Vibe Coding v\u1edbi chi ph\u00ed ph\u00f9 h\u1ee3p nh\u1ea5t.<\/p>\n<p><a style=\"background: #2563EB; color: #fff; padding: 12px 30px; text-decoration: none; font-weight: 600; border-radius: 8px; display: inline-block;\" href=\"https:\/\/interdata.vn\/canhme\/\" target=\"_blank\" rel=\"noopener\">Xem Hot Deals t\u1ea1i Canh Me \u27f6<\/a><\/p>\n<\/div>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">Nh\u00f3m 4: Workflow v\u00e0 Product Lifecycle<\/h3>\n<p style=\"text-align: justify;\">Nh\u00f3m skill n\u00e0y kh\u00f4ng ch\u1ec9 t\u1ea1o giao di\u1ec7n \u0111\u1eb9p m\u00e0 qu\u1ea3n l\u00fd to\u00e0n b\u1ed9 quy tr\u00ecnh: t\u1eeb brief \u2192 spec \u2192 code \u2192 audit. Ph\u00f9 h\u1ee3p v\u1edbi team ho\u1eb7c d\u1ef1 \u00e1n c\u1ea7n quy tr\u00ecnh thi\u1ebft k\u1ebf c\u00f3 h\u1ec7 th\u1ed1ng.<\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">10. Web Design (xiaopu-ai)<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/xiaopu-ai\/web-design\" target=\"_blank\" rel=\"noopener\">github.com\/xiaopu-ai\/web-design<\/a><\/p>\n<p style=\"text-align: justify;\">Workflow &#8220;spec-first, code-second&#8221;: input l\u00e0 PRD, URL ho\u1eb7c screenshot \u2192 Claude t\u1ea1o DESIGN.md (spec thi\u1ebft k\u1ebf) \u2192 code theo spec \u0111\u00f3. Quy tr\u00ecnh 3 phase r\u00f5 r\u00e0ng: extract design cues \u2192 t\u1ea1o spec (color, typography, components, layout, motion, accessibility) \u2192 generate code theo spec. C\u00f3 audit ch\u1ea5t l\u01b0\u1ee3ng built-in.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Bu\u1ed9c Claude t\u1ea1o spec tr\u01b0\u1edbc khi code \u2013 gi\u1ea3m hi\u1ec7n t\u01b0\u1ee3ng code r\u1ed3i m\u1edbi ngh\u0129 thi\u1ebft k\u1ebf. Input linh ho\u1ea1t: d\u00e1n URL website mu\u1ed1n tham kh\u1ea3o, upload screenshot, ho\u1eb7c \u0111\u01b0a PRD.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> D\u1ef1 \u00e1n c\u1ea7n t\u00e0i li\u1ec7u thi\u1ebft k\u1ebf song song v\u1edbi code, team mu\u1ed1n review spec tr\u01b0\u1edbc khi Claude vi\u1ebft UI.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43247\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Design-xiaopu-ai.png\" alt=\"Web Design (xiaopu-ai)\" width=\"1000\" height=\"484\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Design-xiaopu-ai.png 1856w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Design-xiaopu-ai-300x145.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Design-xiaopu-ai-1024x495.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Design-xiaopu-ai-768x372.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Web-Design-xiaopu-ai-1536x743.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">11. Designer Skills (owl-listener)<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/owl-listener\/designer-skills\" target=\"_blank\" rel=\"noopener\">github.com\/owl-listener\/designer-skills<\/a><\/p>\n<p style=\"text-align: justify;\">B\u1ed9 skill quy m\u00f4 l\u1edbn nh\u1ea5t: 239 skills, 9 plugins, 30 commands ph\u1ee7 to\u00e0n b\u1ed9 product lifecycle \u2013 t\u1eeb research, systems design, UX strategy, UI design, interaction design, prototyping, operations \u0111\u1ebfn visual critique. To\u00e0n b\u1ed9 vi\u1ebft cho agent hi\u1ec3u v\u00e0 th\u1ef1c thi, kh\u00f4ng ph\u1ea3i t\u00e0i li\u1ec7u cho ng\u01b0\u1eddi \u0111\u1ecdc.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Ph\u1ee7 r\u1ed9ng nh\u1ea5t \u2013 t\u1eeb research \u0111\u1ebfn visual critique. N\u1ebfu c\u1ea7n Claude \u0111\u1ea3m nh\u1eadn c\u1ea3 vai tr\u00f2 product designer (kh\u00f4ng ch\u1ec9 frontend coder), \u0111\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn \u0111\u00e1ng c\u00e0i nh\u1ea5t.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> Team nh\u1ecf ho\u1eb7c solo founder c\u1ea7n Claude ki\u00eam nhi\u1ec1u vai: researcher, designer, coder, reviewer.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43248\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-owl-listener.png\" alt=\"Designer Skills (owl-listener)\" width=\"1000\" height=\"484\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-owl-listener.png 1857w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-owl-listener-300x145.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-owl-listener-1024x495.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-owl-listener-768x371.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Designer-Skills-owl-listener-1536x743.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">12. Claude Design Skill (jiji262)<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/jiji262\/claude-design-skill\" target=\"_blank\" rel=\"noopener\">github.com\/jiji262\/claude-design-skill<\/a><\/p>\n<p style=\"text-align: justify;\">Bi\u1ebfn Claude th\u00e0nh expert designer cho HTML artifacts: landing pages, slide decks, prototypes, animations. \u0110\u1eb7c bi\u1ec7t c\u00f3 &#8220;Core Asset Protocol&#8221; thu th\u1eadp brand context (logo, product shots, UI screenshots) tr\u01b0\u1edbc khi thi\u1ebft k\u1ebf. Advisor mode \u0111\u1ec1 xu\u1ea5t 3 h\u01b0\u1edbng thi\u1ebft k\u1ebf khi brief ch\u01b0a r\u00f5.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Anti-slop rules c\u1ee5 th\u1ec3: lo\u1ea1i gradient l\u1ed1, emoji bullets, clich\u00e9s AI. Advisor mode gi\u00fap ng\u01b0\u1eddi kh\u00f4ng bi\u1ebft design c\u0169ng m\u00f4 t\u1ea3 \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u \u2013 Claude \u0111\u1ec1 xu\u1ea5t 3 h\u01b0\u1edbng, b\u1ea1n ch\u1ecdn.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> Ng\u01b0\u1eddi kh\u00f4ng c\u00f3 background thi\u1ebft k\u1ebf mu\u1ed1n t\u1ea1o landing page ho\u1eb7c prototype nhanh b\u1eb1ng HTML thu\u1ea7n.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43249\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skill-jiji262.png\" alt=\"Claude Design Skill (jiji262)\" width=\"1000\" height=\"484\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skill-jiji262.png 1852w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skill-jiji262-300x145.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skill-jiji262-1024x495.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skill-jiji262-768x372.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skill-jiji262-1536x743.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">Nh\u00f3m 5: 3D, Animation v\u00e0 chuy\u00ean bi\u1ec7t<\/h3>\n<p style=\"text-align: justify;\">Khi s\u1ea3n ph\u1ea9m c\u1ea7n hi\u1ec7u \u1ee9ng 3D, animation ph\u1ee9c t\u1ea1p ho\u1eb7c phong c\u00e1ch th\u1ecb gi\u00e1c \u0111\u1eb7c th\u00f9 \u2013 c\u00e1c skill ph\u1ed5 th\u00f4ng kh\u00f4ng \u0111\u1ee7. Nh\u00f3m n\u00e0y chuy\u00ean s\u00e2u v\u00e0o t\u1eebng m\u1ea3ng c\u1ee5 th\u1ec3.<\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">13. Claude Design Skillstack (freshtechbro)<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/freshtechbro\/claudedesignskills\" target=\"_blank\" rel=\"noopener\">github.com\/freshtechbro\/claudedesignskills<\/a><\/p>\n<p style=\"text-align: justify;\">Marketplace 27 plugins (22 skills + 5 bundles) v\u1edbi chuy\u00ean s\u00e2u v\u1ec1 3D v\u00e0 animation: Three.js, GSAP, React Three Fiber, Babylon.js. C\u00f3 h\u01a1n 50 slash commands v\u00e0 27 specialized agents \u2013 m\u1ed7i agent \u0111\u1ea3m nh\u1eadn m\u1ed9t m\u1ea3ng ri\u00eang.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Skill duy nh\u1ea5t trong danh s\u00e1ch h\u1ed7 tr\u1ee3 chuy\u00ean s\u00e2u 3D web (Three.js, Babylon.js). Bundles g\u1ed9p s\u1eb5n combo skill cho t\u1eebng use case.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> Portfolio 3D, landing page c\u00f3 hi\u1ec7u \u1ee9ng WebGL, d\u1ef1 \u00e1n marketing c\u1ea7n animation n\u1eb7ng.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43250\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skillstack-freshtechbro.png\" alt=\"Claude Design Skillstack (freshtechbro)\" width=\"1000\" height=\"489\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skillstack-freshtechbro.png 1849w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skillstack-freshtechbro-300x147.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skillstack-freshtechbro-1024x501.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skillstack-freshtechbro-768x376.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Claude-Design-Skillstack-freshtechbro-1536x752.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">14. Superdesign Skill<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/superdesigndev\/superdesign-skill\" target=\"_blank\" rel=\"noopener\">github.com\/superdesigndev\/superdesign-skill<\/a><\/p>\n<p style=\"text-align: justify;\">AI design agent t\u00edch h\u1ee3p Claude Code, Cursor v\u00e0 h\u01a1n 70 coding agents kh\u00e1c. \u0110i\u1ec3m kh\u00e1c bi\u1ec7t: infinite canvas \u2013 thi\u1ebft k\u1ebf tr\u00ean canvas, branching c\u00e1c phi\u00ean b\u1ea3n, iterate t\u1eebng nh\u00e1nh r\u1ed3i merge. C\u00f3 prompt library cho style inspiration v\u00e0 kh\u1ea3 n\u0103ng extract &#8220;design DNA&#8221; t\u1eeb website c\u00f3 s\u1eb5n.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Infinite canvas v\u00e0 branching gi\u1ed1ng workflow Figma. Ho\u1ea1t \u0111\u1ed9ng v\u1edbi nhi\u1ec1u agent kh\u00e1c ngo\u00e0i Claude Code \u2013 ph\u00f9 h\u1ee3p n\u1ebfu b\u1ea1n d\u00f9ng <a href=\"https:\/\/interdata.vn\/blog\/cline-la-gi\/\">Cline<\/a> ho\u1eb7c Cursor song song.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> Designer mu\u1ed1n d\u00f9ng AI nh\u01b0ng gi\u1eef workflow visual quen thu\u1ed9c, d\u1ef1 \u00e1n c\u1ea7n iterate nhi\u1ec1u phi\u00ean b\u1ea3n thi\u1ebft k\u1ebf.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43251\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Superdesign-Skill.png\" alt=\"Superdesign Skill\" width=\"1000\" height=\"482\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Superdesign-Skill.png 1856w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Superdesign-Skill-300x145.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Superdesign-Skill-1024x494.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Superdesign-Skill-768x370.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Superdesign-Skill-1536x741.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4 style=\"color: #2563eb; font-size: 17px; font-weight: bold; margin: 25px 0 10px;\">15. Frontend Design Pro<\/h4>\n<p style=\"text-align: justify;\"><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/claudekit\/frontend-design-pro-demo\" target=\"_blank\" rel=\"noopener\">github.com\/claudekit\/frontend-design-pro-demo<\/a><\/p>\n<p style=\"text-align: justify;\">Cung c\u1ea5p 11 aesthetic styles t\u1eeb minimalism \u0111\u1ebfn cyberpunk. To\u00e0n b\u1ed9 output l\u00e0 pure HTML\/CSS, kh\u00f4ng c\u1ea7n React hay framework n\u00e0o. \u0110i k\u00e8m master prompts v\u00e0 production-ready code templates responsive s\u1eb5n.<\/p>\n<ul style=\"margin: 10px 0; padding-left: 20px;\">\n<li style=\"margin-bottom: 8px;\"><strong>\u0110i\u1ec3m m\u1ea1nh:<\/strong> Kh\u00f4ng ph\u1ee5 thu\u1ed9c framework \u2013 output l\u00e0 HTML\/CSS thu\u1ea7n, copy-paste v\u00e0o b\u1ea5t k\u1ef3 d\u1ef1 \u00e1n n\u00e0o. 11 phong c\u00e1ch s\u1eb5n, t\u1eeb t\u1ed1i gi\u1ea3n \u0111\u1ebfn cyberpunk, gi\u00fap ch\u1ecdn nhanh m\u00e0 kh\u00f4ng c\u1ea7n m\u00f4 t\u1ea3 d\u00e0i.<\/li>\n<li style=\"margin-bottom: 8px;\"><strong>Ph\u00f9 h\u1ee3p:<\/strong> Ng\u01b0\u1eddi m\u1edbi, freelancer c\u1ea7n landing page ho\u1eb7c portfolio nhanh m\u00e0 kh\u00f4ng mu\u1ed1n setup React. D\u1ef1 \u00e1n HTML thu\u1ea7n, email template, ho\u1eb7c trang t\u0129nh.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43252\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Pro.png\" alt=\"Frontend Design Pro\" width=\"1000\" height=\"484\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Pro.png 1855w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Pro-300x145.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Pro-1024x495.png 1024w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Pro-768x371.png 768w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/08\/Frontend-Design-Pro-1536x743.png 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2 id=\"section4\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">B\u1ea3ng so s\u00e1nh t\u1ed5ng h\u1ee3p 15 Claude Skill thi\u1ebft k\u1ebf web<\/h2>\n<p style=\"text-align: justify;\">B\u1ea3ng d\u01b0\u1edbi \u0111\u00e2y t\u1ed5ng h\u1ee3p 15 skill theo t\u00ean, nh\u00f3m ch\u1ee9c n\u0103ng, framework h\u1ed7 tr\u1ee3 v\u00e0 \u0111i\u1ec3m n\u1ed5i b\u1eadt ch\u00ednh. D\u00f9ng b\u1ea3ng n\u00e0y \u0111\u1ec3 l\u1ecdc nhanh skill ph\u00f9 h\u1ee3p d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n.<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px;\">\n<thead>\n<tr style=\"background-color: #1e3a8a; color: #fff;\">\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left; white-space: nowrap;\">#<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">T\u00ean Skill<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">Nh\u00f3m<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">Framework<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">Highlight<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">1<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/anthropics\/claude-code\" target=\"_blank\" rel=\"noopener\">Frontend-Design Plugin<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Official<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Agnostic<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">277K+ l\u01b0\u1ee3t c\u00e0i, anti-convergence rules<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">2<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/vercel-labs\/agent-skills\" target=\"_blank\" rel=\"noopener\">Vercel Labs Agent Skills<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Official<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">React, Next.js<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">100+ design rules, 6 skills, deploy flow<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">3<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/nextlevelbuilder\/ui-ux-pro-max-skill\" target=\"_blank\" rel=\"noopener\">UI\/UX Pro Max<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Design System<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">22+ stack<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">192 b\u1ea3ng m\u00e0u theo ng\u00e0nh, 79 UI styles<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">4<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/Leonxlnx\/taste-skill\" target=\"_blank\" rel=\"noopener\">Taste Skill<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Design System<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">React, Vue, Svelte<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Design dials, reference board, anti-generic<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">5<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/ConardLi\/garden-skills\" target=\"_blank\" rel=\"noopener\">Garden Skills<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Design System<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Agnostic<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">25 style recipes, 3 ch\u1ebf \u0111\u1ed9 redesign<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">6<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/julianoczkowski\/designer-skills\" target=\"_blank\" rel=\"noopener\">Designer Skills (julianoczkowski)<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Design System<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Agnostic<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">8 tri\u1ebft l\u00fd th\u1ea9m m\u1ef9, mobile-first, dark mode<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">7<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/addyosmani\/web-quality-skills\" target=\"_blank\" rel=\"noopener\">Web Quality Skills<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Audit<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Agnostic<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">150+ Lighthouse audits, WCAG 2.2<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">8<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/ianho7\/ai-friendly-web-design-skill\" target=\"_blank\" rel=\"noopener\">AI-Friendly Web Design<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Accessibility<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Agnostic<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Semantic HTML, Playwright locators, severity<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">9<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/tommyjepsen\/awesome-ux-skills\" target=\"_blank\" rel=\"noopener\">Awesome UX Skills<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">UX Research<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Agnostic<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">25+ skills, personas, journey mapping<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">10<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/xiaopu-ai\/web-design\" target=\"_blank\" rel=\"noopener\">Web Design (xiaopu-ai)<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Workflow<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Agnostic<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Spec-first workflow, DESIGN.md, audit<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">11<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/owl-listener\/designer-skills\" target=\"_blank\" rel=\"noopener\">Designer Skills (owl-listener)<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Workflow<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Agnostic<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">239 skills, full product lifecycle<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">12<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/jiji262\/claude-design-skill\" target=\"_blank\" rel=\"noopener\">Claude Design Skill<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Workflow<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">HTML thu\u1ea7n<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Anti-slop rules, advisor mode, brand context<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">13<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/freshtechbro\/claudedesignskills\" target=\"_blank\" rel=\"noopener\">Claude Design Skillstack<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">3D\/Animation<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Three.js, GSAP, Babylon.js<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">27 plugins, 50+ slash commands<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">14<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/superdesigndev\/superdesign-skill\" target=\"_blank\" rel=\"noopener\">Superdesign Skill<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">3D\/Animation<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">70+ agents<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Infinite canvas, design DNA extraction<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">15<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\"><a href=\"https:\/\/github.com\/claudekit\/frontend-design-pro-demo\" target=\"_blank\" rel=\"noopener\">Frontend Design Pro<\/a><\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">Chuy\u00ean bi\u1ec7t<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">HTML\/CSS thu\u1ea7n<\/td>\n<td style=\"padding: 8px 10px; border: 1px solid #E5E7EB;\">11 aesthetic styles, zero-framework<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2 id=\"section5\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">Combo Claude Skill thi\u1ebft k\u1ebf web theo lo\u1ea1i d\u1ef1 \u00e1n<\/h2>\n<p style=\"text-align: justify;\">C\u00e0i m\u1ed9t skill \u0111\u01a1n l\u1ebb cho k\u1ebft qu\u1ea3 t\u1ed1t h\u01a1n m\u1eb7c \u0111\u1ecbnh, nh\u01b0ng combo \u0111\u00fang m\u1edbi khai th\u00e1c h\u1ebft s\u1ee9c m\u1ea1nh. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 4 combo \u0111\u00e3 test th\u1ef1c t\u1ebf, ch\u1ecdn theo lo\u1ea1i d\u1ef1 \u00e1n \u2013 b\u1ea1n kh\u00f4ng c\u1ea7n c\u00e0i t\u1ea5t c\u1ea3, ch\u1ecdn \u0111\u00fang combo l\u00e0 \u0111\u1ee7.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">SaaS \/ Dashboard<\/h3>\n<p style=\"text-align: justify;\"><strong>Combo:<\/strong> Frontend-Design Plugin + UI\/UX Pro Max + Web Quality Skills<\/p>\n<p style=\"text-align: justify;\">Frontend-Design Plugin l\u00e0m baseline ch\u1ed1ng AI slop. UI\/UX Pro Max cung c\u1ea5p design system nh\u1ea5t qu\u00e1n cho dashboard ph\u1ee9c t\u1ea1p \u2013 b\u1ea3ng m\u00e0u theo ng\u00e0nh, typography chu\u1ea9n, component rules. Web Quality Skills audit Core Web Vitals v\u00e0 accessibility, hai y\u1ebfu t\u1ed1 quan tr\u1ecdng khi dashboard c\u00f3 nhi\u1ec1u b\u1ea3ng, bi\u1ec3u \u0111\u1ed3 v\u00e0 b\u1ea3ng d\u1eef li\u1ec7u.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">Landing page \/ Marketing site<\/h3>\n<p style=\"text-align: justify;\"><strong>Combo:<\/strong> Frontend-Design Plugin + Taste Skill + Claude Design Skill (jiji262)<\/p>\n<p style=\"text-align: justify;\">Taste Skill \u0111\u01b0a giao di\u1ec7n tho\u00e1t kh\u1ecfi &#8220;nh\u00ecn \u0111\u00e2u c\u0169ng gi\u1ed1ng template&#8221; b\u1eb1ng design dials. Claude Design Skill b\u1ed5 sung anti-slop rules c\u1ee5 th\u1ec3 (c\u1ea5m gradient l\u1ed1, emoji bullets) v\u00e0 advisor mode gi\u00fap ch\u1ecdn h\u01b0\u1edbng thi\u1ebft k\u1ebf khi brief m\u01a1 h\u1ed3. Combo n\u00e0y cho output giao di\u1ec7n c\u00f3 c\u00e1 t\u00ednh ri\u00eang, ph\u00f9 h\u1ee3p trang gi\u1edbi thi\u1ec7u s\u1ea3n ph\u1ea9m ho\u1eb7c trang marketing.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">Portfolio \/ Trang c\u00e1 nh\u00e2n<\/h3>\n<p style=\"text-align: justify;\"><strong>Combo:<\/strong> Frontend Design Pro + Designer Skills (julianoczkowski)<\/p>\n<p style=\"text-align: justify;\">Frontend Design Pro c\u00f3 11 aesthetic styles s\u1eb5n (minimalism, cyberpunk&#8230;) b\u1eb1ng HTML\/CSS thu\u1ea7n \u2013 kh\u00f4ng c\u1ea7n setup framework. Designer Skills (julianoczkowski) b\u1ed5 sung 8 tri\u1ebft l\u00fd th\u1ea9m m\u1ef9 (Dieter Rams, Japanese Minimalism&#8230;) v\u00e0 mobile-first m\u1eb7c \u0111\u1ecbnh. Portfolio c\u1ea7n c\u00e1 t\u00ednh m\u1ea1nh v\u00e0 responsive t\u1ed1t \u2013 combo n\u00e0y \u0111\u00e1p \u1ee9ng c\u1ea3 hai.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">Design System cho team<\/h3>\n<p style=\"text-align: justify;\"><strong>Combo:<\/strong> Garden Skills + Vercel Labs Agent Skills + Awesome UX Skills<\/p>\n<p style=\"text-align: justify;\">Garden Skills c\u00f3 25 style recipes v\u00e0 3 ch\u1ebf \u0111\u1ed9 redesign \u2013 ph\u00f9 h\u1ee3p khi team c\u1ea7n th\u1ed1ng nh\u1ea5t phong c\u00e1ch thi\u1ebft k\u1ebf. Vercel Labs b\u1ed5 sung h\u01a1n 100 design rules cho React\/Next.js. Awesome UX Skills th\u00eam l\u1edbp UX research (personas, journey mapping) \u0111\u1ec3 design system x\u00e2y tr\u00ean n\u1ec1n hi\u1ec3u bi\u1ebft ng\u01b0\u1eddi d\u00f9ng, kh\u00f4ng ch\u1ec9 l\u00e0 b\u1ea3ng m\u00e0u \u0111\u1eb9p.<\/p>\n<p style=\"text-align: justify;\"><strong>L\u01b0u \u00fd v\u1ec1 context window:<\/strong> M\u1ed7i Skill chi\u1ebfm dung l\u01b0\u1ee3ng context. N\u1ebfu c\u00e0i qu\u00e1 nhi\u1ec1u skill c\u00f9ng l\u00fac, Claude c\u00f3 th\u1ec3 b\u1ecf s\u00f3t ch\u1ec9 d\u1eabn t\u1eeb skill \u1edf cu\u1ed1i. Gi\u1edbi h\u1ea1n 2-3 skill m\u1ed7i phi\u00ean l\u00e0m vi\u1ec7c cho k\u1ebft qu\u1ea3 \u1ed5n \u0111\u1ecbnh nh\u1ea5t.<\/p>\n<h2 id=\"section6\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">C\u00e1ch c\u00e0i \u0111\u1eb7t Claude Skill thi\u1ebft k\u1ebf web \u2013 h\u01b0\u1edbng d\u1eabn t\u1eebng b\u01b0\u1edbc<\/h2>\n<p style=\"text-align: justify;\">Claude Skill c\u00e0i \u0111\u1eb7t tr\u1ef1c ti\u1ebfp trong d\u1ef1 \u00e1n qua CLI c\u1ee7a Claude Code. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 quy tr\u00ecnh chu\u1ea9n, \u00e1p d\u1ee5ng cho ph\u1ea7n l\u1edbn skill trong danh s\u00e1ch.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">C\u00e0i \u0111\u1eb7t Skill t\u1eeb GitHub<\/h3>\n<p style=\"text-align: justify;\">M\u1edf terminal t\u1ea1i th\u01b0 m\u1ee5c d\u1ef1 \u00e1n, ch\u1ea1y l\u1ec7nh sau (v\u00ed d\u1ee5 v\u1edbi Frontend-Design Plugin):<\/p>\n<pre><code>claude plugin add anthropic\/frontend-design<\/code><\/pre>\n<p style=\"text-align: justify;\">V\u1edbi c\u00e1c skill c\u1ed9ng \u0111\u1ed3ng d\u1ea1ng file .md, b\u1ea1n clone repo v\u1ec1 v\u00e0 \u0111\u1eb7t file skill v\u00e0o th\u01b0 m\u1ee5c <code>.claude\/skills\/<\/code> trong d\u1ef1 \u00e1n:<\/p>\n<pre><code># Clone repo skill v\u1ec1 m\u00e1y\r\ngit clone https:\/\/github.com\/nextlevelbuilder\/ui-ux-pro-max-skill.git\r\n\r\n# Copy file skill v\u00e0o d\u1ef1 \u00e1n\r\ncp ui-ux-pro-max-skill\/SKILL.md .claude\/skills\/ui-ux-pro-max.md<\/code><\/pre>\n<p style=\"text-align: justify;\">Sau khi \u0111\u1eb7t file v\u00e0o <code>.claude\/skills\/<\/code>, Claude Code t\u1ef1 \u0111\u1ed9ng nh\u1eadn di\u1ec7n v\u00e0 \u00e1p d\u1ee5ng skill cho m\u1ecdi phi\u00ean l\u00e0m vi\u1ec7c trong d\u1ef1 \u00e1n. N\u1ebfu b\u1ea1n l\u01b0u code tr\u00ean <a href=\"https:\/\/interdata.vn\/blog\/github-la-gi\/\">GitHub<\/a>, commit c\u1ea3 folder <code>.claude\/<\/code> \u0111\u1ec3 \u0111\u1ed3ng b\u1ed9 skill cho to\u00e0n team.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">Ki\u1ec3m tra skill \u0111\u00e3 ho\u1ea1t \u0111\u1ed9ng ch\u01b0a<\/h3>\n<p style=\"text-align: justify;\">M\u1edf Claude Code trong d\u1ef1 \u00e1n, g\u00f5 <code>\/skills<\/code> \u0111\u1ec3 xem danh s\u00e1ch skill \u0111ang active. N\u1ebfu skill m\u1edbi c\u00e0i kh\u00f4ng xu\u1ea5t hi\u1ec7n, ki\u1ec3m tra l\u1ea1i \u0111\u01b0\u1eddng d\u1eabn file v\u00e0 format .md. M\u1ed9t s\u1ed1 skill (nh\u01b0 Claude Design Skillstack) c\u00f3 slash commands ri\u00eang \u2013 g\u00f5 <code>\/<\/code> r\u1ed3i tab \u0111\u1ec3 xem danh s\u00e1ch l\u1ec7nh.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: 600; margin: 30px 0 15px;\">C\u00e0i cho Cursor ho\u1eb7c Cline<\/h3>\n<p style=\"text-align: justify;\">Ph\u1ea7n l\u1edbn skill trong danh s\u00e1ch vi\u1ebft cho Claude Code, nh\u01b0ng n\u1ed9i dung l\u00e0 file Markdown ch\u1ee9a design rules \u2013 ho\u1ea1t \u0111\u1ed9ng \u0111\u01b0\u1ee3c v\u1edbi b\u1ea5t k\u1ef3 AI coding agent n\u00e0o \u0111\u1ecdc file ch\u1ec9 d\u1eabn. V\u1edbi Cursor, \u0111\u1eb7t file .md v\u00e0o <code>.cursorrules<\/code>. V\u1edbi <a href=\"https:\/\/interdata.vn\/blog\/cline-la-gi\/\">Cline<\/a>, \u0111\u1eb7t v\u00e0o <code>.clinerules<\/code>. K\u1ebft qu\u1ea3 c\u00f3 th\u1ec3 kh\u00e1c \u0111\u00f4i ch\u00fat v\u00ec m\u1ed7i agent x\u1eed l\u00fd ch\u1ec9 d\u1eabn theo c\u00e1ch ri\u00eang.<\/p>\n<h2 id=\"section7\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">Deploy s\u1ea3n ph\u1ea9m Vibe Coding l\u00ean server \u2013 ch\u1ecdn VPS hay Cloud Server?<\/h2>\n<p style=\"text-align: justify;\">C\u00e0i Claude Skill, vi\u1ebft code giao di\u1ec7n \u0111\u1eb9p, test tr\u00ean localhost \u2013 t\u1ea5t c\u1ea3 m\u1edbi ch\u1ec9 l\u00e0 m\u1ed9t n\u1eeda. S\u1ea3n ph\u1ea9m c\u1ea7n ch\u1ea1y tr\u00ean server th\u1eadt \u0111\u1ec3 c\u00f3 ng\u01b0\u1eddi d\u00f9ng th\u1eadt. Ph\u1ea7n n\u00e0y gi\u00fap b\u1ea1n ch\u1ecdn \u0111\u00fang h\u1ea1 t\u1ea7ng theo quy m\u00f4 d\u1ef1 \u00e1n, tr\u00e1nh thu\u00ea th\u1eeba ho\u1eb7c thi\u1ebfu.<\/p>\n<p style=\"text-align: justify;\">N\u1ebfu b\u1ea1n ch\u01b0a r\u00f5 quy tr\u00ecnh tri\u1ec3n khai, \u0111\u1ecdc tr\u01b0\u1edbc b\u00e0i <a href=\"https:\/\/interdata.vn\/blog\/dua-code-len-host-sau-khi-vibe-coding\/\">c\u00e1ch \u0111\u01b0a code l\u00ean host sau khi Vibe Coding<\/a> \u0111\u1ec3 n\u1eafm c\u00e1c b\u01b0\u1edbc c\u01a1 b\u1ea3n.<\/p>\n<table style=\"width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px;\">\n<thead>\n<tr style=\"background-color: #1e3a8a; color: #fff;\">\n<th style=\"padding: 12px 15px; text-align: left; border: 1px solid #BFDBFE;\">Ti\u00eau ch\u00ed<\/th>\n<th style=\"padding: 12px 15px; text-align: left; border: 1px solid #BFDBFE;\"><a style=\"color: #dbeafe;\" href=\"https:\/\/interdata.vn\/blog\/vps-la-gi\/\">VPS<\/a><\/th>\n<th style=\"padding: 12px 15px; text-align: left; border: 1px solid #BFDBFE;\">VPS Vibe Coding<\/th>\n<th style=\"padding: 12px 15px; text-align: left; border: 1px solid #BFDBFE;\">Cloud Server<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB; font-weight: 600;\">Khi n\u00e0o ch\u1ecdn<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Dev c\u1ea7n VPS \u0111\u1ec3 ch\u1ea1y Claude Code remote, self-host tools, staging<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Deploy s\u1ea3n ph\u1ea9m Vibe Coding ch\u1ea1y th\u1eadt, c\u1ea7n server + database + email + thanh to\u00e1n s\u1eb5n<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">D\u1ef1 \u00e1n l\u1edbn, nhi\u1ec1u user, t\u1ea3i bi\u1ebfn \u0111\u1ed9ng, c\u1ea7n n\u00e2ng\/h\u1ea1 t\u00e0i nguy\u00ean nhanh<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB; font-weight: 600;\">T\u00edch h\u1ee3p s\u1eb5n<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">OS c\u01a1 b\u1ea3n, b\u1ea1n t\u1ef1 c\u00e0i \u0111\u1eb7t m\u1ecdi th\u1ee9<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">EzyPlatform (database, t\u00e0i kho\u1ea3n, email, thanh to\u00e1n)<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">OS c\u01a1 b\u1ea3n, t\u1ef1 c\u00e0i \u0111\u1eb7t ho\u1eb7c d\u00f9ng marketplace images<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB; font-weight: 600;\">Scale<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">C\u1ed1 \u0111\u1ecbnh, c\u1ea7n n\u00e2ng g\u00f3i th\u1ee7 c\u00f4ng<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">C\u1ed1 \u0111\u1ecbnh<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">N\u00e2ng\/h\u1ea1 <a href=\"https:\/\/interdata.vn\/blog\/cpu-server\/\">CPU<\/a>, RAM nhanh theo t\u1ea3i<\/td>\n<\/tr>\n<tr style=\"background-color: #f9fafb;\">\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB; font-weight: 600;\">Ph\u00f9 h\u1ee3p nh\u1ea5t<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Dev, staging, tool n\u1ed9i b\u1ed9<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">Startup, freelancer ship s\u1ea3n ph\u1ea9m nhanh<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #E5E7EB;\">SaaS, marketplace, app nhi\u1ec1u user<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: justify;\">Ph\u1ea7n l\u1edbn d\u1ef1 \u00e1n Vibe Coding ban \u0111\u1ea7u ph\u00f9 h\u1ee3p v\u1edbi VPS Vibe Coding \u2013 v\u00ec b\u1ea1n \u0111\u00e3 c\u00f3 giao di\u1ec7n \u0111\u1eb9p b\u1eb1ng Claude Skill, c\u1ea7n ch\u1ed7 deploy nhanh m\u00e0 kh\u00f4ng t\u1ef1 c\u1ea5u h\u00ecnh server, database, email t\u1eeb \u0111\u1ea7u. Khi l\u01b0\u1ee3ng user t\u0103ng v\u00e0 c\u1ea7n scale, chuy\u1ec3n sang Cloud Server. \u0110\u1ec3 <a href=\"https:\/\/interdata.vn\/blog\/thiet-lap-vps-linux-cho-ai\/\">thi\u1ebft l\u1eadp VPS Linux cho AI ho\u1ea1t \u0111\u1ed9ng li\u00ean t\u1ee5c<\/a>, b\u1ea1n c\u1ea7n ch\u1ecdn g\u00f3i c\u00f3 CPU v\u00e0 RAM \u0111\u1ee7 cho Node.js, <a href=\"https:\/\/interdata.vn\/blog\/docker-la-gi\/\">Docker<\/a> ho\u1eb7c framework \u0111ang d\u00f9ng.<\/p>\n<p><!-- BOX CTA #3 \u2013 CLOUD SERVER --><\/p>\n<div style=\"display: flex; flex-wrap: wrap; background-color: #fff; border: 1.5px solid #BFDBFE; box-shadow: 0 8px 20px rgba(37,99,235,0.08); border-radius: 12px; overflow: hidden; margin: 35px 0;\">\n<div style=\"flex: 1; min-width: 250px; background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center;\">\n<div>\n<p style=\"color: #fff; font-size: 34px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; margin: 0; line-height: 1.1;\">Cloud Server InterData<\/p>\n<p style=\"color: #dbeafe; font-size: 15px; font-weight: 600; margin-top: 12px;\">CPU th\u1ebf h\u1ec7 m\u1edbi, SSD NVMe U.2, m\u1ea1ng t\u1ed1c \u0111\u1ed9 cao<\/p>\n<\/div>\n<\/div>\n<div style=\"flex: 2; padding: 25px; min-width: 300px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 0; font-size: 20px;\">D\u1ef1 \u00e1n SaaS nhi\u1ec1u user, t\u1ea3i t\u0103ng nhanh?<\/h3>\n<p style=\"text-align: justify; font-size: 15px; margin-bottom: 15px;\">Khi s\u1ea3n ph\u1ea9m web c\u00f3 nhi\u1ec1u ng\u01b0\u1eddi d\u00f9ng \u0111\u1ed3ng th\u1eddi, database ph\u00ecnh l\u1edbn v\u00e0 traffic bi\u1ebfn \u0111\u1ed9ng \u2013 Cloud Server cho ph\u00e9p n\u00e2ng ho\u1eb7c h\u1ea1 CPU, RAM nhanh m\u00e0 kh\u00f4ng c\u1ea7n migrate sang server m\u1edbi. H\u1ed7 tr\u1ee3 k\u1ef9 thu\u1eadt 24\/7, ch\u1ed1ng DDoS v\u00e0 backup \u0111\u1ecbnh k\u1ef3.<\/p>\n<p><a style=\"background: linear-gradient(90deg, #2563EB 0%, #1E3A8A 100%); color: #fff; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 8px; font-size: 15px; display: inline-block; box-shadow: 0 5px 15px rgba(37,99,235,0.3);\" href=\"https:\/\/interdata.vn\/cloud-server\/\" target=\"_blank\" rel=\"noopener\">Xem B\u1ea3ng Gi\u00e1 Cloud Server \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<h2 id=\"section8\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Claude Skill thi\u1ebft k\u1ebf web<\/h2>\n<h3 style=\"color: #2563eb; font-size: 18px; font-weight: 600; margin: 25px 0 10px;\">Claude Skill thi\u1ebft k\u1ebf web c\u00f3 mi\u1ec5n ph\u00ed kh\u00f4ng?<\/h3>\n<p style=\"text-align: justify;\">To\u00e0n b\u1ed9 15 skill trong b\u00e0i \u0111\u1ec1u l\u00e0 m\u00e3 ngu\u1ed3n m\u1edf tr\u00ean GitHub, t\u1ea3i mi\u1ec5n ph\u00ed. Chi ph\u00ed duy nh\u1ea5t l\u00e0 g\u00f3i Claude Code b\u1ea1n \u0111ang d\u00f9ng \u2013 skill kh\u00f4ng t\u00ednh ph\u00ed ri\u00eang. M\u1ed9t s\u1ed1 skill c\u1ed9ng \u0111\u1ed3ng c\u00f3 th\u1ec3 ng\u1eebng b\u1ea3o tr\u00ec b\u1ea5t c\u1ee9 l\u00fac n\u00e0o, n\u00ean ki\u1ec3m tra commit g\u1ea7n nh\u1ea5t tr\u00ean repo tr\u01b0\u1edbc khi c\u00e0i cho d\u1ef1 \u00e1n production.<\/p>\n<h3 style=\"color: #2563eb; font-size: 18px; font-weight: 600; margin: 25px 0 10px;\">C\u00e0i nhi\u1ec1u Claude Skill c\u00f9ng l\u00fac c\u00f3 xung \u0111\u1ed9t kh\u00f4ng?<\/h3>\n<p style=\"text-align: justify;\">V\u1ec1 k\u1ef9 thu\u1eadt, c\u00e1c skill kh\u00f4ng ghi \u0111\u00e8 l\u1eabn nhau v\u00ec ch\u00fang l\u00e0 file Markdown \u0111\u1ed9c l\u1eadp. R\u1ee7i ro th\u1ef1c t\u1ebf n\u1eb1m \u1edf context window: c\u00e0i qu\u00e1 nhi\u1ec1u skill khi\u1ebfn t\u1ed5ng token ch\u1ec9 d\u1eabn qu\u00e1 l\u1edbn, Claude c\u00f3 th\u1ec3 \u01b0u ti\u00ean skill g\u1ea7n cu\u1ed1i v\u00e0 b\u1ecf s\u00f3t skill \u0111\u1ea7u. Gi\u1edbi h\u1ea1n 2-3 skill chuy\u00ean s\u00e2u m\u1ed7i phi\u00ean cho k\u1ebft qu\u1ea3 \u1ed5n \u0111\u1ecbnh nh\u1ea5t.<\/p>\n<h3 style=\"color: #2563eb; font-size: 18px; font-weight: 600; margin: 25px 0 10px;\">Claude Skill c\u00f3 d\u00f9ng \u0111\u01b0\u1ee3c cho Cursor ho\u1eb7c Cline kh\u00f4ng?<\/h3>\n<p style=\"text-align: justify;\">C\u00f3, v\u1edbi \u0111i\u1ec1u ki\u1ec7n. Ph\u1ea7n l\u1edbn skill l\u00e0 file Markdown ch\u1ee9a design rules, b\u1ea3n ch\u1ea5t l\u00e0 ch\u1ec9 d\u1eabn b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean. B\u1ea1n \u0111\u1eb7t file v\u00e0o <code>.cursorrules<\/code> (cho Cursor) ho\u1eb7c <code>.clinerules<\/code> (cho Cline). M\u1ed9t s\u1ed1 t\u00ednh n\u0103ng ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng tr\u00ean Claude Code (nh\u01b0 slash commands, plugin hooks) s\u1ebd kh\u00f4ng c\u00f3 t\u00e1c d\u1ee5ng tr\u00ean agent kh\u00e1c.<\/p>\n<h3 style=\"color: #2563eb; font-size: 18px; font-weight: 600; margin: 25px 0 10px;\">Skill n\u00e0o ph\u00f9 h\u1ee3p cho ng\u01b0\u1eddi m\u1edbi, ch\u01b0a bi\u1ebft code?<\/h3>\n<p style=\"text-align: justify;\">Frontend Design Pro v\u00e0 Claude Design Skill (jiji262) ph\u00f9 h\u1ee3p nh\u1ea5t. Frontend Design Pro cho output HTML\/CSS thu\u1ea7n, kh\u00f4ng c\u1ea7n bi\u1ebft React hay framework. Claude Design Skill c\u00f3 advisor mode \u2013 Claude \u0111\u1ec1 xu\u1ea5t 3 h\u01b0\u1edbng thi\u1ebft k\u1ebf \u0111\u1ec3 b\u1ea1n ch\u1ecdn thay v\u00ec ph\u1ea3i t\u1ef1 m\u00f4 t\u1ea3 chi ti\u1ebft. C\u1ea3 hai \u0111\u1ec1u c\u00f3 anti-slop rules ng\u0103n giao di\u1ec7n ra qu\u00e1 generic.<\/p>\n<h3 style=\"color: #2563eb; font-size: 18px; font-weight: 600; margin: 25px 0 10px;\">Sau khi d\u00f9ng Claude Skill xong, deploy s\u1ea3n ph\u1ea9m \u1edf \u0111\u00e2u?<\/h3>\n<p style=\"text-align: justify;\">S\u1ea3n ph\u1ea9m c\u1ea7n server th\u1eadt \u0111\u1ec3 ch\u1ea1y \u2013 localhost kh\u00f4ng ph\u1ea3i production. V\u1edbi d\u1ef1 \u00e1n Vibe Coding t\u1eeb nh\u1ecf \u0111\u1ebfn trung b\u00ecnh, <a href=\"https:\/\/interdata.vn\/vps-vibe-coding\/\" target=\"_blank\" rel=\"noopener\">VPS Vibe Coding<\/a> c\u1ee7a InterData t\u00edch h\u1ee3p s\u1eb5n EzyPlatform, x\u1eed l\u00fd ph\u1ea7n server, database, email, thanh to\u00e1n. Khi t\u1ea3i t\u0103ng l\u1edbn, chuy\u1ec3n sang <a href=\"https:\/\/interdata.vn\/cloud-server\/\" target=\"_blank\" rel=\"noopener\">Cloud Server<\/a> \u0111\u1ec3 n\u00e2ng h\u1ea1 t\u00e0i nguy\u00ean theo nhu c\u1ea7u.<\/p>\n<div style=\"border-top: 2px dashed #BFDBFE; margin-top: 50px; padding-top: 30px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 22px; font-weight: bold; margin-bottom: 15px;\">L\u1eddi k\u1ebft<\/h3>\n<p style=\"text-align: justify;\">Claude Skill thi\u1ebft k\u1ebf web kh\u00f4ng ph\u1ea3i ph\u00e9p m\u00e0u bi\u1ebfn m\u1ecdi giao di\u1ec7n th\u00e0nh tuy\u1ec7t ph\u1ea9m, nh\u01b0ng gi\u1ea3i quy\u1ebft \u0111\u00fang g\u1ed1c v\u1ea5n \u0111\u1ec1: AI m\u1eb7c \u0111\u1ecbnh ra UI generic v\u00ec kh\u00f4ng c\u00f3 design rules c\u1ee5 th\u1ec3. 15 skill trong b\u00e0i ph\u1ee7 t\u1eeb design system, UX research, audit ch\u1ea5t l\u01b0\u1ee3ng \u0111\u1ebfn 3D animation \u2013 b\u1ea1n ch\u1ecdn theo d\u1ef1 \u00e1n, c\u00e0i theo combo, r\u1ed3i ch\u1ea1y Claude Code v\u1edbi output kh\u00e1c bi\u1ec7t r\u00f5 so v\u1edbi &#8220;AI slop&#8221; m\u1eb7c \u0111\u1ecbnh.<\/p>\n<p style=\"text-align: justify;\">Khi giao di\u1ec7n \u0111\u00e3 chu\u1ea9n, b\u01b0\u1edbc ti\u1ebfp theo l\u00e0 \u0111\u01b0a s\u1ea3n ph\u1ea9m t\u1eeb localhost l\u00ean server th\u1eadt. <a href=\"https:\/\/interdata.vn\/vps-vibe-coding\/\" target=\"_blank\" rel=\"noopener\">VPS Vibe Coding c\u1ee7a InterData<\/a> t\u00edch h\u1ee3p s\u1eb5n EzyPlatform \u2013 b\u1ea1n t\u1eadp trung v\u00e0o code v\u00e0 thi\u1ebft k\u1ebf, ph\u1ea7n h\u1ea1 t\u1ea7ng \u0111\u00e3 c\u00f3 s\u1eb5n. Xem deal m\u1edbi nh\u1ea5t t\u1ea1i <a href=\"https:\/\/interdata.vn\/canhme\/\" target=\"_blank\" rel=\"noopener\">Canh Me<\/a> tr\u01b0\u1edbc khi ch\u1ed1t g\u00f3i.<\/p>\n<\/div>\n<p style=\"text-align: justify; font-size: 13px; font-style: italic; color: #6b7280; margin-top: 30px; border-top: 1px solid #E5E7EB; padding-top: 15px;\"><span style=\"font-size: 100%;\"><em>N\u1ed9i dung mang t\u00ednh tham kh\u1ea3o k\u1ef9 thu\u1eadt. C\u00e1c Claude Skill, plugin, l\u1ec7nh c\u00e0i \u0111\u1eb7t v\u00e0 t\u00ednh n\u0103ng c\u00f3 th\u1ec3 thay \u0111\u1ed5i theo phi\u00ean b\u1ea3n Claude Code, framework v\u00e0 m\u00f4i tr\u01b0\u1eddng th\u1ef1c t\u1ebf. N\u00ean ki\u1ec3m tra t\u00e0i li\u1ec7u ch\u00ednh th\u1ee9c tr\u00ean GitHub c\u1ee7a t\u1eebng skill v\u00e0 th\u1eed nghi\u1ec7m tr\u01b0\u1edbc khi \u00e1p d\u1ee5ng cho d\u1ef1 \u00e1n production. M\u1ed9t s\u1ed1 skill l\u00e0 s\u1ea3n ph\u1ea9m c\u1ed9ng \u0111\u1ed3ng (community), kh\u00f4ng do Anthropic b\u1ea3o tr\u00ec ch\u00ednh th\u1ee9c.<\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Claude Skill thi\u1ebft k\u1ebf web l\u00e0 l\u1edbp ch\u1ec9 d\u1eabn thi\u1ebft k\u1ebf m\u00e0 Claude Code \u0111\u1ecdc tr\u01b0\u1edbc khi vi\u1ebft t\u1eebng d\u00f2ng code giao di\u1ec7n \u2013 gi\u1ea3i ph\u00e1p tr\u1ef1c ti\u1ebfp cho b\u00e0i to\u00e1n &#8220;AI t\u1ea1o UI x\u1ea5u, generic, \u0111\u1ea7y d\u1ea5u v\u1ebft AI slop&#8221; m\u00e0 h\u00e0ng ngh\u00ecn developer \u0111ang g\u1eb7p khi Vibe Coding. B\u00e0i vi\u1ebft t\u1eeb InterData d\u01b0\u1edbi<\/p>\n","protected":false},"author":2,"featured_media":43255,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[167],"tags":[],"class_list":["post-43234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vibe-coding"],"_links":{"self":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/43234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/comments?post=43234"}],"version-history":[{"count":7,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/43234\/revisions"}],"predecessor-version":[{"id":43258,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/43234\/revisions\/43258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media\/43255"}],"wp:attachment":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media?parent=43234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/categories?post=43234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/tags?post=43234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}