Chuyển tới nội dung chính

{/* Trang này được tạo tự động từ SKILL.md của kỹ năng bởi website/scripts/generate-skill-docs.py. Chỉnh sửa nguồn SKILL.md, không phải trang này. */}

Những thiết kế web phổ biến`54 hệ thống thiết kế thực tế (Stripe, Linear, Vercel) dưới dạng HTML/CSS.

Siêu dữ liệu kỹ năng​

NguồnĐi kèm (được cài đặt theo mặc định)
Đường dẫn

skills/creative/popular-web-designs ` | | Phiên bản |

1.0.0 ` | | Tác giả | Hermes Agent + Teknium (hệ thống thiết kế có nguồn gốc từ VoltAgent/awesome-design-md) | | Giấy phép | MIT | | Nền tảng | Linux, macOS, Windows |

Tham khảo: đầy đủ SKILL.md​

thông tin

Sau đây là định nghĩa kỹ năng đầy đủ mà Hermes tải khi kỹ năng này được kích hoạt. Đây là những gì tác nhân coi là hướng dẫn khi kỹ năng được kích hoạt.

Những thiết kế web phổ biến`54 hệ thống thiết kế trong thế giới thực sẵn sàng sử dụng khi tạo HTML/CSS. Mỗi mẫu chụp một

ngôn ngữ hình ảnh hoàn chỉnh của trang web: bảng màu, phân cấp kiểu chữ, kiểu thành phần, khoảng cách hệ thống, bóng tối, hành vi phản hồi và lời nhắc tác nhân thực tế với các giá trị CSS chính xác.`##Kỹ năng thiết kế liên quan

  • ** `Claude-design

** — sử dụng cho thiết kế quy trình và hương vị (xác định phạm vi tóm tắt, tạo ra các biến thể, xác minh tạo phẩm HTML cục bộ, tránh sai sót trong thiết kế AI). Ghép nối nó với kỹ năng này khi người dùng muốn một trang được thiết kế chu đáo theo kiểu sau một thương hiệu nổi tiếng: Claude-design thúc đẩy quy trình làm việc, kỹ năng này cung cấp từ vựng trực quan.

  • ** `design-md

** — sử dụng khi sản phẩm có thể phân phối là thông số mã thông báo DESIGN.md chính thức tập tin, không phải là một tạo phẩm được hiển thị.

Cách sử dụng​

  1. Chọn một thiết kế từ danh mục bên dưới

  2. Tải nó: `skill_view(name="popular-web-designs", file_path="templates/<site.md")

  3. Sử dụng mã thông báo thiết kế và thông số thành phần khi tạo HTML

  4. Kết hợp với kỹ năng generative-widgets để phục vụ kết quả thông qua đường hầm đám mây

Mỗi mẫu bao gồm khối Ghi chú triển khai Hermes ở trên cùng với:

  • Thay thế phông chữ CDN và thẻ Google Fonts

<link ` (sẵn sàng dán)

  • Ngăn xếp họ phông chữ CSS cho chính và đơn cách
  • Nhắc nhở sử dụng write_file để tạo HTML và browser_vision để xác minh

Mẫu tạo HTML​

&lt;!DOCTYPE html>
&lt;html lang="en"
&lt;head
  &lt;meta charset="UTF-8"
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"
  &lt;titlePage Title&lt;/title
  &lt;!-- Paste the Google Fonts &lt;link from the template's Hermes notes -->
  &lt;link href="https://fonts.GoogleAPIs.com/css2?family=..." rel="stylesheet"
  &lt;style
    /* Apply the template's color palette as CSS custom properties */
    :root &#123;

      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... more from template Section 2 */
    &#125;
    /* Apply typography from template Section 3 */
    body &#123;
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    &#125;
    /* Apply component styles from template Section 4 */
    /* Apply layout from template Section 5 */
    /* Apply shadows from template Section 6 */
  &lt;/style
&lt;/head
&lt;body
  &lt;!-- Build using component specs from the template -->
&lt;/body
&lt;/html

`
``Viết tệp bằng 
`write_file

, phục vụ với quy trình làm việc 
`generative-widgets
` (đường hầm đám mây),
và xác minh kết quả bằng 
`browser_vision
` để xác nhận độ chính xác của hình ảnh.

## Tham chiếu thay thế phông chữ

Hầu hết các trang web đều sử dụng phông chữ độc quyền không có sẵn qua CDN. Mỗi mẫu ánh xạ tới một Phông chữ của Google
thay thế để bảo tồn đặc tính của thiết kế. Ánh xạ chung:

| Phông chữ độc quyền | CDN thay thế | Nhân vật |
|---|---|---|
| Geist / Geist Sans | Geist (trên Google Fonts) | Theo dõi hình học, nén |
| Geist Mono | Geist Mono (trên Google Fonts) | Làm sạch monospace, chữ ghép |
| sohne-var (Sọc) | Nguồn Sans 3 | Trọng lượng nhẹ sang trọng |
| Berkeley Mono | JetBrains Mono | Không gian đơn kỹ thuật |
| Ngũ cốc Airbnb VF | DM Sans | Hình học tròn trịa, thân thiện |
| Thông tư (Spotify) | DM Sans | Hình học, ấm áp |
| figmaSans | Liên | Nhân văn sạch sẽ |
| Pin Sans (Pinterest) | DM Sans | Thân thiện, tròn trịa |
| NVIDIA-EMEA | Inter (hoặc hệ thống Arial) | Công nghiệp, sạch sẽ |
| CoinbaseDisplay/Sans | DM Sans | Hình học, đáng tin cậy |
| UberMove | DM Sans | Táo bạo, chặt chẽ |
| HashiCorp Sans | Liên | Doanh nghiệp, trung lập |
| waldenburgBình thường (Sanity) | Không gian Grotesk | Hình học, hơi cô đặc |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Có sẵn trên Phông chữ của Google |
| Rubik (Sentry) | Rubik | Có sẵn trên Phông chữ của Google |

Khi phông chữ CDN của mẫu khớp với phông chữ gốc (Inter, IBM Plex, Rubik, Geist), không
xảy ra mất mát thay thế. Khi sử dụng một chất thay thế (DM Sans cho Thông tư, Nguồn Sans 3
đối với sohne-var), hãy tuân thủ chặt chẽ các giá trị trọng lượng, kích thước và khoảng cách chữ cái của mẫu —
những cái đó mang nhiều bản sắc trực quan hơn so với mặt phông chữ cụ thể.`##Danh mục thiết kế

### AI & Học máy| Mẫu | Trang web | Phong cách |
|---|---|---|
| 
`Claude.md
` | Claude nhân loại | Giọng đất nung ấm áp, bố cục biên tập rõ ràng |
| 
`cohere.md
` | Kết hợp | Độ dốc sống động, thẩm mỹ bảng điều khiển giàu dữ liệu |
| 
`elevenlabs.md
` | ElevenLabs | Giao diện người dùng điện ảnh tối, thẩm mỹ dạng sóng âm thanh |
| 
`MiniMax.md
` | Tối thiểu | Giao diện tối đậm với điểm nhấn neon |
| 
`Mistral.ai.md
` | AI của Mistral | Phong cách tối giản kiểu Pháp, tông màu tím |
| 
`OLlama.md
` | Olama | Sự đơn giản đơn sắc, đầu tiên của terminal |
| 
`opencode.ai.md
` | Mã mở AI | Chủ đề tối lấy nhà phát triển làm trung tâm, không gian đơn hoàn toàn |
| 
`replicate.md
` | Nhân rộng | Canvas trắng sạch, chuyển tiếp mã |
| 
`runwayml.md
` | Đường băngML | Giao diện người dùng tối màu điện ảnh, bố cục đa phương tiện |
| 
`together.ai.md
` | Cùng AI | Thiết kế kỹ thuật, theo phong cách thiết kế |
| 
`voltagent.md
` | VoltAgent | Canvas đen trống, điểm nhấn màu ngọc lục bảo, terminal-bản địa |
| 
`x.ai.md
` | xAI | Đơn sắc rõ ràng, chủ nghĩa tối giản tương lai, không gian đơn sắc hoàn toàn |

### Công cụ & nền tảng dành cho nhà phát triển

| Mẫu | Trang web | Phong cách |
|---|---|---|
| 
`Cursor.md
` | Con trỏ | Giao diện tối đẹp mắt, điểm nhấn chuyển màu |
| 
`expo.md
` | Triển lãm | Chủ đề tối, khoảng cách chữ cái chặt chẽ, tập trung vào mã |
| 
`linear.app.md
` | Tuyến tính | Chế độ tối cực kỳ tối giản, chính xác, điểm nhấn màu tím |
| 
`lovable.md
` | Đáng yêu | Độ dốc vui tươi, thẩm mỹ nhà phát triển thân thiện |
| 
`mintlify.md
` | Mintlify | Sạch sẽ, có điểm nhấn xanh, tối ưu hóa việc đọc |
| 
`posthog.md
` | PostHog | Xây dựng thương hiệu vui nhộn, giao diện người dùng tối thân thiện với nhà phát triển |
| 
`raycast.md
` | Raycast | Chrome tối màu bóng bẩy, các điểm nhấn chuyển màu rực rỡ |
| 
`resend.md
` | Gửi lại | Chủ đề tối tối giản, điểm nhấn đơn cách |
| 
`sentry.md
` | Lính gác | Bảng điều khiển tối màu, dày đặc dữ liệu, điểm nhấn màu hồng tím |
| 
`supabase.md
` | Supabase | Chủ đề ngọc lục bảo đen, công cụ dành cho nhà phát triển mã đầu tiên |
| 
`superhuman.md
` | Siêu nhân | Giao diện người dùng tối cao cấp, ưu tiên bàn phím, ánh sáng màu tím |
| 
`vercel.md
` | Vercel | Độ chính xác đen trắng, hệ thống phông chữ Geist |
| 
`warp.md
` | Cong vênh | Giao diện tối giống IDE, giao diện lệnh dựa trên khối |
| 
`zAPIer.md
` | ZAPIer | Màu cam ấm áp, minh họa thân thiện |

### Cơ sở hạ tầng & Đám mây

| Mẫu | Trang web | Phong cách |
|---|---|---|
| 
`CLIckhouse.md
` | CLIckHouse | Phong cách tài liệu kỹ thuật, có dấu màu vàng |
| 
`composio.md
` | Sáng tác | Bóng tối hiện đại với các biểu tượng tích hợp đầy màu sắc |
| 
`hashicorp.md
` | HashiCorp | Doanh nghiệp sạch, đen trắng |
| 
`mongodb.md
` | MongoDB | Xây dựng thương hiệu lá xanh, tập trung vào tài liệu dành cho nhà phát triển |
| 
`sanity.md
` | Vệ sinh | Giọng đỏ, bố cục biên tập ưu tiên nội dung |
| 
`stripe.md
` | Sọc | Độ dốc màu tím đặc trưng, ​​trọng lượng-300 sang trọng |

### Thiết kế & Năng suất

| Mẫu | Trang web | Phong cách |
|---|---|---|
| 
`airtable.md
` | Máy bay | Đầy màu sắc, thân thiện, có cấu trúc thẩm mỹ |
| 
`cal.md
` | Cal.com | Giao diện người dùng trung tính sạch sẽ, tính đơn giản hướng đến nhà phát triển |
| 
`clay.md
` | Đất sét | Hình dạng tự nhiên, độ chuyển màu mềm mại, bố cục thiên về nghệ thuật |
| 
`figma.md
` | Hình | Sống động đa sắc màu, vui tươi nhưng chuyên nghiệp |
| 
`framer.md
` | Người đóng khung | Màu đen và xanh đậm, chuyển động đầu tiên, thiết kế hướng tới |
| 
`intercom.md
` | Liên lạc nội bộ | Bảng màu xanh thân thiện, mẫu giao diện người dùng đàm thoại |
| 
`miro.md
` | Miro | Điểm nhấn màu vàng tươi, thẩm mỹ canvas vô hạn |
| 
`notion.md
` | Khái niệm | Chủ nghĩa tối giản ấm áp, tiêu đề có chân, bề mặt mềm mại |
| 
`pinterest.md
` | Pinterest | Điểm nhấn màu đỏ, lưới nề, bố cục hình ảnh đầu tiên |
| 
`webflow.md
` | Luồng web | Thẩm mỹ trang web tiếp thị bóng bẩy, có điểm nhấn màu xanh lam |

### Fintech & Tiền điện tử

| Mẫu | Trang web | Phong cách |
|---|---|---|
| 
`coinbase.md
` | Coinbase | Bản sắc xanh trong sạch, tập trung vào niềm tin, cảm giác thể chế |
| 
`kraken.md
` | Kraken | Giao diện người dùng tối có điểm nhấn màu tím, bảng điều khiển dày đặc dữ liệu |
| 
`revolut.md
` | Cuộc cách mạng | Giao diện tối đẹp mắt, thẻ chuyển màu, độ chính xác của fintech |
| 
`wise.md
` | Khôn ngoan | Giọng xanh tươi, thân thiện và rõ ràng |

### Doanh nghiệp & Người tiêu dùng| Mẫu | Trang web | Phong cách |
|---|---|---|
| 
`airbnb.md
` | Airbnb | Giọng san hô ấm áp, giao diện người dùng tròn trịa, hướng đến nhiếp ảnh |
| 
`Apple.md
` | Táo | Không gian trắng cao cấp, SF Pro, hình ảnh điện ảnh |
| 
`bmw.md
` | BMW | Bề mặt cao cấp tối màu, thẩm mỹ kỹ thuật chính xác |
| 
`ibm.md
` | IBM | Hệ thống thiết kế carbon, bảng màu xanh có cấu trúc |
| 
`nvidia.md
` | NVIDIA | Năng lượng xanh-đen, sức mạnh kỹ thuật thẩm mỹ |
| 
`spacex.md
` | SpaceX | Hình ảnh đen trắng, tràn viền, mang tính tương lai |
| 
`spotify.md
` | Spotify | Màu xanh lá cây rực rỡ trên nền đậm, kiểu chữ đậm, theo phong cách nghệ thuật album |
| 
`uber.md
` | Uber | Màu đen trắng đậm, kiểu chặt chẽ, năng lượng đô thị |

## Lựa chọn thiết kế

Kết hợp thiết kế với nội dung:
- **Công cụ / bảng thông tin dành cho nhà phát triển:** Linear, Vercel, Supabase, Raycast, Sentry
- **Các trang tài liệu/nội dung:** Mintlify, Notion, Sanity, MongoDB
- **Trang tiếp thị / đích:** Stripe, Framer, Apple, SpaceX
- **Giao diện người dùng chế độ tối:** Tuyến tính, Con trỏ, ElevenLabs, Warp, Superhuman
- **Giao diện người dùng nhẹ / sạch:** Vercel, Stripe, Notion, Cal.com, Replica
- **Vui tươi / thân thiện:** PostHog, Figma, Lovable, ZAPIer, Miro
- **Cao cấp / sang trọng:** Apple, BMW, Stripe, Superhuman, Revolut
- **Dữ liệu dày đặc / bảng điều khiển:** Sentry, Kraken, Cohere, CLIckHouse
- **Thẩm mỹ đơn không gian / terminal:** OLlama, OpenCode, x.ai, VoltAgent