← Back to Skills Marketplace
laojun509

Awesome Design MD

by laojun · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ⚠ suspicious
369
Downloads
0
Stars
3
Active Installs
1
Versions
Install in OpenClaw
/install awesome-design-md
Description
收录50+知名网站的设计系统DESIGN.md文件,支持一键查看和复制,助力AI复刻顶级网站视觉风格。
README (SKILL.md)

Awesome Design MD

[一句话总览]

收录50+知名网站的DESIGN.md设计系统文件,让AI代理一键复刻顶级网站的视觉风格。


[简介]

这个技能库收集了来自全球知名网站的 DESIGN.md 设计系统文档,包括:

  • AI/科技: Claude, OpenAI, Vercel, Linear, Cursor, Stripe
  • 开发者工具: GitHub, Vercel, Supabase, Sentry, Raycast
  • 设计工具: Figma, Framer, Webflow, Notion
  • 品牌官网: Apple, Tesla, Airbnb, Spotify
  • 金融科技: Coinbase, Revolut, Wise
  • 汽车: Tesla, BMW, Ferrari, Lamborghini

每个 DESIGN.md 文件都遵循 Google Stitch 格式,包含完整的视觉主题、配色方案、字体规范、组件样式等。


[使用方法]

1. 查看可用设计系统

ls ~/.openclaw/workspace/skills/awesome-design-md/design-md/

2. 读取特定网站的 DESIGN.md

# 读取 Vercel 的设计系统
cat ~/.openclaw/workspace/skills/awesome-design-md/design-md/vercel/DESIGN.md

# 读取 Stripe 的设计系统
cat ~/.openclaw/workspace/skills/awesome-design-md/design-md/stripe/DESIGN.md

# 读取 Apple 的设计系统
cat ~/.openclaw/workspace/skills/awesome-design-md/design-md/apple/DESIGN.md

3. 在项目中使用

将 DESIGN.md 复制到你的项目根目录:

cp ~/.openclaw/workspace/skills/awesome-design-md/design-md/linear/DESIGN.md ./DESIGN.md

然后告诉 AI 代理:

"请根据 DESIGN.md 中的设计系统,创建一个类似 Linear 风格的页面"


[热门设计系统]

网站 风格特点 适用场景
Linear 极简紫色、精确排版 开发者工具、SaaS
Stripe 紫色渐变、weight-300优雅 支付、金融科技
Vercel 黑白精准、Geist字体 前端、部署平台
Apple 大片留白、SF Pro、电影感 产品展示、营销
Notion 温暖极简、衬线标题 文档、协作工具
Claude 陶土色、干净编辑风 AI助手、聊天
Cursor 深色渐变、IDE风格 代码编辑器
Raycast 深色Chrome、活力渐变 效率工具、启动器
Supabase 深绿、代码优先 后端、数据库
Figma 多彩、 playful yet professional 设计工具

[完整列表]

AI / LLM

  • claude - Anthropic, 陶土色温暖风格
  • cohere - 企业AI, 活力渐变
  • elevenlabs - AI语音, 深色电影感
  • minimax - 深色霓虹
  • mistral - 法式设计, 紫色调
  • ollama - 本地LLM, 终端简约
  • opencode - AI编码, 开发者深色
  • replicate - ML模型API, 白色代码风
  • runwayml - AI视频, 深色媒体丰富
  • together - 开源AI, 蓝图风格
  • xai - Elon Musk, 黑白未来感

开发者工具

  • cursor - AI代码编辑器
  • expo - React Native, 深色代码风
  • linear - 项目管理, 极简紫色
  • lovable - AI全栈, 活力渐变
  • mintlify - 文档平台, 绿色清爽
  • posthog - 产品分析, 刺猬品牌
  • raycast - 效率启动器
  • resend - 邮件API, 深色等宽
  • sentry - 错误监控, 粉紫深色
  • supabase - 开源Firebase, 深绿
  • superhuman - 极速邮件, 紫色光晕
  • vercel - 前端部署, 黑白精准
  • warp - 现代终端

设计/创意工具

  • airtable - 表格数据库, 多彩友好
  • clay - 创意机构, 有机渐变
  • figma - 协作设计, 多彩专业
  • framer - 网站构建, 黑蓝大胆
  • miro - 视觉协作, 黄色无限画布
  • notion - 全能工作区, 温暖极简
  • webflow - 视觉建站, 蓝色营销

金融科技

  • coinbase - 加密交易, 蓝色信任
  • kraken - 加密交易, 紫色深色
  • revolut - 数字银行, 渐变卡片
  • stripe - 支付基础设施
  • wise - 国际转账, 绿色友好

其他

  • airbnb - 暖珊瑚色, 摄影驱动
  • apple - 大片留白, 电影感
  • cal - 开源日程, 中性简洁
  • intercom - 友好蓝色, 对话UI
  • zapier - 自动化, 温暖橙色

收录50+知名网站设计系统,让AI复刻顶级视觉风格。

Usage Guidance
Do not assume the repo contains the DESIGN.md files advertised. Before using: (1) Inspect the skill folder (~/.openclaw/workspace/skills/awesome-design-md/design-md/) to confirm the actual files present. The manifest shows only README placeholders linking to getdesign.md rather than DESIGN.md and preview assets — so cat/cp commands in SKILL.md will likely fail. (2) If files are missing but you need them, visit the referenced external site (getdesign.md) or contact the maintainer to obtain the real DESIGN.md files. (3) Review licensing and copyright for any third‑party design systems before copying into your project. (4) Never run cp or automated copy commands without first previewing the content to avoid accidental overwrites. The skill is internally inconsistent (claims bundled files but provides placeholders), so treat it as untrusted until the actual DESIGN.md contents and licensing are verified.
Capability Analysis
Type: OpenClaw Skill Name: awesome-design-md Version: 1.0.0 The skill bundle is a collection of design system references (DESIGN.md) for various popular websites. While the SKILL.md and README.md files suggest the presence of local design files that are actually missing in the provided file list (replaced by README.md files pointing to the external domain getdesign.md), there is no evidence of malicious code, data exfiltration, or harmful prompt injection. The bundle consists entirely of metadata and markdown documentation intended to guide an AI agent in replicating visual styles.
Capability Tags
cryptocan-make-purchases
Capability Assessment
Purpose & Capability
The SKILL.md and README both state the repo includes 50+ DESIGN.md files and preview assets, and runtime instructions assume files at ~/.openclaw/workspace/skills/awesome-design-md/design-md/<site>/DESIGN.md. The manifest shows only per-site README.md placeholders that point to external URLs (getdesign.md), and there are no DESIGN.md or preview.html files listed. This is a clear mismatch: the skill promises local design system files but doesn't include them.
Instruction Scope
Runtime instructions are limited to listing, reading (cat) and copying (cp) files under the skill's workspace path — that scope is appropriate for a local file collection. However, because the expected DESIGN.md files are missing, following the instructions will fail. Also note the cp instruction will write into the user's project root and could overwrite files if run without inspection; users/agents should inspect file contents before copying.
Install Mechanism
This is an instruction-only skill with no install spec and no code to be written to disk at install time, which is low risk from an install mechanism perspective.
Credentials
The skill requests no environment variables, credentials, or config paths — consistent with a read-only design-document collection.
Persistence & Privilege
Default flags are used (always: false, model invocation allowed). The skill does not request persistent presence or elevated privileges and does not modify other skills or global config.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install awesome-design-md
  3. After installation, invoke the skill by name or use /awesome-design-md
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
收录50+知名网站的DESIGN.md设计系统,包括Linear、Stripe、Vercel、Apple、Claude等,让AI代理一键复刻顶级网站视觉风格
Metadata
Slug awesome-design-md
Version 1.0.0
License MIT-0
All-time Installs 3
Active Installs 3
Total Versions 1
Frequently Asked Questions

What is Awesome Design MD?

收录50+知名网站的设计系统DESIGN.md文件,支持一键查看和复制,助力AI复刻顶级网站视觉风格。 It is an AI Agent Skill for Claude Code / OpenClaw, with 369 downloads so far.

How do I install Awesome Design MD?

Run "/install awesome-design-md" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Awesome Design MD free?

Yes, Awesome Design MD is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Awesome Design MD support?

Awesome Design MD is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Awesome Design MD?

It is built and maintained by laojun (@laojun509); the current version is v1.0.0.

💬 Comments