← 返回 Skills 市场
laojun509

Awesome Design MD

作者 laojun · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ⚠ suspicious
369
总下载
0
收藏
3
当前安装
1
版本数
在 OpenClaw 中安装
/install awesome-design-md
功能描述
收录50+知名网站的设计系统DESIGN.md文件,支持一键查看和复制,助力AI复刻顶级网站视觉风格。
使用说明 (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复刻顶级视觉风格。

安全使用建议
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.
功能分析
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.
能力标签
cryptocan-make-purchases
能力评估
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.
如何使用
  1. 确保已安装 OpenClaw(本地或 Docker 部署)
  2. 在对话框中输入安装命令:/install awesome-design-md
  3. 安装完成后,直接呼叫该 Skill 的名称或使用 /awesome-design-md 触发
  4. 根据 Skill 的参数说明提供必要输入,即可获得结构化输出
版本历史
v1.0.0
收录50+知名网站的DESIGN.md设计系统,包括Linear、Stripe、Vercel、Apple、Claude等,让AI代理一键复刻顶级网站视觉风格
元数据
Slug awesome-design-md
版本 1.0.0
许可证 MIT-0
累计安装 3
当前安装数 3
历史版本数 1
常见问题

Awesome Design MD 是什么?

收录50+知名网站的设计系统DESIGN.md文件,支持一键查看和复制,助力AI复刻顶级网站视觉风格。 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件,目前累计下载 369 次。

如何安装 Awesome Design MD?

在 OpenClaw 或 Claude Code 对话框中运行命令「/install awesome-design-md」即可一键安装,无需额外配置。

Awesome Design MD 是免费的吗?

是的,Awesome Design MD 完全免费,采用 MIT-0 许可证,可自由下载、安装和使用。

Awesome Design MD 支持哪些平台?

Awesome Design MD 跨平台运行,可在任意部署了 OpenClaw / Claude Code 的环境中使用(cross-platform)。

谁开发了 Awesome Design MD?

由 laojun(@laojun509)开发并维护,当前版本 v1.0.0。

💬 留言讨论