voltagent-awesome-design-md – skill Thiết kế & UI cho agent AI

Tập hợp trích xuất DESIGN.md từ 73 website thực tế (Claude / Cursor / Vercel / Stripe / Apple / Tesla / Ferrari ...). Sao chép DESIGN.md vào thư mục gốc dự án, AI agent đọc DESIGN.md rồi có thể tạo UI có phong cách nhất quán và chất lượng cao. Kho này đồng bộ từ VoltAgent/awesome-design-md. Từ khóa: DESIGN.md, Google Stitch, UI thiết kế, hệ thống thiết kế, Claude, Cursor, Vercel, Stripe, Apple, Tesla.

Thiết kế & UISKILL.mdClaude Code · Codex · Hermes · DeepSeek

Cài skill voltagent-awesome-design-md bằng một lệnh

Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.

Claude Code

mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/voltagent-awesome-design-md-e5628.tgz | tar xz -C ~/.claude/skills

Gọi trong Claude Code: /voltagent-awesome-design-md – rồi mô tả công việc bạn muốn làm.

Codex

mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/voltagent-awesome-design-md-e5628.tgz | tar xz -C ~/.codex/skills

Gọi trong Codex: $voltagent-awesome-design-md – rồi mô tả công việc bạn muốn làm.

Hermes Agent

mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/voltagent-awesome-design-md-e5628.tgz | tar xz -C ~/.hermes/skills

Gọi trong Hermes Agent: /voltagent-awesome-design-md – rồi mô tả công việc bạn muốn làm.

DeepSeek

mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/voltagent-awesome-design-md-e5628.tgz | tar xz -C ~/.deepcode/skills

Gọi trong DeepSeek: /voltagent-awesome-design-md – rồi mô tả công việc bạn muốn làm.

Nội dung SKILL.md

Nội dung SKILL.md gốc bằng tiếng Anh.

VoltAgent Awesome DESIGN.md

73 个真实网站的 DESIGN.md 提取集合。 每个子目录（如 design-md/claude/、design-md/stripe/、design-md/tesla/）是一份完整的 DESIGN.md 文件 —— Google Stitch 推广的纯 Markdown 设计系统描述语言。

是什么

DESIGN.md 是 Google Stitch 推出的设计系统规范：

AGENTS.md —— 给编码 agent 看，定义"项目怎么建"
DESIGN.md —— 给设计 agent 看，定义"UI 应该长什么样"

> 只需在项目根目录放一份 DESIGN.md，任何 AI 编码 agent / Google Stitch 就能立即理解你的 UI 视觉规范。

怎么用

1. 浏览 design-md/<name>/DESIGN.md，找一个你喜欢的风格

3. 告诉你的 AI agent："build me a page that looks like this"

4. AI 会按 DESIGN.md 里的色板 / 字体 / 间距 / 组件规格生成一致 UI

收录分类

AI & LLM 平台（Claude / Cohere / ElevenLabs / Mistral AI / Ollama / xAI 等 12 个）
Developer Tools & IDEs（Cursor / Expo / Lovable / Raycast / Vercel / Warp 等 7 个）
Backend / Database / DevOps（ClickHouse / MongoDB / PostHog / Sentry / Supabase 等 8 个）
Productivity & SaaS（Cal.com / Linear / Notion / Resend / Zapier 等 7 个）
Design & Creative Tools（Figma / Framer / Miro / Webflow 等 6 个）
Fintech & Crypto（Binance / Coinbase / Kraken / Stripe / Wise 等 7 个）
E-commerce & Retail（Airbnb / Nike / Shopify / Starbucks 等 5 个）
Media & Consumer Tech（Apple / NVIDIA / PlayStation / Spotify / WIRED 等 12 个）
Automotive（BMW / Ferrari / Lamborghini / Tesla 等 7 个）
Retro Web（1996 Dell / 2001 Nintendo.com 等复古 UI）

总计 73 个 DESIGN.md。

在 Antinet 里的角色

资源目录型 skill —— 不是 agent runtime skill（不进入 SKILL_SOURCES.json 调度），而是设计资源仓库。

前端 skills.html 的 🔥 本周热门 Tab 已收录（与 ip-as-logo / img2threejs / photo-abstract-editorial / anydoc 并列）。

与其他 Skill 的关系

ip-as-logo：吉祥物（资产）
img2threejs：3D 重建（资产）
photo-abstract-editorial：编辑作品（资产）
voltagent-awesome-design-md：UI 设计系统（规范）

四者合起来构成"AI 创作素材层"。

License

继承上游仓库 LICENSE。详见 LICENSE 文件（MIT）。

Skill liên quan

web-artifacts-builder – Bộ công cụ tạo artifact HTML claude.ai nhiều thành phần, phức tạp, bằng công nghệ…
ai-product – Thiết kế và đánh giá tính năng sản phẩm LLM, truy xuất, đầu ra đã xác thực, độ trễ và…
ai-studio-image – Tạo hình ảnh người thật qua Google AI Studio (Gemini). Ảnh chân thực theo phong cách…
canvas – Lấy khóa học và bài tập từ Canvas LMS qua API token.
brand-guidelines – Khi người dùng muốn áp dụng, ghi lại hoặc thực thi hướng dẫn thương hiệu cho bất kỳ sản…
slack-gif-creator – Bộ công cụ tạo GIF động tối ưu cho Slack, có trình kiểm tra ràng buộc kích thước và các…
android-jetpack-compose-expert – Hướng dẫn chuyên sâu xây dựng giao diện Android hiện đại với Jetpack Compose, gồm quản…
android-ui-journey-testing – Kiểm thử hành trình giao diện Android theo đặc tả XML, thực thi từng bước tương tác, xác…

← Xem tất cả skill