← Back to Skills Marketplace
zhouchang1988

awesome-design-skill

by Zhou Chang · GitHub ↗ · v1.2.0 · MIT-0
cross-platform ✓ Security Clean
204
Downloads
0
Stars
0
Active Installs
4
Versions
Install in OpenClaw
/install awesome-design-skill
Description
UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如"用Linear风格设计"、"使用Apple风格创建页面"、"按Stripe风格重构"）。也用于用...
README (SKILL.md)

Awesome Design Skill

根据用户指定的设计风格，从 design-md 风格库中选择对应的设计系统作为 UI 开发指导，并将 DESIGN.md 复制到当前工作目录。

重要：此技能仅在用户明确指定设计风格时触发。如果用户未指定风格，不要使用此技能。

字体说明

所有设计风格的预览文件（preview.html、preview-dark.html）使用 fonts.loli.net 作为 Google Fonts 的镜像源，以优化中国大陆地区的访问体验。如需更换为其他字体源，可批量替换文件中的 fonts.loli.net 为其他镜像地址。

自定义设计风格

design-md 目录中的内容可以自由添加或替换。 你可以：

  • 添加自己喜欢的设计风格（只需在 design-md/ 目录下创建新的风格文件夹和 DESIGN.md）
  • 替换现有风格的 DESIGN.md 内容
  • 删除不需要的风格

这样你可以构建属于自己的设计风格库，让 Claude 使用你熟悉和偏好的设计系统。

脚本文件

脚本 用途
scripts/list-styles.sh 列出所有可用的设计风格
scripts/smart-select.sh [需求描述] 智能选择设计风格（根据需求关键词匹配，无匹配则随机）
scripts/random-style.sh 随机选择一个设计风格
scripts/get-design.sh \x3C风格名称> 获取指定风格的 DESIGN.md 路径
scripts/copy-design.sh \x3C风格名称> [目标目录] 复制 DESIGN.md 到指定目录（默认当前目录）

工作流程

用户指定风格进行设计

前提：用户必须明确指定风格名称

  1. 运行 scripts/get-design.sh \x3C风格名称> 验证风格存在并获取路径
  2. 运行 scripts/copy-design.sh \x3C风格名称> 复制 DESIGN.md 到当前目录
  3. 读取当前目录的 DESIGN.md 作为风格指导
  4. 告知用户使用的设计风格

用户查看可用风格

当用户询问"有哪些风格"、"列出所有风格"、"查看可用设计风格"时：

运行 scripts/list-styles.sh 列出所有可用的设计风格，并展示给用户。

用户查看特定风格详情

当用户询问"看看XX风格"、"查看XX风格的设计规范"时：

  1. 运行 scripts/get-design.sh \x3C风格名称> 获取风格路径
  2. 读取并展示该风格的设计规范概要

用户重构现有页面（需指定风格）

前提：用户必须明确指定目标风格

当用户要求将现有页面改为某种风格时（如"将index.html改为airbnb的风格"、"用Vercel风格重构这个页面"）：

  1. 首先读取用户指定的现有页面文件，理解其当前结构和内容
  2. 运行 scripts/get-design.sh \x3C目标风格> 验证风格存在
  3. 运行 scripts/copy-design.sh \x3C目标风格> 复制到当前目录
  4. 读取 DESIGN.md 作为风格指导
  5. 根据新风格的设计系统，重构页面的：
    • 颜色方案（背景、文字、强调色等）
    • 字体排版（字体家族、字号、行高等）
    • 间距系统（边距、内边距、元素间距）
    • 阴影和圆角
    • 组件样式（按钮、卡片、表单等）
    • 动画效果
  6. 保持页面原有的功能和内容结构，仅改变视觉风格
  7. 告知用户重构完成及主要变化

可用设计风格关键词

用户指定风格时可以使用以下关键词：

风格名称 适用场景
linear.app 项目管理、任务工具、深色主题
apple 产品展示、高端简洁、消费电子
stripe 支付、金融科技、企业级
vercel 开发者工具、深色主题
spotify 音乐、媒体播放器
notion 协作、文档工具
figma 设计工具、创意平台
airbnb 旅行、预订、民宿
coinbase 加密货币、区块链
claude AI产品、对话界面
cursor 开发者工具、代码编辑器
posthog 数据分析、监控仪表板
framer 设计工具、创意平台

...以及更多风格，使用 scripts/list-styles.sh 查看完整列表。

DESIGN.md 文件结构

每个 DESIGN.md 包含：

  • Overview - 设计概述
  • Colors - 颜色系统
  • Typography - 字体排版
  • Spacing - 间距系统
  • Shadows - 阴影效果
  • Border Radius - 圆角设置
  • Components - 组件样式
  • Animations - 动画效果

输出格式

完成设计后，告知用户：

  1. 使用的设计风格名称
  2. 主要设计特点概述
  3. 生成的文件列表
Usage Guidance
This skill appears to do what it says: it ships a large offline library of DESIGN.md files and small shell scripts to list/select/copy them, and its instructions tell the agent to read project files and copy DESIGN.md into the working directory when you ask it to apply a style. Before installing, consider: (1) the agent will read and write files in the current project when asked to 'restructure' a page—only invoke it on projects you trust or in a sandbox; (2) preview HTML files reference external hosts (fonts.loli.net and hosted preview images) which may be fetched if previews are rendered — review those URLs if you have network/privacy concerns; (3) the included scripts (scripts/*.sh) are executed by the agent per the SKILL.md workflow — if you or your org requires code review, open and inspect smart-select.sh and the other scripts before running them. Otherwise, the manifest and instructions are coherent with the stated design-style purpose.
Capability Analysis
Type: OpenClaw Skill Name: awesome-design-skill Version: 1.2.0 The 'awesome-design-skill' bundle is a comprehensive library of UI design systems (colors, typography, spacing) for brands like Apple, Stripe, and Linear. The included shell scripts in the `scripts/` directory are utility tools for listing, randomly selecting, or copying local `DESIGN.md` files to the workspace. The skill logic in `SKILL.md` is well-defined and restricted to design tasks. While the HTML previews in the `design-md/` subdirectories reference an external font mirror (fonts.loli.net), this is explicitly disclosed in the documentation to improve performance in specific regions. No evidence of data exfiltration, malicious execution, or prompt injection was found.
Capability Tags
cryptocan-make-purchasesrequires-sensitive-credentials
Capability Assessment
✓ Purpose & Capability
Name/description (design-style selector) match the included assets: a large design-md library (DESIGN.md + previews) and helper scripts for listing, selecting, copying, and reading styles. The requested capabilities (reading/writing DESIGN.md, choosing a style) align with what the skill actually provides.
ℹ Instruction Scope
SKILL.md tells the agent to run the included scripts and to read and (when requested) modify files in the current project (e.g., read the user's HTML page to 'restructure' it and copy DESIGN.md into the working directory). This file I/O is proportionate to a style-application skill, but users should be aware the agent will read and write local project files when invoked for page refactors.
✓ Install Mechanism
No install spec (instruction-only) and no dependencies requested, which is the lowest-risk model. The repository contains static assets and shell scripts only. The preview HTML files reference external font/image hosts (fonts.loli.net and some r2.dev image URLs) — those are passive web resources but will cause outbound requests if previews are rendered or fetched.
✓ Credentials
No environment variables, credentials, or config paths are requested. The skill does not ask for secrets or unrelated service keys; that is proportionate to its purpose.
✓ Persistence & Privilege
always:false and no requests to modify other skills or global agent configuration. The skill will be invoked only when triggered and can run included scripts; autonomous invocation is allowed by default (platform behavior) but isn’t unusually privileged here.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install awesome-design-skill
  3. After installation, invoke the skill by name or use /awesome-design-skill
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.2.0
Release v1.2.0 from GitHub
v1.1.0
Release v1.1.0 from GitHub
v1.0.1
Release v1.0.1 from GitHub
v1.0.0
Release v1.0.0 from GitHub
Metadata
Slug awesome-design-skill
Version 1.2.0
License MIT-0
All-time Installs 0
Active Installs 0
Total Versions 4
Frequently Asked Questions

What is awesome-design-skill?

UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如"用Linear风格设计"、"使用Apple风格创建页面"、"按Stripe风格重构"）。也用于用... It is an AI Agent Skill for Claude Code / OpenClaw, with 204 downloads so far.

How do I install awesome-design-skill?

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

Is awesome-design-skill free?

Yes, awesome-design-skill is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does awesome-design-skill support?

awesome-design-skill is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created awesome-design-skill?

It is built and maintained by Zhou Chang (@zhouchang1988); the current version is v1.2.0.

More Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191115 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 Comments