功能描述

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

使用说明 (SKILL.md)

Awesome Design Skill

Name: awesome-design-skill
Author: zhouchang1988

根据用户指定的设计风格，从 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 到指定目录（默认当前目录）

工作流程

用户指定风格进行设计

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

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

用户查看可用风格

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

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

用户查看特定风格详情

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

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

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

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

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

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

可用设计风格关键词

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

风格名称	适用场景
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 - 动画效果

输出格式

完成设计后，告知用户：

使用的设计风格名称
主要设计特点概述
生成的文件列表

安全使用建议

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.

功能分析

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.

能力标签

cryptocan-make-purchasesrequires-sensitive-credentials

能力评估

✓ 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.

版本历史

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

元数据

Slug awesome-design-skill

版本 1.2.0

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 4

常见问题