TL;DR
Hyperbrowser vừa phát hành HyperDesign — app open-source cho phép bạn dán URL của bất kỳ website công khai nào và nhận về một file DESIGN.md chứa toàn bộ design system: color palette, font, spacing, border radius, component pattern. File này được viết theo chuẩn DESIGN.md spec của Google Labs, có thể paste thẳng vào Claude Code, Cursor hoặc Windsurf để agent tự build lại UI giống y hệt. Engine xử lý là Claude Opus 4.7 — model mới của Anthropic mạnh hẳn ở coding dài và bám instruction. Code ở GitHub, chạy local trong 5 phút.
Cái mới là gì
Trước đây nếu muốn clone visual language của một site, bạn phải: (1) chụp 5–10 screenshot, (2) eyedropper từng màu, (3) đo spacing bằng DevTools, (4) viết tay một prompt mô tả style, (5) gửi cho coding agent rồi cầu trời nó hiểu. Quá trình đó tốn cả buổi và kết quả vẫn thiếu nhất quán.
HyperDesign cắt thẳng pipeline đó còn một bước. App điều khiển một browser thật qua Hyperbrowser SDK + Playwright, render trang đích, gom screenshot full-fidelity và computed CSS, rồi nhồi tất cả vào một lượt phân tích bằng Opus 4.7. Output là một file Markdown duy nhất với YAML frontmatter chứa design tokens và các section markdown mô tả từng thành phần — định dạng mà coding agent đã hiểu sẵn.
Vì sao đáng quan tâm
DESIGN.md đang dần trở thành format chuẩn để brief visual identity cho coding agent. Google Labs đã công bố spec, cộng đồng có repo awesome-design-md, và giờ có một extractor tự động hoá khâu khó nhất: dịch hình ảnh sang văn bản có cấu trúc.
Với người làm sản phẩm, HyperDesign rút giai đoạn “visual onboarding” cho agent từ vài giờ xuống vài giây. Với indie hacker tự code, đây là cách nhanh nhất để mở một dự án mới với base style của một site bạn thích, rồi remix.
Chi tiết kỹ thuật
- Stack: Next.js (App Router) + TypeScript + Tailwind CSS v4
- AI: Claude Opus 4.7 (
claude-opus-4-7) qua Anthropic SDK - Browser layer: Hyperbrowser SDK điều khiển headless browser thật, Playwright trích DOM và computed style
- Pipeline: URL → navigate + screenshot + extract CSS → gửi gói visual + structural cho Opus 4.7 → emit
DESIGN.mdkèm preview panel - Vì sao chọn Opus 4.7: hỗ trợ ảnh tới ~3.75 megapixel (gấp 3 lần model trước) nên typography và viền component được parse rõ; instruction following chặt hơn nên markdown output luôn đúng cấu trúc
- Setup: clone thư mục
hyperdesigntrong repohyperbrowser-app-examples, setHYPERBROWSER_API_KEY+ANTHROPIC_API_KEY, chạynpm run dev
So sánh nhanh
| Tool | Input | Output | Mô hình | Hosted? |
|---|---|---|---|---|
| HyperDesign | 1 URL | 1 file DESIGN.md | Opus 4.7 | Self-host (OSS) |
| Claude Design (Anthropic Labs) | Prompt / codebase / asset | Prototype, deck, PPTX, handoff Claude Code | Opus 4.7 | Hosted |
| ai.to.design | Prompt + iterate | Generated UI screens | Opus 4.7 | Hosted |
Sức mạnh của HyperDesign nằm ở phạm vi hẹp: nó không generate UI mới, nó chỉ trích design system có sẵn cho cực chuẩn. Bạn ghép nó với một generator khác để có cả pipeline.
Engine Opus 4.7 mạnh đến đâu
Opus 4.7 GA ngày 16/04/2026. Một số con số đáng chú ý từ benchmark độc lập:
- SWE-bench Verified: 87.6% (so với 80.8% của Opus 4.6, vượt Gemini 3.1 Pro ở 80.6%)
- SWE-bench Pro: 64.3% (tăng 10.9 điểm từ 53.4%, vượt GPT-5.4 ở 57.7%)
- OSWorld-Verified (computer use): 78.0%
- MCP-Atlas (tool use): 77.3% — dẫn đầu bảng
- Pricing giữ nguyên: $5 / 1M input token, $25 / 1M output token
Một điểm yếu duy nhất: BrowseComp giảm 4.4 điểm xuống 79.3%, kém GPT-5.4 Pro và Gemini 3.1 Pro — nhưng tác vụ extract design system không phải BrowseComp, nên không ảnh hưởng đến HyperDesign.
Use case thực tế
- Clone competitor làm baseline: dán link đối thủ, lấy DESIGN.md, đưa cho agent code page Day-0 trong cùng visual language rồi customize tiếp
- Onboard agent vào site cũ của bạn: trích DESIGN.md từ chính site đang chạy, dùng làm reference cho agent ship feature mới đồng nhất
- Audit thiết kế: generate token map cho project chưa có design system viết tay
- Brief redesign: “đây là DESIGN.md hiện tại, hãy modernize spacing scale và đổi palette gray sang neutral-warm”
- Prototype nhanh: scaffold landing page mới theo tone visual của bất kỳ site reference nào trong một prompt
Giới hạn & pricing
App miễn phí và open source. Bạn trả tiền cho hai API upstream: Hyperbrowser (cho browser session) và Anthropic Opus 4.7 (theo token usage). Một bài run ngắn chỉ vài cent.
Một số giới hạn cần biết:
- Bắt static visual tokens rất chuẩn, nhưng tương tác stateful phức tạp (animation đa bước, dark-mode toggle, hover phụ thuộc) không phải trọng tâm
- Site sau auth-wall: Hyperbrowser dùng browser thật nên có thể vượt qua, nhưng bạn tự wire credential
- Output chỉ là một file
DESIGN.md— không phải Figma variables hay emitter đa nền tảng. Muốn đi xa hơn thì ghép với tool khác
Cái gì tiếp theo
HyperDesign được drop dưới dạng app ví dụ trong repo hyperbrowser-app-examples — cùng nhà với hyperbuild, hyperpages, hypervision. Pattern rõ ràng: Hyperbrowser đang ship một loạt vertical agent kết hợp browser infra + Opus 4.7. Đây là blueprint mà bất kỳ ai cũng có thể fork để xây tool tương tự cho domain riêng.
Khi DESIGN.md trở thành lingua franca cho việc brief visual identity tới coding agent, các tool emit nó sạch sẽ sẽ là bước chuẩn trong pipeline build agent-first. HyperDesign vào sớm và mở source — đáng để clone về thử ngay tuần này.
Nguồn: Hyperbrowser app examples, Anthropic — Introducing Claude Opus 4.7, Vellum benchmarks, Google Labs DESIGN.md spec.