{"id":126079,"date":"2026-06-23T17:08:44","date_gmt":"2026-06-23T10:08:44","guid":{"rendered":"https:\/\/tino.vn\/blog\/?p=126079"},"modified":"2026-06-23T17:12:27","modified_gmt":"2026-06-23T10:12:27","slug":"design-skill-cho-vibe-code","status":"publish","type":"post","link":"https:\/\/tino.vn\/blog\/design-skill-cho-vibe-code\/","title":{"rendered":"Top 10+ design skill cho vibe code: B\u1ed9 k\u1ef9 n\u0103ng gi\u00fap Claude Code, Codex t\u1ea1o giao di\u1ec7n \u0111\u1eb9p h\u01a1n\u00a0"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Vibe coding \u0111ang thay \u0111\u1ed5i c\u00e1ch nhi\u1ec1u ng\u01b0\u1eddi x\u00e2y d\u1ef1ng website, landing page, dashboard v\u00e0 \u1ee9ng d\u1ee5ng web. C\u00e1ch l\u00e0m n\u00e0y m\u1edf ra t\u1ed1c \u0111\u1ed9 r\u1ea5t nhanh, nh\u01b0ng c\u0169ng t\u1ea1o ra m\u1ed9t v\u1ea5n \u0111\u1ec1 quen thu\u1ed9c: giao di\u1ec7n d\u1ec5 gi\u1ed1ng nhau, thi\u1ebfu c\u00e1 t\u00ednh, thi\u1ebfu logic UX, ch\u01b0a t\u1ed1i \u01b0u accessibility v\u00e0 \u0111\u00f4i khi nh\u00ecn kh\u00e1 \u201cAI\u201d. \u0110\u00e2y l\u00e0 l\u00fd do design skill tr\u1edf th\u00e0nh m\u1ea3nh gh\u00e9p quan tr\u1ecdng trong workflow vibe code. Trong b\u00e0i vi\u1ebft n\u00e0y, Tino s\u1ebd gi\u1edbi thi\u1ec7u \u0111\u1ebfn b\u1ea1n top 10+ design skill cho vibe code t\u1ed1t nh\u1ea5t hi\u1ec7n nay.<\/strong><\/p>\n\n\n\n<h2 id=\"T\u1ea1i_sao_giao_di\u1ec7n_\u0111\u01b0\u1ee3c_t\u1ea1o_ra_b\u1edfi_vide_code_l\u1ea1i_tr\u00f4ng_nh\u00e0m_ch\u00e1n_\u0111\u1ebfn_v\u1eady?\"><strong>T\u1ea1i sao giao di\u1ec7n \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1edfi vide code l\u1ea1i tr\u00f4ng nh\u00e0m ch\u00e1n \u0111\u1ebfn v\u1eady?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">N\u1ebfu \u0111\u00e3 d\u00f9ng <a href=\"https:\/\/tino.vn\/blog\/claude-code-la-gi\/\" target=\"_blank\" data-type=\"post\" data-id=\"122813\" rel=\"noreferrer noopener\">Claude Code<\/a>, <a href=\"https:\/\/tino.vn\/blog\/codex-gpt-la-gi\/\" target=\"_blank\" data-type=\"post\" data-id=\"121791\" rel=\"noreferrer noopener\">Codex <\/a>hay <a href=\"https:\/\/tino.vn\/blog\/cursor-la-gi\/\" data-type=\"post\" data-id=\"122713\">C<\/a><a href=\"https:\/\/tino.vn\/blog\/cursor-la-gi\/\" target=\"_blank\" data-type=\"post\" data-id=\"122713\" rel=\"noreferrer noopener\">u<\/a><a href=\"https:\/\/tino.vn\/blog\/cursor-la-gi\/\" data-type=\"post\" data-id=\"122713\">rsor<\/a> \u0111\u1ec3 t\u1ea1o landing page hay dashboard, b\u1ea1n s\u1ebd nh\u1eadn ra ngay: t\u1ea5t c\u1ea3 tr\u00f4ng g\u1ea7n nh\u01b0 gi\u1ed1ng nhau v\u00e0 r\u1ea5t nh\u1ea1t nh\u1ebdo. C\u1ed9ng \u0111\u1ed3ng developer g\u1ecdi \u0111\u00e2y l\u00e0 <strong>&#8220;AI slop&#8221;<\/strong>, \u00e1m ch\u1ec9 giao di\u1ec7n nh\u00ecn m\u1ed9t c\u00e1i l\u00e0 bi\u1ebft do AI t\u1ea1o ra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nguy\u00ean nh\u00e2n kh\u00f4ng ph\u1ea3i Claude hay Codex thi\u1ebfu kh\u1ea3 n\u0103ng. C\u00e1c m\u00f4 h\u00ecnh n\u00e0y hi\u1ec3u CSS, bi\u1ebft design principles, bi\u1ebft color theory. V\u1ea5n \u0111\u1ec1 l\u00e0 <strong>thi\u1ebfu context c\u1ee5 th\u1ec3<\/strong>: b\u1ed9 m\u00e0u n\u00e0o, font n\u00e0o, animation style n\u00e0o, spacing system n\u00e0o. Gi\u1ed1ng nh\u01b0 b\u1ea1n b\u1ea3o m\u1ed9t ki\u1ebfn tr\u00fac s\u01b0 gi\u1ecfi &#8220;h\u00e3y x\u00e2y cho t\u00f4i ng\u00f4i nh\u00e0 \u0111\u1eb9p&#8221; m\u00e0 kh\u00f4ng cho xem b\u1ea5t k\u1ef3 h\u00ecnh m\u1eabu hay y\u00eau c\u1ea7u g\u00ec. K\u1ebft qu\u1ea3 s\u1ebd l\u00e0 m\u1ed9t ng\u00f4i nh\u00e0 &#8220;\u1ed5n&#8221; theo ngh\u0129a chung chung, kh\u00f4ng ph\u1ea3i ng\u00f4i nh\u00e0 c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Design skill<\/strong> sinh ra \u0111\u1ec3 gi\u1ea3i quy\u1ebft \u0111\u00fang v\u1ea5n \u0111\u1ec1 n\u00e0y.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">M\u1ed7i skill l\u00e0 m\u1ed9t file SKILL.md ch\u1ee9a h\u00e0ng tr\u0103m quy t\u1eafc design \u0111\u01b0\u1ee3c n\u1ea1p v\u00e0o context c\u1ee7a AI tr\u01b0\u1edbc khi b\u1eaft \u0111\u1ea7u vi\u1ebft code. Khi AI c\u00f3 \u0111\u1ee7 context v\u1ec1 th\u1ea9m m\u1ef9, phong c\u00e1ch, v\u00e0 r\u00e0ng bu\u1ed9c, output tho\u00e1t kh\u1ecfi c\u00e1i &#8220;median&#8221; nh\u00e0m ch\u00e1n v\u00e0 tr\u1edf n\u00ean c\u00f3 c\u00e1 t\u00ednh th\u1eadt s\u1ef1.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-1.png\" alt=\"T\u1ea1i sao giao di\u1ec7n \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1edfi vide code l\u1ea1i tr\u00f4ng nh\u00e0m ch\u00e1n \u0111\u1ebfn v\u1eady?\" class=\"wp-image-126081\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-1.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-1-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption class=\"wp-element-caption\"><strong>T\u1ea1i sao giao di\u1ec7n \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1edfi vide code l\u1ea1i tr\u00f4ng nh\u00e0m ch\u00e1n \u0111\u1ebfn v\u1eady?<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 id=\"V\u1eady_t\u00f3m_l\u1ea1i,_design_skill_l\u00e0_g\u00ec?\"><strong>V\u1eady t\u00f3m l\u1ea1i, design skill l\u00e0 g\u00ec?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Design skill l\u00e0 m\u1ed9t g\u00f3i h\u01b0\u1edbng d\u1eabn gi\u00fap AI Agent th\u1ef1c hi\u1ec7n m\u1ed9t nh\u00f3m t\u00e1c v\u1ee5 thi\u1ebft k\u1ebf theo c\u00e1ch l\u1eb7p l\u1ea1i \u0111\u01b0\u1ee3c. Trong h\u1ec7 sinh th\u00e1i Agent Skills, m\u1ed9t skill th\u01b0\u1eddng n\u1eb1m trong th\u01b0 m\u1ee5c ri\u00eang v\u00e0 c\u00f3 file trung t\u00e2m t\u00ean SKILL.md. File n\u00e0y ch\u1ee9a metadata, m\u00f4 t\u1ea3 th\u1eddi \u0111i\u1ec3m n\u00ean k\u00edch ho\u1ea1t skill v\u00e0 c\u00e1c ch\u1ec9 d\u1eabn chi ti\u1ebft \u0111\u1ec3 AI Agent l\u00e0m vi\u1ec7c theo \u0111\u00fang quy tr\u00ecnh.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">C\u00f3 th\u1ec3 hi\u1ec3u \u0111\u01a1n gi\u1ea3n: prompt l\u00e0 l\u1eddi nh\u1eafc d\u00f9ng m\u1ed9t l\u1ea7n, c\u00f2n skill l\u00e0 \u201cquy tr\u00ecnh \u0111\u00f3ng g\u00f3i\u201d d\u00f9ng nhi\u1ec1u l\u1ea7n. Khi b\u1ea1n li\u00ean t\u1ee5c y\u00eau c\u1ea7u Claude Code ho\u1eb7c Codex t\u1ea1o UI theo c\u00f9ng m\u1ed9t b\u1ed9 quy t\u1eafc, vi\u1ec7c \u0111\u01b0a quy t\u1eafc v\u00e0o skill s\u1ebd ti\u1ebft ki\u1ec7m th\u1eddi gian h\u01a1n, gi\u1ea3m sai l\u1ec7ch gi\u1eefa c\u00e1c l\u1ea7n t\u1ea1o giao di\u1ec7n v\u00e0 gi\u00fap c\u1ea3 team l\u00e0m vi\u1ec7c th\u1ed1ng nh\u1ea5t h\u01a1n.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-2.png\" alt=\"V\u1eady t\u00f3m l\u1ea1i, design skill l\u00e0 g\u00ec?\" class=\"wp-image-126082\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-2.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-2-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption class=\"wp-element-caption\"><strong>V\u1eady t\u00f3m l\u1ea1i, design skill l\u00e0 g\u00ec?<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">V\u00ed d\u1ee5, thay v\u00ec m\u1ed7i l\u1ea7n \u0111\u1ec1u ph\u1ea3i vi\u1ebft:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u201cKh\u00f4ng d\u00f9ng layout SaaS generic, kh\u00f4ng d\u00f9ng font qu\u00e1 quen thu\u1ed9c, h\u00e3y d\u00f9ng design token, ki\u1ec3m tra accessibility, t\u1ea1o responsive t\u1ed1t, review l\u1ea1i b\u1eb1ng screenshot.\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">B\u1ea1n c\u00f3 th\u1ec3 c\u00e0i m\u1ed9t nh\u00f3m design skill ph\u00f9 h\u1ee3p. Khi t\u00e1c v\u1ee5 tr\u00f9ng v\u1edbi m\u00f4 t\u1ea3 c\u1ee7a skill, AI Agent c\u00f3 th\u1ec3 t\u1ef1 n\u1ea1p h\u01b0\u1edbng d\u1eabn li\u00ean quan, sau \u0111\u00f3 t\u1ea1o ho\u1eb7c review giao di\u1ec7n theo b\u1ed9 quy t\u1eafc \u0111\u00e3 chu\u1ea9n h\u00f3a.<\/p>\n\n\n\n<h2 id=\"5_ti\u00eau_ch\u00ed_ch\u1ecdn_design_skill_cho_vibe_code\"><strong>5 ti\u00eau ch\u00ed ch\u1ecdn design skill cho vibe code<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kh\u00f4ng ph\u1ea3i c\u1ee9 c\u00e0i nhi\u1ec1u skill l\u00e0 t\u1ed1t. C\u00e0i qu\u00e1 nhi\u1ec1u skill c\u00f3 th\u1ec3 l\u00e0m workflow r\u1ed1i, d\u1ec5 ph\u00e1t sinh ch\u1ec9 d\u1eabn m\u00e2u thu\u1eabn v\u00e0 khi\u1ebfn AI Agent kh\u00f3 ch\u1ecdn \u0111\u00fang h\u01b0\u1edbng. Khi ch\u1ecdn design skill cho vibe code, n\u00ean \u01b0u ti\u00ean 5 ti\u00eau ch\u00ed sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Th\u1ee9 nh\u1ea5t, skill ph\u1ea3i gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 r\u00f5 r\u00e0ng:<\/strong> M\u1ed9t skill t\u1ed1t c\u1ea7n c\u00f3 ph\u1ea1m vi c\u1ee5 th\u1ec3: t\u1ea1o frontend \u0111\u1eb9p h\u01a1n, ki\u1ec3m tra accessibility, chuy\u1ec3n Figma sang code, t\u1ed1i \u01b0u React, t\u1ea1o design token ho\u1eb7c t\u1ea1o s\u01a1 \u0111\u1ed3 k\u1ef9 thu\u1eadt.<\/li>\n\n\n\n<li><strong>Th\u1ee9 hai, skill n\u00ean ph\u00f9 h\u1ee3p v\u1edbi stack \u0111ang d\u00f9ng:<\/strong> N\u1ebfu b\u1ea1n l\u00e0m React\/Next.js, nh\u00f3m skill c\u1ee7a Vercel r\u1ea5t \u0111\u00e1ng c\u00e2n nh\u1eafc. N\u1ebfu b\u1ea1n l\u00e0m landing page thi\u00ean v\u1ec1 h\u00ecnh \u1ea3nh, frontend-design, Impeccable ho\u1eb7c UI\/UX Pro Max s\u1ebd h\u1eefu \u00edch h\u01a1n.<\/li>\n\n\n\n<li><strong>Th\u1ee9 ba, skill c\u1ea7n h\u1ed7 tr\u1ee3 ki\u1ec3m tra l\u1ea1i k\u1ebft qu\u1ea3:<\/strong> V\u1edbi giao di\u1ec7n, nh\u00ecn code ch\u01b0a \u0111\u1ee7. Skill k\u1ebft h\u1ee3p browser, screenshot, Playwright ho\u1eb7c accessibility audit s\u1ebd gi\u00fap AI Agent c\u00f3 v\u00f2ng ph\u1ea3n h\u1ed3i tr\u1ef1c quan h\u01a1n.<\/li>\n\n\n\n<li><strong>Th\u1ee9 t\u01b0, skill n\u00ean c\u00f3 ngu\u1ed3n r\u00f5 r\u00e0ng:<\/strong> \u01afu ti\u00ean repo ch\u00ednh th\u1ee9c, t\u00e0i li\u1ec7u minh b\u1ea1ch, c\u1ed9ng \u0111\u1ed3ng d\u00f9ng nhi\u1ec1u v\u00e0 file h\u01b0\u1edbng d\u1eabn d\u1ec5 \u0111\u1ecdc.<\/li>\n\n\n\n<li><strong>Th\u1ee9 n\u0103m, skill ph\u1ea3i gi\u00fap gi\u1ea3m th\u1eddi gian s\u1eeda tay:<\/strong> M\u1ed9t design skill t\u1ed1t kh\u00f4ng ch\u1ec9 t\u1ea1o UI \u0111\u1eb9p h\u01a1n, m\u00e0 c\u00f2n gi\u00fap gi\u1ea3m s\u1ed1 v\u00f2ng prompt l\u1ea1i, gi\u1ea3m l\u1ed7i responsive, gi\u1ea3m component r\u1ed1i v\u00e0 gi\u1ea3m l\u1ed7i accessibility tr\u01b0\u1edbc khi \u0111\u01b0a s\u1ea3n ph\u1ea9m l\u00ean m\u00f4i tr\u01b0\u1eddng th\u1eadt.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-3.png\" alt=\"5 ti\u00eau ch\u00ed ch\u1ecdn design skill cho vibe code\" class=\"wp-image-126083\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-3.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-3-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption class=\"wp-element-caption\"><strong>5 ti\u00eau ch\u00ed ch\u1ecdn design skill cho vibe code<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 id=\"Top_15_design_skill_cho_vibe_code_\u0111\u00e1ng_d\u00f9ng\"><strong>Top 15 design skill cho vibe code \u0111\u00e1ng d\u00f9ng<\/strong><\/h2>\n\n\n\n<h3 id=\"1._frontend-design\"><strong>1. frontend-design<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/anthropics\/skills\/blob\/main\/skills\/frontend-design\/SKILL.md\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/github.com\/anthropics\/skills\/blob\/main\/skills\/frontend-design\/SKILL.md\" rel=\"noreferrer noopener nofollow\">frontend-design<\/a> l\u00e0 l\u1ef1a ch\u1ecdn n\u00ean c\u00e0i \u0111\u1ea7u ti\u00ean n\u1ebfu b\u1ea1n d\u00f9ng Claude Code \u0111\u1ec3 t\u1ea1o giao di\u1ec7n. Skill n\u00e0y t\u1eadp trung v\u00e0o vi\u1ec7c gi\u00fap AI Agent tho\u00e1t kh\u1ecfi phong c\u00e1ch giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh th\u01b0\u1eddng g\u1eb7p nh\u01b0: font quen thu\u1ed9c, m\u00e0u an to\u00e0n, card gi\u1ed1ng template v\u00e0 b\u1ed1 c\u1ee5c thi\u1ebfu \u0111i\u1ec3m nh\u1ea5n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0110i\u1ec3m m\u1ea1nh c\u1ee7a frontend-design l\u00e0 \u0111\u1ecbnh h\u01b0\u1edbng th\u1ea9m m\u1ef9 r\u00f5 r\u00e0ng. Skill khuy\u1ebfn kh\u00edch Claude ch\u1ecdn m\u1ed9t h\u01b0\u1edbng thi\u1ebft k\u1ebf c\u1ee5 th\u1ec3 tr\u01b0\u1edbc khi vi\u1ebft code, ch\u1eb3ng h\u1ea1n editorial, brutalist, retro-futuristic, high-end SaaS, dark cinematic ho\u1eb7c playful startup. Khi c\u00f3 \u0111\u1ecbnh h\u01b0\u1edbng ngay t\u1eeb \u0111\u1ea7u, giao di\u1ec7n s\u1ebd \u00edt b\u1ecb chung chung h\u01a1n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> landing page, portfolio, trang gi\u1edbi thi\u1ec7u s\u1ea3n ph\u1ea9m, homepage SaaS, giao di\u1ec7n c\u1ea7n c\u00e1 t\u00ednh m\u1ea1nh.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cT\u1ea1o landing page cho \u1ee9ng d\u1ee5ng qu\u1ea3n l\u00fd t\u00e0i ch\u00ednh c\u00e1 nh\u00e2n. D\u00f9ng frontend-design, phong c\u00e1ch editorial dark, \u00edt card, typography m\u1ea1nh, responsive t\u1ed1t.\u201d<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-4.png\" alt=\"Top 15 design skill cho vibe code \u0111\u00e1ng d\u00f9ng\" class=\"wp-image-126084\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-4.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-4-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption class=\"wp-element-caption\"><strong>Top 15 design skill cho vibe code \u0111\u00e1ng d\u00f9ng<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 id=\"2._frontend-skill_cho_Codex\"><strong>2. frontend-skill cho Codex<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">N\u1ebfu frontend-design th\u01b0\u1eddng \u0111\u01b0\u1ee3c nh\u1eafc nhi\u1ec1u trong Claude Code, frontend-skill l\u1ea1i l\u00e0 h\u01b0\u1edbng t\u01b0\u01a1ng t\u1ef1 d\u00e0nh cho Codex. M\u1ee5c ti\u00eau v\u1eabn l\u00e0 gi\u00fap AI coding agent t\u1ea1o giao di\u1ec7n c\u00f3 ch\u1ee7 \u0111\u00edch h\u01a1n, thay v\u00ec ch\u1ec9 t\u00e1i t\u1ea1o nh\u1eefng pattern qu\u00e1 ph\u1ed5 bi\u1ebfn trong d\u1eef li\u1ec7u hu\u1ea5n luy\u1ec7n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">frontend-skill ph\u00f9 h\u1ee3p khi b\u1ea1n d\u00f9ng Codex \u0111\u1ec3 t\u1ea1o component, ch\u1ec9nh CSS, d\u1ef1ng layout ho\u1eb7c refactor giao di\u1ec7n c\u00f3 s\u1eb5n. \u0110i\u1ec3m \u0111\u00e1ng ch\u00fa \u00fd l\u00e0 skill d\u1ea1ng n\u00e0y th\u01b0\u1eddng khuy\u1ebfn kh\u00edch AI x\u00e1c \u0111\u1ecbnh \u201c\u1ea5n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean\u201d c\u1ee7a trang tr\u01b0\u1edbc khi \u0111i v\u00e0o chi ti\u1ebft. \u0110i\u1ec1u n\u00e0y r\u1ea5t quan tr\u1ecdng v\u1edbi landing page, v\u00ec ng\u01b0\u1eddi d\u00f9ng th\u01b0\u1eddng quy\u1ebft \u0111\u1ecbnh ti\u1ebfp t\u1ee5c \u0111\u1ecdc hay tho\u00e1t ch\u1ec9 sau v\u00e0i gi\u00e2y \u0111\u1ea7u.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> Codex CLI, d\u1ef1 \u00e1n frontend c\u1ea7n t\u1ea1o nhanh nh\u01b0ng v\u1eabn c\u00f3 \u0111\u1ecbnh h\u01b0\u1edbng th\u1ea9m m\u1ef9.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cD\u00f9ng frontend-skill \u0111\u1ec3 thi\u1ebft k\u1ebf l\u1ea1i hero section. Tr\u00e1nh giao di\u1ec7n SaaS generic, \u01b0u ti\u00ean b\u1ed1 c\u1ee5c b\u1ea5t \u0111\u1ed1i x\u1ee9ng v\u00e0 visual anchor r\u00f5.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"3._Impeccable\"><strong>3. Impeccable<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Impeccable l\u00e0 design skill \u0111\u00e1ng ch\u00fa \u00fd v\u00ec ph\u00e2n bi\u1ec7t r\u00f5 hai ng\u1eef c\u1ea3nh: brand v\u00e0 product. \u0110\u00e2y l\u00e0 \u0111i\u1ec3m r\u1ea5t th\u1ef1c t\u1ebf. M\u1ed9t trang marketing c\u1ea7n c\u1ea3m x\u00fac, nh\u1ecbp th\u1ecb gi\u00e1c v\u00e0 kh\u1ea3 n\u0103ng thuy\u1ebft ph\u1ee5c. M\u1ed9t dashboard n\u1ed9i b\u1ed9 l\u1ea1i c\u1ea7n r\u00f5 r\u00e0ng, ti\u1ebft ki\u1ec7m kh\u00f4ng gian v\u00e0 thao t\u00e1c nhanh.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Khi AI Agent hi\u1ec3u s\u1ef1 kh\u00e1c bi\u1ec7t n\u00e0y, k\u1ebft qu\u1ea3 thi\u1ebft k\u1ebf s\u1ebd h\u1ee3p l\u00fd h\u01a1n. V\u1edbi brand mode, skill c\u00f3 th\u1ec3 \u01b0u ti\u00ean typography, m\u00e0u s\u1eafc, motion v\u00e0 b\u1ed1 c\u1ee5c gi\u00e0u t\u00ednh tr\u00ecnh b\u00e0y. V\u1edbi product mode, skill c\u00f3 th\u1ec3 \u01b0u ti\u00ean hierarchy, tr\u1ea1ng th\u00e1i component, b\u1ea3ng d\u1eef li\u1ec7u, form, empty state v\u00e0 kh\u1ea3 n\u0103ng s\u1eed d\u1ee5ng h\u1eb1ng ng\u00e0y.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> team th\u01b0\u1eddng l\u00e0m c\u1ea3 landing page v\u00e0 web app.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cD\u00f9ng Impeccable \u1edf product mode \u0111\u1ec3 thi\u1ebft k\u1ebf dashboard qu\u1ea3n l\u00fd \u0111\u01a1n h\u00e0ng. \u01afu ti\u00ean r\u00f5 r\u00e0ng, d\u1ec5 scan d\u1eef li\u1ec7u, tr\u1ea1ng th\u00e1i empty\/loading\/error \u0111\u1ea7y \u0111\u1ee7.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"4._Figma_implement_design\"><strong>4. Figma implement design<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Figma implement design ph\u00f9 h\u1ee3p khi b\u1ea1n \u0111\u00e3 c\u00f3 file thi\u1ebft k\u1ebf trong Figma v\u00e0 mu\u1ed1n AI Agent chuy\u1ec3n th\u00e0nh code s\u00e1t b\u1ea3n g\u1ed1c h\u01a1n. Thay v\u00ec \u0111\u1ec3 AI t\u1ef1 s\u00e1ng t\u1ea1o qu\u00e1 nhi\u1ec1u, skill n\u00e0y gi\u00fap gi\u1eef l\u1ea1i design intent: m\u00e0u, spacing, typography, component hierarchy v\u00e0 c\u00e1c tr\u1ea1ng th\u00e1i t\u01b0\u01a1ng t\u00e1c.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trong workflow chuy\u00ean nghi\u1ec7p, \u0111\u00e2y l\u00e0 skill r\u1ea5t h\u1eefu \u00edch v\u00ec kho\u1ea3ng c\u00e1ch gi\u1eefa thi\u1ebft k\u1ebf v\u00e0 code th\u01b0\u1eddng l\u00e0 \u0111i\u1ec3m g\u00e2y th\u1ea5t tho\u00e1t ch\u1ea5t l\u01b0\u1ee3ng. N\u1ebfu ch\u1ec9 copy th\u00f4ng s\u1ed1 th\u1ee7 c\u00f4ng, developer d\u1ec5 b\u1ecf s\u00f3t hover state, selected state, empty state ho\u1eb7c breakpoint nh\u1ecf. Khi k\u1ebft h\u1ee3p Figma v\u1edbi AI Agent, qu\u00e1 tr\u00ecnh chuy\u1ec3n giao c\u00f3 th\u1ec3 nhanh v\u00e0 nh\u1ea5t qu\u00e1n h\u01a1n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> d\u1ef1 \u00e1n \u0111\u00e3 c\u00f3 Figma file, team c\u00f3 designer, c\u1ea7n chuy\u1ec3n UI sang React\/Tailwind\/shadcn.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cImplement frame Figma n\u00e0y th\u00e0nh React + Tailwind. Gi\u1eef \u0111\u00fang spacing, m\u00e0u, font scale, hover state v\u00e0 responsive theo design system.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"5._Playwright_\/_webapp-testing\"><strong>5. Playwright \/ webapp-testing<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Thi\u1ebft k\u1ebf giao di\u1ec7n kh\u00f4ng th\u1ec3 ch\u1ec9 nh\u00ecn v\u00e0o code. Playwright ho\u1eb7c webapp-testing gi\u00fap AI Agent m\u1edf \u1ee9ng d\u1ee5ng trong tr\u00ecnh duy\u1ec7t, ch\u1ee5p screenshot, ki\u1ec3m tra responsive, ki\u1ec3m tra lu\u1ed3ng click v\u00e0 t\u1ef1 ph\u00e1t hi\u1ec7n ph\u1ea7n l\u1ec7ch layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0110\u00e2y l\u00e0 m\u1ed9t trong nh\u1eefng m\u1ea3nh gh\u00e9p quan tr\u1ecdng nh\u1ea5t cho vibe code frontend. Khi AI Agent c\u00f3 th\u1ec3 nh\u00ecn k\u1ebft qu\u1ea3 trong browser, AI Agent kh\u00f4ng c\u00f2n ch\u1ec9 \u201c\u0111o\u00e1n\u201d giao di\u1ec7n qua code. V\u00f2ng l\u1eb7p s\u1ebd tr\u1edf n\u00ean th\u1ef1c t\u1ebf h\u01a1n: t\u1ea1o UI, ch\u1ea1y app, ch\u1ee5p m\u00e0n h\u00ecnh, so s\u00e1nh v\u1edbi y\u00eau c\u1ea7u, s\u1eeda layout, ki\u1ec3m tra l\u1ea1i.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> m\u1ecdi d\u1ef1 \u00e1n frontend c\u1ea7n ki\u1ec3m tra tr\u1ef1c quan, \u0111\u1eb7c bi\u1ec7t l\u00e0 dashboard, form, landing page v\u00e0 flow nhi\u1ec1u b\u01b0\u1edbc.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cSau khi t\u1ea1o trang pricing, h\u00e3y ch\u1ea1y app b\u1eb1ng Playwright, ch\u1ee5p screenshot \u1edf desktop v\u00e0 mobile, sau \u0111\u00f3 t\u1ef1 review l\u1ed7i layout r\u1ed3i s\u1eeda.\u201d<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-5.png\" alt=\"Top 15 design skill cho vibe code \u0111\u00e1ng d\u00f9ng\" class=\"wp-image-126085\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-5.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-5-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption class=\"wp-element-caption\"><strong>Top 15 design skill cho vibe code \u0111\u00e1ng d\u00f9ng<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 id=\"6._Designer_Skills_Collection\"><strong>6. Designer Skills Collection<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Designer Skills Collection l\u00e0 nh\u00f3m skill r\u1ed9ng, ph\u00f9 h\u1ee3p cho ng\u01b0\u1eddi mu\u1ed1n \u0111\u01b0a c\u1ea3 quy tr\u00ecnh thi\u1ebft k\u1ebf v\u00e0o AI Agent ch\u1ee9 kh\u00f4ng ch\u1ec9 t\u1ea1o component. Nh\u00f3m n\u00e0y th\u01b0\u1eddng bao g\u1ed3m nghi\u00ean c\u1ee9u, strategy, UX, interaction design, prototyping, design ops, handoff v\u00e0 vi\u1ebft rationale.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0110i\u1ec3m m\u1ea1nh n\u1eb1m \u1edf quy tr\u00ecnh. Nhi\u1ec1u ng\u01b0\u1eddi vibe code th\u01b0\u1eddng nh\u1ea3y th\u1eb3ng t\u1eeb \u00fd t\u01b0\u1edfng sang code, d\u1eabn \u0111\u1ebfn giao di\u1ec7n c\u00f3 v\u1ebb \u0111\u1eb9p \u1edf b\u1ec1 m\u1eb7t nh\u01b0ng thi\u1ebfu logic s\u1ea3n ph\u1ea9m. Designer Skills Collection gi\u00fap AI Agent \u0111\u1eb7t c\u00e2u h\u1ecfi t\u1ed1t h\u01a1n, t\u1ea1o brief r\u00f5 h\u01a1n, x\u00e1c \u0111\u1ecbnh user flow, chu\u1ea9n h\u00f3a handoff v\u00e0 t\u1ea1o checklist QA.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> d\u1ef1 \u00e1n c\u1ea7n t\u01b0 duy UX, case study, handoff cho developer ho\u1eb7c quy tr\u00ecnh thi\u1ebft k\u1ebf c\u00f3 nhi\u1ec1u b\u01b0\u1edbc.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cD\u00f9ng Designer Skills Collection \u0111\u1ec3 t\u1ea1o UX brief cho \u1ee9ng d\u1ee5ng \u0111\u1eb7t l\u1ecbch kh\u00e1m. Bao g\u1ed3m persona, user flow, edge case v\u00e0 checklist handoff.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"7._theme-factory\"><strong>7. theme-factory<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">theme-factory t\u1eadp trung v\u00e0o design token: m\u00e0u, spacing, typography scale, border radius, shadow, dark mode v\u00e0 high-contrast mode. \u0110\u00e2y l\u00e0 ph\u1ea7n n\u1ec1n m\u00f3ng c\u1ee7a giao di\u1ec7n chuy\u00ean nghi\u1ec7p.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Khi kh\u00f4ng c\u00f3 theme token, AI Agent r\u1ea5t d\u1ec5 t\u1ea1o m\u1ed7i component m\u1ed9t m\u00e3 m\u00e0u kh\u00e1c nhau. Sau v\u00e0i v\u00f2ng s\u1eeda, d\u1ef1 \u00e1n s\u1ebd c\u00f3 h\u00e0ng ch\u1ee5c m\u00e0u g\u1ea7n gi\u1ed1ng nhau, spacing thi\u1ebfu nh\u1ea5t qu\u00e1n v\u00e0 component kh\u00f3 b\u1ea3o tr\u00ec. theme-factory gi\u00fap gom c\u00e1c quy\u1ebft \u0111\u1ecbnh thi\u1ebft k\u1ebf v\u1ec1 m\u1ed9t h\u1ec7 th\u1ed1ng r\u00f5 r\u00e0ng.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> d\u1ef1 \u00e1n c\u1ea7n x\u00e2y design system, s\u1ea3n ph\u1ea9m c\u00f3 nhi\u1ec1u m\u00e0n h\u00ecnh, team mu\u1ed1n chu\u1ea9n h\u00f3a UI l\u00e2u d\u00e0i.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cD\u00f9ng theme-factory \u0111\u1ec3 t\u1ea1o design token cho SaaS B2B: light mode, dark mode, m\u00e0u primary\/secondary, spacing scale, typography ramp v\u00e0 CSS variables.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"8._Design_Process_Pack\"><strong>8. Design Process Pack<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Design Process Pack ph\u00f9 h\u1ee3p v\u1edbi workflow c\u00f3 tr\u00ecnh t\u1ef1: khai th\u00e1c y\u00eau c\u1ea7u, t\u1ea1o design brief, x\u00e2y th\u00f4ng tin ki\u1ebfn tr\u00fac, t\u1ea1o token, chia task, generate frontend v\u00e0 review. \u0110i\u1ec3m gi\u00e1 tr\u1ecb nh\u1ea5t l\u00e0 \u00e9p ng\u01b0\u1eddi d\u00f9ng l\u00e0m r\u00f5 y\u00eau c\u1ea7u tr\u01b0\u1edbc khi \u0111\u1ec3 AI Agent code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trong vibe coding, y\u00eau c\u1ea7u m\u01a1 h\u1ed3 th\u01b0\u1eddng t\u1ea1o giao di\u1ec7n m\u01a1 h\u1ed3. Khi c\u00f3 skill bu\u1ed9c ph\u00e2n t\u00edch y\u00eau c\u1ea7u, AI Agent s\u1ebd h\u1ecfi r\u00f5 \u0111\u1ed1i t\u01b0\u1ee3ng d\u00f9ng, m\u1ee5c ti\u00eau trang, h\u00e0nh \u0111\u1ed9ng ch\u00ednh, d\u1eef li\u1ec7u c\u1ea7n hi\u1ec3n th\u1ecb, tr\u1ea1ng th\u00e1i l\u1ed7i, h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng v\u00e0 ti\u00eau ch\u00ed ho\u00e0n th\u00e0nh. K\u1ebft qu\u1ea3 t\u1ea1o ra th\u01b0\u1eddng b\u1ec1n v\u1eefng h\u01a1n so v\u1edbi m\u1ed9t prompt ng\u1eafn.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> d\u1ef1 \u00e1n nghi\u00eam t\u00fac, c\u1ea7n nhi\u1ec1u m\u00e0n h\u00ecnh ho\u1eb7c c\u1ea7n b\u00e0n giao cho team.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cTr\u01b0\u1edbc khi code, d\u00f9ng Design Process Pack \u0111\u1ec3 h\u1ecfi r\u00f5 requirement, t\u1ea1o brief, IA, token v\u00e0 checklist review cho web app qu\u1ea3n l\u00fd h\u1ecdc vi\u00ean.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"9._Composio_Skill\"><strong>9. Composio Skill<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Composio Skill kh\u00f4ng h\u1eb3n l\u00e0 skill th\u1ea9m m\u1ef9, nh\u01b0ng r\u1ea5t h\u1eefu \u00edch trong workflow design hi\u1ec7n \u0111\u1ea1i v\u00ec gi\u00fap AI Agent k\u1ebft n\u1ed1i nhi\u1ec1u c\u00f4ng c\u1ee5: GitHub, Slack, Notion, Figma, Linear v\u00e0 c\u00e1c app kh\u00e1c. Thi\u1ebft k\u1ebf s\u1ea3n ph\u1ea9m hi\u1ebfm khi n\u1eb1m trong m\u1ed9t file duy nh\u1ea5t. Y\u00eau c\u1ea7u c\u00f3 th\u1ec3 \u1edf Notion, issue \u1edf Linear, asset \u1edf Figma, code \u1edf GitHub v\u00e0 trao \u0111\u1ed5i \u1edf Slack.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Khi AI Agent c\u00f3 th\u1ec3 l\u1ea5y ng\u1eef c\u1ea3nh t\u1eeb nhi\u1ec1u n\u01a1i, ph\u1ea7n thi\u1ebft k\u1ebf v\u00e0 tri\u1ec3n khai s\u1ebd s\u00e1t th\u1ef1c t\u1ebf h\u01a1n. V\u00ed d\u1ee5, agent c\u00f3 th\u1ec3 \u0111\u1ecdc issue, l\u1ea5y asset, t\u1ea1o branch, c\u1eadp nh\u1eadt checklist, g\u1eedi screenshot review v\u00e0 ghi ch\u00fa thay \u0111\u1ed5i cho team.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> team d\u00f9ng nhi\u1ec1u c\u00f4ng c\u1ee5, workflow frontend c\u1ea7n l\u1ea5y d\u1eef li\u1ec7u t\u1eeb Figma, GitHub, Notion ho\u1eb7c Slack.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cL\u1ea5y y\u00eau c\u1ea7u t\u1eeb ticket Linear, asset t\u1eeb Figma, sau \u0111\u00f3 t\u1ea1o component React theo design system v\u00e0 \u0111\u0103ng screenshot review v\u00e0o Slack.\u201d<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-6.png\" alt=\"Top 15 design skill cho vibe code \u0111\u00e1ng d\u00f9ng\" class=\"wp-image-126086\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-6.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-6-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption class=\"wp-element-caption\"><strong>Top 15 design skill cho vibe code \u0111\u00e1ng d\u00f9ng<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 id=\"10._Excalidraw_Diagram_Skill\"><strong>10. Excalidraw Diagram Skill<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Excalidraw Diagram Skill gi\u00fap AI Agent t\u1ea1o s\u01a1 \u0111\u1ed3 tr\u1ef1c quan d\u1ea1ng .excalidraw, c\u00f3 th\u1ec3 m\u1edf, ch\u1ec9nh s\u1eeda v\u00e0 chia s\u1ebb. \u0110\u00e2y l\u00e0 skill r\u1ea5t h\u1eefu \u00edch tr\u01b0\u1edbc khi code c\u00e1c h\u1ec7 th\u1ed1ng c\u00f3 lu\u1ed3ng ph\u1ee9c t\u1ea1p: user flow, ki\u1ebfn tr\u00fac app, sequence diagram, database relationship ho\u1eb7c s\u01a1 \u0111\u1ed3 onboarding.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u1edbi vibe coding, s\u01a1 \u0111\u1ed3 gi\u00fap gi\u1ea3m m\u01a1 h\u1ed3. Thay v\u00ec b\u1eaft \u0111\u1ea7u b\u1eb1ng code ngay, b\u1ea1n c\u00f3 th\u1ec3 y\u00eau c\u1ea7u AI Agent t\u1ea1o s\u01a1 \u0111\u1ed3 m\u00e0n h\u00ecnh, lu\u1ed3ng ng\u01b0\u1eddi d\u00f9ng ho\u1eb7c ki\u1ebfn tr\u00fac component. Sau khi xem v\u00e0 ch\u1ec9nh l\u1ea1i s\u01a1 \u0111\u1ed3, b\u01b0\u1edbc code s\u1ebd ch\u00ednh x\u00e1c h\u01a1n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> m\u00f4 t\u1ea3 user flow, ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng, s\u01a1 \u0111\u1ed3 component, ERD, sequence diagram.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cT\u1ea1o s\u01a1 \u0111\u1ed3 Excalidraw cho lu\u1ed3ng onboarding SaaS g\u1ed3m \u0111\u0103ng k\u00fd, x\u00e1c th\u1ef1c email, ch\u1ecdn g\u00f3i, thanh to\u00e1n v\u00e0 v\u00e0o dashboard.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"11._AccessLint\"><strong>11. AccessLint<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AccessLint t\u1eadp trung v\u00e0o accessibility: \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n m\u00e0u, heading hierarchy, label cho form, semantic HTML, ARIA, keyboard navigation v\u00e0 d\u1ea5u hi\u1ec7u kh\u00f4ng n\u00ean ch\u1ec9 truy\u1ec1n t\u1ea3i b\u1eb1ng m\u00e0u s\u1eafc. \u0110\u00e2y l\u00e0 skill r\u1ea5t n\u00ean c\u00f3 n\u1ebfu b\u1ea1n t\u1ea1o giao di\u1ec7n b\u1eb1ng AI Agent.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Accessibility th\u01b0\u1eddng b\u1ecb b\u1ecf qua trong vibe code v\u00ec giao di\u1ec7n nh\u00ecn \u1ed5n tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi t\u1ea1o. Nh\u01b0ng ng\u01b0\u1eddi d\u00f9ng th\u1eadt c\u00f3 th\u1ec3 d\u00f9ng b\u00e0n ph\u00edm, screen reader, m\u00e0n h\u00ecnh nh\u1ecf, ch\u1ebf \u0111\u1ed9 gi\u1ea3m chuy\u1ec3n \u0111\u1ed9ng ho\u1eb7c \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n cao. AccessLint gi\u00fap ph\u00e1t hi\u1ec7n nhi\u1ec1u l\u1ed7i tr\u01b0\u1edbc khi giao di\u1ec7n ra m\u00f4i tr\u01b0\u1eddng th\u1eadt.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> form, dashboard, checkout, trang c\u00f3 tr\u1ea1ng th\u00e1i l\u1ed7i, s\u1ea3n ph\u1ea9m c\u1ea7n tu\u00e2n th\u1ee7 WCAG.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cD\u00f9ng AccessLint \u0111\u1ec3 ki\u1ec3m tra to\u00e0n b\u1ed9 form \u0111\u0103ng k\u00fd. T\u1eadp trung v\u00e0o label, keyboard navigation, focus state v\u00e0 color contrast.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"12._Vercel_Web_Design_Guidelines\"><strong>12. Vercel Web Design Guidelines<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Vercel Web Design Guidelines ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t b\u1ed9 ki\u1ec3m tra UI\/UX. Thay v\u00ec t\u1ea1o phong c\u00e1ch m\u1edbi, skill n\u00e0y ph\u00f9 h\u1ee3p \u0111\u1ec3 review giao di\u1ec7n theo c\u00e1c quy t\u1eafc web interface: accessibility, performance, UX best practices, semantic structure v\u00e0 kh\u1ea3 n\u0103ng d\u00f9ng th\u1ef1c t\u1ebf.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0110i\u1ec3m hay c\u1ee7a skill n\u00e0y l\u00e0 bi\u1ebfn qu\u00e1 tr\u00ecnh review th\u00e0nh checklist c\u00f3 th\u1ec3 l\u1eb7p l\u1ea1i. Sau khi AI Agent t\u1ea1o giao di\u1ec7n, b\u1ea1n c\u00f3 th\u1ec3 y\u00eau c\u1ea7u ki\u1ec3m tra l\u1ea1i file component ho\u1eb7c page c\u1ee5 th\u1ec3. K\u1ebft qu\u1ea3 n\u00ean \u0111\u01b0\u1ee3c xu\u1ea5t theo d\u1ea1ng r\u00f5 r\u00e0ng: file n\u00e0o, d\u00f2ng n\u00e0o, l\u1ed7i g\u00ec, c\u00e1ch s\u1eeda ra sao.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> review UI tr\u01b0\u1edbc khi merge, ki\u1ec3m tra form, ki\u1ec3m tra layout responsive, audit accessibility c\u01a1 b\u1ea3n.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cD\u00f9ng Vercel Web Design Guidelines \u0111\u1ec3 review src\/app\/pricing\/page.tsx. Xu\u1ea5t l\u1ed7i theo file v\u00e0 \u0111\u1ec1 xu\u1ea5t b\u1ea3n s\u1eeda.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"13._Vercel_React_Best_Practices\"><strong>13. Vercel React Best Practices<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hi\u1ec7u n\u0103ng c\u0169ng l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a UX. Giao di\u1ec7n \u0111\u1eb9p nh\u01b0ng t\u1ea3i ch\u1eadm, re-render nhi\u1ec1u ho\u1eb7c bundle qu\u00e1 n\u1eb7ng v\u1eabn t\u1ea1o tr\u1ea3i nghi\u1ec7m k\u00e9m. Vercel React Best Practices gi\u00fap AI Agent vi\u1ebft v\u00e0 review React\/Next.js theo c\u00e1c quy t\u1eafc t\u1ed1i \u01b0u h\u01a1n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Skill n\u00e0y ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c v\u1ea5n \u0111\u1ec1 nh\u01b0 data fetching waterfall, import qu\u00e1 n\u1eb7ng, component re-render kh\u00f4ng c\u1ea7n thi\u1ebft, lazy loading, Suspense, server-side performance v\u00e0 bundle optimization. V\u1edbi d\u1ef1 \u00e1n Next.js, \u0111\u00e2y l\u00e0 skill n\u00ean c\u00e0i s\u1edbm.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> React, Next.js, dashboard, design system component library, app c\u1ea7n hi\u1ec7u n\u0103ng t\u1ed1t.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cReview dashboard n\u00e0y b\u1eb1ng Vercel React Best Practices. T\u00ecm waterfall, import n\u1eb7ng, re-render kh\u00f4ng c\u1ea7n thi\u1ebft v\u00e0 \u0111\u1ec1 xu\u1ea5t refactor.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"14._Vercel_Composition_Patterns\"><strong>14. Vercel Composition Patterns<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Vercel Composition Patterns t\u1eadp trung v\u00e0o ki\u1ebfn tr\u00fac component. \u0110\u00e2y l\u00e0 ph\u1ea7n nhi\u1ec1u ng\u01b0\u1eddi m\u1edbi vibe code d\u1ec5 b\u1ecf qua. AI Agent c\u00f3 th\u1ec3 t\u1ea1o component ch\u1ea1y \u0111\u01b0\u1ee3c, nh\u01b0ng component c\u00f3 th\u1ec3 ch\u1ee9a qu\u00e1 nhi\u1ec1u boolean props, state r\u1ed1i, logic tr\u1ed9n l\u1eabn UI v\u00e0 API kh\u00f3 m\u1edf r\u1ed9ng.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Skill n\u00e0y gi\u00fap h\u01b0\u1edbng AI Agent \u0111\u1ebfn c\u00e1c pattern t\u1ed1t h\u01a1n: compound components, explicit variants, context provider, children composition v\u00e0 t\u00e1ch ph\u1ea7n tri\u1ec3n khai kh\u1ecfi interface. V\u1edbi design system, skill n\u00e0y r\u1ea5t quan tr\u1ecdng v\u00ec component s\u1ebd \u0111\u01b0\u1ee3c d\u00f9ng l\u1ea1i nhi\u1ec1u l\u1ea7n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> component library, design system, form ph\u1ee9c t\u1ea1p, dropdown, modal, table, menu, navigation.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cRefactor component DataTable b\u1eb1ng composition patterns. Tr\u00e1nh boolean props d\u01b0 th\u1eeba, d\u00f9ng compound components v\u00e0 explicit variants.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"15._UI\/UX_Pro_Max\"><strong>15. UI\/UX Pro Max<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">UI\/UX Pro Max l\u00e0 m\u1ed9t community skill h\u01b0\u1edbng \u0111\u1ebfn kho phong c\u00e1ch, palette, font pairing, pattern v\u00e0 UX best practices. Skill n\u00e0y ph\u00f9 h\u1ee3p khi b\u1ea1n mu\u1ed1n AI Agent c\u00f3 nhi\u1ec1u l\u1ef1a ch\u1ecdn th\u1ea9m m\u1ef9 h\u01a1n, \u0111\u1eb7c bi\u1ec7t trong c\u00e1c d\u1ef1 \u00e1n c\u1ea7n t\u1ea1o nhi\u1ec1u concept kh\u00e1c nhau.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u1edbi ng\u01b0\u1eddi l\u00e0m n\u1ed9i dung, marketing ho\u1eb7c s\u1ea3n ph\u1ea9m c\u1ea7n th\u1eed nhi\u1ec1u h\u01b0\u1edbng visual, UI\/UX Pro Max c\u00f3 th\u1ec3 gi\u00fap t\u1ea1o bi\u1ebfn th\u1ec3: glassmorphism, brutalism, minimal editorial, playful startup, fintech premium, dark dashboard, mobile-first app v\u00e0 nhi\u1ec1u phong c\u00e1ch kh\u00e1c. Tuy nhi\u00ean, n\u00ean k\u1ebft h\u1ee3p th\u00eam accessibility skill \u0111\u1ec3 b\u1ea3o \u0111\u1ea3m giao di\u1ec7n kh\u00f4ng ch\u1ec9 \u0111\u1eb9p m\u00e0 c\u00f2n d\u1ec5 d\u00f9ng.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00f9 h\u1ee3p khi d\u00f9ng cho:<\/strong> brainstorm concept, landing page, portfolio, th\u1eed nhi\u1ec1u mood visual, t\u1ea1o nhi\u1ec1u b\u1ea3n thi\u1ebft k\u1ebf nhanh.<\/li>\n\n\n\n<li><strong>Prompt m\u1eabu:<\/strong> \u201cD\u00f9ng UI\/UX Pro Max \u0111\u1ec3 t\u1ea1o 3 concept hero section cho startup AI Agent: premium dark, playful gradient v\u00e0 editorial minimal.\u201d<\/li>\n<\/ul>\n\n\n\n<h3 id=\"B\u1ea3ng_so_s\u00e1nh_nhanh_15_design_skill\">B\u1ea3ng so s\u00e1nh nhanh 15 design skill<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Skill<\/th><th>Ph\u00f9 h\u1ee3p nh\u1ea5t cho<\/th><th>Gi\u00e1 tr\u1ecb ch\u00ednh<\/th><\/tr><tr><td>frontend-design<\/td><td>Landing page, portfolio, marketing site<\/td><td>T\u1ea1o giao di\u1ec7n c\u00f3 c\u00e1 t\u00ednh h\u01a1n<\/td><\/tr><tr><td>frontend-skill<\/td><td>Codex frontend workflow<\/td><td>Tr\u00e1nh UI qu\u00e1 generic<\/td><\/tr><tr><td>Impeccable<\/td><td>Brand site v\u00e0 product UI<\/td><td>T\u00e1ch r\u00f5 marketing v\u00e0 dashboard<\/td><\/tr><tr><td>Figma implement design<\/td><td>Design-to-code<\/td><td>Chuy\u1ec3n Figma sang code s\u00e1t h\u01a1n<\/td><\/tr><tr><td>Playwright \/ webapp-testing<\/td><td>Ki\u1ec3m tra tr\u1ef1c quan<\/td><td>Ch\u1ea1y app, ch\u1ee5p screenshot, s\u1eeda layout<\/td><\/tr><tr><td>Designer Skills Collection<\/td><td>UX process<\/td><td>Brief, research, handoff, QA<\/td><\/tr><tr><td>theme-factory<\/td><td>Design system<\/td><td>Token m\u00e0u, spacing, typography<\/td><\/tr><tr><td>Design Process Pack<\/td><td>Quy tr\u00ecnh t\u1eeb y\u00eau c\u1ea7u \u0111\u1ebfn review<\/td><td>Gi\u1ea3m prompt m\u01a1 h\u1ed3<\/td><\/tr><tr><td>Composio Skill<\/td><td>Workflow \u0111a c\u00f4ng c\u1ee5<\/td><td>K\u1ebft n\u1ed1i Figma, GitHub, Slack, Notion<\/td><\/tr><tr><td>Excalidraw Diagram Skill<\/td><td>S\u01a1 \u0111\u1ed3 v\u00e0 lu\u1ed3ng s\u1ea3n ph\u1ea9m<\/td><td>T\u1ea1o diagram d\u1ec5 ch\u1ec9nh s\u1eeda<\/td><\/tr><tr><td>AccessLint<\/td><td>Accessibility<\/td><td>Ki\u1ec3m tra WCAG, contrast, semantic HTML<\/td><\/tr><tr><td>Vercel Web Design Guidelines<\/td><td>UI\/UX audit<\/td><td>Review theo checklist web interface<\/td><\/tr><tr><td>Vercel React Best Practices<\/td><td>React\/Next.js<\/td><td>T\u1ed1i \u01b0u performance frontend<\/td><\/tr><tr><td>Vercel Composition Patterns<\/td><td>Component architecture<\/td><td>Component d\u1ec5 m\u1edf r\u1ed9ng h\u01a1n<\/td><\/tr><tr><td>UI\/UX Pro Max<\/td><td>Brainstorm visual<\/td><td>Nhi\u1ec1u style, palette, font pairing<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"Combo_design_skill_n\u00ean_d\u00f9ng_theo_t\u1eebng_m\u1ee5c_ti\u00eau\"><strong>Combo design skill n\u00ean d\u00f9ng theo t\u1eebng m\u1ee5c ti\u00eau<\/strong><\/h2>\n\n\n\n<h3 id=\"Combo_cho_landing_page\"><strong>Combo cho landing page<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">N\u1ebfu m\u1ee5c ti\u00eau l\u00e0 t\u1ea1o landing page \u0111\u1eb9p, c\u00f3 c\u1ea3m x\u00fac v\u00e0 kh\u00e1c bi\u1ec7t, b\u1ea1n n\u00ean k\u1ebft h\u1ee3p:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>frontend-design<\/li>\n\n\n\n<li>Impeccable \u1edf brand mode<\/li>\n\n\n\n<li>UI\/UX Pro Max<\/li>\n\n\n\n<li>AccessLint<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Combo n\u00e0y gi\u00fap AI Agent c\u00f3 \u0111\u1ecbnh h\u01b0\u1edbng th\u1ea9m m\u1ef9 t\u1ed1t h\u01a1n, \u0111\u1ed3ng th\u1eddi v\u1eabn ki\u1ec3m tra \u0111\u01b0\u1ee3c \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n, focus state v\u00e0 c\u1ea5u tr\u00fac HTML c\u01a1 b\u1ea3n.<\/p>\n\n\n\n<h3 id=\"Combo_cho_dashboard_SaaS\"><strong>Combo cho dashboard SaaS<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">N\u1ebfu c\u1ea7n dashboard, web app ho\u1eb7c trang qu\u1ea3n tr\u1ecb, h\u00e3y \u01b0u ti\u00ean:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Impeccable \u1edf product mode<\/li>\n\n\n\n<li>theme-factory<\/li>\n\n\n\n<li>Vercel Web Design Guidelines<\/li>\n\n\n\n<li>Vercel React Best Practices<\/li>\n\n\n\n<li>Vercel Composition Patterns<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Dashboard c\u1ea7n t\u00ednh r\u00f5 r\u00e0ng, nh\u1ea5t qu\u00e1n, d\u1ec5 scan d\u1eef li\u1ec7u v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec h\u01a1n l\u00e0 hi\u1ec7u \u1ee9ng n\u1ed5i b\u1eadt. V\u00ec v\u1eady, nh\u00f3m skill thi\u00ean v\u1ec1 system v\u00e0 performance s\u1ebd ph\u00f9 h\u1ee3p h\u01a1n.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-7.png\" alt=\"Combo design skill n\u00ean d\u00f9ng theo t\u1eebng m\u1ee5c ti\u00eau\" class=\"wp-image-126087\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-7.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-7-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption class=\"wp-element-caption\"><strong>Combo design skill n\u00ean d\u00f9ng theo t\u1eebng m\u1ee5c ti\u00eau<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 id=\"Combo_cho_React\/Next.js_production\"><strong>Combo cho React\/Next.js production<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">V\u1edbi d\u1ef1 \u00e1n React\/Next.js chu\u1ea9n production, n\u00ean d\u00f9ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vercel React Best Practices<\/li>\n\n\n\n<li>Vercel Composition Patterns<\/li>\n\n\n\n<li>Vercel Web Design Guidelines<\/li>\n\n\n\n<li>Playwright \/ webapp-testing<\/li>\n\n\n\n<li>AccessLint<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Combo n\u00e0y gi\u00fap ki\u1ec3m so\u00e1t hi\u1ec7u n\u0103ng, ki\u1ebfn tr\u00fac component, responsive, accessibility v\u00e0 h\u00e0nh vi th\u1ef1c t\u1ebf trong browser.<\/p>\n\n\n\n<h3 id=\"Combo_cho_design-to-code_t\u1eeb_Figma\"><strong>Combo cho design-to-code t\u1eeb Figma<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">N\u1ebfu team c\u00f3 designer l\u00e0m Figma tr\u01b0\u1edbc, n\u00ean ch\u1ecdn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Figma implement design<\/li>\n\n\n\n<li>theme-factory<\/li>\n\n\n\n<li>Playwright \/ webapp-testing<\/li>\n\n\n\n<li>AccessLint<\/li>\n\n\n\n<li>Composio Skill n\u1ebfu c\u1ea7n k\u1ebft n\u1ed1i Figma, GitHub, Slack ho\u1eb7c Linear<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Workflow g\u1ee3i \u00fd: \u0111\u1ecdc Figma, t\u1ea1o token, implement component, ch\u1ea1y app, ch\u1ee5p screenshot, so s\u00e1nh v\u1edbi frame g\u1ed1c, sau \u0111\u00f3 audit accessibility.<\/p>\n\n\n\n<h2 id=\"H\u01b0\u1edbng_d\u1eabn_d\u00f9ng_design_skill_hi\u1ec7u_qu\u1ea3_khi_vibe_coding\"><strong>H\u01b0\u1edbng d\u1eabn d\u00f9ng design skill hi\u1ec7u qu\u1ea3 khi vibe coding<\/strong><\/h2>\n\n\n\n<h3 id=\"B\u01b0\u1edbc_1:_X\u00e1c_\u0111\u1ecbnh_phong_c\u00e1ch_thi\u1ebft_k\u1ebf\"><strong>B\u01b0\u1edbc 1: X\u00e1c \u0111\u1ecbnh phong c\u00e1ch thi\u1ebft k\u1ebf<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tr\u01b0\u1edbc khi y\u00eau c\u1ea7u AI Agent code, h\u00e3y m\u00f4 t\u1ea3 r\u00f5 phong c\u00e1ch. V\u00ed d\u1ee5: premium fintech, editorial dark, minimal B2B, playful startup, cyberpunk AI, warm healthcare ho\u1eb7c clean admin dashboard. C\u00e0ng r\u00f5 mood, AI Agent c\u00e0ng \u00edt t\u1ea1o k\u1ebft qu\u1ea3 chung chung.<\/p>\n\n\n\n<h3 id=\"B\u01b0\u1edbc_2:_Ch\u1ecdn_skill_theo_\u0111\u00fang_vi\u1ec7c_c\u1ea7n_l\u00e0m\"><strong>B\u01b0\u1edbc 2: Ch\u1ecdn skill theo \u0111\u00fang vi\u1ec7c c\u1ea7n l\u00e0m<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0110\u1eebng d\u00f9ng m\u1ed9t skill cho m\u1ecdi t\u00e1c v\u1ee5. T\u1ea1o landing page c\u1ea7n frontend-design ho\u1eb7c Impeccable. Review accessibility c\u1ea7n AccessLint. T\u1ed1i \u01b0u React c\u1ea7n Vercel React Best Practices. T\u1ea1o token c\u1ea7n theme-factory. Chuy\u1ec3n Figma sang code c\u1ea7n Figma implement design.<\/p>\n\n\n\n<h3 id=\"B\u01b0\u1edbc_3:_Y\u00eau_c\u1ea7u_AI_Agent_t\u1ea1o_b\u1ea3n_nh\u00e1p_c\u00f3_gi\u1edbi_h\u1ea1n_r\u00f5\"><strong>B\u01b0\u1edbc 3: Y\u00eau c\u1ea7u AI Agent t\u1ea1o b\u1ea3n nh\u00e1p c\u00f3 gi\u1edbi h\u1ea1n r\u00f5<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">M\u1ed9t prompt t\u1ed1t n\u00ean c\u00f3 m\u1ee5c ti\u00eau, \u0111\u1ed1i t\u01b0\u1ee3ng d\u00f9ng, stack, phong c\u00e1ch, r\u00e0ng bu\u1ed9c v\u00e0 ti\u00eau ch\u00ed ho\u00e0n th\u00e0nh.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00ed d\u1ee5:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u201cD\u00f9ng frontend-design v\u00e0 theme-factory \u0111\u1ec3 t\u1ea1o landing page cho SaaS qu\u1ea3n l\u00fd nh\u00e2n s\u1ef1. Stack Next.js + Tailwind. Phong c\u00e1ch premium B2B, \u00edt gradient, typography m\u1ea1nh, c\u00f3 hero, social proof, feature section, pricing v\u00e0 FAQ. T\u1ea1o design token b\u1eb1ng CSS variables. Kh\u00f4ng d\u00f9ng layout card l\u1eb7p l\u1ea1i qu\u00e1 nhi\u1ec1u.\u201d<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-8.png\" alt=\"H\u01b0\u1edbng d\u1eabn d\u00f9ng design skill hi\u1ec7u qu\u1ea3 khi vibe coding\" class=\"wp-image-126088\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-8.png 700w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2026\/06\/design-skill-cho-vibe-code-8-300x161.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption class=\"wp-element-caption\"><strong>H\u01b0\u1edbng d\u1eabn d\u00f9ng design skill hi\u1ec7u qu\u1ea3 khi vibe coding<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 id=\"B\u01b0\u1edbc_4:_Ki\u1ec3m_tra_b\u1eb1ng_browser,_screenshot_v\u00e0_accessibility\"><strong>B\u01b0\u1edbc 4: Ki\u1ec3m tra b\u1eb1ng browser, screenshot v\u00e0 accessibility<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sau khi AI Agent t\u1ea1o UI, h\u00e3y y\u00eau c\u1ea7u ch\u1ea1y app v\u00e0 review b\u1eb1ng d\u1eef li\u1ec7u tr\u1ef1c quan:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u201cCh\u1ea1y app, m\u1edf trang trong browser, ch\u1ee5p screenshot desktop 1440px v\u00e0 mobile 390px. T\u1ef1 review l\u1ed7i spacing, overflow, contrast, heading hierarchy v\u00e0 focus state. Sau \u0111\u00f3 s\u1eeda tr\u1ef1c ti\u1ebfp.\u201d<\/p>\n\n\n\n<h3 id=\"B\u01b0\u1edbc_5:_Chu\u1ea9n_h\u00f3a_th\u00e0nh_design_system\"><strong>B\u01b0\u1edbc 5: Chu\u1ea9n h\u00f3a th\u00e0nh design system<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Khi \u0111\u00e3 c\u00f3 giao di\u1ec7n \u0111\u1ea1t y\u00eau c\u1ea7u, h\u00e3y y\u00eau c\u1ea7u AI Agent gom l\u1ea1i th\u00e0nh design system nh\u1ecf:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Color tokens<\/li>\n\n\n\n<li>Typography scale<\/li>\n\n\n\n<li>Spacing scale<\/li>\n\n\n\n<li>Button variants<\/li>\n\n\n\n<li>Card patterns<\/li>\n\n\n\n<li>Form styles<\/li>\n\n\n\n<li>Motion rules<\/li>\n\n\n\n<li>Accessibility checklist<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">C\u00e1ch l\u00e0m n\u00e0y gi\u00fap nh\u1eefng m\u00e0n h\u00ecnh sau kh\u00f4ng b\u1ecb l\u1ec7ch phong c\u00e1ch so v\u1edbi m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean.<\/p>\n\n\n\n<h2 id=\"G\u1ee3i_\u00fd_prompt_t\u1ed5ng_h\u1ee3p_\u0111\u1ec3_d\u00f9ng_ngay\"><strong>G\u1ee3i \u00fd prompt t\u1ed5ng h\u1ee3p \u0111\u1ec3 d\u00f9ng ngay<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng prompt sau trong Claude Code, Codex ho\u1eb7c Cursor:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u201cB\u1ea1n l\u00e0 senior product designer ki\u00eam frontend engineer. H\u00e3y d\u00f9ng c\u00e1c design skill ph\u00f9 h\u1ee3p \u0111\u1ec3 t\u1ea1o giao di\u1ec7n theo h\u01b0\u1edbng production-ready. Tr\u01b0\u1edbc khi code, h\u00e3y x\u00e1c \u0111\u1ecbnh phong c\u00e1ch thi\u1ebft k\u1ebf, design token, layout system v\u00e0 tr\u1ea1ng th\u00e1i component. Sau khi code, h\u00e3y ch\u1ea1y app, ch\u1ee5p screenshot \u1edf desktop v\u00e0 mobile, review accessibility, contrast, responsive, semantic HTML, performance v\u00e0 ki\u1ebfn tr\u00fac component. N\u1ebfu ph\u00e1t hi\u1ec7n l\u1ed7i, h\u00e3y s\u1eeda tr\u1ef1c ti\u1ebfp v\u00e0 ghi l\u1ea1i checklist nh\u1eefng \u0111i\u1ec3m \u0111\u00e3 c\u1ea3i thi\u1ec7n.\u201d<\/em><\/p>\n\n\n\n<h2 id=\"L\u01b0u_\u00fd_b\u1ea3o_m\u1eadt_khi_c\u00e0i_skill_t\u1eeb_c\u1ed9ng_\u0111\u1ed3ng\"><strong>L\u01b0u \u00fd b\u1ea3o m\u1eadt khi c\u00e0i skill t\u1eeb c\u1ed9ng \u0111\u1ed3ng<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Agent Skills r\u1ea5t m\u1ea1nh v\u00ec c\u00f3 th\u1ec3 ch\u1ee9a h\u01b0\u1edbng d\u1eabn, t\u00e0i nguy\u00ean v\u00e0 \u0111\u00f4i khi c\u00f3 script. Ch\u00ednh v\u00ec v\u1eady, b\u1ea1n c\u1ea7n xem skill gi\u1ed1ng nh\u01b0 m\u1ed9t dependency trong d\u1ef1 \u00e1n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tr\u01b0\u1edbc khi c\u00e0i, h\u00e3y \u0111\u1ecdc file SKILL.md. Ki\u1ec3m tra ph\u1ea7n m\u00f4 t\u1ea3, th\u1eddi \u0111i\u1ec3m k\u00edch ho\u1ea1t, quy\u1ec1n truy c\u1eadp, script \u0111i k\u00e8m v\u00e0 c\u00e1c l\u1ec7nh c\u00f3 th\u1ec3 ch\u1ea1y. V\u1edbi skill c\u1ea7n token t\u1eeb Figma, GitHub, Slack ho\u1eb7c Notion, h\u00e3y t\u1ea1o token ri\u00eang, gi\u1edbi h\u1ea1n quy\u1ec1n \u0111\u1ecdc, tr\u00e1nh d\u00f9ng token c\u00f3 quy\u1ec1n qu\u1ea3n tr\u1ecb ho\u1eb7c quy\u1ec1n ghi kh\u00f4ng c\u1ea7n thi\u1ebft.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u1ebfu skill \u0111\u1ebfn t\u1eeb repo l\u1ea1, \u00edt ng\u01b0\u1eddi d\u00f9ng, thi\u1ebfu t\u00e0i li\u1ec7u ho\u1eb7c y\u00eau c\u1ea7u quy\u1ec1n qu\u00e1 r\u1ed9ng, h\u00e3y c\u00e2n nh\u1eafc sao ch\u00e9p ph\u1ea7n h\u01b0\u1edbng d\u1eabn c\u1ea7n thi\u1ebft sang skill ri\u00eang thay v\u00ec c\u00e0i tr\u1ef1c ti\u1ebfp. V\u1edbi d\u1ef1 \u00e1n c\u00f4ng ty, n\u00ean l\u01b0u skill \u1edf c\u1ea5p project, review qua pull request v\u00e0 version control gi\u1ed1ng code th\u00f4ng th\u01b0\u1eddng.<\/p>\n\n\n\n<h3 id=\"K\u1ebft_lu\u1eadn\"><strong>K\u1ebft lu\u1eadn<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sau khi kh\u00e1m ph\u00e1 15 design skills n\u00e0y, c\u00f3 m\u1ed9t \u0111i\u1ec1u quan tr\u1ecdng c\u1ea7n nh\u1edb: <strong>AI kh\u00f4ng c\u00f3 th\u1ea9m m\u1ef9 c\u1ee7a ri\u00eang m\u00ecnh<\/strong>. Skill gi\u00fap AI bi\u1ebft <em>c\u00e1ch<\/em> th\u1ef1c thi c\u00e1c quy t\u1eafc design, nh\u01b0ng kh\u00f4ng th\u1ec3 thay th\u1ebf <em>quy\u1ebft \u0111\u1ecbnh<\/em> c\u1ee7a b\u1ea1n v\u1ec1 th\u1ee9 g\u00ec tr\u00f4ng \u0111\u1eb9p, th\u1ee9 g\u00ec ph\u00f9 h\u1ee3p v\u1edbi th\u01b0\u01a1ng hi\u1ec7u, th\u1ee9 g\u00ec t\u1ea1o ra c\u1ea3m x\u00fac \u0111\u00fang cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0110\u00f3 ch\u00ednh x\u00e1c l\u00e0 l\u00fd do skills t\u1ed3n t\u1ea1i: kh\u00f4ng ph\u1ea3i \u0111\u1ec3 AI l\u00e0m thay b\u1ea1n, m\u00e0 \u0111\u1ec3 AI th\u1ef1c thi <em>\u00fd \u0111\u1ecbnh design c\u1ee7a b\u1ea1n<\/em> m\u1ed9t c\u00e1ch nh\u1ea5t qu\u00e1n v\u00e0 ch\u00ednh x\u00e1c h\u01a1n.<\/p>\n\n\n\n<h2 id=\"Nh\u1eefng_c\u00e2u_h\u1ecfi_th\u01b0\u1eddng_g\u1eb7p\"><strong>Nh\u1eefng c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p<\/strong><\/h2>\n\n\n\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"Ng\u01b0\u1eddi_m\u1edbi_n\u00ean_b\u1eaft_\u0111\u1ea7u_v\u1edbi_skill_n\u00e0o?\">Ng\u01b0\u1eddi m\u1edbi n\u00ean b\u1eaft \u0111\u1ea7u v\u1edbi skill n\u00e0o?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p class=\"wp-block-paragraph\">Ng\u01b0\u1eddi m\u1edbi n\u00ean b\u1eaft \u0111\u1ea7u v\u1edbi frontend-design, Vercel Web Design Guidelines v\u00e0 AccessLint. Ba skill n\u00e0y gi\u00fap c\u1ea3i thi\u1ec7n visual, ki\u1ec3m tra UI\/UX v\u00e0 gi\u1ea3m l\u1ed7i accessibility c\u01a1 b\u1ea3n.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"C\u00f3_n\u00ean_c\u00e0i_t\u1ea5t_c\u1ea3_15_skill_c\u00f9ng_l\u00fac_kh\u00f4ng?\">C\u00f3 n\u00ean c\u00e0i t\u1ea5t c\u1ea3 15 skill c\u00f9ng l\u00fac kh\u00f4ng?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p class=\"wp-block-paragraph\">Kh\u00f4ng n\u00ean. H\u00e3y ch\u1ecdn theo m\u1ee5c ti\u00eau d\u1ef1 \u00e1n. Landing page c\u1ea7n skill thi\u00ean v\u1ec1 visual. Dashboard c\u1ea7n skill thi\u00ean v\u1ec1 system, performance v\u00e0 accessibility. C\u00e0i qu\u00e1 nhi\u1ec1u skill c\u00f3 th\u1ec3 t\u1ea1o ch\u1ec9 d\u1eabn ch\u1ed3ng ch\u00e9o.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"C\u00e1c_skill_c\u00f3_xung_\u0111\u1ed9t_v\u1edbi_nhau_kh\u00f4ng_khi_c\u00e0i_nhi\u1ec1u_b\u1ed9_c\u00f9ng_l\u00fac?\">C\u00e1c skill c\u00f3 xung \u0111\u1ed9t v\u1edbi nhau kh\u00f4ng khi c\u00e0i nhi\u1ec1u b\u1ed9 c\u00f9ng l\u00fac?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p class=\"wp-block-paragraph\">Xung \u0111\u1ed9t x\u1ea3y ra khi hai skill \u0111\u01b0a ra h\u01b0\u1edbng d\u1eabn tr\u00e1i ng\u01b0\u1ee3c nhau. Claude th\u01b0\u1eddng \u01b0u ti\u00ean skill \u0111\u01b0\u1ee3c n\u1ea1p v\u00e0o context sau c\u00f9ng. \u0110\u1ec3 tr\u00e1nh xung \u0111\u1ed9t, h\u00e3y \u0111\u1ecdc file SKILL.md c\u1ee7a t\u1eebng skill tr\u01b0\u1edbc khi c\u00e0i combo. C\u00e1c combo \u0111\u01b0\u1ee3c g\u1ee3i \u00fd trong b\u00e0i n\u00e0y \u0111\u00e3 \u0111\u01b0\u1ee3c ki\u1ec3m tra th\u1ef1c t\u1ebf \u2014 \u00edt g\u1eb7p xung \u0111\u1ed9t nghi\u00eam tr\u1ecdng.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"Design_skill_c\u00f3_thay_th\u1ebf_designer_\u0111\u01b0\u1ee3c_kh\u00f4ng?\">Design skill c\u00f3 thay th\u1ebf designer \u0111\u01b0\u1ee3c kh\u00f4ng?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p class=\"wp-block-paragraph\">Kh\u00f4ng. Design skill gi\u00fap AI Agent l\u00e0m vi\u1ec7c c\u00f3 quy t\u1eafc h\u01a1n, nh\u01b0ng gu th\u1ea9m m\u1ef9, hi\u1ec3u bi\u1ebft th\u01b0\u01a1ng hi\u1ec7u, nghi\u00ean c\u1ee9u ng\u01b0\u1eddi d\u00f9ng v\u00e0 quy\u1ebft \u0111\u1ecbnh s\u1ea3n ph\u1ea9m v\u1eabn c\u1ea7n con ng\u01b0\u1eddi ki\u1ec3m so\u00e1t<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"Skill_c\u00f3_ho\u1ea1t_\u0111\u1ed9ng_tr\u00ean_Claude.ai_web_kh\u00f4ng_hay_ch\u1ec9_d\u00f9ng_\u0111\u01b0\u1ee3c_qua_CLI?\">Skill c\u00f3 ho\u1ea1t \u0111\u1ed9ng tr\u00ean Claude.ai web kh\u00f4ng hay ch\u1ec9 d\u00f9ng \u0111\u01b0\u1ee3c qua CLI?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p class=\"wp-block-paragraph\">Skill \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf ch\u1ee7 y\u1ebfu cho Claude Code (CLI). Tuy nhi\u00ean, m\u1ed9t s\u1ed1 skills c\u00f3 plugin version ho\u1ea1t \u0111\u1ed9ng tr\u00ean <a href=\"http:\/\/claude.ai\" rel=\"nofollow noopener\" target=\"_blank\">Claude.ai<\/a> qua Plugin Marketplace \u2014 frontend-desig. Community skills nh\u01b0 Bencium hay Owl-Listener hi\u1ec7n ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng qua CLI. Ki\u1ec3m tra README c\u1ee7a t\u1eebng repo tr\u01b0\u1edbc khi c\u00e0i \u0111\u1ec3 bi\u1ebft ch\u00ednh x\u00e1c.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"T\u1ef1_vi\u1ebft_design_skill_ri\u00eang_c\u00f3_kh\u00f3_kh\u00f4ng?\">T\u1ef1 vi\u1ebft design skill ri\u00eang c\u00f3 kh\u00f3 kh\u00f4ng?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p class=\"wp-block-paragraph\">Kh\u00f4ng kh\u00f3 n\u1ebfu b\u1ea1n \u0111\u00e3 c\u00f3 design system s\u1eb5n. M\u1ed9t SKILL.md t\u1ed1t ch\u1ec9 c\u1ea7n 300 \u0111\u1ebfn 600 token: b\u1ed9 m\u00e0u hex c\u1ee5 th\u1ec3, font stack, spacing scale v\u00e0 10 \u0111\u1ebfn 15 quy t\u1eafc component. Quan tr\u1ecdng l\u00e0 vi\u1ebft d\u01b0\u1edbi d\u1ea1ng instruction r\u00f5 r\u00e0ng (&#8220;Always use&#8221;, &#8220;Never use&#8221;) thay v\u00ec description m\u01a1 h\u1ed3. Anthropic c\u0169ng \u0111\u00e3 ra m\u1eaft <strong>Skill Creator<\/strong> &#8211; m\u1ed9t c\u00f4ng c\u1ee5 interactive gi\u00fap b\u1ea1n t\u1ea1o skill t\u00f9y ch\u1ec9nh qua h\u1ecfi \u0111\u00e1p t\u1eebng b\u01b0\u1edbc.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\n<script type=\"application\/ld+json\">\n\t{\n\t\t\"@context\": \"https:\/\/schema.org\",\n\t\t\"@type\": \"FAQPage\",\n\t\t\"mainEntity\": [\n\t\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"Ng\u01b0\u1eddi m\u1edbi n\u00ean b\u1eaft \u0111\u1ea7u v\u1edbi skill n\u00e0o?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>Ng\u01b0\u1eddi m\u1edbi n\u00ean b\u1eaft \u0111\u1ea7u v\u1edbi frontend-design, Vercel Web Design Guidelines v\u00e0 AccessLint. Ba skill n\u00e0y gi\u00fap c\u1ea3i thi\u1ec7n visual, ki\u1ec3m tra UI\/UX v\u00e0 gi\u1ea3m l\u1ed7i accessibility c\u01a1 b\u1ea3n.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"C\u00f3 n\u00ean c\u00e0i t\u1ea5t c\u1ea3 15 skill c\u00f9ng l\u00fac kh\u00f4ng?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>Kh\u00f4ng n\u00ean. H\u00e3y ch\u1ecdn theo m\u1ee5c ti\u00eau d\u1ef1 \u00e1n. Landing page c\u1ea7n skill thi\u00ean v\u1ec1 visual. Dashboard c\u1ea7n skill thi\u00ean v\u1ec1 system, performance v\u00e0 accessibility. C\u00e0i qu\u00e1 nhi\u1ec1u skill c\u00f3 th\u1ec3 t\u1ea1o ch\u1ec9 d\u1eabn ch\u1ed3ng ch\u00e9o.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"C\u00e1c skill c\u00f3 xung \u0111\u1ed9t v\u1edbi nhau kh\u00f4ng khi c\u00e0i nhi\u1ec1u b\u1ed9 c\u00f9ng l\u00fac?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>Xung \u0111\u1ed9t x\u1ea3y ra khi hai skill \u0111\u01b0a ra h\u01b0\u1edbng d\u1eabn tr\u00e1i ng\u01b0\u1ee3c nhau. Claude th\u01b0\u1eddng \u01b0u ti\u00ean skill \u0111\u01b0\u1ee3c n\u1ea1p v\u00e0o context sau c\u00f9ng. \u0110\u1ec3 tr\u00e1nh xung \u0111\u1ed9t, h\u00e3y \u0111\u1ecdc file SKILL.md c\u1ee7a t\u1eebng skill tr\u01b0\u1edbc khi c\u00e0i combo. C\u00e1c combo \u0111\u01b0\u1ee3c g\u1ee3i \u00fd trong b\u00e0i n\u00e0y \u0111\u00e3 \u0111\u01b0\u1ee3c ki\u1ec3m tra th\u1ef1c t\u1ebf \u2014 \u00edt g\u1eb7p xung \u0111\u1ed9t nghi\u00eam tr\u1ecdng.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"Design skill c\u00f3 thay th\u1ebf designer \u0111\u01b0\u1ee3c kh\u00f4ng?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>Kh\u00f4ng. Design skill gi\u00fap AI Agent l\u00e0m vi\u1ec7c c\u00f3 quy t\u1eafc h\u01a1n, nh\u01b0ng gu th\u1ea9m m\u1ef9, hi\u1ec3u bi\u1ebft th\u01b0\u01a1ng hi\u1ec7u, nghi\u00ean c\u1ee9u ng\u01b0\u1eddi d\u00f9ng v\u00e0 quy\u1ebft \u0111\u1ecbnh s\u1ea3n ph\u1ea9m v\u1eabn c\u1ea7n con ng\u01b0\u1eddi ki\u1ec3m so\u00e1t<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"Skill c\u00f3 ho\u1ea1t \u0111\u1ed9ng tr\u00ean Claude.ai web kh\u00f4ng hay ch\u1ec9 d\u00f9ng \u0111\u01b0\u1ee3c qua CLI?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>Skill \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf ch\u1ee7 y\u1ebfu cho Claude Code (CLI). Tuy nhi\u00ean, m\u1ed9t s\u1ed1 skills c\u00f3 plugin version ho\u1ea1t \u0111\u1ed9ng tr\u00ean <a>Claude.ai<\/a> qua Plugin Marketplace \u2014 frontend-desig. Community skills nh\u01b0 Bencium hay Owl-Listener hi\u1ec7n ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng qua CLI. Ki\u1ec3m tra README c\u1ee7a t\u1eebng repo tr\u01b0\u1edbc khi c\u00e0i \u0111\u1ec3 bi\u1ebft ch\u00ednh x\u00e1c.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"T\u1ef1 vi\u1ebft design skill ri\u00eang c\u00f3 kh\u00f3 kh\u00f4ng?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>Kh\u00f4ng kh\u00f3 n\u1ebfu b\u1ea1n \u0111\u00e3 c\u00f3 design system s\u1eb5n. M\u1ed9t SKILL.md t\u1ed1t ch\u1ec9 c\u1ea7n 300 \u0111\u1ebfn 600 token: b\u1ed9 m\u00e0u hex c\u1ee5 th\u1ec3, font stack, spacing scale v\u00e0 10 \u0111\u1ebfn 15 quy t\u1eafc component. Quan tr\u1ecdng l\u00e0 vi\u1ebft d\u01b0\u1edbi d\u1ea1ng instruction r\u00f5 r\u00e0ng (\\\"Always use\\\", \\\"Never use\\\") thay v\u00ec description m\u01a1 h\u1ed3. Anthropic c\u0169ng \u0111\u00e3 ra m\u1eaft <strong>Skill Creator<\/strong> - m\u1ed9t c\u00f4ng c\u1ee5 interactive gi\u00fap b\u1ea1n t\u1ea1o skill t\u00f9y ch\u1ec9nh qua h\u1ecfi \u0111\u00e1p t\u1eebng b\u01b0\u1edbc.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t\t\t\t]\n\t}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Vibe coding \u0111ang thay \u0111\u1ed5i c\u00e1ch nhi\u1ec1u ng\u01b0\u1eddi x\u00e2y d\u1ef1ng website, landing page, dashboard v\u00e0 \u1ee9ng d\u1ee5ng web. C\u00e1ch l\u00e0m n\u00e0y m\u1edf ra t\u1ed1c \u0111\u1ed9 r\u1ea5t nhanh, nh\u01b0ng c\u0169ng t\u1ea1o ra m\u1ed9t v\u1ea5n \u0111\u1ec1 quen thu\u1ed9c: giao di\u1ec7n d\u1ec5 gi\u1ed1ng nhau, thi\u1ebfu c\u00e1 t\u00ednh, thi\u1ebfu logic UX, ch\u01b0a t\u1ed1i \u01b0u accessibility v\u00e0 \u0111\u00f4i khi nh\u00ecn [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":126089,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7514],"tags":[7652],"class_list":["post-126079","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vibe-coding","tag-design-skill"],"_links":{"self":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/126079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/comments?post=126079"}],"version-history":[{"count":3,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/126079\/revisions"}],"predecessor-version":[{"id":126091,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/126079\/revisions\/126091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media\/126089"}],"wp:attachment":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media?parent=126079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/categories?post=126079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/tags?post=126079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}