{"id":"09117225-add2-405c-9e4a-33e9860d6a45","entityType":"agent","slug":"clawhub-zhouchang1988-awesome-design-skill","name":"awesome-design-skill","canonicalUrl":"https://www.xpersona.co/agent/clawhub-zhouchang1988-awesome-design-skill","canonicalPath":"/agent/clawhub-zhouchang1988-awesome-design-skill","generatedAt":"2026-10-10T10:45:05.368Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:30:38.985Z","emptyReason":null},"description":"UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如\"用Linear风格设计\"、\"使用Apple风格创建页面\"、\"按Stripe风格重构\"）。也用于用...","descriptionLabel":"Source description","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.6K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s1720bd1njpgkfeygpnhevb7z184dag4:awesome-design-skill","sourceUrl":"https://clawhub.ai/zhouchang1988/awesome-design-skill","homepage":"https://clawhub.ai/zhouchang1988/skills/awesome-design-skill","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/zhouchang1988/awesome-design-skill","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/zhouchang1988/skills/awesome-design-skill","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":64,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"awesome-design-skill technical dossier on Xpersona with agent coverage, OPENCLEW support, and live trust metadata."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:30:38.985Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:30:38.985Z","emptyReason":null},"stars":null,"forks":null,"downloads":1591,"packageName":null,"latestVersion":"1.2.0","tractionLabel":"1.6K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:30:38.985Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T07:30:38.985Z","lastCrawledAt":"2026-10-10T07:30:38.985Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T07:30:38.985Z","lastVerifiedAt":null,"highlights":[{"version":"1.2.0","createdAt":"2026-04-23T09:57:47.903Z","changelog":"Release v1.2.0 from GitHub","fileCount":226,"zipByteSize":972670},{"version":"1.1.0","createdAt":"2026-04-22T12:35:59.684Z","changelog":"Release v1.1.0 from GitHub","fileCount":225,"zipByteSize":971877},{"version":"1.0.1","createdAt":"2026-04-20T10:30:39.655Z","changelog":"Release v1.0.1 from GitHub","fileCount":225,"zipByteSize":971754},{"version":"1.0.0","createdAt":"2026-04-20T09:50:31.520Z","changelog":"Release v1.0.0 from GitHub","fileCount":225,"zipByteSize":971626}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s1720bd1njpgkfeygpnhevb7z184dag4:awesome-design-skill","setupComplexity":"low","setupSteps":["Install using `clawhub skill install s1720bd1njpgkfeygpnhevb7z184dag4:awesome-design-skill` in an isolated environment before connecting it to live workloads.","No published capability contract is available yet, so validate auth and request/response behavior manually.","Review the upstream CLAWHUB listing at https://clawhub.ai/zhouchang1988/awesome-design-skill before using production credentials."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T10:45:05.366Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:30:38.985Z","emptyReason":null},"readme":"Skill: awesome-design-skill\n\nOwner: zhouchang1988\n\nSummary: UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如\"用Linear风格设计\"、\"使用Apple风格创建页面\"、\"按Stripe风格重构\"）。也用于用...\n\nTags: latest:1.2.0\n\nVersion history:\n\nv1.2.0 | 2026-04-23T09:57:47.903Z | user\n\nRelease v1.2.0 from GitHub\n\nv1.1.0 | 2026-04-22T12:35:59.684Z | user\n\nRelease v1.1.0 from GitHub\n\nv1.0.1 | 2026-04-20T10:30:39.655Z | user\n\nRelease v1.0.1 from GitHub\n\nv1.0.0 | 2026-04-20T09:50:31.520Z | user\n\nRelease v1.0.0 from GitHub\n\nArchive index:\n\nArchive v1.2.0: 226 files, 972670 bytes\n\nFiles: design-md/airbnb/DESIGN.md (13405b), design-md/airbnb/preview-dark.html (18792b), design-md/airbnb/preview.html (18616b), design-md/airbnb/README.md (1275b), design-md/airtable/DESIGN.md (3541b), design-md/airtable/preview-dark.html (15196b), design-md/airtable/preview.html (15015b), design-md/airtable/README.md (1295b), design-md/apple/DESIGN.md (18742b), design-md/apple/preview-dark.html (27554b), design-md/apple/preview.html (27660b), design-md/apple/README.md (1266b), design-md/bmw/DESIGN.md (8930b), design-md/bmw/preview-dark.html (15485b), design-md/bmw/preview.html (15328b), design-md/bmw/README.md (1245b), design-md/cal/DESIGN.md (15762b), design-md/cal/preview-dark.html (23744b), design-md/cal/preview.html (25549b), design-md/cal/README.md (1245b), design-md/claude/DESIGN.md (18835b), design-md/claude/preview-dark.html (31906b), design-md/claude/preview.html (32544b), design-md/claude/README.md (1275b), design-md/clay/DESIGN.md (16941b), design-md/clay/preview-dark.html (23842b), design-md/clay/preview.html (23668b), design-md/clay/README.md (1255b), design-md/clickhouse/DESIGN.md (14619b), design-md/clickhouse/preview-dark.html (32277b), design-md/clickhouse/preview.html (30420b), design-md/clickhouse/README.md (1316b), design-md/cohere/DESIGN.md (13837b), design-md/cohere/preview-dark.html (30794b), design-md/cohere/preview.html (30891b), design-md/cohere/README.md (1276b), design-md/coinbase/DESIGN.md (5015b), design-md/coinbase/preview-dark.html (15263b), design-md/coinbase/preview.html (15108b), design-md/coinbase/README.md (1295b), design-md/composio/DESIGN.md (19415b), design-md/composio/preview-dark.html (34730b), design-md/composio/preview.html (34191b), design-md/composio/README.md (1296b), design-md/cursor/DESIGN.md (18673b), design-md/cursor/preview-dark.html (27826b), design-md/cursor/preview.html (27715b), design-md/cursor/README.md (1276b), design-md/elevenlabs/DESIGN.md (14301b), design-md/elevenlabs/preview-dark.html (20028b), design-md/elevenlabs/preview.html (19846b), design-md/elevenlabs/README.md (1314b), design-md/expo/DESIGN.md (16730b), design-md/expo/preview-dark.html (29603b), design-md/expo/preview.html (29718b), design-md/expo/README.md (1256b), design-md/figma/DESIGN.md (10633b), design-md/figma/preview-dark.html (31715b), design-md/figma/preview.html (31925b), design-md/figma/README.md (1266b), design-md/framer/DESIGN.md (16394b), design-md/framer/preview-dark.html (30433b), design-md/framer/preview.html (30005b), design-md/framer/README.md (1275b), design-md/hashicorp/DESIGN.md (15455b), design-md/hashicorp/preview-dark.html (41927b), design-md/hashicorp/preview.html (42145b), design-md/hashicorp/README.md (1306b), design-md/ibm/DESIGN.md (19430b), design-md/ibm/preview-dark.html (27696b), design-md/ibm/preview.html (27407b), design-md/ibm/README.md (1246b), design-md/intercom/DESIGN.md (6443b), design-md/intercom/preview-dark.html (17460b), design-md/intercom/preview.html (17285b), design-md/intercom/README.md (1295b), design-md/kraken/DESIGN.md (4448b), design-md/kraken/preview-dark.html (15682b), design-md/kraken/preview.html (15503b), design-md/kraken/README.md (1275b)\n\nFile v1.2.0:SKILL.md\n\n---\nname: awesome-design-skill\ndescription: UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如\"用Linear风格设计\"、\"使用Apple风格创建页面\"、\"按Stripe风格重构\"）。也用于用户询问可用设计风格列表（\"列出所有风格\"、\"有哪些风格\"）或查看特定风格详情（\"看看Vercel风格\"）。**不触发：用户未指定风格的一般设计请求**（如\"设计一个页面\"、\"创建UI\"等不会触发此技能）。\n---\n\n# Awesome Design Skill\n\n根据用户指定的设计风格，从 design-md 风格库中选择对应的设计系统作为 UI 开发指导，并将 DESIGN.md 复制到当前工作目录。\n\n**重要：此技能仅在用户明确指定设计风格时触发。如果用户未指定风格，不要使用此技能。**\n\n## 字体说明\n\n所有设计风格的预览文件（preview.html、preview-dark.html）使用 **fonts.loli.net** 作为 Google Fonts 的镜像源，以优化中国大陆地区的访问体验。如需更换为其他字体源，可批量替换文件中的 `fonts.loli.net` 为其他镜像地址。\n\n## 自定义设计风格\n\n**design-md 目录中的内容可以自由添加或替换。** 你可以：\n\n- 添加自己喜欢的设计风格（只需在 `design-md/` 目录下创建新的风格文件夹和 DESIGN.md）\n- 替换现有风格的 DESIGN.md 内容\n- 删除不需要的风格\n\n这样你可以构建属于自己的设计风格库，让 Claude 使用你熟悉和偏好的设计系统。\n\n## 脚本文件\n\n| 脚本 | 用途 |\n|-----|------|\n| `scripts/list-styles.sh` | 列出所有可用的设计风格 |\n| `scripts/smart-select.sh [需求描述]` | 智能选择设计风格（根据需求关键词匹配，无匹配则随机） |\n| `scripts/random-style.sh` | 随机选择一个设计风格 |\n| `scripts/get-design.sh <风格名称>` | 获取指定风格的 DESIGN.md 路径 |\n| `scripts/copy-design.sh <风格名称> [目标目录]` | 复制 DESIGN.md 到指定目录（默认当前目录） |\n\n## 工作流程\n\n### 用户指定风格进行设计\n\n**前提：用户必须明确指定风格名称**\n\n1. 运行 `scripts/get-design.sh <风格名称>` 验证风格存在并获取路径\n2. 运行 `scripts/copy-design.sh <风格名称>` 复制 DESIGN.md 到当前目录\n3. 读取当前目录的 DESIGN.md 作为风格指导\n4. 告知用户使用的设计风格\n\n### 用户查看可用风格\n\n当用户询问\"有哪些风格\"、\"列出所有风格\"、\"查看可用设计风格\"时：\n\n运行 `scripts/list-styles.sh` 列出所有可用的设计风格，并展示给用户。\n\n### 用户查看特定风格详情\n\n当用户询问\"看看XX风格\"、\"查看XX风格的设计规范\"时：\n\n1. 运行 `scripts/get-design.sh <风格名称>` 获取风格路径\n2. 读取并展示该风格的设计规范概要\n\n### 用户重构现有页面（需指定风格）\n\n**前提：用户必须明确指定目标风格**\n\n当用户要求将现有页面改为某种风格时（如\"将index.html改为airbnb的风格\"、\"用Vercel风格重构这个页面\"）：\n\n1. 首先读取用户指定的现有页面文件，理解其当前结构和内容\n2. 运行 `scripts/get-design.sh <目标风格>` 验证风格存在\n3. 运行 `scripts/copy-design.sh <目标风格>` 复制到当前目录\n4. 读取 DESIGN.md 作为风格指导\n5. 根据新风格的设计系统，重构页面的：\n   - 颜色方案（背景、文字、强调色等）\n   - 字体排版（字体家族、字号、行高等）\n   - 间距系统（边距、内边距、元素间距）\n   - 阴影和圆角\n   - 组件样式（按钮、卡片、表单等）\n   - 动画效果\n6. 保持页面原有的功能和内容结构，仅改变视觉风格\n7. 告知用户重构完成及主要变化\n\n## 可用设计风格关键词\n\n用户指定风格时可以使用以下关键词：\n\n| 风格名称 | 适用场景 |\n|---------|---------|\n| linear.app | 项目管理、任务工具、深色主题 |\n| apple | 产品展示、高端简洁、消费电子 |\n| stripe | 支付、金融科技、企业级 |\n| vercel | 开发者工具、深色主题 |\n| spotify | 音乐、媒体播放器 |\n| notion | 协作、文档工具 |\n| figma | 设计工具、创意平台 |\n| airbnb | 旅行、预订、民宿 |\n| coinbase | 加密货币、区块链 |\n| claude | AI产品、对话界面 |\n| cursor | 开发者工具、代码编辑器 |\n| posthog | 数据分析、监控仪表板 |\n| framer | 设计工具、创意平台 |\n\n...以及更多风格，使用 `scripts/list-styles.sh` 查看完整列表。\n\n## DESIGN.md 文件结构\n\n每个 DESIGN.md 包含：\n- Overview - 设计概述\n- Colors - 颜色系统\n- Typography - 字体排版\n- Spacing - 间距系统\n- Shadows - 阴影效果\n- Border Radius - 圆角设置\n- Components - 组件样式\n- Animations - 动画效果\n\n## 输出格式\n\n完成设计后，告知用户：\n1. 使用的设计风格名称\n2. 主要设计特点概述\n3. 生成的文件列表\n\nFile v1.2.0:design-md/airbnb/README.md\n\n# Airbnb Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) extracted from the public [airbnb](https://airbnb.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airbnb Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-dark-screenshot.png)\n\n### Light Mode\n![Airbnb Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-screenshot.png)\n\nFile v1.2.0:design-md/airtable/README.md\n\n# Airtable Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) extracted from the public [airtable](https://airtable.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airtable Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-dark-screenshot.png)\n\n### Light Mode\n![Airtable Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-screenshot.png)\n\nFile v1.2.0:design-md/apple/README.md\n\n# Apple Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) extracted from the public [apple](https://apple.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Apple Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-dark-screenshot.png)\n\n### Light Mode\n![Apple Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-screenshot.png)\n\nFile v1.2.0:design-md/bmw/README.md\n\n# Bmw Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) extracted from the public [bmw](https://bmw.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Bmw design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Bmw Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-dark-screenshot.png)\n\n### Light Mode\n![Bmw Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-screenshot.png)\n\nFile v1.2.0:design-md/cal/README.md\n\n# Cal Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) extracted from the public [cal](https://cal.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cal design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cal Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cal/preview-dark-screenshot.png)\n\n### Light Mode\n![Cal Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cal/preview-screenshot.png)\n\nFile v1.2.0:design-md/claude/README.md\n\n# Claude Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) extracted from the public [claude](https://claude.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Claude design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Claude Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/claude/preview-dark-screenshot.png)\n\n### Light Mode\n![Claude Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/claude/preview-screenshot.png)\n\nFile v1.2.0:design-md/clay/README.md\n\n# Clay Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) extracted from the public [clay](https://clay.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Clay design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Clay Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-dark-screenshot.png)\n\n### Light Mode\n![Clay Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-screenshot.png)\n\nFile v1.2.0:design-md/clickhouse/README.md\n\n# ClickHouse Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) extracted from the public [clickhouse](https://clickhouse.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the ClickHouse design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![ClickHouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png)\n\n### Light Mode\n![ClickHouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png)\n\nFile v1.2.0:design-md/cohere/README.md\n\n# Cohere Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) extracted from the public [cohere](https://cohere.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cohere design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cohere Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cohere/preview-dark-screenshot.png)\n\n### Light Mode\n![Cohere Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cohere/preview-screenshot.png)\n\nFile v1.2.0:design-md/coinbase/README.md\n\n# Coinbase Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) extracted from the public [coinbase](https://coinbase.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Coinbase design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Coinbase Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-dark-screenshot.png)\n\n### Light Mode\n![Coinbase Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-screenshot.png)\n\nFile v1.2.0:design-md/composio/README.md\n\n# Composio Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) extracted from the public [composio](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Composio design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Composio Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-dark-screenshot.png)\n\n### Light Mode\n![Composio Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-screenshot.png)\n\nArchive v1.1.0: 225 files, 971877 bytes\n\nFiles: design-md/airbnb/DESIGN.md (13405b), design-md/airbnb/preview-dark.html (18805b), design-md/airbnb/preview.html (18629b), design-md/airbnb/README.md (1275b), design-md/airtable/DESIGN.md (3541b), design-md/airtable/preview-dark.html (15209b), design-md/airtable/preview.html (15028b), design-md/airtable/README.md (1295b), design-md/apple/DESIGN.md (18742b), design-md/apple/preview-dark.html (27567b), design-md/apple/preview.html (27673b), design-md/apple/README.md (1266b), design-md/bmw/DESIGN.md (8930b), design-md/bmw/preview-dark.html (15498b), design-md/bmw/preview.html (15341b), design-md/bmw/README.md (1245b), design-md/cal/DESIGN.md (15762b), design-md/cal/preview-dark.html (23757b), design-md/cal/preview.html (25562b), design-md/cal/README.md (1245b), design-md/claude/DESIGN.md (18835b), design-md/claude/preview-dark.html (31906b), design-md/claude/preview.html (32544b), design-md/claude/README.md (1275b), design-md/clay/DESIGN.md (16941b), design-md/clay/preview-dark.html (23855b), design-md/clay/preview.html (23681b), design-md/clay/README.md (1255b), design-md/clickhouse/DESIGN.md (14619b), design-md/clickhouse/preview-dark.html (32290b), design-md/clickhouse/preview.html (30433b), design-md/clickhouse/README.md (1316b), design-md/cohere/DESIGN.md (13837b), design-md/cohere/preview-dark.html (30807b), design-md/cohere/preview.html (30904b), design-md/cohere/README.md (1276b), design-md/coinbase/DESIGN.md (5015b), design-md/coinbase/preview-dark.html (15276b), design-md/coinbase/preview.html (15121b), design-md/coinbase/README.md (1295b), design-md/composio/DESIGN.md (19415b), design-md/composio/preview-dark.html (34743b), design-md/composio/preview.html (34204b), design-md/composio/README.md (1296b), design-md/cursor/DESIGN.md (18673b), design-md/cursor/preview-dark.html (27839b), design-md/cursor/preview.html (27728b), design-md/cursor/README.md (1276b), design-md/elevenlabs/DESIGN.md (14301b), design-md/elevenlabs/preview-dark.html (20041b), design-md/elevenlabs/preview.html (19859b), design-md/elevenlabs/README.md (1314b), design-md/expo/DESIGN.md (16730b), design-md/expo/preview-dark.html (29616b), design-md/expo/preview.html (29731b), design-md/expo/README.md (1256b), design-md/figma/DESIGN.md (10633b), design-md/figma/preview-dark.html (31728b), design-md/figma/preview.html (31938b), design-md/figma/README.md (1266b), design-md/framer/DESIGN.md (16394b), design-md/framer/preview-dark.html (30452b), design-md/framer/preview.html (30024b), design-md/framer/README.md (1275b), design-md/hashicorp/DESIGN.md (15455b), design-md/hashicorp/preview-dark.html (41940b), design-md/hashicorp/preview.html (42158b), design-md/hashicorp/README.md (1306b), design-md/ibm/DESIGN.md (19430b), design-md/ibm/preview-dark.html (27709b), design-md/ibm/preview.html (27420b), design-md/ibm/README.md (1246b), design-md/intercom/DESIGN.md (6443b), design-md/intercom/preview-dark.html (17473b), design-md/intercom/preview.html (17298b), design-md/intercom/README.md (1295b), design-md/kraken/DESIGN.md (4448b), design-md/kraken/preview-dark.html (15695b), design-md/kraken/preview.html (15516b), design-md/kraken/README.md (1275b)\n\nFile v1.1.0:SKILL.md\n\n---\nname: awesome-design-skill\ndescription: UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如\"用Linear风格设计\"、\"使用Apple风格创建页面\"、\"按Stripe风格重构\"）。也用于用户询问可用设计风格列表（\"列出所有风格\"、\"有哪些风格\"）或查看特定风格详情（\"看看Vercel风格\"）。**不触发：用户未指定风格的一般设计请求**（如\"设计一个页面\"、\"创建UI\"等不会触发此技能）。\n---\n\n# Awesome Design Skill\n\n根据用户指定的设计风格，从 design-md 风格库中选择对应的设计系统作为 UI 开发指导，并将 DESIGN.md 复制到当前工作目录。\n\n**重要：此技能仅在用户明确指定设计风格时触发。如果用户未指定风格，不要使用此技能。**\n\n## 自定义设计风格\n\n**design-md 目录中的内容可以自由添加或替换。** 你可以：\n\n- 添加自己喜欢的设计风格（只需在 `design-md/` 目录下创建新的风格文件夹和 DESIGN.md）\n- 替换现有风格的 DESIGN.md 内容\n- 删除不需要的风格\n\n这样你可以构建属于自己的设计风格库，让 Claude 使用你熟悉和偏好的设计系统。\n\n## 脚本文件\n\n| 脚本 | 用途 |\n|-----|------|\n| `scripts/list-styles.sh` | 列出所有可用的设计风格 |\n| `scripts/smart-select.sh [需求描述]` | 智能选择设计风格（根据需求关键词匹配，无匹配则随机） |\n| `scripts/random-style.sh` | 随机选择一个设计风格 |\n| `scripts/get-design.sh <风格名称>` | 获取指定风格的 DESIGN.md 路径 |\n| `scripts/copy-design.sh <风格名称> [目标目录]` | 复制 DESIGN.md 到指定目录（默认当前目录） |\n\n## 工作流程\n\n### 用户指定风格进行设计\n\n**前提：用户必须明确指定风格名称**\n\n1. 运行 `scripts/get-design.sh <风格名称>` 验证风格存在并获取路径\n2. 运行 `scripts/copy-design.sh <风格名称>` 复制 DESIGN.md 到当前目录\n3. 读取当前目录的 DESIGN.md 作为风格指导\n4. 告知用户使用的设计风格\n\n### 用户查看可用风格\n\n当用户询问\"有哪些风格\"、\"列出所有风格\"、\"查看可用设计风格\"时：\n\n运行 `scripts/list-styles.sh` 列出所有可用的设计风格，并展示给用户。\n\n### 用户查看特定风格详情\n\n当用户询问\"看看XX风格\"、\"查看XX风格的设计规范\"时：\n\n1. 运行 `scripts/get-design.sh <风格名称>` 获取风格路径\n2. 读取并展示该风格的设计规范概要\n\n### 用户重构现有页面（需指定风格）\n\n**前提：用户必须明确指定目标风格**\n\n当用户要求将现有页面改为某种风格时（如\"将index.html改为airbnb的风格\"、\"用Vercel风格重构这个页面\"）：\n\n1. 首先读取用户指定的现有页面文件，理解其当前结构和内容\n2. 运行 `scripts/get-design.sh <目标风格>` 验证风格存在\n3. 运行 `scripts/copy-design.sh <目标风格>` 复制到当前目录\n4. 读取 DESIGN.md 作为风格指导\n5. 根据新风格的设计系统，重构页面的：\n   - 颜色方案（背景、文字、强调色等）\n   - 字体排版（字体家族、字号、行高等）\n   - 间距系统（边距、内边距、元素间距）\n   - 阴影和圆角\n   - 组件样式（按钮、卡片、表单等）\n   - 动画效果\n6. 保持页面原有的功能和内容结构，仅改变视觉风格\n7. 告知用户重构完成及主要变化\n\n## 可用设计风格关键词\n\n用户指定风格时可以使用以下关键词：\n\n| 风格名称 | 适用场景 |\n|---------|---------|\n| linear.app | 项目管理、任务工具、深色主题 |\n| apple | 产品展示、高端简洁、消费电子 |\n| stripe | 支付、金融科技、企业级 |\n| vercel | 开发者工具、深色主题 |\n| spotify | 音乐、媒体播放器 |\n| notion | 协作、文档工具 |\n| figma | 设计工具、创意平台 |\n| airbnb | 旅行、预订、民宿 |\n| coinbase | 加密货币、区块链 |\n| claude | AI产品、对话界面 |\n| cursor | 开发者工具、代码编辑器 |\n| posthog | 数据分析、监控仪表板 |\n| framer | 设计工具、创意平台 |\n\n...以及更多风格，使用 `scripts/list-styles.sh` 查看完整列表。\n\n## DESIGN.md 文件结构\n\n每个 DESIGN.md 包含：\n- Overview - 设计概述\n- Colors - 颜色系统\n- Typography - 字体排版\n- Spacing - 间距系统\n- Shadows - 阴影效果\n- Border Radius - 圆角设置\n- Components - 组件样式\n- Animations - 动画效果\n\n## 输出格式\n\n完成设计后，告知用户：\n1. 使用的设计风格名称\n2. 主要设计特点概述\n3. 生成的文件列表\n\nFile v1.1.0:design-md/airbnb/README.md\n\n# Airbnb Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) extracted from the public [airbnb](https://airbnb.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airbnb Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-dark-screenshot.png)\n\n### Light Mode\n![Airbnb Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-screenshot.png)\n\nFile v1.1.0:design-md/airtable/README.md\n\n# Airtable Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) extracted from the public [airtable](https://airtable.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airtable Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-dark-screenshot.png)\n\n### Light Mode\n![Airtable Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-screenshot.png)\n\nFile v1.1.0:design-md/apple/README.md\n\n# Apple Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) extracted from the public [apple](https://apple.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Apple Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-dark-screenshot.png)\n\n### Light Mode\n![Apple Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-screenshot.png)\n\nFile v1.1.0:design-md/bmw/README.md\n\n# Bmw Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) extracted from the public [bmw](https://bmw.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Bmw design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Bmw Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-dark-screenshot.png)\n\n### Light Mode\n![Bmw Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-screenshot.png)\n\nFile v1.1.0:design-md/cal/README.md\n\n# Cal Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) extracted from the public [cal](https://cal.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cal design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cal Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cal/preview-dark-screenshot.png)\n\n### Light Mode\n![Cal Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cal/preview-screenshot.png)\n\nFile v1.1.0:design-md/claude/README.md\n\n# Claude Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) extracted from the public [claude](https://claude.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Claude design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Claude Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/claude/preview-dark-screenshot.png)\n\n### Light Mode\n![Claude Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/claude/preview-screenshot.png)\n\nFile v1.1.0:design-md/clay/README.md\n\n# Clay Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) extracted from the public [clay](https://clay.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Clay design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Clay Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-dark-screenshot.png)\n\n### Light Mode\n![Clay Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-screenshot.png)\n\nFile v1.1.0:design-md/clickhouse/README.md\n\n# ClickHouse Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) extracted from the public [clickhouse](https://clickhouse.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the ClickHouse design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![ClickHouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png)\n\n### Light Mode\n![ClickHouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png)\n\nFile v1.1.0:design-md/cohere/README.md\n\n# Cohere Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) extracted from the public [cohere](https://cohere.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cohere design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cohere Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cohere/preview-dark-screenshot.png)\n\n### Light Mode\n![Cohere Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cohere/preview-screenshot.png)\n\nFile v1.1.0:design-md/coinbase/README.md\n\n# Coinbase Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) extracted from the public [coinbase](https://coinbase.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Coinbase design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Coinbase Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-dark-screenshot.png)\n\n### Light Mode\n![Coinbase Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-screenshot.png)\n\nFile v1.1.0:design-md/composio/README.md\n\n# Composio Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) extracted from the public [composio](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Composio design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Composio Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-dark-screenshot.png)\n\n### Light Mode\n![Composio Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-screenshot.png)\n\nArchive v1.0.1: 225 files, 971754 bytes\n\nFiles: design-md/airbnb/DESIGN.md (13405b), design-md/airbnb/preview-dark.html (18805b), design-md/airbnb/preview.html (18629b), design-md/airbnb/README.md (1275b), design-md/airtable/DESIGN.md (3541b), design-md/airtable/preview-dark.html (15209b), design-md/airtable/preview.html (15028b), design-md/airtable/README.md (1295b), design-md/apple/DESIGN.md (18742b), design-md/apple/preview-dark.html (27567b), design-md/apple/preview.html (27673b), design-md/apple/README.md (1266b), design-md/bmw/DESIGN.md (8930b), design-md/bmw/preview-dark.html (15498b), design-md/bmw/preview.html (15341b), design-md/bmw/README.md (1245b), design-md/cal/DESIGN.md (15762b), design-md/cal/preview-dark.html (23757b), design-md/cal/preview.html (25562b), design-md/cal/README.md (1245b), design-md/claude/DESIGN.md (18835b), design-md/claude/preview-dark.html (31906b), design-md/claude/preview.html (32544b), design-md/claude/README.md (1275b), design-md/clay/DESIGN.md (16941b), design-md/clay/preview-dark.html (23855b), design-md/clay/preview.html (23681b), design-md/clay/README.md (1255b), design-md/clickhouse/DESIGN.md (14619b), design-md/clickhouse/preview-dark.html (32290b), design-md/clickhouse/preview.html (30433b), design-md/clickhouse/README.md (1316b), design-md/cohere/DESIGN.md (13837b), design-md/cohere/preview-dark.html (30807b), design-md/cohere/preview.html (30904b), design-md/cohere/README.md (1276b), design-md/coinbase/DESIGN.md (5015b), design-md/coinbase/preview-dark.html (15276b), design-md/coinbase/preview.html (15121b), design-md/coinbase/README.md (1295b), design-md/composio/DESIGN.md (19415b), design-md/composio/preview-dark.html (34743b), design-md/composio/preview.html (34204b), design-md/composio/README.md (1296b), design-md/cursor/DESIGN.md (18673b), design-md/cursor/preview-dark.html (27839b), design-md/cursor/preview.html (27728b), design-md/cursor/README.md (1276b), design-md/elevenlabs/DESIGN.md (14301b), design-md/elevenlabs/preview-dark.html (20041b), design-md/elevenlabs/preview.html (19859b), design-md/elevenlabs/README.md (1314b), design-md/expo/DESIGN.md (16730b), design-md/expo/preview-dark.html (29616b), design-md/expo/preview.html (29731b), design-md/expo/README.md (1256b), design-md/figma/DESIGN.md (10633b), design-md/figma/preview-dark.html (31728b), design-md/figma/preview.html (31938b), design-md/figma/README.md (1266b), design-md/framer/DESIGN.md (16394b), design-md/framer/preview-dark.html (30452b), design-md/framer/preview.html (30024b), design-md/framer/README.md (1275b), design-md/hashicorp/DESIGN.md (15455b), design-md/hashicorp/preview-dark.html (41940b), design-md/hashicorp/preview.html (42158b), design-md/hashicorp/README.md (1306b), design-md/ibm/DESIGN.md (19430b), design-md/ibm/preview-dark.html (27709b), design-md/ibm/preview.html (27420b), design-md/ibm/README.md (1246b), design-md/intercom/DESIGN.md (6443b), design-md/intercom/preview-dark.html (17473b), design-md/intercom/preview.html (17298b), design-md/intercom/README.md (1295b), design-md/kraken/DESIGN.md (4448b), design-md/kraken/preview-dark.html (15695b), design-md/kraken/preview.html (15516b), design-md/kraken/README.md (1275b)\n\nFile v1.0.1:SKILL.md\n\n---\nname: awesome-design-skill\ndescription: UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。当用户要求\"设计页面\"、\"制作页面\"、\"创建UI\"、\"设计界面\"、\"用XX风格设计\"等任务时触发此skill。也用于用户询问可用设计风格列表。**重构场景**：当用户要求\"将XX改为YY风格\"、\"用YY风格重构XX\"、\"重新设计XX页面\"等涉及现有页面风格改造的任务时也触发此skill。\n---\n\n# Awesome Design Skill\n\n根据用户需求，从 design-md 风格库中选择合适的设计系统作为 UI 开发指导，并将 DESIGN.md 复制到当前工作目录。\n\n## 脚本文件\n\n| 脚本 | 用途 |\n|-----|------|\n| `scripts/list-styles.sh` | 列出所有可用的设计风格 |\n| `scripts/smart-select.sh [需求描述]` | 智能选择设计风格（根据需求关键词匹配，无匹配则随机） |\n| `scripts/random-style.sh` | 随机选择一个设计风格 |\n| `scripts/get-design.sh <风格名称>` | 获取指定风格的 DESIGN.md 路径 |\n| `scripts/copy-design.sh <风格名称> [目标目录]` | 复制 DESIGN.md 到指定目录（默认当前目录） |\n\n## 工作流程\n\n### 用户指定风格\n1. 运行 `scripts/get-design.sh <风格名称>` 验证风格存在并获取路径\n2. 运行 `scripts/copy-design.sh <风格名称>` 复制 DESIGN.md 到当前目录\n3. 读取当前目录的 DESIGN.md 作为风格指导\n4. 告知用户使用的设计风格\n\n### 用户未指定风格\n\n**重要：优先检查项目现有设计规范**\n\n1. **首先检查项目目录是否存在 DESIGN.md**：\n   - 检查当前工作目录是否有 DESIGN.md 文件\n   - 如果存在，**必须直接使用这个文件中的设计规范**，禁止选择本 skill 中的其他风格或随机风格\n   - 读取项目的 DESIGN.md 作为风格指导\n   - 告知用户使用的是项目现有的设计规范\n\n2. **如果项目目录不存在 DESIGN.md**，则进行智能匹配：\n   - **分析用户需求**：理解用户要设计什么类型的页面/产品\n   - **智能匹配风格**：运行 `scripts/smart-select.sh \"<需求描述>\"` 根据关键词匹配\n     - 例如：`scripts/smart-select.sh \"设计一个项目管理dashboard\"`\n     - 例如：`scripts/smart-select.sh \"做一个音乐播放器界面\"`\n     - 例如：`scripts/smart-select.sh \"创建企业级支付页面\"`\n   - 如果智能匹配未能找到合适风格，则使用 `scripts/random-style.sh` 随机选择\n   - 运行 `scripts/copy-design.sh <选中的风格>` 复制 DESIGN.md 到当前目录\n   - 读取 DESIGN.md 作为风格指导\n   - **告知用户选择的设计风格及原因**\n\n### 智能匹配关键词参考\n\n根据用户需求中的关键词选择合适的风格：\n\n| 需求类型 | 推荐风格 | 关键词 |\n|---------|---------|--------|\n| 项目管理/任务工具 | linear.app | 项目管理、issue、任务、看板、dashboard |\n| 支付/金融科技 | stripe | 支付、金融、fintech、api、企业级 |\n| 高端产品展示 | apple | 产品页、高端、简洁、landing、消费电子 |\n| 音乐/媒体播放 | spotify | 音乐、播放器、media、音频 |\n| 协作/文档工具 | notion | 笔记、文档、协作、workspace |\n| 设计/创意工具 | figma, framer | 设计、协作、creative、创意 |\n| 开发者工具 | vercel, cursor | 开发者、代码、terminal、编辑器 |\n| AI产品 | claude | AI、人工智能、对话、助手、llm |\n| 深色主题 | linear.app, vercel | 暗黑、深色、dark mode |\n| 浅色主题 | apple, notion | 浅色、亮色、light mode |\n| 旅行/预订 | airbnb | 旅行、民宿、预订、booking |\n| 加密货币 | coinbase | 加密、crypto、区块链 |\n| 数据分析 | posthog | 数据分析、analytics、监控 |\n\n### 用户查看可用风格\n运行 `scripts/list-styles.sh` 列出所有可用的设计风格。\n\n### 用户重构现有页面\n当用户要求将现有页面改为某种风格时（如\"将index.html改为airbnb的风格\"）：\n1. 首先读取用户指定的现有页面文件，理解其当前结构和内容\n2. 如果用户指定了目标风格：\n   - 运行 `scripts/get-design.sh <目标风格>` 验证风格存在\n   - 运行 `scripts/copy-design.sh <目标风格>` 复制到当前目录\n3. 如果用户未指定目标风格（如\"重新设计这个页面\"）：\n   - **首先检查项目目录是否存在 DESIGN.md**\n   - 如果存在，**必须直接使用项目现有的设计规范**，禁止选择其他风格\n   - 如果不存在，分析页面内容和用途，使用智能匹配选择合适的风格\n4. 读取 DESIGN.md 作为风格指导\n5. 根据新风格的设计系统，重构页面的：\n   - 颜色方案（背景、文字、强调色等）\n   - 字体排版（字体家族、字号、行高等）\n   - 间距系统（边距、内边距、元素间距）\n   - 阴影和圆角\n   - 组件样式（按钮、卡片、表单等）\n   - 动画效果\n6. 保持页面原有的功能和内容结构，仅改变视觉风格\n7. 告知用户重构完成及主要变化\n\n## DESIGN.md 文件结构\n\n每个 DESIGN.md 包含：\n- Overview - 设计概述\n- Colors - 颜色系统\n- Typography - 字体排版\n- Spacing - 间距系统\n- Shadows - 阴影效果\n- Border Radius - 圆角设置\n- Components - 组件样式\n- Animations - 动画效果\n\n## 输出格式\n\n完成设计后，告知用户：\n1. 使用的设计风格名称\n2. 选择该风格的原因（如果是智能匹配）\n3. 主要设计特点概述\n4. 生成的文件列表\n\nFile v1.0.1:design-md/airbnb/README.md\n\n# Airbnb Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) extracted from the public [airbnb](https://airbnb.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airbnb Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-dark-screenshot.png)\n\n### Light Mode\n![Airbnb Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-screenshot.png)\n\nFile v1.0.1:design-md/airtable/README.md\n\n# Airtable Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) extracted from the public [airtable](https://airtable.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airtable Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-dark-screenshot.png)\n\n### Light Mode\n![Airtable Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-screenshot.png)\n\nFile v1.0.1:design-md/apple/README.md\n\n# Apple Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) extracted from the public [apple](https://apple.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Apple Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-dark-screenshot.png)\n\n### Light Mode\n![Apple Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-screenshot.png)\n\nFile v1.0.1:design-md/bmw/README.md\n\n# Bmw Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) extracted from the public [bmw](https://bmw.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Bmw design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Bmw Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-dark-screenshot.png)\n\n### Light Mode\n![Bmw Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-screenshot.png)\n\nFile v1.0.1:design-md/cal/README.md\n\n# Cal Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) extracted from the public [cal](https://cal.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cal design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cal Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cal/preview-dark-screenshot.png)\n\n### Light Mode\n![Cal Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cal/preview-screenshot.png)\n\nFile v1.0.1:design-md/claude/README.md\n\n# Claude Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) extracted from the public [claude](https://claude.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Claude design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Claude Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/claude/preview-dark-screenshot.png)\n\n### Light Mode\n![Claude Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/claude/preview-screenshot.png)\n\nFile v1.0.1:design-md/clay/README.md\n\n# Clay Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) extracted from the public [clay](https://clay.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Clay design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Clay Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-dark-screenshot.png)\n\n### Light Mode\n![Clay Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-screenshot.png)\n\nFile v1.0.1:design-md/clickhouse/README.md\n\n# ClickHouse Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) extracted from the public [clickhouse](https://clickhouse.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the ClickHouse design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![ClickHouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png)\n\n### Light Mode\n![ClickHouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png)\n\nFile v1.0.1:design-md/cohere/README.md\n\n# Cohere Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) extracted from the public [cohere](https://cohere.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cohere design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cohere Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cohere/preview-dark-screenshot.png)\n\n### Light Mode\n![Cohere Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cohere/preview-screenshot.png)\n\nFile v1.0.1:design-md/coinbase/README.md\n\n# Coinbase Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) extracted from the public [coinbase](https://coinbase.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Coinbase design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Coinbase Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-dark-screenshot.png)\n\n### Light Mode\n![Coinbase Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-screenshot.png)\n\nFile v1.0.1:design-md/composio/README.md\n\n# Composio Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) extracted from the public [composio](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Composio design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Composio Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-dark-screenshot.png)\n\n### Light Mode\n![Composio Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-screenshot.png)\n\nArchive v1.0.0: 225 files, 971626 bytes\n\nFiles: design-md/airbnb/DESIGN.md (13405b), design-md/airbnb/preview-dark.html (18805b), design-md/airbnb/preview.html (18629b), design-md/airbnb/README.md (1275b), design-md/airtable/DESIGN.md (3541b), design-md/airtable/preview-dark.html (15209b), design-md/airtable/preview.html (15028b), design-md/airtable/README.md (1295b), design-md/apple/DESIGN.md (18742b), design-md/apple/preview-dark.html (27567b), design-md/apple/preview.html (27673b), design-md/apple/README.md (1266b), design-md/bmw/DESIGN.md (8930b), design-md/bmw/preview-dark.html (15498b), design-md/bmw/preview.html (15341b), design-md/bmw/README.md (1245b), design-md/cal/DESIGN.md (15762b), design-md/cal/preview-dark.html (23757b), design-md/cal/preview.html (25562b), design-md/cal/README.md (1245b), design-md/claude/DESIGN.md (18835b), design-md/claude/preview-dark.html (31906b), design-md/claude/preview.html (32544b), design-md/claude/README.md (1275b), design-md/clay/DESIGN.md (16941b), design-md/clay/preview-dark.html (23855b), design-md/clay/preview.html (23681b), design-md/clay/README.md (1255b), design-md/clickhouse/DESIGN.md (14619b), design-md/clickhouse/preview-dark.html (32290b), design-md/clickhouse/preview.html (30433b), design-md/clickhouse/README.md (1316b), design-md/cohere/DESIGN.md (13837b), design-md/cohere/preview-dark.html (30807b), design-md/cohere/preview.html (30904b), design-md/cohere/README.md (1276b), design-md/coinbase/DESIGN.md (5015b), design-md/coinbase/preview-dark.html (15276b), design-md/coinbase/preview.html (15121b), design-md/coinbase/README.md (1295b), design-md/composio/DESIGN.md (19415b), design-md/composio/preview-dark.html (34743b), design-md/composio/preview.html (34204b), design-md/composio/README.md (1296b), design-md/cursor/DESIGN.md (18673b), design-md/cursor/preview-dark.html (27839b), design-md/cursor/preview.html (27728b), design-md/cursor/README.md (1276b), design-md/elevenlabs/DESIGN.md (14301b), design-md/elevenlabs/preview-dark.html (20041b), design-md/elevenlabs/preview.html (19859b), design-md/elevenlabs/README.md (1314b), design-md/expo/DESIGN.md (16730b), design-md/expo/preview-dark.html (29616b), design-md/expo/preview.html (29731b), design-md/expo/README.md (1256b), design-md/figma/DESIGN.md (10633b), design-md/figma/preview-dark.html (31728b), design-md/figma/preview.html (31938b), design-md/figma/README.md (1266b), design-md/framer/DESIGN.md (16394b), design-md/framer/preview-dark.html (30452b), design-md/framer/preview.html (30024b), design-md/framer/README.md (1275b), design-md/hashicorp/DESIGN.md (15455b), design-md/hashicorp/preview-dark.html (41940b), design-md/hashicorp/preview.html (42158b), design-md/hashicorp/README.md (1306b), design-md/ibm/DESIGN.md (19430b), design-md/ibm/preview-dark.html (27709b), design-md/ibm/preview.html (27420b), design-md/ibm/README.md (1246b), design-md/intercom/DESIGN.md (6443b), design-md/intercom/preview-dark.html (17473b), design-md/intercom/preview.html (17298b), design-md/intercom/README.md (1295b), design-md/kraken/DESIGN.md (4448b), design-md/kraken/preview-dark.html (15695b), design-md/kraken/preview.html (15516b), design-md/kraken/README.md (1275b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: awesome-design-skill\ndescription: UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。当用户要求\"设计页面\"、\"制作页面\"、\"创建UI\"、\"设计界面\"、\"用XX风格设计\"等任务时触发此skill。也用于用户询问可用设计风格列表。**重构场景**：当用户要求\"将XX改为YY风格\"、\"用YY风格重构XX\"、\"重新设计XX页面\"等涉及现有页面风格改造的任务时也触发此skill。\n---\n\n# Awesome Design Skill\n\n根据用户需求，从 design-md 风格库中选择合适的设计系统作为 UI 开发指导，并将 DESIGN.md 复制到当前工作目录。\n\n## 脚本文件\n\n| 脚本 | 用途 |\n|-----|------|\n| `scripts/list-styles.sh` | 列出所有可用的设计风格 |\n| `scripts/smart-select.sh [需求描述]` | 智能选择设计风格（根据需求关键词匹配，无匹配则随机） |\n| `scripts/random-style.sh` | 随机选择一个设计风格 |\n| `scripts/get-design.sh <风格名称>` | 获取指定风格的 DESIGN.md 路径 |\n| `scripts/copy-design.sh <风格名称> [目标目录]` | 复制 DESIGN.md 到指定目录（默认当前目录） |\n\n## 工作流程\n\n### 用户指定风格\n1. 运行 `scripts/get-design.sh <风格名称>` 验证风格存在并获取路径\n2. 运行 `scripts/copy-design.sh <风格名称>` 复制 DESIGN.md 到当前目录\n3. 读取当前目录的 DESIGN.md 作为风格指导\n4. 告知用户使用的设计风格\n\n### 用户未指定风格\n\n**重要：优先检查项目现有设计规范**\n\n1. **首先检查项目目录是否存在 DESIGN.md**：\n   - 检查当前工作目录是否有 DESIGN.md 文件\n   - 如果存在，**必须直接使用这个文件中的设计规范**，禁止选择本 skill 中的其他风格或随机风格\n   - 读取项目的 DESIGN.md 作为风格指导\n   - 告知用户使用的是项目现有的设计规范\n\n2. **如果项目目录不存在 DESIGN.md**，则进行智能匹配：\n   - **分析用户需求**：理解用户要设计什么类型的页面/产品\n   - **智能匹配风格**：运行 `scripts/smart-select.sh \"<需求描述>\"` 根据关键词匹配\n     - 例如：`scripts/smart-select.sh \"设计一个项目管理dashboard\"`\n     - 例如：`scripts/smart-select.sh \"做一个音乐播放器界面\"`\n     - 例如：`scripts/smart-select.sh \"创建企业级支付页面\"`\n   - 如果智能匹配未能找到合适风格，则使用 `scripts/random-style.sh` 随机选择\n   - 运行 `scripts/copy-design.sh <选中的风格>` 复制 DESIGN.md 到当前目录\n   - 读取 DESIGN.md 作为风格指导\n   - **告知用户选择的设计风格及原因**\n\n### 智能匹配关键词参考\n\n根据用户需求中的关键词选择合适的风格：\n\n| 需求类型 | 推荐风格 | 关键词 |\n|---------|---------|--------|\n| 项目管理/任务工具 | linear.app | 项目管理、issue、任务、看板、dashboard |\n| 支付/金融科技 | stripe | 支付、金融、fintech、api、企业级 |\n| 高端产品展示 | apple | 产品页、高端、简洁、landing、消费电子 |\n| 音乐/媒体播放 | spotify | 音乐、播放器、media、音频 |\n| 协作/文档工具 | notion | 笔记、文档、协作、workspace |\n| 设计/创意工具 | figma, framer | 设计、协作、creative、创意 |\n| 开发者工具 | vercel, cursor | 开发者、代码、terminal、编辑器 |\n| AI产品 | claude | AI、人工智能、对话、助手、llm |\n| 深色主题 | linear.app, vercel | 暗黑、深色、dark mode |\n| 浅色主题 | apple, notion | 浅色、亮色、light mode |\n| 旅行/预订 | airbnb | 旅行、民宿、预订、booking |\n| 加密货币 | coinbase | 加密、crypto、区块链 |\n| 数据分析 | posthog | 数据分析、analytics、监控 |\n\n### 用户查看可用风格\n运行 `scripts/list-styles.sh` 列出所有可用的设计风格。\n\n### 用户重构现有页面\n当用户要求将现有页面改为某种风格时（如\"将index.html改为airbnb的风格\"）：\n1. 首先读取用户指定的现有页面文件，理解其当前结构和内容\n2. 如果用户指定了目标风格：\n   - 运行 `scripts/get-design.sh <目标风格>` 验证风格存在\n   - 运行 `scripts/copy-design.sh <目标风格>` 复制到当前目录\n3. 如果用户未指定目标风格（如\"重新设计这个页面\"）：\n   - **首先检查项目目录是否存在 DESIGN.md**\n   - 如果存在，**必须直接使用项目现有的设计规范**，禁止选择其他风格\n   - 如果不存在，分析页面内容和用途，使用智能匹配选择合适的风格\n4. 读取 DESIGN.md 作为风格指导\n5. 根据新风格的设计系统，重构页面的：\n   - 颜色方案（背景、文字、强调色等）\n   - 字体排版（字体家族、字号、行高等）\n   - 间距系统（边距、内边距、元素间距）\n   - 阴影和圆角\n   - 组件样式（按钮、卡片、表单等）\n   - 动画效果\n6. 保持页面原有的功能和内容结构，仅改变视觉风格\n7. 告知用户重构完成及主要变化\n\n## DESIGN.md 文件结构\n\n每个 DESIGN.md 包含：\n- Overview - 设计概述\n- Colors - 颜色系统\n- Typography - 字体排版\n- Spacing - 间距系统\n- Shadows - 阴影效果\n- Border Radius - 圆角设置\n- Components - 组件样式\n- Animations - 动画效果\n\n## 输出格式\n\n完成设计后，告知用户：\n1. 使用的设计风格名称\n2. 选择该风格的原因（如果是智能匹配）\n3. 主要设计特点概述\n4. 生成的文件列表\n\nFile v1.0.0:design-md/airbnb/README.md\n\n# Airbnb Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) extracted from the public [airbnb](https://airbnb.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airbnb Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-dark-screenshot.png)\n\n### Light Mode\n![Airbnb Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-screenshot.png)\n\nFile v1.0.0:design-md/airtable/README.md\n\n# Airtable Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) extracted from the public [airtable](https://airtable.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airtable Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-dark-screenshot.png)\n\n### Light Mode\n![Airtable Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-screenshot.png)\n\nFile v1.0.0:design-md/apple/README.md\n\n# Apple Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) extracted from the public [apple](https://apple.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Apple Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-dark-screenshot.png)\n\n### Light Mode\n![Apple Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-screenshot.png)\n\nFile v1.0.0:design-md/bmw/README.md\n\n# Bmw Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) extracted from the public [bmw](https://bmw.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Bmw design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Bmw Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-dark-screenshot.png)\n\n### Light Mode\n![Bmw Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-screenshot.png)\n\nFile v1.0.0:design-md/cal/README.md\n\n# Cal Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) extracted from the public [cal](https://cal.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cal design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cal Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cal/preview-dark-screenshot.png)\n\n### Light Mode\n![Cal Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cal/preview-screenshot.png)\n\nFile v1.0.0:design-md/claude/README.md\n\n# Claude Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) extracted from the public [claude](https://claude.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Claude design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Claude Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/claude/preview-dark-screenshot.png)\n\n### Light Mode\n![Claude Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/claude/preview-screenshot.png)\n\nFile v1.0.0:design-md/clay/README.md\n\n# Clay Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) extracted from the public [clay](https://clay.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Clay design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Clay Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-dark-screenshot.png)\n\n### Light Mode\n![Clay Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-screenshot.png)\n\nFile v1.0.0:design-md/clickhouse/README.md\n\n# ClickHouse Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) extracted from the public [clickhouse](https://clickhouse.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the ClickHouse design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![ClickHouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png)\n\n### Light Mode\n![ClickHouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png)\n\nFile v1.0.0:design-md/cohere/README.md\n\n# Cohere Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) extracted from the public [cohere](https://cohere.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cohere design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cohere Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cohere/preview-dark-screenshot.png)\n\n### Light Mode\n![Cohere Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/cohere/preview-screenshot.png)\n\nFile v1.0.0:design-md/coinbase/README.md\n\n# Coinbase Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) extracted from the public [coinbase](https://coinbase.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Coinbase design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Coinbase Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-dark-screenshot.png)\n\n### Light Mode\n![Coinbase Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-screenshot.png)\n\nFile v1.0.0:design-md/composio/README.md\n\n# Composio Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) extracted from the public [composio](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Composio design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Composio Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-dark-screenshot.png)\n\n### Light Mode\n![Composio Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-screenshot.png)","readmeExcerpt":"Skill: awesome-design-skill Owner: zhouchang1988 Summary: UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如\"用Linear风格设计\"、\"使用Apple风格创建页面\"、\"按Stripe风格重构\"）。也用于用... Tags: latest:1.2.0 Version history: v1.2.0 | 2026-04-23T09:57:47.903Z | user Release v1.2.0 from GitHub v1.1.0 | 2026-04-22T12:35:59.684Z | user Release v1.1.0 from GitHub v1.0.1 | 2026-04-20T10:30:39.","codeSnippets":[],"executableExamples":[],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: awesome-design-skill\ndescription: UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如\"用Linear风格设计\"、\"使用Apple风格创建页面\"、\"按Stripe风格重构\"）。也用于用户询问可用设计风格列表（\"列出所有风格\"、\"有哪些风格\"）或查看特定风格详情（\"看看Vercel风格\"）。**不触发：用户未指定风格的一般设计请求**（如\"设计一个页面\"、\"创建UI\"等不会触发此技能）。\n---\n\n# Awesome Design Skill\n\n根据用户指定的设计风格，从 design-md 风格库中选择对应的设计系统作为 UI 开发指导，并将 DESIGN.md 复制到当前工作目录。\n\n**重要：此技能仅在用户明确指定设计风格时触发。如果用户未指定风格，不要使用此技能。**\n\n## 字体说明\n\n所有设计风格的预览文件（preview.html、preview-dark.html）使用 **fonts.loli.net** 作为 Google Fonts 的镜像源，以优化中国大陆地区的访问体验。如需更换为其他字体源，可批量替换文件中的 `fonts.loli.net` 为其他镜像地址。\n\n## 自定义设计风格\n\n**design-md 目录中的内容可以自由添加或替换。** 你可以：\n\n- 添加自己喜欢的设计风格（只需在 `design-md/` 目录下创建新的风格文件夹和 DESIGN.md）\n- 替换现有风格的 DESIGN.md 内容\n- 删除不需要的风格\n\n这样你可以构建属于自己的设计风格库，让 Claude 使用你熟悉和偏好的设计系统。\n\n## 脚本文件\n\n| 脚本 | 用途 |\n|-----|------|\n| `scripts/list-styles.sh` | 列出所有可用的设计风格 |\n| `scripts/smart-select.sh [需求描述]` | 智能选择设计风格（根据需求关键词匹配，无匹配则随机） |\n| `scripts/random-style.sh` | 随机选择一个设计风格 |\n| `scripts/get-design.sh <风格名称>` | 获取指定风格的 DESIGN.md 路径 |\n| `scripts/copy-design.sh <风格名称> [目标目录]` | 复制 DESIGN.md 到指定目录（默认当前目录） |\n\n## 工作流程\n\n### 用户指定风格进行设计\n\n**前提：用户必须明确指定风格名称**\n\n1. 运行 `scripts/get-design.sh <风格名称>` 验证风格存在并获取路径\n2. 运行 `scripts/copy-design.sh <风格名称>` 复制 DESIGN.md 到当前目录\n3. 读取当前目录的 DESIGN.md 作为风格指导\n4. 告知用户使用的设计风格\n\n### 用户查看可用风格\n\n当用户询问\"有哪些风格\"、\"列出所有风格\"、\"查看可用设计风格\"时：\n\n运行 `scripts/list-styles.sh` 列出所有可用的设计风格，并展示给用户。\n\n### 用户查看特定风格详情\n\n当用户询问\"看看XX风格\"、\"查看XX风格的设计规范\"时：\n\n1. 运行 `scripts/get-design.sh <风格名称>` 获取风格路径\n2. 读取并展示该风格的设计规范概要\n\n### 用户重构现有页面（需指定风格）\n\n**前提：用户必须明确指定目标风格**\n\n当用户要求将现有页面改为某种风格时（如\"将index.html改为airbnb的风格\"、\"用Vercel风格重构这个页面\"）：\n\n1. 首先读取用户指定的现有页面文件，理解其当前结构和内容\n2. 运行 `scripts/get-design.sh <目标风格>` 验证风格存在\n3. 运行 `scripts/copy-design.sh <目标风格>` 复制到当前目录\n4. 读取 DESIGN.md 作为风格指导\n5. 根据新风格的设计系统，重构页面的：\n   - 颜色方案（背景、文字、强调色等）\n   - 字体排版（字体家族、字号、行高等）\n   - 间距系统（边距、内边距、元素间距）\n   - 阴影和圆角\n   - 组件样式（按钮、卡片、表单等）\n   - 动画效果\n6. 保持页面原有的功能和内容结构，仅改变视觉风格\n7. 告知用户重构完成及主要变化\n\n## 可用设计风格关键词\n\n用户指定风格时可以使用以下关键词：\n\n| 风格名称 | 适用场景 |\n|---------|---------|\n| linear.app | 项目管理、任务工具、深色主题 |\n| apple | 产品展示、高端简洁、消费电子 |\n| stripe | 支付、金融科技、企业级 |\n| vercel | 开发者工具、深色主题 |\n| spotify | 音乐、媒体播放器 |\n| notion | 协作、文档工具 |\n| figma | 设计工具、创意平台 |\n| airbnb | 旅行、预订、民宿 |\n| coinbase | 加密货币、区块链 |\n| claude | AI产品、对话界面 |\n| cursor | 开发者工具、代码编辑器 |\n| posthog | 数据分析、监控仪表板 |\n| framer | 设计工具、创意平台 |\n\n...以及更多风格，使用 `scripts/list-styles.sh` 查看完整列表。\n\n## DESIGN.md 文件结构\n\n每个 DESIGN.md 包含：\n- Overview - 设计概述\n- Colors - 颜色系统\n- Typography - 字体排版\n- Spacing - 间距系统\n- Shadows - 阴影效果\n- Border Radius - 圆角设置\n- Components - 组件样式\n- Animations - 动画效果\n\n## 输出格式\n\n完成设计后，告知用户：\n1. 使用的设计风格名称\n2. 主要设计特点概述\n3. 生成的文件列表"},{"path":"design-md/airbnb/README.md","content":"# Airbnb Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) extracted from the public [airbnb](https://airbnb.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airbnb Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-dark-screenshot.png)\n\n### Light Mode\n![Airbnb Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-screenshot.png)"},{"path":"design-md/airtable/README.md","content":"# Airtable Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) extracted from the public [airtable](https://airtable.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airtable Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-dark-screenshot.png)\n\n### Light Mode\n![Airtable Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-screenshot.png)"},{"path":"design-md/apple/README.md","content":"# Apple Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) extracted from the public [apple](https://apple.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Apple Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-dark-screenshot.png)\n\n### Light Mode\n![Apple Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-screenshot.png)"},{"path":"design-md/bmw/README.md","content":"# Bmw Inspired Design System\n\n[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) extracted from the public [bmw](https://bmw.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Bmw design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Bmw Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-dark-screenshot.png)\n\n### Light Mode\n![Bmw Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-screenshot.png)"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":null,"editorialQuality":{"score":100,"threshold":65,"status":"thin","wordCount":985,"uniquenessScore":36,"reasons":["uniqueness-below-45"]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T07:30:38.985Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T07:30:38.985Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T10:45:05.368Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}