# เครื่องมือร่างแบบจำลองเอชทีเอ็มแอล

> สร้างแบบจำลองเอชทีเอ็มแอลแบบโต้ตอบ 2-3 แบบเพื่อเปรียบเทียบทิศทางการออกแบบยูไอ/ยูเอ็กซ์ก่อนที่จะตัดสินใจเลือกแนวทางเดียว สำรวจท่าทีทางภาพที่แตกต่างกันอย่างรวดเร็วและรวบรวมข้อเสนอแนะ

- Canonical: https://nanoskill.ai/th/skills/html-mockup-sketcher
- Markdown: https://nanoskill.ai/th/skills/html-mockup-sketcher.md
- Author: NousResearch
- Published: 2026-06-04T05:30:00.000Z
- Updated: 2026-07-21T18:34:02.819Z
- Language: th
- Source type: github
- Popularity signal: 2137

## Sources

- https://github.com/NousResearch/hermes-agent

## Install

```shell
npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch
```

## About

เครื่องมือร่างแบบจำลองเอชทีเอ็มแอลเป็นทักษะที่ทรงพลังที่ออกแบบมาเพื่อช่วยให้ผู้ใช้สำรวจและเปรียบเทียบทิศทางการออกแบบยูไอ/ยูเอ็กซ์ได้อย่างรวดเร็วผ่านแบบจำลองเอชทีเอ็มแอลที่ใช้แล้วทิ้ง แทนที่จะยึดติดกับการออกแบบเดียว เครื่องมือนี้จะสร้างแบบจำลองแบบโต้ตอบ 2-3 แบบ ทำให้สามารถเปรียบเทียบท่าทีทางภาพที่แตกต่างกันแบบเคียงข้างกัน เหมาะสำหรับการสำรวจการออกแบบในระยะเริ่มต้น ช่วยให้คุณเห็นภาพแนวคิดและรวบรวมข้อเสนอแนะก่อนการลงทุนด้านการพัฒนาที่สำคัญ

ทักษะนี้มุ่งเน้นการสร้างแบบจำลองเอชทีเอ็มแอลแบบโต้ตอบที่มีฟังก์ชันการทำงาน ซึ่งเหนือกว่าภาพนิ่ง แต่ละแบบจำลองเป็นไฟล์เอชทีเอ็มแอลที่มีทุกอย่างในตัว ประกอบด้วยซีเอสเอสแบบอินไลน์ ฟอนต์ระบบ และเนื้อหาที่สมจริง ที่สำคัญ แบบจำลองเหล่านี้มีปฏิสัมพันธ์พื้นฐาน เช่น ลิงก์ที่คลิกได้ สถานะเมื่อวางเมาส์ และอย่างน้อยหนึ่งการเปลี่ยนสถานะ ให้ความรู้สึกที่จับต้องได้มากขึ้นสำหรับประสบการณ์ผู้ใช้ เครื่องมือเบราว์เซอร์ที่ผสานรวมช่วยให้สามารถตรวจสอบด้วยสายตา ทำให้มั่นใจว่าแบบจำลองสะอาดและไม่มีข้อบกพร่อง

เพื่ออำนวยความสะดวกในการตัดสินใจอย่างมีข้อมูล เครื่องมือร่างแบบจำลองเอชทีเอ็มแอลมีการเปรียบเทียบที่มีโครงสร้าง แต่ละแบบจำลองมาพร้อมกับ \`README.md\` ที่มีรายละเอียดซึ่งสรุปหลักการออกแบบ ตัวเลือกสำคัญ การแลกเปลี่ยน และกรณีใช้งานที่เหมาะสมที่สุด หลังจากสร้างแล้ว ตารางเปรียบเทียบจะสรุปความแตกต่างในมิติการออกแบบต่างๆ พร้อมกับการวิเคราะห์ที่มีความคิดเห็นเพื่อช่วยให้คุณเลือกผู้ชนะ รวมองค์ประกอบ หรือทำซ้ำต่อไป

## Key features

- **สร้างรูปแบบการออกแบบหลายแบบ**: สร้าง HTML mockup ที่แตกต่างกัน 2-3 รูปแบบพร้อมกัน โดยแต่ละแบบสำรวจแนวทางการออกแบบที่แตกต่าง (เช่น ความหนาแน่น การเน้น สุนทรียภาพ เลย์เอาต์) เพื่อการเปรียบเทียบแบบเทียบเคียงกัน
- **HTML Mockup แบบโต้ตอบ**: สร้างไฟล์ HTML แบบรวมในตัวเองด้วย CSS แบบ inline ฟอนต์ระบบ และเนื้อหาจำลองที่สมจริง Mockup เหล่านี้โต้ตอบได้ โดยมีลิงก์ที่คลิกได้ การวางเมาส์ และการเปลี่ยนสถานะอย่างน้อยหนึ่งอย่าง
- **การตรวจสอบภาพด้วยเครื่องมือเบราว์เซอร์**: ใช้การนำทางเบราว์เซอร์แบบรวมและเครื่องมือวิทัศน์เพื่อตรวจสอบและยืนยัน HTML mockup แต่ละตัวด้วยสายตา เพื่อให้แน่ใจว่าเลย์เอาต์สะอาด อ่านง่าย และไม่มีข้อบกพร่องก่อนนำเสนอ
- **เอกสารประกอบรูปแบบที่มีโครงสร้าง**: HTML mockup แต่ละรูปแบบมีไฟล์ \`README.md\` ซึ่งให้รายละเอียดเกี่ยวกับแนวทางการออกแบบ ตัวเลือกสำคัญ (เลย์เอาต์ ตัวอักษร สี การโต้ตอบ) ข้อดีข้อเสีย และกรณีการใช้งานที่เหมาะสม เพื่อช่วยให้การเปรียบเทียบเป็นไปอย่างมีข้อมูล
- **ตารางวิเคราะห์เปรียบเทียบ**: นำเสนอ HTML mockup ทั้งหมดที่สร้างขึ้นในตารางเปรียบเทียบ โดยเน้นความแตกต่างในมิติสำคัญ เช่น ความหนาแน่น การมองเห็นการกระทำหลัก ความสามารถในการสแกน และความรู้สึกโดยรวม พร้อมกับบทสรุปความคิดเห็น

## Use cases

- **สำรวจทิศทางการออกแบบ UI/UX**: สร้างและเปรียบเทียบ HTML mockup หลายรูปแบบอย่างรวดเร็ว เพื่อสำรวจแนวคิดการออกแบบส่วนต่อประสานผู้ใช้และประสบการณ์ผู้ใช้ที่แตกต่าง ก่อนที่จะใช้เวลาในการพัฒนาอย่างมาก
- **รวบรวมข้อเสนอแนะเกี่ยวกับแนวคิดด้านภาพ**: นำเสนอ HTML mockup แบบโต้ตอบแก่ผู้มีส่วนได้ส่วนเสียหรือผู้ใช้ เพื่อรวบรวมข้อเสนอแนะตั้งแต่เนิ่นๆ เกี่ยวกับทิศทางด้านภาพต่างๆ ช่วยปรับปรุงแนวคิดและตัดสินใจออกแบบอย่างมีข้อมูล
- **การสร้างต้นแบบอย่างรวดเร็วสำหรับคุณลักษณะใหม่**: สร้าง HTML mockup แบบใช้แล้วทิ้งเพื่อสร้างต้นแบบคุณลักษณะหรือหน้าจอใหม่อย่างรวดเร็ว โดยมุ่งเน้นที่ฟังก์ชันการทำงานหลักและขั้นตอนการมองเห็น มากกว่าที่จะเป็นโค้ดที่พร้อมใช้งานจริง

## Result preview

ดูเอชทีเอ็มแอลจริงเกี่ยวกับเว็บไซต์โรงแรมบูติกที่สร้างโดยทักษะเอเจนต์นี้

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg)

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg)

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg)

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg)

## Result walkthrough

### ขั้นตอนที่ 1：ติดตั้ง

เพิ่มทักษะให้กับเอเจนต์ของคุณ

![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg)

### ขั้นตอนที่ 2：อธิบายเว็บไซต์ของคุณ

อธิบายข้อมูลโดยละเอียด (เช่น สไตล์ ประเภท) ของเว็บไซต์ที่คุณต้องการสร้าง

![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg)

### ขั้นตอนที่ 3：ตรวจสอบผลลัพธ์

ตรวจสอบและเปรียบเทียบแบบจำลองเอชทีเอ็มแอลที่สร้างขึ้น

![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg)

## Skill definition

# สเก็ตช์

ใช้สกิลนี้เมื่อผู้ใช้ต้องการ **เห็นแนวทางการออกแบบก่อนตัดสินใจ**เลือก — สำรวจไอเดีย UI/UX ในรูปแบบ HTML mockup แบบใช้แล้วทิ้ง จุดประสงค์คือการสร้างตัวแปรแบบโต้ตอบ 2-3 แบบเพื่อให้ผู้ใช้เปรียบเทียบแนวทางภาพเคียงข้างกัน ไม่ใช่เพื่อสร้างโค้ดที่พร้อมส่งมอบ

โหลดสกิลนี้เมื่อผู้ใช้พูดประมาณว่า "สเก็ตช์หน้าจอนี้", "แสดงให้ฉันดูว่า X อาจมีลักษณะอย่างไร", "เปรียบเทียบเลย์เอาต์ A กับ B", "ขอ 2-3 แนวทางสำหรับ UI นี้", "ให้ฉันดูตัวแปรบางตัว", "ทำ mockup ก่อนที่ฉันจะสร้าง"

## เมื่อไม่ควรใช้สกิลนี้

- ผู้ใช้ต้องการคอมโพเนนต์แบบพร้อมผลิต — ใช้ `claude-design` หรือสร้างอย่างถูกต้อง
- ผู้ใช้ต้องการอาร์ติแฟกต์ HTML แบบ polished ครั้งเดียว (landing page, deck) — `claude-design`
- ผู้ใช้ต้องการไดอะแกรม — `excalidraw`, `architecture-diagram`
- การออกแบบล็อกแล้ว — แค่สร้างมัน

## หากผู้ใช้มีระบบ GSD เต็มรูปแบบติดตั้งอยู่

หาก `gsd-sketch` ปรากฏเป็นสกิลพี่น้อง (ติดตั้งผ่าน `npx get-shit-done-cc --hermes`) ให้เลือกใช้ **`gsd-sketch`** สำหรับเวิร์กโฟลว์เต็มรูปแบบ: `.planning/sketches/` ถาวรพร้อม MANIFEST, การวิเคราะห์โหมด frontier, การตรวจสอบความสอดคล้องกับสเก็ตช์ก่อนหน้า และการผสานกับ GSD ส่วนที่เหลือ สกิลนี้เป็นเวอร์ชันสแตนด์อโลนแบบเบา — การสเก็ตช์ครั้งเดียวโดยไม่มีเครื่องจักรสถานะ

## วิธีการหลัก

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

### 1. การรับข้อมูล (ข้ามได้หากผู้ใช้ให้ข้อมูลเพียงพอแล้ว)

ก่อนสร้างตัวแปร ให้ถามสามสิ่ง — ทีละคำถาม ไม่ใช่ทั้งหมดในครั้งเดียว:

1. **ความรู้สึก** "มันควรให้ความรู้สึกอย่างไร? คำคุณศัพท์, อารมณ์, ไวบ์" — *"สงบ, บรรณาธิการ, เหมือน Linear"* บอกได้มากกว่า *"มินิมอล"*.
2. **การอ้างอิง** "แอป, ไซต์, หรือผลิตภัณฑ์อะไรที่จับความรู้สึกที่คุณจินตนาการไว้?" — การอ้างอิงจริงดีกว่าคำบรรยายนามธรรม
3. **การกระทำหลัก** "สิ่งที่สำคัญที่สุดอย่างเดียวที่ผู้ใช้ทำบนหน้าจอนี้คืออะไร?" — ตัวแปรทั้งหมดควรตอบสนองสิ่งนี้ได้ดี หากไม่เช่นนั้น มันก็เป็นแค่การตกแต่ง

สะท้อนแต่ละคำตอบสั้นๆ ก่อนคำถามต่อไป หากผู้ใช้ให้ทั้งสามอย่างมาล่วงหน้าแล้ว ข้ามไปยังตัวแปรได้เลย

### 2. ตัวแปร (2-3, ไม่เคย 1, นานๆ ครั้ง 4+)

สร้าง **2-3 ตัวแปร** ในครั้งเดียว แต่ละตัวแปรเป็นไฟล์ HTML ที่สมบูรณ์และสแตนด์อโลน อย่าบรรยายตัวแปร — สร้างมันเลย จุดประสงค์คือการเปรียบเทียบ

แต่ละตัวแปรควรมี **จุดยืนในการออกแบบที่แตกต่าง** ไม่ใช่แค่ค่าพิกเซลที่ต่าง สามแกนที่ดีสำหรับตัวแปรคือ:

- **ความหนาแน่น:** กะทัดรัด / โปร่ง / หนาแน่นมาก (เลือกสองขั้วที่ตรงข้าม)
- **การเน้น:** เนื้อหาก่อน / การกระทำก่อน / เครื่องมือก่อน
- **สุนทรียศาสตร์:** แนวบรรณาธิการ / ประโยชน์ใช้สอย / ขี้เล่น
- **เลย์เอาต์:** คอลัมน์เดียว / ไซด์บาร์ / แผงแยก
- **การลงกราวด์:** แบบการ์ด / เนื้อหาเปล่า / แบบเอกสาร

เลือกหนึ่งแกนแล้วดึงความแตกต่างออกมา ตัวแปรสองตัวที่ต่างกันแค่สีเสริมนั้นเปล่าประโยชน์ — ผู้ใช้แยกไม่ออก

**การตั้งชื่อตัวแปร:** อธิบายจุดยืน ไม่ใช่หมายเลข

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

### 3. ทำให้เป็น HTML จริง

แต่ละตัวแปรเป็น **ไฟล์ HTML แบบ self-contained เดียว**:

- `<style>` แบบอินไลน์ — ไม่มีขั้นตอน build, ไม่มี CSS ภายนอก
- ฟอนต์ระบบ หรือ Google Font หนึ่งตัวผ่าน `<link>`
- Tailwind ผ่าน CDN (`<script src="https://cdn.tailwindcss.com"></script>`) ก็ใช้ได้
- เนื้อหาปลอมที่สมจริง — ประโยคจริง ชื่อจริง ไม่ใช่ "Lorem ipsum"
- **แบบโต้ตอบได้**: ลิงก์คลิกได้, hover จริง, มีการเปลี่ยนสถานะอย่างน้อยหนึ่งอย่าง (เปิด/ปิด, กรอง, สลับ) ภาพนิ่งแช่แข็งเป็น spike ที่แย่กว่าภาพเคลื่อนไหวที่เลอะเทอะ

เปิดในเบราว์เซอร์ หากดูเสีย ให้แก้ไขก่อนนำเสนอผู้ใช้

**ตรวจสอบตัวแปรด้วยสายตา — ใช้เครื่องมือเบราว์เซอร์ของ Hermes** อย่าแค่เขียน HTML และหวังว่ามันจะเรนเดอร์; โหลดแต่ละตัวแปรและดูมัน:

```
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` ส่งคืนคำอธิบาย AI เกี่ยวกับสิ่งที่อยู่บนหน้าจริง พร้อมเส้นทางสกรีนช็อต — จับข้อบกพร่องด้านเลย์เอาต์ที่การตรวจสอบซอร์สล้วนๆ อาจพลาด (เช่น การนำเข้าฟอนต์ที่ล้มเหลวอย่างเงียบๆ, คอนเทนเนอร์ flex ที่ยุบ) แก้ไขและนำทางใหม่จนกว่าแต่ละตัวแปรจะดูดี

**Default CSS reset + system font stack** สำหรับการเริ่มต้นอย่างรวดเร็ว:

```html
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    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;
  }
</style>
```

### 4. README ของตัวแปร

`README.md` ของแต่ละตัวแปรตอบคำถาม:

```markdown
## Variant: {stance name}

### 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. การเทียบเคียงกัน

หลังจากสร้างตัวแปรทั้งหมดแล้ว ให้นำเสนอในรูปแบบการเปรียบเทียบ อย่าแค่ลิสต์ — **แสดงความเห็น**:

```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.
```

ให้ผู้ใช้เลือกตัวชนะ หรือรวมสองตัวเป็นไฮบริด หรือขออีกหนึ่งรอบ

## การกำหนดธีม (เมื่อโปรเจกต์มีเอกลักษณ์ทางภาพ)

หากผู้ใช้มีธีมอยู่แล้ว (สี, ฟอนต์, tokens) ให้นำ tokens ที่ใช้ร่วมกันใส่ใน `sketches/themes/tokens.css` และทำการ `@import` ในแต่ละตัวแปร ทำให้ tokens น้อยที่สุด:

```css
/* sketches/themes/tokens.css */
:root {
  --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;
}
```

อย่าทำ tokens มากเกินไปกับสเก็ตช์แบบใช้แล้วทิ้ง — สามสีและหนึ่งฟอนต์โดยปกติก็เพียงพอ

## แถบความโต้ตอบ

สเก็ตช์มีความโต้ตอบเพียงพอเมื่อผู้ใช้สามารถ:

1. **คลิกการกระทำหลัก** แล้วมีบางอย่างที่มองเห็นได้เกิดขึ้น (การเปลี่ยนสถานะ, modal, toast, การนำทาง feint)
2. **เห็นการเปลี่ยนสถานะที่มีความหมายอย่างหนึ่ง** (กรองรายการ, สลับโหมด, เปิด/ปิดแผง)
3. **hover ส่วนที่สังเกตได้ชัด** (ปุ่ม, แถว, แท็บ)

มากกว่านั้นคือ over-engineering สำหรับของใช้แล้วทิ้ง น้อยกว่านั้นคือภาพหน้าจอ

## โหมด Frontier (เลือกว่าจะสเก็ตช์อะไรต่อไป)

หากมีสเก็ตช์อยู่แล้วและผู้ใช้ถามว่า "ฉันควรสเก็ตช์อะไรต่อไป?":

- **ช่องว่างความสอดคล้อง** — ตัวแปรที่ชนะสองตัวจากสเก็ตช์ต่างกันทำการเลือกอิสระที่ยังไม่ได้ประกอบเข้าด้วยกัน
- **หน้าจอที่ยังไม่ได้สเก็ตช์** — อ้างถึงแต่ยังไม่เคยสำรวจ
- **ความครอบคลุมสถานะ** — สเก็ตช์สถานะปกติ (happy path) แต่ยังไม่รวมสถานะว่าง / กำลังโหลด / ข้อผิดพลาด / 1000 รายการ
- **ช่องว่าง Responsive** — ตรวจสอบที่ viewport หนึ่ง; มันยังดีอยู่ไหมที่มือถือ / จอกว้างพิเศษ?
- **รูปแบบปฏิสัมพันธ์** — มีเลย์เอาต์แบบคงที่; แต่ไม่มีการเปลี่ยนผ่าน, ลาก, หรือพฤติกรรมการเลื่อน

เสนอผู้สมัครที่มีชื่อ 2-4 รายการ ให้ผู้ใช้เลือก

## ผลลัพธ์

- สร้าง `sketches/` (หรือ `.planning/sketches/` หากผู้ใช้ใช้แบบแผนของ GSD) ใน root ของ repo
- หนึ่ง subdir ต่อหนึ่งตัวแปร: `NNN-stance-name/index.html` + `README.md`
- บอกผู้ใช้ถึงวิธีเปิด: `open sketches/001-calm-editorial/index.html` บน macOS, `xdg-open` บน Linux, `start` บน Windows
- ทำให้ตัวแปรเป็นแบบใช้แล้วทิ้ง — สเก็ตช์ที่คุณรู้สึกว่าจำเป็นต้องเก็บรักษาควรถูกเลื่อนขั้นเป็นโค้ดโปรเจกต์จริง ไม่ใช่เก็บเป็นทรัพย์สิน

**ลำดับเครื่องมือทั่วไปสำหรับหนึ่งตัวแปร:**

```
terminal("mkdir -p sketches/001-calm-editorial")
write_file("sketches/001-calm-editorial/index.html", "<!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?")
```

ทำซ้ำสำหรับแต่ละตัวแปร จากนั้นนำเสนอตารางเปรียบเทียบ

## การให้เครดิต

ดัดแปลงจากเวิร์กโฟลว์ `/gsd-sketch` ของโปรเจกต์ GSD (Get Shit Done) — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). ระบบ GSD เต็มรูปแบบมีสถานะสเก็ตช์ถาวร, การอ้างอิงรูปแบบธีม/ตัวแปร, และเวิร์กโฟลว์การตรวจสอบความสอดคล้อง; ติดตั้งด้วย `npx get-shit-done-cc --hermes --global`.

## FAQ

### HTML mockup คืออะไร?

HTML mockup คือหน้าเว็บแบบใช้แล้วทิ้งที่มีความโต้ตอบได้ ซึ่งสร้างด้วย HTML และการจัดรูปแบบพื้นฐาน (มักใช้ CSS แบบ inline) เพื่อให้เห็นภาพและเปรียบเทียบแนวคิดการออกแบบ UI/UX ต่างๆ ได้อย่างรวดเร็ว มันไม่ได้มีไว้สำหรับการใช้งานจริง แต่สำหรับการสำรวจการออกแบบในช่วงต้น

### สกิลนี้สร้าง HTML mockup กี่รูปแบบ?

โดยทั่วไปแล้วสกิลนี้จะสร้าง HTML mockup แบบโต้ตอบได้ 2-3 รูปแบบต่อครั้ง โดยมีเป้าหมายเพื่อนำเสนอแนวทางการออกแบบที่แตกต่างกันสำหรับการเปรียบเทียบ ไม่ใช่รายการรูปแบบย่อยที่ครบถ้วน

### ฉันสามารถใช้สกิลนี้เพื่อสร้างโค้ดที่พร้อมใช้งานจริงได้หรือไม่?

ไม่ สกิลนี้ออกแบบมาโดยเฉพาะสำหรับ HTML mockup แบบ 'ใช้แล้วทิ้ง' เพื่อสำรวจทิศทางการออกแบบ สำหรับคอมโพเนนต์ที่พร้อมใช้งานจริงหรือชิ้นงานที่ประณีต คุณควรใช้เครื่องมือหรือสกิลอื่นๆ เช่น \`claude-design\`

### HTML mockup มีความโต้ตอบแบบไหนบ้าง?

HTML mockup ที่สร้างขึ้นมีความโต้ตอบได้ หมายความว่าลิงก์สามารถคลิกได้ การวางเมาส์เหนือก็มีผลจริง และมีการเปลี่ยนสถานะอย่างน้อยหนึ่งอย่าง (เช่น เปิด/ปิดพาเนล กรองรายการ) ซึ่งทำให้รู้สึกสมจริงมากกว่าภาพนิ่ง

### สกิลนี้ช่วยฉันเปรียบเทียบการออกแบบต่างๆ ได้อย่างไร?

หลังจากสร้าง HTML mockup แล้ว สกิลจะแสดงตารางเปรียบเทียบที่เน้นความแตกต่างที่สำคัญในมิติการออกแบบต่างๆ (เช่น ความหนาแน่น เลย์เอาต์ สุนทรียภาพ) และยังมีบทสรุปความคิดเห็นเพื่อช่วยในการตัดสินใจ

### ฉันต้องให้ข้อมูลอะไรบ้างเพื่อสร้าง HTML mockup?

ในการสร้าง HTML mockup ที่มีประสิทธิภาพ คุณจะถูกถามเกี่ยวกับ 'ความรู้สึก' ที่ต้องการ (คำคุณศัพท์ บรรยากาศ) แอป/เว็บไซต์อ้างอิงที่ให้ความรู้สึกนั้น และ 'การกระทำหลัก' ที่สำคัญที่สุดเพียงอย่างเดียวที่ผู้ใช้ทำบนหน้าจอ