# Workflow từ spec tới deploy với Superpowers và Claude Code

[Tùng Nguyễn](https://homus.dev/speakers/tung-nguyen) · [Holetex](https://homus.dev/orgs/holetex)

> Workflow năm bước build một URL shortener Next.js: spec với plugin Superpowers, UI với Claude Design, code bằng Claude Code, test Playwright, deploy.

Topics: Plugins, Workflow, Coding Agents, Skills

Canonical: https://homus.dev/talks/plugin-nay-giup-minh-toi-uu-suc-manh-claude-code

## 1. Prompt từng yêu cầu một không còn đủ nữa

Tùng mở đầu bằng một nhận định thẳng: nếu bạn đang coding với AI theo kiểu gõ prompt cho từng yêu cầu một, nghĩ tới đâu nhờ tới đó, và không có một plan cụ thể nào, thì rất có thể cách làm đó đã không còn phù hợp trong thời đại AI phát triển nhanh như hiện nay. Cách làm "hỏi một câu, nhận một đoạn code" có thể chạy được ở lần đầu, nhưng nó không cho bạn một nền tảng để đi tiếp.

Vì vậy trong video này, anh chia sẻ một workflow mà anh đang áp dụng trong các dự án thực tế của chính mình. Workflow đó đi trọn một vòng: bắt đầu từ phần phân tích yêu cầu, sang phần thiết kế, rồi tới coding, sau đó là testing và automation, và phần cuối cùng là deploy. Anh tin rằng khi áp dụng workflow này vào dự án của mình, chất lượng app của bạn sẽ tăng lên rất nhiều, và bạn cũng có thể dễ dàng mở rộng thêm các tính năng về sau mà không phải đập đi làm lại.

Sau phần giới thiệu đó, Tùng chào người xem quay lại kênh Holetex. Anh tự giới thiệu là Tùng, và với những bạn lần đầu xem kênh, anh làm các video chia sẻ về lập trình và công nghệ. Theo mô tả của video, toàn bộ phần demo sẽ xoay quanh một app cụ thể: một URL shortener (app rút gọn đường link) có analytics đếm lượt click, build bằng Next.js, đi từ ý tưởng tới lúc chạy trên một domain thật. Điểm anh muốn nhấn mạnh là không vibe code may rủi, mà plan kỹ trước, làm theo đúng quy trình phát triển phần mềm chuyên nghiệp, chỉ là tăng tốc từng bước bằng các công cụ AI.

## 2. Năm bước của quy trình phát triển phần mềm truyền thống

Trước khi nói về công cụ, Tùng đề nghị cùng nhìn lại quy trình phát triển phần mềm đã tồn tại hàng chục năm nay gồm những thành phần nào. Trên slide của anh, cột "Truyền thống" lần lượt hiện ra năm bước:

- **Planning** (phân tích yêu cầu, viết spec). Đây luôn luôn là bước đầu tiên: hiểu mình cần làm gì và viết nó ra thành các spec.

- **Design** (UI/UX, kiến trúc hệ thống). Bước thứ hai là thiết kế giao diện người dùng, trải nghiệm người dùng, và cả kiến trúc của hệ thống phía sau.

- **Development** (viết code). Chỉ tới bước thứ ba mới bắt tay vào viết code.

- **Testing** (QA, kiểm thử). Bước thứ tư là để đội QA kiểm tra xem ứng dụng đã đạt được các yêu cầu như mình đề ra ban đầu hay chưa.

- **Deployment** (lên production). Bước thứ năm là deploy ứng dụng lên server, lên hosting, để người dùng có thể truy cập vào ứng dụng của mình.

Năm bước của quy trình phát triển phần mềm truyền thống mà Tùng trình bày. Điểm anh muốn người xem để ý: viết code chỉ là bước thứ ba.

Nhìn vào chuỗi này, anh chỉ ra một điều mà nhiều người hay quên: bước viết code là bước số ba, chứ không phải bước số một hay số hai. Trước nó còn có hai bước nữa.

## 3. Bỏ qua planning và design thì app khó mở rộng

Theo Tùng, đây chính là chỗ mà khi vibe coding chúng ta thường bỏ qua: bước planning và bước design. Người ta mở AI lên và đi thẳng vào phần code.

Việc thiếu hai bước này dẫn tới một tình huống quen thuộc. Lần đầu tiên vibe coding, app chạy đúng như mình mong muốn. Nhưng khi bắt đầu phát triển thêm các tính năng khác và mở rộng app ra, bạn sẽ gặp rất nhiều vấn đề. Lý do là AI không thể hiểu được context giữa lần làm việc trước và lần làm việc sau, và nó không có một plan hay một kiến trúc cụ thể nào để tham khảo cho những lần làm việc tiếp theo. Mỗi phiên làm việc mới, AI lại phải đoán lại app của bạn đang được xây theo hướng nào.

Từ đó, phần tiếp theo của video đặt câu hỏi: trong thời đại AI này, chúng ta có những công cụ gì để việc lập trình hiệu quả hơn, mà vẫn giữ được hai bước bị bỏ quên kia?

## 4. Quy trình không đổi, chỉ thêm AI vào từng bước

Tùng trình bày workflow mà anh thường áp dụng cho các dự án cá nhân, và nó tương ứng một một với từng bước của quy trình truyền thống. Anh nhấn mạnh: các bước của quy trình phát triển phần mềm ở đây hoàn toàn không thay đổi. Cái thay đổi là chúng ta áp dụng AI vào từng bước đó.

![Slide Quy trình truyền thống sang công cụ AI: Planning sang Superpowers, Design sang Claude Design, Development sang Claude Code, Testing sang Playwright MCP](https://homus.dev/photos/h7WCw38nLto-0618.jpg)

Slide "Quy trình truyền thống → công cụ AI": bên trái là năm bước truyền thống, bên phải là công cụ AI hỗ trợ cho từng bước, gồm Superpowers (spec-driven), Claude Design (ai-design), Claude Code (agent) và Playwright MCP. Bước Deployment được nói riêng ở cuối video.

Cụ thể, bảng ánh xạ trên slide như sau:

- **Planning → Superpowers**, gắn nhãn spec-driven.

- **Design → Claude Design**, gắn nhãn ai-design.

- **Development → Claude Code**, gắn nhãn agent.

- **Testing → Playwright MCP**.

- **Deployment**: đưa lên một hosting, trong video là Hostinger.

Với bước đầu tiên, planning, anh áp dụng một khái niệm gọi là Spec Driven Development.

## 5. Spec Driven Development: bản thiết kế trước khi xây nhà

Spec Driven Development nghĩa là viết spec, viết các yêu cầu trước khi code. Theo Tùng, spec ở đây đơn giản là một cuốn tài liệu nói cho chúng ta, và nói cho AI agent, biết app này làm gì, data model ra sao, gồm những tính năng nào, và các tình huống sẽ được xử lý như thế nào.

Khi đã có spec cụ thể như vậy, và khi phát triển từng tính năng mà mỗi tính năng có một spec riêng, AI sẽ không phải đoán mò về ứng dụng của bạn nữa. Thay vào đó, nó bám sát vào spec mà bạn đã đưa cho AI agent để viết code một cách hiệu quả.

Anh so sánh với chuyện xây nhà. Thay vì nói với các bác thợ xây "hãy xây cho tôi một ngôi nhà", thường thì bạn sẽ có các file thiết kế. Bạn thuê kiến trúc sư, họ thiết kế chi tiết ngôi nhà sẽ có cấu tạo như thế nào, dùng vật liệu gì, và nhiều thứ khác. Thợ xây làm theo bản thiết kế đó.

Ví dụ xây nhà của Tùng: spec đóng vai bản vẽ của kiến trúc sư, còn AI agent là người thợ làm theo bản vẽ đó.

Spec Driven Development không phải một khái niệm mới. Các team phần mềm chuyên nghiệp đã áp dụng cách làm này từ lâu. Điểm hay khi kết hợp nó với AI, và cũng là điểm giúp năng suất tăng lên gấp nhiều lần, là AI thực thi các spec này cực kỳ nhanh và cực kỳ chính xác. Spec càng chất lượng thì kết quả AI làm ra dựa trên spec đó càng chất lượng.

Để làm Spec Driven Development cho tiện, Tùng dùng một plugin tên là **Superpowers**. Nói ngắn gọn, nó đóng gói toàn bộ quy trình này vào trong một plugin để các AI agent, chẳng hạn Claude Code, có thể sử dụng.

## 6. Superpowers: ba skill chính và hai cách kích hoạt

Superpowers được hàng trăm nghìn người trên khắp thế giới sử dụng. Bằng chứng mà Tùng đưa ra là trang GitHub của nó: anh nói repo có gần 200.000 star chỉ riêng cho plugin này, còn trên màn hình lúc đó con số hiện là 221k star và 19.7k fork. Với anh, như vậy là quá đủ tốt để bắt đầu ngay.

![Trang GitHub của repo obra/superpowers với 221k star, mô tả An agentic skills framework and software development methodology that works](https://homus.dev/photos/h7WCw38nLto-0405.jpg)

Repo superpowers trên GitHub: phần About ghi "An agentic skills framework & software development methodology that works", có sẵn các thư mục `.claude-plugin`, `.codex-plugin`, `.cursor-plugin` và 221k star.

Superpowers mang đến một loạt skill. Tùng giới thiệu ba skill chính, xếp theo thứ tự chúng được dùng:

- **brainstorming**: cùng bạn làm rõ yêu cầu. Từ một prompt cơ bản ban đầu, nó hỏi đáp lại để làm rõ các yêu cầu.

- **writing-plans**: từ các yêu cầu đã làm rõ đó, nó chia ra thành các task nhỏ, có thứ tự, để hướng dẫn AI coding.

- **subagent-driven-development**: đúng như tên gọi, nó tự gọi các subagent để làm việc theo plan đã chia ra ở bước trước.

Để kích hoạt plugin Superpowers, có hai cách:

- **Để AI tự gọi.** Bạn chỉ cần mô tả với AI agent như Claude Code rằng bạn muốn build một app như thế này. Ví dụ, lát nữa trong demo sẽ build một app rút gọn đường link URL; bạn chỉ cần mô tả rằng mình muốn build một app như vậy. Khi AI agent đã cài plugin Superpowers, nó sẽ tự biết để gọi ra các skill tương ứng, chẳng hạn brainstorming, để làm rõ yêu cầu.

- **Gọi thẳng bằng slash command.** Ví dụ gõ lệnh brainstorming bắt đầu bằng dấu gạch chéo, kèm mô tả việc bạn muốn làm.

Ba skill chính của Superpowers mà Tùng dùng, theo đúng thứ tự trong workflow: làm rõ yêu cầu, viết plan, rồi giao cho subagent thực thi.

Tóm lại, bước đầu tiên của workflow là dùng khái niệm Spec Driven Development để làm phần planning.

## 7. Bốn bước còn lại: Claude Design, Claude Code, Playwright và deploy

Bước thứ hai dựa trên những spec đã có ở bước trước. Ở đây Tùng dùng công cụ **Claude Design**. Sau bước đầu tiên, bạn có thể nhờ chính AI tạo cho mình một prompt để chuyển sang Claude Design, rồi nhờ Claude Design thiết kế app này.

Bước thứ ba là bước chính: dùng các AI agent, trong trường hợp của anh là **Claude Code**, để triển khai các task đã có được từ những bước trước.

Bước thứ tư là kiểm thử, để xem app mà AI code ra đã đảm bảo chất lượng hay chưa, đã đúng với các spec mà mình phân tích hay chưa. Ở đây anh giới thiệu công cụ **Playwright**. Theo anh, đây là một công cụ rất mạnh trong thời đại AI hiện nay, và có thể cài dễ dàng thông qua hệ thống plugin của Claude Code.

Phần cuối cùng: sau khi đã kiểm thử và app đã pass hết tất cả các test case, chúng ta deploy nó lên một hosting nào đó. Tùng dùng Hostinger. Anh kể đây là hosting mà anh đã chuyển hết các nền tảng của mình lên, và anh thấy nó chạy rất ổn định, chi phí cũng dễ tiếp cận.

Toàn bộ workflow của Tùng: mỗi bước truyền thống có một công cụ AI, và đầu ra của bước trước (spec, plan, prompt, file design) trở thành đầu vào của bước sau.

## 8. Cài plugin trong Claude Code

Vào demo, Tùng mở Claude Code trên một thư mục mới. Việc cài đặt rất dễ: bạn gõ dấu gạch chéo rồi gõ "plugin". Màn hình quản lý plugin hiện ra với các tab Plugins, Discover, Installed, Marketplaces và Errors.

```
/plugins
```

![Tab Discover của lệnh /plugins trong Claude Code, liệt kê github, claude-md-management, feature-dev, ralph-loop, claude-code-setup kèm số lượt cài](https://homus.dev/photos/h7WCw38nLto-0703.jpg)

Tab Discover hiện 213 plugin, mỗi plugin kèm số lượt cài: github (270K), claude-md-management (233.2K), feature-dev (223.4K), ralph-loop (178K), claude-code-setup (155K). Thanh dưới cùng hướng dẫn: gõ để tìm, Space để chọn, Enter để xem.

Ở đây bạn chọn được plugin nào mình muốn cài, và mỗi plugin đều có con số lượt cài đặt, nên có thể tham khảo xem plugin nào đang được cộng đồng dùng nhiều. Để cài, bạn nhấn phím Space để chọn; dấu chấm tròn bên cạnh plugin được đánh dấu là đã chọn. Chọn xong thì nhấn phím y để xác nhận, và Claude Code sẽ cài plugin đó.

Trong trường hợp của Tùng, anh đã cài Superpowers từ trước. Trong tab Installed của anh đã có Superpowers, cũng như một plugin nữa là Playwright. Trên màn hình, danh sách đã cài còn có context7 (MCP), frontend-design, security-guidance, skill-creator và typescript-lsp, phần lớn đến từ marketplace claude-plugins-official, và Playwright đi kèm một Playwright MCP đang ở trạng thái connected.

Theo anh, chỉ cần hai plugin, Superpowers và Playwright, là AI agent của bạn đã trở nên mạnh hơn rất nhiều. Cài xong, bạn chỉ cần quay lại phần prompt để bắt đầu làm việc.

Theo README của repo Superpowers, cách cài trong Claude Code từ marketplace chính thức là:

```
/plugin install superpowers@claude-plugins-official
```

## 9. Bước 1 trong demo: brainstorming với Superpowers

Tùng bắt đầu nói với AI agent rằng anh muốn build một URL shortener với Next.js. Anh giải thích: thông thường, chỉ cần gửi một prompt như vậy là AI agent cũng đủ thông minh để hiểu nó nên trigger skill nào, chẳng hạn skill brainstorming của Superpowers. Nhưng để demo được chính xác, anh viết cụ thể hơn, thêm một câu: trước khi code, hãy brainstorm với tôi rồi viết spec. Prompt anh gửi đi, như trên màn hình:

```
tôi muốn build 1 app URL shorten với NextJS. Trước khi code hãy brainstorm với tôi rồi viết specs
```

Ngay sau đó, terminal hiện dòng `Skill(superpowers:brainstorming)` kèm "Successfully loaded skill": skill brainstorming đã được gọi lên. Nó hỏi ngược lại anh từng câu một, bắt đầu từ câu quan trọng nhất: mục đích và phạm vi của app.

**Câu 1: App này build với mục đích chính là gì?** Claude ghi rõ điều này quyết định toàn bộ scope phía sau. Tùng trả lời đơn giản: đây là một dự án personal, có thể self-host. Claude đáp lại rằng vì là personal và self-host nên nó sẽ giữ scope gọn, và câu tiếp theo sẽ về user model và auth.

![Câu hỏi Auth và users của skill brainstorming với bốn lựa chọn](https://homus.dev/photos/h7WCw38nLto-0843.jpg)

Câu hỏi "Auth & users": app có cần đăng nhập không và có bao nhiêu người dùng. Các lựa chọn là Single-user có login, Multi-user có đăng ký, Không cần auth (dashboard mở, không login), hoặc tự gõ câu trả lời. Phía trên là câu trả lời trước đó: Personal / self-host.

**Câu 2: App có cần đăng nhập (auth) không, và có bao nhiêu người dùng?** Các lựa chọn gồm: single-user có một trang login đơn giản cho một tài khoản admin để bảo vệ dashboard; multi-user có đăng ký, mỗi người quản lý link riêng; hoặc không cần auth, dashboard mở, không login, đơn giản nhất nhưng ai biết URL dashboard cũng sửa hoặc xoá link được. Để đơn giản nhất có thể, Tùng chọn không cần auth: dashboard mở, không login.

**Câu 3: Anh muốn app có những feature nào?** Đây là câu chọn nhiều, và phần nào không chọn thì Claude sẽ cắt theo nguyên tắc YAGNI. Tùng chọn custom slug (alias tự đặt cho link) và click analytics. Claude ghi nhận: scope rất gọn, custom slug cộng click analytics, giờ tới phần deployment.

**Câu 4: Anh định chạy, deploy app này ở đâu?** Claude lưu ý câu này ảnh hưởng tới database và tới vấn đề dashboard không có auth. Các lựa chọn trên màn hình là: Localhost (chỉ chạy trên máy); Hostinger VPS (Docker) qua docker compose, có thể gắn subdomain, kèm lưu ý dashboard không auth sẽ public nên có thể cần che bằng nginx basic-auth; Vercel, dạng serverless, cần database managed vì serverless không giữ file SQLite; hoặc chưa quyết, build local trước. Tùng nhập rằng anh sẽ deploy lên Hostinger sau.

**Câu 5: Database.** Claude recommend SQLite với Prisma. Tùng chọn đúng phương án được recommend, tức đi theo gợi ý của AI.

Anh nhấn mạnh đây chính là điểm mạnh của việc dùng plugin này. Nếu không có những skill như brainstorming, rất có thể prompt của bạn sẽ phải viết cực kỳ chi tiết ngay từ đầu, liệt kê hết mục đích, auth, tính năng, nơi deploy, database. Với brainstorming, AI tự hỏi bạn từng điểm một.

## 10. File design, spec được commit vào repo

Sau vòng hỏi đáp, AI đã viết cho anh nguyên một file design: cả một hệ thống để làm app URL shortener, gồm tech stack, data model, các route, cấu trúc thư mục, phần testing và phần deployment.

![Phần Data model Prisma với model Link và model Click, và bảng Routes](https://homus.dev/photos/h7WCw38nLto-0943.jpg)

Một phần của bản design trong terminal: data model bằng Prisma với `model Link` (slug, url, clickCount, clicks) và `model Click` (linkId, referrer, userAgent), rồi bảng Routes, trong đó `/` là dashboard tạo và liệt kê link, `/links/[id]` là trang analytics của một link.

Đọc kỹ trên màn hình, bản design ghi rằng app dùng nanoid để sinh short code và zod để validate input; đọc dữ liệu qua Server Components, thay đổi dữ liệu qua Server Actions, redirect qua Route Handler, không cần dựng REST API riêng. Mỗi lượt click được ghi đồng bộ vào SQLite, và chỉ lưu referrer cùng userAgent thô, phần geo và thiết bị được cố tình bỏ. Bảng route có trang chủ là dashboard (form tạo link và danh sách link kèm số click) và trang analytics cho từng link (tổng click, biểu đồ click theo ngày, recent clicks, top referrers).

Với phần testing, Superpowers ưu tiên TDD, tức Test Driven Development. Trên màn hình, mục "Testing (TDD theo superpowers)" ghi unit test cho các file xử lý slug và validation bằng Vitest, cùng integration test cho route handler redirect, dùng một database SQLite riêng cho test. Mục deployment "làm sau, nhưng thiết kế sẵn" có Dockerfile multi-stage với Next.js output standalone, docker-compose, các biến môi trường như `DATABASE_URL`, và ghi chú rằng dashboard không auth nên khi lên VPS cần che bằng nginx basic-auth.

Cuối bản design, Claude hỏi anh xem qua giúp xem có chỗ nào muốn sửa không, ví dụ thêm nút copy-to-clipboard, dùng một thư viện chart thật, đổi độ dài slug, hay cắt bớt analytics cho gọn. Nếu thấy file design đã ổn, bạn chỉ cần nói ok, làm tiếp. Tùng gõ:

```
ok lam tiep
```

Lúc này, Claude bắt đầu viết các spec cụ thể ra file và commit luôn vào repo. Tùng giải thích tại sao điều này quan trọng: ở những lần làm việc sau, AI có thể xem lại các spec để biết những lần làm việc trước đã tạo ra những tính năng gì. Nhờ vậy chúng ta giữ được context giữa các lần làm việc với AI agent, đúng vấn đề anh nêu ở đầu video.

Spec viết xong nằm ngay trong repo làm việc của bạn. Nếu muốn, bạn mở file đó lên để review xem spec đã đúng với yêu cầu của mình chưa, có muốn chỉnh gì không, và có thể cập nhật lại.

## 11. Implementation plan với skill Writing Plans

Nếu spec đã ổn, Claude hỏi tiếp: có chuyển sang viết implementation plan chi tiết không. Tới đây nó tự hiểu để áp dụng skill Writing Plans như Tùng đã mô tả lúc đầu. Trên màn hình, Claude tự gọi skill superpowers:writing-plans và cho biết nó đang dùng skill đó để viết implementation plan, chia spec thành các task cụ thể.

![Claude commit implementation plan và liệt kê 10 task theo TDD](https://homus.dev/photos/h7WCw38nLto-1103.jpg)

Plan hoàn chỉnh và đã được commit vào `docs/superpowers/plans/`. Plan gồm 10 task theo TDD, mỗi task chia thành bước nhỏ 2 tới 5 phút (viết test fail, implement, test pass, commit), từ scaffold Next.js + Tailwind + Vitest tới Docker packaging cho deploy Hostinger.

Kết quả là một plan cụ thể, chi tiết, nằm trong một file. Trên màn hình, mười task là:

- Scaffold Next.js + Tailwind + Vitest

- Prisma schema + client + migration

- URL validation (zod), theo TDD

- Slug logic (nanoid + reserved), theo TDD

- Analytics aggregation, theo TDD

- Redirect route handler + click recording, TDD integration với test DB thật

- Server actions create/delete

- Dashboard UI (list, create form, copy, delete)

- Trang analytics chi tiết

- Docker packaging cho deploy Hostinger sau

Tùng mở file lên để xem bên trong có gì. Trong editor có hai thư mục dưới `docs/superpowers`: `specs` chứa file design spec mà AI tạo lúc nãy, và `plans` chứa implementation plan. Anh bấm Ctrl+Shift+V để xem bản preview Markdown cho dễ đọc. Từ file spec đó, AI đã tạo ra một plan chi tiết.

Trong bản preview của plan, phần đầu có một khối "For agentic workers" ghi rằng skill phụ bắt buộc là superpowers:subagent-driven-development (được recommend) hoặc superpowers:executing-plans để thực hiện plan theo từng task, các bước dùng cú pháp checkbox để theo dõi. Tiếp theo là Goal (build một URL shortener self-hosted với custom slug và click analytics, bằng Next.js), Architecture (Next.js 15 App Router, đọc qua Server Components, ghi qua Server Actions, redirect công khai `/[slug]` qua một Route Handler chạy Node ghi từng click đồng bộ vào SQLite, logic thuần nằm trong `lib/`), và Tech Stack (Next.js 15, TypeScript, Prisma + SQLite, Tailwind CSS v3, nanoid v5, zod v3, Vitest). Cuộn xuống là từng task với các bước như chạy `npx tsc --noEmit` và lệnh commit kèm message.

Tùng không đi quá chi tiết vào phần này, và khuyên người xem tự thực hành trên máy của mình để hiểu rõ hơn về công cụ.

Claude hỏi ngay bước tiếp theo: khi đã có planning rồi, có muốn gọi skill Subagent-Driven để dùng subagent thực thi các task vừa phân tích không. Trên màn hình có hai cách chạy: Subagent-Driven (được recommend), tức dispatch một subagent mới cho mỗi task, review giữa các task, vòng lặp nhanh và context gọn; hoặc Inline Execution, chạy thẳng trong session này theo từng batch, có checkpoint để review.

## 12. Bước 2: nhờ Claude Code viết prompt cho Claude Design

Nhưng trước khi làm bước đó, Tùng muốn nhờ chính AI tạo cho anh một prompt để thiết kế giao diện, vì tới lúc này app chưa hề có phần design. Anh gõ:

```
khoan, cho toi 1 promt để đưa sang claude design thiết kế UI
```

Lý do của bước này: Claude Code dựa vào chính các spec và các task nó đã phân tích để viết prompt, nên khi đưa sang Claude Design, bản design sẽ bám sát những yêu cầu và tính năng mà mình mong muốn, thay vì một giao diện chung chung.

![Prompt cho Claude Design: ràng buộc kỹ thuật, màn hình Dashboard và màn hình Analytics chi tiết](https://homus.dev/photos/h7WCw38nLto-1220.jpg)

Prompt mà Claude Code viết cho Claude Design: ràng buộc kỹ thuật bắt buộc (Next.js 15 App Router, Tailwind CSS v3, không dùng component lib và chart lib, biểu đồ vẽ bằng div), mô tả chi tiết màn hình Dashboard và màn hình Analytics, rồi phần data mẫu để dựng UI.

Prompt Claude đưa ra khá dài và chi tiết. Trên màn hình, nó có các phần:

- **Ràng buộc kỹ thuật**, ghi là bắt buộc tuân theo để map vào code có sẵn: Next.js 15 App Router + React + TypeScript; Tailwind CSS v3, không dùng component lib như shadcn hay MUI và không dùng chart lib như recharts, biểu đồ vẽ bằng div + Tailwind; chỉ dùng icon SVG inline; output là React component dùng class Tailwind, chất lượng production, responsive cho cả mobile và desktop.

- **Màn hình 1, Dashboard** (route `/`): tiêu đề "URL Shortener", form tạo link gồm ô URL gốc bắt buộc, ô custom slug không bắt buộc, nút "Rút gọn" đổi thành "Đang tạo..." khi đang xử lý, vùng báo lỗi inline màu đỏ; danh sách link mới nhất lên đầu, mỗi dòng có slug, URL gốc, số click, nút Copy (đổi thành "Đã copy" trong 1,5 giây) và nút Xoá; trạng thái rỗng "Chưa có link nào".

- **Màn hình 2, Analytics chi tiết** (route `/links/[id]`): link quay lại dashboard, header có slug và URL gốc, biểu đồ cột ngang "Click theo ngày", danh sách "Top referrers" (referrer rỗng hiển thị là "Direct"), bảng "Recent clicks" với cột Thời gian, Referrer, Browser, tối đa 20 dòng, và trạng thái rỗng cho từng phần.

- **Data mẫu** đúng shape để dựng UI, và **yêu cầu output**: layout hoàn chỉnh với mọi trạng thái (default, loading, error, empty, đã copy), không thêm feature ngoài scope (không auth, không QR, không expiration, không dark mode bắt buộc).

Claude còn dặn thêm: phần tech constraint được cố ý ghi chặt để bản design map thẳng vào file structure trong plan; nếu muốn design tự do hơn, chỉ cần bỏ hai dòng constraint đó. Tùng copy prompt này lại và chuyển sang Claude Design.

## 13. Claude Design dựng giao diện và đóng gói prompt cho Claude Code

Nếu bạn chưa rõ Claude Design là gì, Tùng gợi ý xem lại video về Claude Design anh đã làm trước đó trên kênh. Anh dán prompt vào Claude Design. Ở bước này, Claude hỏi lại anh một số câu về thiết kế. Để làm cho nhanh, anh chọn option "Design for me" (để Claude quyết cho mình). Anh giải thích anh không muốn đi quá chi tiết, vì mục tiêu của video chỉ là đi qua nguyên một workflow và cho thấy anh làm việc như thế nào để người xem tham khảo. Còn khi làm dự án thực tế, anh khuyên hãy chọn tỉ mỉ hơn.

![Claude Design hiển thị prototype trang analytics của link /abc123 với tổng click, biểu đồ click theo ngày và top referrers](https://homus.dev/photos/h7WCw38nLto-1343.jpg)

Kết quả trong Claude Design: file `URL Shortener.html`, trang analytics của link `/abc123` với tổng click (21), số ngày có click (5), referrer hàng đầu (twitter.com), biểu đồ click theo ngày và top referrers. Bên trái Claude liệt kê các quyết định thiết kế nó tự đưa ra vì được chọn "decide for me".

Claude Design tạo ra một bản design mà Tùng khen là rất đẹp mắt. Khi mở chi tiết, anh xem được thống kê của từng link: bao nhiêu người đã click. Anh nhận xét bản design rất chi tiết, và lý do là chúng ta đã có spec, đã có plan chi tiết như vậy rồi, và nhờ chính AI dựa trên những dữ liệu, thông tin đó để thiết kế. Trên màn hình, Claude Design giải thích các quyết định của nó: light mode trên design tokens của HoleTex, nền cool-white, chữ navy, accent đỏ dùng tiết chế; React + Tailwind map sát với Next.js 15 và Tailwind v3; tách các component như CreateForm, LinkRow, CopyButton, BarChart, ReferrerList, ClicksTable, EmptyState; và đủ các trạng thái theo brief. Nó cũng lưu ý đây là prototype demo với data giả, in-memory.

Nếu muốn, bạn cũng có thể đưa feedback lại cho bản design để Claude Design sửa các phần theo ý mình.

Khi đã có design, Tùng lại nhờ chính Claude Design tạo một prompt để đưa vào Claude Code, để Claude Code triển khai tiếp tới bước số 3, dùng subagent viết code, bám sát và chi tiết theo design. Anh nói với Claude Design rằng anh đã tới bước coding với Claude, hãy đưa anh một prompt để Claude Code sử dụng design vừa thiết kế. Anh gửi đi và chờ Claude Design đưa ra prompt cùng một link để tải các file thiết kế.

![File CLAUDE_CODE_PROMPT.md trong Claude Design với stack, design tokens và fonts, cùng câu hỏi xuất file zip](https://homus.dev/photos/h7WCw38nLto-1423.jpg)

Claude Design tạo file `CLAUDE_CODE_PROMPT.md`: một prompt hoàn chỉnh để copy thẳng vào Claude Code, gồm stack bắt buộc, design tokens cho `tailwind.config`, fonts local, routes và data shapes. Bên trái nó hỏi có muốn export cả prototype, fonts và prompt thành một file zip không, và Tùng đang gõ "ok cho tôi 1 file zip".

Prompt trên màn hình mở đầu bằng hướng dẫn copy toàn bộ phần bên dưới dán vào Claude Code, kèm theo file `URL Shortener.html` (prototype) và thư mục `fonts/` làm tham chiếu pixel-level. Nó đóng vai "senior Next.js engineer" có sẵn một prototype design đã chốt, yêu cầu implement thành production code thật, bám sát prototype về layout, spacing, màu, font, câu chữ tiếng Việt và mọi trạng thái, không thêm feature ngoài scope. Sau đó là các phần Stack, Design tokens (màu ink, brand, mint, amber, info; fontFamily; borderRadius; boxShadow), Fonts local, Routes và Data shapes.

Claude Design còn hỏi có muốn export luôn một bộ tham chiếu gồm prototype, fonts và prompt thành một file zip không, tức tải prompt cùng các file thiết kế trong một file duy nhất. Tùng thấy làm vậy tiện hơn nên trả lời ok, cho một file zip duy nhất. Đợi một lúc, Claude Design tạo ra file zip; anh chỉ việc tải về.

Giải nén xong, anh có một thư mục tên "URL Shorten Demo". Anh copy đường dẫn của thư mục này. Có hai cách dùng: một là đưa luôn thư mục vào trong thư mục dự án của bạn, hai là chỉ cần đưa đường dẫn tới nó cho Claude Code.

## 14. Bước 3 và 4: Claude Code viết code, Vitest và Playwright tự test

Quay lại Claude Code, Tùng nói nó triển khai đi, design nằm trong thư mục vừa tải, tham khảo prompt CLAUDE_CODE_PROMPT. Trên màn hình, câu anh gõ là:

```
triển khai đi. design nằm trong đây E:\Downloads\URL Shorten Demo . tham khảo promt CLAUDE_CODE_PROMT
```

Claude Code mở thư mục URL Shorten Demo vừa tải về và giải nén, đọc file prompt. Nó nhận xét prompt rất chi tiết, có prototype kèm helper và design tokens, nên nó cần đọc kỹ các file prototype để implement bám sát, và bắt đầu đọc song song các file như `app/components.jsx`. Từ đây chỉ cần chờ cho nó viết code: đó chính là bước số 3.

Tùng chỉ ra rằng Claude Code rất thông minh ở chỗ, code xong nó tự động viết và chạy unit test bằng Vitest. Sau đó nó tự động gọi tới plugin Playwright để mở app lên và test end to end. Bạn có thể theo dõi toàn bộ quá trình này ngay trong terminal.

![Claude Code chạy npm start, gọi plugin Playwright và mở dashboard URL Shortener trên localhost:3000](https://homus.dev/photos/h7WCw38nLto-1538.jpg)

Bên trái, Claude Code báo build đã pass, chạy `npm start`, rồi gọi `plugin:playwright:playwright` để điều khiển trình duyệt và chụp màn hình dashboard đối chiếu với design. Bên phải là cửa sổ trình duyệt do Playwright mở trên `localhost:3000`, hiện dashboard URL Shortener với ba link mẫu.

Bạn cũng xem được giao diện ngay trong lúc test, và theo Tùng, nó giống file design gần như chính xác 100%, đúng như file design mà Claude Design tạo lúc nãy. Anh chỉ cho người xem thấy Playwright đang tự điều khiển trình duyệt để test automation một cách hoàn toàn tự động.

Anh rút ra một điểm: khi viết spec và plan chi tiết bằng plugin Superpowers, chúng ta không phải can thiệp quá nhiều trong quá trình AI viết code. Lý do là toàn bộ những gì chúng ta cần đã được ghi ra thành các file mô tả rất chi tiết, chúng ta có các prompt do chính AI viết ra, và chúng ta cho nó đủ context, bao gồm cả context từ Claude Design, để nó tự hiểu và áp dụng đúng file design có từ trước.

Có vẻ như nó đã test xong với Playwright, và đó chính là bước số 4. Khi đã cài plugin Playwright, AI tự làm luôn bước này cho chúng ta. Trên màn hình, Claude Code liệt kê phần bằng chứng đã verify: `npx tsc --noEmit` sạch, `npm test` 30/30 pass (validation, slug, analytics, format và integration redirect trên test DB thật), `npm run build` xanh với các route đúng, dashboard và analytics render khớp prototype, và `curl` tới một slug trả về redirect đúng URL gốc, còn slug không tồn tại thì chuyển về trang báo lỗi. Nó cũng ghi các lệnh chạy local (`npm run dev`, `npm run db:seed`, `npm test`), lưu ý rằng Docker đã có sẵn cho lúc deploy Hostinger nhưng chưa build thử image, và đã có 4 commit: spec, plan, implementation, docker.

## 15. Bước 5: chuẩn bị hosting, tên miền và đẩy code lên GitHub

Bước cuối cùng là deploy app lên Hostinger. Video có một đoạn quảng cáo cho Hostinger.

Sau khi đăng ký gói hosting thành công, bước tiếp theo trong giao diện Hostinger là cài đặt tên miền cho trang web. Nếu chưa có tên miền, bạn có thể tìm một tên miền mới ngay tại đây. Tùng chọn lại domain anh vừa mua trước đó.

Tới bước chọn cách triển khai ứng dụng web Node.js, có hai cách: một là nhập từ GitHub, hai là tải trực tiếp các file source lên. Tùng chọn GitHub vì muốn làm cho chuẩn chỉnh: những lần sau, mỗi lần có thay đổi, nó sẽ tự động trigger deploy lên host này. Vì vậy cần đẩy code lên GitHub trước.

Anh nói với AI agent push code lên một repo trên GitHub. Trước đó anh đã kết nối Claude Code với GitHub, nên giờ chỉ cần bảo AI agent push lên một repo mới, nói cụ thể hơn là một private repo:

```
push lên 1 private repo trên github
```

Để AI agent dễ dàng sử dụng GitHub của bạn, Tùng khuyên nên cài thêm GitHub CLI, hoặc kết nối GitHub MCP cũng được; làm cách nào cũng được. Trên màn hình, Claude Code kiểm tra phiên bản `gh` và trạng thái đăng nhập, thấy `gh` đã được xác thực với quyền repo (tạo được private repo), branch đang là master, chưa có remote và working tree sạch. Nó đổi tên branch sang main (mặc định hiện đại), rồi tạo một private repo tên url-shorten và push lên bằng `gh repo create url-shorten --private --source=. --remote=origin --push`.

Đường đi của code trong bước deploy: Claude Code tạo và push private repo, Hostinger nhập repo đó từ GitHub, và về sau mỗi commit mới lên nhánh main sẽ tự động deploy lại.

Khi Claude báo đã push xong, Tùng mở đường link repo lên để kiểm tra, và thấy nó đã tạo cho anh repo url-shorten.

## 16. Kết nối GitHub với Hostinger, biến môi trường và deploy

Giờ Tùng kết nối Hostinger với GitHub. Anh chọn tài khoản GitHub mình muốn dùng. Về vấn đề bảo mật, anh khuyên chỉ nên cấp quyền cho những repo mà mình chọn, thay vì toàn bộ tài khoản. Ở đây anh chọn đúng repo vừa push lên, url-shorten, rồi nhấn Install và Authorize. Vậy là kết nối xong. Chờ một lúc, anh chọn repo vừa cấp quyền GitHub cho Hostinger.

Ưu điểm của việc kết nối GitHub với Hostinger, theo anh, là bạn không chỉ code một lần. Bạn sẽ còn phải cập nhật và thêm tính năng nữa. Vì vậy có thể cài đặt để mỗi khi có commit mới được push lên nhánh main, Hostinger sẽ tự hiểu và tự động trigger auto deploy lại trang web cho bạn. Hostinger cũng tự nhận ra đây là dự án Next.js, và anh để mặc định cho Next.js.

![Hostinger, màn hình Xem lại thiết lập xây dựng cho repo url-shorten với framework Next.js, nhánh main, Node 22.x](https://homus.dev/photos/h7WCw38nLto-1943.jpg)

Màn hình "Xem lại thiết lập xây dựng" của Hostinger: nhập repo url-shorten từ GitHub, framework cài sẵn Next.js, nhánh main, Node 22.x, thư mục gốc `./`, thiết lập build mặc định cho Next.js, và mục biến môi trường đang trống, kèm nút "Triển khai".

Tiếp theo, anh cấu hình lại phần biến môi trường. Anh thêm `DATABASE_URL` với giá trị lấy từ file `.env` của dự án, và tương tự cho `NEXT_PUBLIC_SHORT_DOMAIN`, cũng copy giá trị từ file đó. Trong editor, file `.env` mà Claude Code tạo trông như sau:

```
# Production-safe defaults, read by both the build (prisma migrate deploy) and
# the runtime, so the deploy works with zero panel env config.
# - DATABASE_URL=file:./prod.db -> prisma/prod.db (that dir exists -> no CANTOPEN)
# - NEXT_PUBLIC_SHORT_DOMAIN is inlined at build time
# Override either in the host panel if needed.
DATABASE_URL="file:./prod.db"
NEXT_PUBLIC_SHORT_DOMAIN="holetex.store"
```

Thêm xong hai biến, anh nhấn hoàn tất, sau đó nhấn "Triển khai" để deploy. Chờ một lúc để app được build và được start lên.

## 17. Thử app trên tên miền thật và tổng kết

App đã chạy trên tên miền của anh. Tùng thử thao tác trên trang một chút. Ví dụ, anh lấy trang google.com, dán vào ô URL gốc rồi nhấn "Rút gọn". App tạo ra một link rút gọn dạng tên miền của anh cộng một mã ngắn do app sinh ra.

Giờ anh verify một số tính năng. Anh mở link rút gọn đó lên, và nó tự redirect về trang Google. Khi refresh lại trang dashboard để xem tổng lượt click, con số đã tăng lên một. Dashboard cũng cho biết trình duyệt được dùng là gì, ở đây là Chrome.

![Trang analytics của link /pqxyu9 trên holetex.store, với cửa sổ Google mở ra sau khi redirect và bảng Recent clicks ghi Chrome](https://homus.dev/photos/h7WCw38nLto-2103.jpg)

App chạy thật trên `holetex.store`: trang analytics của link `/pqxyu9`, một cửa sổ trình duyệt khác đã được redirect về Google, và bảng Recent clicks bên dưới ghi một lượt click lúc 12:58 ngày 08/06/2026, referrer Direct, trình duyệt Chrome.

Tiếp theo, anh copy link đó, chuyển sang một trình duyệt khác và dán vào. Nó cũng redirect về trang Google. Refresh lại dashboard, tổng lượt click giờ là 2, và app đã ghi nhận đúng trình duyệt thứ hai. Vậy là app hoạt động chính xác.

Năm chặng từ plan tới deploy mà video đã đi qua, cũng là slide tóm tắt cuối của Tùng: plan trước khi code, rồi design, code, test và deploy.

Tùng tổng kết: chúng ta đã cùng đi qua nguyên một workflow, từ việc lên ý tưởng và phân tích yêu cầu, tới phần thiết kế, rồi phần code cũng như testing, và phần cuối cùng là deploy lên một host. Anh hy vọng người xem có thêm những kiến thức bổ ích, mời đăng ký kênh nếu thấy video hữu ích, và chào tạm biệt.

## Nguồn và liên kết

- Tên gốc: Plugin Này Giúp Mình Tối Ưu Sức Mạnh Claude Code
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=h7WCw38nLto](https://www.youtube.com/watch?v=h7WCw38nLto)

- Kênh YouTube Holetex (Tùng Nguyễn): [youtube.com/channel/UCd3lwxW89gegn-6rgLdXugw](https://www.youtube.com/channel/UCd3lwxW89gegn-6rgLdXugw), trang của kênh: [holetex.com](https://holetex.com)

- Superpowers, framework agentic skills với các skill brainstorming, writing-plans, subagent-driven-development (README có lệnh cài cho Claude Code): [github.com/obra/superpowers](https://github.com/obra/superpowers)

- Tài liệu plugin của Claude Code (cài, quản lý plugin và marketplace): [code.claude.com/docs/en/plugins](https://code.claude.com/docs/en/plugins)

- Giới thiệu Claude Design của Anthropic: [anthropic.com/news/claude-design-anthropic-labs](https://www.anthropic.com/news/claude-design-anthropic-labs)

- Playwright: [github.com/microsoft/playwright](https://github.com/microsoft/playwright) và Playwright MCP server: [github.com/microsoft/playwright-mcp](https://github.com/microsoft/playwright-mcp)

- Next.js: [nextjs.org](https://nextjs.org)

Nguồn: https://homus.dev/talks/plugin-nay-giup-minh-toi-uu-suc-manh-claude-code · cập nhật 2026-10-09