# 策展 · X (Twitter) 🔥🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：divyansh tiwari (@DivyanshT91162) · 平台：X (Twitter) · 日期：2026-05-22

> 原始來源：https://x.com/DivyanshT91162/status/2057277631394107665

## 中文摘要

AI 程式開發工具現已能直接從Claude Code逆向網站設計，徹底改變前端開發流程。

**核心技術突破**
Divyansh Tiwari 指出，透過整合 Hyperbrowser 與 Claude Code MCP，開發者現在無需手動開啟瀏覽器開發者工具，即可快速解析網站的設計系統。使用者只需在終端機輸入 `/design http://stripe.com`，系統便能即時提取以下關鍵資訊：
- 品牌色彩
- 字體與排版規範
- 間距系統
- 按鈕與 UI 元件
- 版面配置模式
- 設計 token

**實際應用與影響**
這些提取出的資料會自動儲存為結構化的 `` `DESIGN.md` `` 檔案，供 AI Agent 直接讀取與重複使用。這項技術大幅縮短了研究、複製與重建頂尖 UI 系統所需的時間，從原本的數小時縮減至幾分鐘內，對「vibe coding」的開發模式產生深遠影響。

**資源與指引**
若要開始使用此功能，開發者可參考以下資源：
- 取得 skill 定義檔：[Hyperbrowser 範例程式庫](https://github.com/hyperbrowserai/examples/tree/main/skills)
- 申請 API 金鑰：[Hyperbrowser 官網](https://hyperbrowser.ai)

## 標籤

Claude Code, MCP, CLI, 功能更新, Web, Anthropic, Claude, Hyperbrowser