{/* Trang này được tạo tự động từ SKILL.md của kỹ năng bởi website/scripts/generate-skill-docs.py. Chỉnh sửa nguồn SKILL.md, không phải trang này. */}
Phác thảo

Mô hình HTML dùng một lần: 2-3 biến thể thiết kế để so sánh.
Siêu dữ liệu kỹ năng


Nguồn	Đi kèm (được cài đặt theo mặc định)
Đường dẫn
skills/creative/sketch ` | | Phiên bản |
sketch
, `mockup
, `design
, `ui
, `prototype
, 
`variants

, 
`exploration

, 
`wireframe

, 
`comparison
` |
| Kỹ năng liên quan | [XPROTECTX20XPROTECTX](/docs/user-guide/skills/bundled/software-development/software-development-spike), [XPROTECTX21XPROTECTX](/docs/user-guide/skills/bundled/creative/creative-Claude-design), [XPROTECTX22XPROTECTX](/docs/user-guide/skills/bundled/creative/creative-popular-web-designs), [XPROTECTX23XPROTECTX](/docs/user-guide/skills/bundled/creative/creative-excalidraw) |

## Tham khảo: đầy đủ SKILL.md

:::info
Sau đây là định nghĩa kỹ năng đầy đủ mà Hermes tải khi kỹ năng này được kích hoạt. Đây là những gì tác nhân coi là hướng dẫn khi kỹ năng được kích hoạt.

:::

# Phác thảo

Sử dụng kỹ năng này khi người dùng muốn **xem hướng thiết kế trước khi cam kết** với một hướng - khám phá ý tưởng UI/UX dưới dạng mô hình HTML dùng một lần. Mục đích là tạo ra 2-3 biến thể tương tác để người dùng có thể so sánh các hướng trực quan cạnh nhau, không tạo ra mã có thể chuyển được.

Tải nội dung này khi người dùng nói những câu như "phác họa màn hình này", "cho tôi xem X trông như thế nào", "so sánh bố cục A và B", "cho tôi 2-3 ý tưởng về giao diện người dùng này", "cho tôi xem một số biến thể", "mô phỏng cái này trước khi tôi xây dựng".

## Khi nào KHÔNG nên sử dụng cái này
- Người dùng muốn một thành phần sản xuất — sử dụng 
`Claude-design
` hoặc xây dựng nó đúng cách
- Người dùng muốn một tạo phẩm HTML một lần được đánh bóng (trang đích, bộ bài) — 
`Claude-design

- Người dùng muốn có sơ đồ — 
`excalidraw

, 
`architecture-diagram

- Thiết kế đã bị khóa - chỉ cần xây dựng nó

## Nếu người dùng đã cài đặt hệ thống GSD đầy đủ

Nếu 
`gsd-sketch
` hiển thị dưới dạng kỹ năng anh em (được cài đặt qua 
`npx get-shit-done-cc --Hermes

), hãy ưu tiên **
`gsd-sketch

** để có quy trình làm việc đầy đủ: 

.planning/sketches/
` liên tục với MANIFEST, phân tích chế độ biên giới, kiểm tra tính nhất quán trên các bản phác thảo trước đây và tích hợp với phần còn lại của GSD. Kỹ năng này là phiên bản độc lập nhẹ - phác thảo một lần mà không cần máy móc trạng thái.

## Phương pháp cốt lõi

`
intake  →  variants  →  head-to-head  →  pick winner (or iterate)

`

### 1. Intake (bỏ qua nếu người dùng đã cung cấp cho bạn đủ)

Trước khi tạo các biến thể, hãy làm ba việc — mỗi lần một câu hỏi, không phải tất cả cùng một lúc:
1. **Cảm nhận.** "Cảm giác này sẽ như thế nào? Tính từ, cảm xúc, rung cảm." — *"bình tĩnh, biên tập, giống như tuyến tính"* cho bạn biết nhiều hơn *"tối thiểu"*.
2. **Tài liệu tham khảo.** "Ứng dụng, trang web hoặc sản phẩm nào mang lại cảm giác mà bạn đang tưởng tượng?" - tài liệu tham khảo thực tế đánh bại các mô tả trừu tượng.
3. **Hành động cốt lõi.** "Điều quan trọng nhất mà người dùng thực hiện trên màn hình này là gì?" - tất cả các biến thể đều phải phục vụ tốt điều này; nếu không thì chúng chỉ là vật trang trí.

Hãy suy ngẫm ngắn gọn từng câu trả lời trước câu hỏi tiếp theo. Nếu người dùng đã cung cấp trước cho bạn cả ba biến thể, hãy chuyển thẳng sang các biến thể.

### 2. Các biến thể (2-3, không bao giờ 1, hiếm khi 4+)

Sản xuất **2-3 biến thể** trong một lần. Mỗi biến thể là một tệp HTML độc lập, hoàn chỉnh. Đừng mô tả các biến thể - hãy xây dựng chúng. Vấn đề là so sánh.

Mỗi biến thể phải có **quan điểm thiết kế khác nhau**, không phải các giá trị pixel khác nhau. Ba trục biến thể tốt:
- **Mật độ:** nhỏ gọn / thoáng mát / cực dày đặc (chọn hai cực tương phản)
- **Nhấn mạnh:** nội dung đầu tiên / hành động đầu tiên / công cụ đầu tiên
- **Thẩm mỹ:** biên tập / thực dụng / vui tươi
- **Bố cục:** cột đơn / thanh bên / ngăn chia
- **Nối đất:** dựa trên thẻ / nội dung trần / kiểu tài liệu

Chọn một trục và tách nó ra. Hai biến thể chỉ khác nhau về màu nhấn sẽ gây lãng phí công sức — người dùng không thể phân biệt được chúng.

**Đặt tên biến thể:** mô tả tư thế chứ không phải con số.`&lt;!-- ascii-guard-ignore -->

`

sketches/
├── 001-calm-editorial/
│   ├── index.html
│   └── README.md
├── 001-utilitarian-dense/
│   ├── index.html
│   └── README.md
└── 001-playful-split/
    ├── index.html
    └── README.md

`

&lt;!-- ascii-guard-ignore-end -->

### 3. Biến chúng thành HTML thực sự

Mỗi biến thể là một **tệp HTML độc lập**:
- 

&lt;style>
` nội tuyến - không có bước xây dựng, không có CSS bên ngoài
- Phông chữ hệ thống hoặc một Phông chữ Google qua 

&lt;link>

- Tailwind qua CDN (

&lt;script src="https://cdn.tailwindcss.com"&lt;/script

) là được
- Nội dung giả mạo thực tế — câu thật, tên thật, không phải "Lorem ipsum"
- **Tương tác**: các liên kết có thể nhấp vào, di chuột thực, ít nhất một lần chuyển đổi trạng thái (mở/đóng, lọc, chuyển đổi). Một hình ảnh tĩnh bị đóng băng sẽ có mức tăng đột biến tệ hơn một hình ảnh động cẩu thả.Mở nó trong một trình duyệt. Nếu nó trông bị hỏng, hãy sửa nó trước khi hiển thị cho người dùng.

**Xác minh các biến thể một cách trực quan — sử dụng các công cụ trình duyệt của Hermes.** Đừng chỉ viết HTML và hy vọng nó hiển thị; tải từng biến thể và xem xét nó:

`
browser_navigate(url="file:///absolute/path/to/sketches/001-calm-editorial/index.html")
browser_vision(question="Does this layout look clean and readable? Any visible bugs (overlapping text, unstyled elements, broken images)?")

`
```browser_vision
` trả về mô tả AI về những gì thực sự có trên trang cùng với đường dẫn ảnh chụp màn hình — phát hiện các lỗi bố cục mà việc kiểm tra nguồn thuần túy bỏ sót (ví dụ: quá trình nhập phông chữ không thành công, vùng chứa linh hoạt bị sập). Sửa và điều hướng lại cho đến khi mỗi biến thể đều ổn.

**Đặt lại CSS mặc định + ngăn xếp phông chữ hệ thống** để bắt đầu nhanh:

``` html
&lt;style

  * &#123; box-sizing: border-box; margin: 0; padding: 0; &#125;
  body &#123;
    font-family: -Apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1a1a1a;
    background: #fafafa;
    line-height: 1.5;
  &#125;
&lt;/style

`

### 4. Biến thể README

Câu trả lời 
`README.md
` của mỗi biến thể:

`markdown
## Variant: \&#123;stance name&#125;

### Design stance
One sentence on the principle driving this variant.

### Key choices
- Layout: ...
- Typography: ...
- Color: ...
- Interaction: ...

### Trade-offs
- Strong at: ...
- Weak at: ...

### Best for
- The kind of user or use case this variant actually serves

`

### 5. Đối đầu

Sau khi tất cả các biến thể được tạo, hãy trình bày chúng dưới dạng so sánh. Đừng chỉ liệt kê — **có quan điểm**:

`markdown
## Three takes on the home screen

| Dimension | Calm editorial | Utilitarian dense | Playful split |
|-----------|----------------|-------------------|---------------|
| Density   | Low            | High              | Medium        |
| Primary action visibility | Low | High | Medium |
| Scan-ability | High | Medium | Low |
| Feel | Calm, tRusted | Sharp, tool-like | Inviting, energetic |

**My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither.

`
``Cho phép người dùng chọn người chiến thắng hoặc kết hợp cả hai thành một vòng kết hợp hoặc yêu cầu một vòng khác.

## Theming (khi dự án có nhận diện trực quan)

Nếu người dùng có chủ đề hiện có (màu sắc, phông chữ, mã thông báo), hãy đặt các mã thông báo được chia sẻ vào 
`sketches/themes/tokens.css
` và 

@import
` trong mỗi biến thể. Giữ mã thông báo ở mức tối thiểu:

``` css
/* sketches/themes/tokens.css */
:root &#123;

  --color-bg: #fafafa;
  --color-fg: #1a1a1a;
  --color-accent: #0066ff;
  --color-muted: #666;
  --radius: 8px;
  --font-display: "Inter", sans-serif;
  --font-body: -Apple-system, BlinkMacSystemFont, sans-serif;
&#125;

`
``Đừng mã hóa quá mức một bản phác thảo dùng một lần - ba màu và một phông chữ thường là đủ.`##Thanh tương tác

Một bản phác thảo đủ tương tác khi người dùng có thể:
1. **Nhấp vào một hành động chính** và điều gì đó có thể nhìn thấy sẽ xảy ra (thay đổi trạng thái, phương thức, chúc mừng, điều hướng giả)
2. **Xem một chuyển đổi trạng thái có ý nghĩa** (lọc danh sách, chuyển đổi chế độ, mở/đóng bảng điều khiển)
3. **Khả năng di chuột có thể nhận dạng được** (nút, hàng, tab)

Hơn thế nữa là kỹ thuật quá mức một thứ vứt đi. Ít hơn đó là một ảnh chụp màn hình.

## Chế độ biên giới (chọn nội dung cần phác thảo tiếp theo)

Nếu bản phác thảo đã tồn tại và người dùng nói "tôi nên phác thảo gì tiếp theo?":
- **Khoảng cách nhất quán** — hai biến thể chiến thắng từ các bản phác thảo khác nhau đã đưa ra những lựa chọn độc lập chưa được kết hợp cùng nhau
- **Màn hình chưa phác thảo** — được tham chiếu nhưng chưa bao giờ được khám phá
- **Phạm vi bảo hiểm trạng thái** — đường dẫn hạnh phúc được phác thảo, nhưng không trống / đang tải / lỗi / 1000 mục
- **Khoảng trống đáp ứng** — được xác thực tại một khung nhìn; nó có giữ được trên thiết bị di động / ultrawide không?
- **Mẫu tương tác** — tồn tại bố cục tĩnh; chuyển tiếp, kéo, cuộn không

Đề xuất 2-4 ứng viên có tên. Hãy để người dùng chọn.

## Đầu ra
- Tạo 
`sketches/
` (hoặc 

.planning/sketches/
` nếu người dùng đang sử dụng quy ước GSD) trong repo root
- Một thư mục con cho mỗi biến thể: 
`NNN-stance-name/index.html

 + 
`README.md

- Hướng dẫn người dùng cách mở chúng: 
`open sketches/001-calm-editorial/index.html
` trên macOS, 
`xdg-open
` trên Linux, 
`start
` trên Windows
- Giữ các biến thể dùng một lần — một bản phác thảo mà bạn cảm thấy cần phải giữ lại nên được quảng bá thành mã dự án thực chứ không phải được quản lý như một nội dung`**Trình tự công cụ điển hình cho một biến thể:**

`
terminal("mkdir -p sketches/001-calm-editorial")
write_file("sketches/001-calm-editorial/index.html", "&lt;!doctype html>...")
write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...")
browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html")
browser_vision(question="How does this look? Any obvious layout issues?")

`
``Lặp lại cho mỗi biến thể, sau đó trình bày bảng so sánh.

## Ghi công

Được điều chỉnh từ quy trình làm việc 

/gsd-sketch
` của dự án GSD (Get Shit Done) — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://GitHub.com/gsd-build/get-shit-done)). Hệ thống GSD đầy đủ cung cấp trạng thái phác thảo liên tục, tham chiếu mẫu chủ đề/biến thể và quy trình công việc kiểm tra tính nhất quán; cài đặt với 
`npx get-shit-done-cc --Hermes --global

.
Siêu dữ liệu kỹ năng​

Siêu dữ liệu kỹ năng
