Tải bộ 50 SKILL Claude AI rút ngắn thời gian làm Giao Diện HTML chuẩn WordPress - Học wordpress cho người mới bắt đầu

CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%

Bài viết hướng dẫn có chứa CODE - Copy và sử dụng chúng sẽ tiện hơn cho bạn.

Nếu bạn đang dùng Claude AI để thiết kế giao diện HTML nhưng mỗi lần làm một website lại phải viết lại prompt, giải thích lại yêu cầu, sửa đi sửa lại cấu trúc HTML, CSS, Responsive và chuẩn WordPress, bạn sẽ nhanh chóng nhận ra một vấn đề:

[Link tải ở bên dưới]

🌱 Nếu thấy bài viết hữu ích, bạn có thể ủng hộ tác giả bằng cách nhấn vào quảng cáo bên dưới — như một donate miễn phí. Bạn không mất gì nhưng chúng tôi sẽ có thêm chi phí để duy trì và vận hành website. Cảm ơn bạn! 🙏

AI rất mạnh, nhưng nếu không có một quy trình và bộ kỹ năng được chuẩn hóa, bạn vẫn đang sử dụng AI theo cách thủ công.

Đặc biệt khi chuyển từ một giao diện HTML sang WordPress, khó khăn không chỉ nằm ở việc tạo ra giao diện đẹp. Bạn còn phải quan tâm đến cấu trúc HTML, khả năng responsive, component, accessibility, SEO, khả năng chuyển thành Theme/Elementor, CSS dễ bảo trì và rất nhiều chi tiết kỹ thuật khác.

Đó là lý do tôi xây dựng bộ 50 SKILL dành cho Claude AI miễn phí, tập trung vào quá trình tạo giao diện HTML theo hướng có thể tiếp tục triển khai thành website WordPress.

Trong bài viết này, tôi sẽ không chỉ hướng dẫn bạn tải bộ Skill.

Dùng skill tạo HMTL nhanh và chuẩn

Tôi sẽ giải thích một vấn đề quan trọng hơn:

Skill thực sự khác Prompt ở đâu, tại sao Skill có thể giúp Claude làm việc giống một thành viên trong team hơn, và cách bạn xây dựng cả một hệ thống Skill để tái sử dụng cho nhiều dự án WordPress.

1. Vì sao dùng Skill tốt hơn Prompt?

1.1. Prompt chỉ là một yêu cầu, Skill là một quy trình làm việc

Nhiều người mới sử dụng AI thường nghĩ:

Muốn AI làm tốt thì chỉ cần viết một Prompt thật dài.

Điều này đúng một phần.

Một Prompt tốt có thể giúp Claude hiểu bạn muốn tạo gì. Nhưng khi dự án bắt đầu lớn, Prompt sẽ nhanh chóng trở thành một đoạn hướng dẫn dài, khó quản lý và phải lặp lại nhiều lần.

Ví dụ, bạn có thể yêu cầu Claude:

Đóng vai UI/UX Designer.
Tạo giao diện HTML.
Responsive mobile.
Chuẩn SEO.
Sử dụng CSS hiện đại.
Tối ưu accessibility.
Code sạch.
Chuẩn bị để chuyển sang WordPress.

Nhưng ở lần làm dự án tiếp theo, bạn lại phải đưa toàn bộ những yêu cầu đó cho Claude.

Skill giải quyết vấn đề này theo cách khác.

Thay vì mỗi lần bắt đầu dự án lại giải thích:

“Hãy làm theo quy trình A, B, C, D…”

Bạn có thể xây dựng một Skill chứa sẵn kiến thức, quy tắc và quy trình cần thiết.

Khi cần, Claude sử dụng Skill đó như một bộ kỹ năng chuyên môn.

1.2. Prompt trả lời một nhiệm vụ, Skill chuẩn hóa cách AI thực hiện nhiệm vụ

Đây là điểm mà người mới thường bỏ qua.

Prompt thường tập trung vào:

“Tôi muốn AI làm gì?”

Trong khi Skill có thể tập trung vào:

“AI phải làm việc như thế nào để tạo ra kết quả đúng chuẩn?”

Ví dụ:

Bạn yêu cầu:

Tạo landing page bán sản phẩm bằng HTML.

Đây là Prompt.

Nhưng một Skill “Landing Page Designer” có thể quy định:

Phân tích sản phẩm.
Xác định đối tượng khách hàng.
Xác định CTA chính.
Xây dựng visual hierarchy.
Thiết kế Hero Section.
Xây dựng Benefits.
Social Proof.
Pricing.
FAQ.
CTA cuối trang.
Kiểm tra responsive.
Kiểm tra accessibility.
Kiểm tra HTML semantic.
Kiểm tra khả năng chuyển đổi sang WordPress.

Lúc này AI không chỉ nhận một câu lệnh.

Nó có một quy trình để thực hiện công việc.

1.3. Skill đặc biệt hữu ích khi làm WordPress

Với WordPress, việc tạo giao diện chỉ là bước đầu.

Một giao diện HTML tốt còn phải có khả năng chuyển thành:

WordPress Theme.
Custom Template.
Elementor Template.
Custom Widget.
Header/Footer.
WooCommerce Template.
Landing Page.
Blog Layout.
Component tái sử dụng.

Do đó, nếu ngay từ đầu Skill đã yêu cầu AI tạo HTML theo cấu trúc có thể chuyển đổi sang WordPress, bạn sẽ tiết kiệm rất nhiều thời gian ở bước phát triển tiếp theo.

Đây chính là lý do bộ Skill tôi chia sẻ không chỉ tập trung vào “làm cho đẹp”.

Nó hướng đến một quy trình:

Ý tưởng → UI/UX → HTML → CSS → Responsive → Component → WordPress

1.4. Skill giúp biến kinh nghiệm cá nhân thành tài sản có thể tái sử dụng

Đây mới là giá trị lớn nhất.

Giả sử bạn đã làm WordPress 5–10 năm.

Bạn có rất nhiều kinh nghiệm nhưng phần lớn nằm trong đầu:

Biết cách đặt cấu trúc HTML.
Biết cách chia Section.
Biết cách đặt class.
Biết responsive.
Biết những lỗi thường gặp.
Biết cấu trúc nào dễ chuyển sang WordPress.
Biết component nào nên tái sử dụng.
Biết cách viết CSS dễ bảo trì.

Nếu không hệ thống hóa, nhân viên mới gần như phải học lại từ đầu.

Nhưng nếu biến những kinh nghiệm đó thành Skill, bạn có thể đưa chúng vào quy trình AI.

Khi đó:

Kinh nghiệm của chuyên gia → Skill → AI → Nhân viên sử dụng

Đây là cách tôi cho rằng AI đang thay đổi cách đào tạo nhân sự WordPress.

Đây là cấu trúc 1 skill cơ bản, có tên: wpshare247-simple-view-counter-plugin

---
name: wpshare247-simple-view-counter-plugin
description: Tạo một plugin WordPress ĐƠN GIẢN, một-file, đếm và hiển thị số lượt xem bài viết (post view counter) — dùng làm ví dụ minh họa cấu trúc skill cho độc giả, không phụ thuộc site cụ thể nào. Kích hoạt khi người dùng nói "tạo plugin đếm lượt xem", "viết plugin view counter cho wordpress", hoặc muốn xem ví dụ đơn giản về plugin WordPress một chức năng.
---

# WPShare247 — Simple View Counter Plugin

Skill này tạo MỘT plugin WordPress đơn-file, đơn-chức-năng: đếm và hiển thị
số lượt xem mỗi bài viết. Mục đích là ví dụ tối giản để người đọc hiểu bộ
khung (anatomy) của một SKILL.md — không nhằm dùng cho plugin nhiều module
phức tạp (xem skill `web366-create-wp-plugin` cho trường hợp đó).

## Khi nào dùng skill này

- Người dùng muốn 1 plugin nhỏ, 1 chức năng, không cần trang cài đặt phức tạp.
- Dùng làm bài học/ví dụ về cách viết skill.

## Quy ước đặt tên (naming conventions)

- Tiền tố hàm/hook/option: `wpshare247_`
- Tên file chính: `wpshare247-view-counter.php`
- Text domain: `wpshare247-view-counter`
- Không tạo bảng riêng trong DB — dùng `post meta` (`_wpshare247_views`) để đơn giản.

## Cấu trúc plugin (đơn giản, 1 file)

```
wpshare247-view-counter/
└── wpshare247-view-counter.php   (toàn bộ code, không cần thư mục con)
```

## Các bước thực hiện

1. Tạo file `wpshare247-view-counter.php` với plugin header chuẩn WordPress
   (Plugin Name, Description, Version, Author).
2. Hook vào `single_template` hoặc `the_content` (dùng `wp_head`/`the_post`)
   để tăng số đếm mỗi khi bài viết được xem — chỉ tăng khi `is_single()` và
   không phải admin/bot đơn giản (`!is_admin()`).
3. Lưu số lượt xem vào post meta `_wpshare247_views`.
4. Cung cấp shortcode `[wpshare247_views]` để hiển thị số lượt xem ở bất kỳ
   đâu trong nội dung bài viết.
5. Hiển thị số đã làm tròn thân thiện (vd. "1.2k lượt xem") khi vượt 1000.

## Code mẫu đầy đủ

```php
<?php
/**
 * Plugin Name: WPShare247 View Counter
 * Description: Đếm và hiển thị số lượt xem cho mỗi bài viết. Dùng shortcode [wpshare247_views].
 * Version: 1.0.0
 * Author: WPShare247
 * Text Domain: wpshare247-view-counter
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Chặn truy cập trực tiếp.
}

/**
 * Tăng lượt xem mỗi khi bài viết (post) được mở, chỉ ở frontend.
 */
function wpshare247_track_post_view() {
    if ( is_admin() || ! is_single() ) {
        return;
    }

    $post_id = get_queried_object_id();
    if ( ! $post_id ) {
        return;
    }

    $views = (int) get_post_meta( $post_id, '_wpshare247_views', true );
    update_post_meta( $post_id, '_wpshare247_views', $views + 1 );
}
add_action( 'wp_head', 'wpshare247_track_post_view' );

/**
 * Định dạng số lượt xem cho thân thiện (1.2k, 3.4M...).
 *
 * @param int $views Số lượt xem thô.
 * @return string Chuỗi đã định dạng.
 */
function wpshare247_format_views( $views ) {
    if ( $views >= 1000000 ) {
        return round( $views / 1000000, 1 ) . 'M';
    }
    if ( $views >= 1000 ) {
        return round( $views / 1000, 1 ) . 'k';
    }
    return (string) $views;
}

/**
 * Shortcode [wpshare247_views] — hiển thị số lượt xem của bài viết hiện tại.
 */
function wpshare247_views_shortcode() {
    $post_id = get_the_ID();
    if ( ! $post_id ) {
        return '';
    }

    $views     = (int) get_post_meta( $post_id, '_wpshare247_views', true );
    $formatted = wpshare247_format_views( $views );

    return sprintf(
        '<span class="wpshare247-views">%s %s</span>',
        esc_html( $formatted ),
        esc_html__( 'lượt xem', 'wpshare247-view-counter' )
    );
}
add_shortcode( 'wpshare247_views', 'wpshare247_views_shortcode' );

/**
 * CSS tối giản cho shortcode.
 */
function wpshare247_views_style() {
    echo '<style>.wpshare247-views{font-size:13px;color:#777;}</style>';
}
add_action( 'wp_head', 'wpshare247_views_style' );
```

## Cách dùng sau khi cài

- Tải plugin lên `wp-content/plugins/`, kích hoạt trong **Plugins**.
- Chèn `[wpshare247_views]` vào bất kỳ bài viết/template nào để hiện số lượt xem.

## Vì sao ví dụ này minh họa tốt cấu trúc skill

- **Frontmatter** (`name`, `description`) — quyết định khi nào skill này được
  kích hoạt; đây là phần luôn nằm trong ngữ cảnh.
- **Thân Markdown** — hướng dẫn từng bước + code mẫu, chỉ được nạp khi skill
  được kích hoạt.
- Với plugin phức tạp hơn (nhiều module bật/tắt), phần code nên tách ra
  `scripts/` hoặc `references/` thay vì nhúng thẳng trong SKILL.md như ở đây.

2. Cách tạo Skill trong Claude Code

2.1. Skill thực chất là gì?

Có thể hiểu đơn giản:

Skill là một bộ hướng dẫn chuyên môn được tổ chức để Claude có thể sử dụng khi thực hiện một nhóm công việc cụ thể.

Ví dụ:

UI/UX Designer Skill.
HTML Developer Skill.
Responsive Designer Skill.
WordPress Developer Skill.
SEO Skill.
Accessibility Skill.
WooCommerce Skill.
Landing Page Skill.

Thay vì một AI phải biết tất cả mọi thứ trong một Prompt khổng lồ, bạn có thể chia kiến thức thành nhiều Skill nhỏ.

2.2. Tư duy đúng khi xây dựng Skill

Sai lầm phổ biến là nghĩ:

“Tôi sẽ viết một Prompt thật dài rồi gọi nó là Skill.”

Không nên.

Một Skill tốt nên trả lời được những câu hỏi:

Skill này chuyên làm việc gì?
Khi nào nên sử dụng?
Input cần những gì?
AI phải thực hiện theo quy trình nào?
Những nguyên tắc nào bắt buộc?
Những lỗi nào không được mắc?
Output phải có cấu trúc như thế nào?
Sau khi hoàn thành cần tự kiểm tra những gì?

Nói cách khác:

Skill không chỉ chứa câu lệnh. Skill chứa phương pháp làm việc.

2.3. Tạo Skill theo từng chuyên môn

Thay vì tạo một Skill:

“Làm website”

Tôi khuyên bạn chia nhỏ thành nhiều Skill.

Ví dụ:

skills/ 
├── ui-ux-designer/ 
├── html-developer/ 
├── responsive-web/ 
├── landing-page/ 
├── wordpress-converter/ 
├── seo-onpage/ 
├── accessibility/ 
├── performance/ 
└── code-review/

Mỗi Skill phụ trách một nhiệm vụ.

Khi kết hợp lại, bạn có thể xây dựng một pipeline hoàn chỉnh.

2.4. Một Skill tốt nên có cơ chế kiểm tra

Đây là một điểm rất quan trọng nhưng nhiều hướng dẫn AI hiện nay thường bỏ qua.

Không nên chỉ yêu cầu:

“Hãy tạo HTML chuẩn.”

Hãy yêu cầu AI tự kiểm tra kết quả.

Ví dụ:

Sau khi hoàn thành:
1. Kiểm tra HTML semantic. 
2. Kiểm tra responsive. 
3. Kiểm tra heading hierarchy. 
4. Kiểm tra accessibility. 
5. Kiểm tra class naming. 
6. Kiểm tra CSS duplication. 
7. Kiểm tra mobile layout. 
8. Kiểm tra khả năng chuyển sang WordPress.

Như vậy Skill không chỉ có:

Generate

mà còn có:

Generate → Validate → Fix

Đây là một trong những cách quan trọng để giảm lỗi khi sử dụng AI viết code.

3. Cách dùng Skill cho người mới

3.1. Đừng bắt đầu bằng việc tạo 50 Skill cùng lúc

Nếu bạn là người mới, không cần hiểu toàn bộ hệ thống ngay.

Hãy bắt đầu bằng một Skill đơn giản.

Ví dụ:

Skill tạo Landing Page HTML.

Bạn đưa cho Claude:

Tên sản phẩm.
Khách hàng mục tiêu.
Nội dung.
Hình ảnh.
Màu thương hiệu.

Skill sẽ giúp Claude triển khai theo quy trình đã được chuẩn hóa.

3.2. Một dự án có thể sử dụng nhiều Skill

Đây là lúc Skill bắt đầu trở nên mạnh.

Ví dụ một dự án bán hàng:

UI/UX Skill 
↓ 
Landing Page Skill 
↓ 
HTML Skill 
↓ 
Responsive Skill 
↓ 
SEO Skill 
↓ 
Accessibility Skill 
↓ 
WordPress Skill 
↓ 
Code Review Skill

Thay vì yêu cầu một AI làm tất cả mọi thứ trong một lần.

Bạn đang xây dựng một chuỗi chuyên gia AI.

3.3. Skill không thay thế tư duy của người làm web

Đây cũng là điều tôi muốn nhấn mạnh.

Không nên hiểu:

Có 50 Skill = AI sẽ tự làm website hoàn hảo.

Không phải.

Skill giúp chuẩn hóa quá trình làm việc, nhưng người dùng vẫn phải biết:

Website phục vụ ai?
Mục tiêu website là gì?
Khách hàng cần hành động gì?
Nội dung có đúng không?
Thiết kế có phù hợp thương hiệu không?
Tính năng có đúng yêu cầu không?

AI có thể viết code rất nhanh.

Nhưng AI không tự quyết định mục tiêu kinh doanh thay cho bạn.

3.4. Cách sử dụng hiệu quả nhất: AI làm, con người kiểm tra

Tôi thường tư duy theo mô hình:

Human → AI → Skill → Output → Human Review

Trong đó:

Human: xác định yêu cầu.

AI: thực hiện.

Skill: quy định phương pháp.

Output: sản phẩm được tạo ra.

Human Review: kiểm tra và quyết định có sử dụng hay không.

Đây là cách sử dụng AI phù hợp hơn so với việc “ném tất cả cho AI”.

4. Cách tạo plugin chứa nhiều Skill

4.1. Vì sao nên đóng gói Skill thành Plugin?

Nếu bạn chỉ có vài Skill, việc quản lý riêng lẻ không quá khó.

Nhưng khi có:

10 → 20 → 50 → 100 Skill

việc quản lý bắt đầu trở nên phức tạp.

Đặc biệt nếu bạn làm việc theo team.

Lúc đó, việc đóng gói thành một hệ thống Plugin giúp:

Quản lý tập trung.
Dễ cài đặt.
Dễ cập nhật.
Dễ chia sẻ cho nhân viên.
Dễ chuẩn hóa quy trình.
Có thể mở rộng thêm Skill.

4.2. Tư duy Plugin + Skill

Có thể hình dung:

WordPress
   │
   └── AI Skill Plugin
          │
          ├── UI/UX Skill
          ├── HTML Skill
          ├── CSS Skill
          ├── Responsive Skill
          ├── SEO Skill
          ├── Landing Page Skill
          ├── WordPress Skill
          ├── WooCommerce Skill
          └── Code Review Skill

Plugin đóng vai trò như hệ thống quản lý Skill.

Còn từng Skill là một chuyên môn riêng.

4.3. Đây có thể trở thành “AI Workflow” cho cả team

Ví dụ một nhân viên mới nhận dự án:

Bước 1: Nhập yêu cầu khách hàng.

Bước 2: AI phân tích yêu cầu.

Bước 3: Chọn Skill phù hợp.

Bước 4: Tạo giao diện.

Bước 5: Kiểm tra.

Bước 6: Chuyển sang WordPress.

Bước 7: Kiểm tra lần cuối.

Như vậy bạn không còn đào tạo nhân viên theo kiểu:

“Em hãy nhớ anh đã làm website như thế nào.”

Mà có thể chuyển thành:

“Em hãy làm theo Workflow này.”

Đây là sự khác biệt rất lớn khi xây dựng đội ngũ sử dụng AI.

5. Phân biệt Skill với Prompt

5.1. Prompt là câu lệnh, Skill là năng lực được chuẩn hóa

Có thể hiểu nhanh:

Prompt	Skill
Yêu cầu AI làm việc	Hướng dẫn AI cách làm việc
Thường dùng cho một nhiệm vụ	Có thể tái sử dụng nhiều lần
Có thể ngắn hoặc dài	Thường được tổ chức thành bộ quy tắc
Phụ thuộc nhiều vào người viết prompt	Chuẩn hóa quy trình
Dễ phải copy/paste	Có thể được gọi khi cần
Tập trung vào đầu ra	Tập trung cả quy trình và đầu ra

5.2. Prompt phù hợp với yêu cầu tức thời

Ví dụ:

Tạo cho tôi Hero Section cho website bán mỹ phẩm.

Đây là một yêu cầu cụ thể.

Prompt là đủ.

5.3. Skill phù hợp với công việc lặp lại

Nhưng nếu mỗi ngày bạn đều tạo:

Landing Page.
Homepage.
Product Page.
Blog.
WooCommerce.
Header.
Footer.

thì việc copy một Prompt dài mỗi lần không còn hiệu quả.

Bạn nên xây dựng Skill.

5.4. Prompt + Skill mới là cách kết hợp mạnh

Không nên đặt câu hỏi:

Skill hay Prompt tốt hơn?

Câu hỏi đúng phải là:

Khi nào dùng Prompt và khi nào dùng Skill?

Tôi thường sử dụng theo cách:

Prompt = yêu cầu dự án

Skill = phương pháp thực hiện

Ví dụ:

PROMPT
↓
"Tạo landing page cho sản phẩm X"

SKILL
↓
Landing Page Design
↓
UI/UX
↓
HTML
↓
Responsive
↓
SEO
↓
Accessibility
↓
WordPress

Khi kết hợp hai thứ này, AI không chỉ biết làm cái gì, mà còn biết nên làm theo cách nào.

6. Bộ 50 Skill Claude AI dành cho người làm WordPress

Bộ Skill tôi chia sẻ trong bài này được xây dựng với mục tiêu thực tế:

Rút ngắn thời gian từ ý tưởng giao diện → HTML → chuẩn hóa → triển khai WordPress.

Thay vì mỗi dự án lại bắt đầu từ một Prompt trắng, bạn có thể sử dụng các Skill có sẵn làm nền tảng.

Điểm quan trọng không phải là:

“Bạn có 50 Skill.”

Mà là:

Bạn có thể biến 50 Skill thành một quy trình làm website có thể lặp lại.

Đó mới là giá trị thực sự.

7. Khi nào bạn nên tự tạo Skill riêng?

Nếu bạn làm website thường xuyên, hãy bắt đầu quan sát những công việc mình lặp lại.

Ví dụ:

Luôn kiểm tra Responsive.
Luôn tạo cấu trúc Landing Page giống nhau.
Luôn có quy tắc đặt class.
Luôn có checklist SEO.
Luôn có checklist WordPress.
Luôn kiểm tra Accessibility.
Luôn cần chuyển HTML sang Elementor.

Mỗi công việc lặp lại nhiều lần đều có thể là ứng viên để tạo Skill.

Hãy tự hỏi:

“Nếu tôi phải hướng dẫn một nhân viên mới làm việc này 20 lần, tôi sẽ viết tài liệu hướng dẫn như thế nào?”

Phần tài liệu đó chính là nguyên liệu rất tốt để xây dựng Skill.

8. Kết luận

AI đang thay đổi cách chúng ta làm website.

Trước đây, lợi thế nằm ở việc:

Ai biết code nhanh hơn.

Sau này, lợi thế sẽ ngày càng chuyển sang:

Ai xây dựng được quy trình làm việc với AI tốt hơn.

Prompt vẫn rất quan trọng.

Nhưng khi công việc trở nên phức tạp và lặp lại, Skill giúp bạn tiến thêm một bước:

Từ việc “ra lệnh cho AI” sang “xây dựng năng lực cho AI”.

Đặc biệt với WordPress, bạn có thể xây dựng cả một hệ thống:

Skill → HTML → UI/UX → Responsive → SEO → WordPress → WooCommerce → Code Review

và sử dụng lại cho nhiều dự án khác nhau.