📦 Design For Beauty — 设计参考助手

v1.0.0

使用精选的 DESIGN.md 参考库(从热门网站提取)构建或重塑界面。当用户请求落地页、仪表盘、重新设计、设计系统、UI 优化、视觉灵感,或说「参考 Stripe/Apple/Linear/Notion 风格」时使用。提供品牌风格路由、氛围匹配和多参考合成工作流。

0· 6·0 当前·0 累计
cheng-zuguang 头像by @cheng-zuguang·MIT-0
下载技能包
License
MIT-0
最后更新
2026/4/15
0
安全扫描
VirusTotal
无害
查看报告
OpenClaw
可疑
medium confidence
该技能的行为大致符合设计参考助手的定位,但它声称绑定了本地参考文件,而这些文件并未包含在包中,且给出了因此无法对应的文件系统指令——这种不匹配需要谨慎对待。
评估建议
在安装或启用此技能之前,请向提供者询问以下问题:(1) 被引用的文件(references/catalog.md 和 references/design-md/...)应该从哪里来?你提供的包只包含 SKILL.md,因此运行时必须提供这些参考文件,否则技能将失败或尝试获取它们。(2) 如果技能会从互联网获取参考,请确认它将访问哪些 URL,并在任何网络获取之前获得用户明确同意——包括对抓取的公共网站内容的许可/归属说明(版权风险)。(3) 确认运行时是否需要 ripgrep (rg) 或其他工具,以及当二进制文件或参考文件缺失时是否有回退行为。(4) 由于技能会读取本地文件,请验证 references/ 路径下不会放置敏感文件。如果你打算继续使用,请请求一个更新的包,要么包含绑定的参考文件,要么记录运行时来源和网络访问行为。没有这些,该技能是不完整的,应该谨慎对待。...
详细分析 ▾
用途与能力
该技能的声明目的(将设计参考转化为可实施的 UI 方向)与指令是一致的,但 SKILL.md 多次提到绑定的参考文件在 references/design-md/ 下(来自 'awesome-design-md'),而包清单只包含 SKILL.md,没有参考文件。这是一个重要的不匹配:要么运行时环境必须提供这些文件(未记录),要么该技能是不完整的。SKILL.md 还建议使用 ripgrep (rg) 进行搜索,但该技能没有声明该二进制文件为必需。
指令范围
指令告诉代理读取特定的本地文件,并在 references/ 中「打开」DESIGN.md 文件并「从目录开始」——这些操作需要被引用的文件存在。由于这些文件未打包,指令可能会提示代理获取远程数据或失败。指令本身不请求任何无关的系统密钥或广泛的数据泄露,且显示的命令/示例是良性的,但对不存在的本地数据的隐含期望是一个范围/完整性问题。
安装机制
这是一个纯指令技能,没有安装规范和代码文件,将安装风险降至最低。搜索提示包含使用 'rg' 的 shell 示例,但没有声明安装或二进制文件要求。
凭证需求
该技能不请求环境变量、凭证或配置路径——这是相称的。然而,它引用外部内容('awesome-design-md' 和公共网站),却没有记录这些参考将从哪里或如何提供,这引发了关于许可的问题,以及该技能是否会在运行时尝试下载内容(可能的网络访问)。
持久化与权限
always 为 false,该技能可由用户调用;它不请求持久或提升的权限,也不试图在提供的指令中修改其他技能或系统配置。
安全有层次,运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发,无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.02026/4/15

design-for-beauty 技能初始版本发布。- 提供从热门品牌精选的 DESIGN.md 参考,用于 UI 灵感获取和实现。- 引导用户筛选参考并将其风格、氛围和规则适配到特定项目。- 包含基于品牌、基于氛围和多参考请求的路由规则。- 提供合成工作流,用于提取、适配并将设计模式应用到新界面。- 提供清单以确保结果清晰、可访问且适合项目。

无害

安装命令

点击复制
官方npx clawhub@latest install design-for-beauty
镜像加速npx clawhub@latest install design-for-beauty --registry https://cn.longxiaskill.com

技能文档

使用此技能将真实世界的设计参考转化为可实施的 UI 方向。绑定的参考来自 awesome-design-md,位于 references/design-md/。不要一次全部读取。从目录开始,筛选后再加载最相关的文件。

从这里开始

  • 阅读 references/catalog.md
  • 选择 1-3 个参考品牌。
  • 只打开匹配的 references/design-md//DESIGN.md 文件。
  • 将选定的参考转化为项目特定的决策,而不是盲目克隆。

何时使用此技能

  • 用户指定品牌或产品风格:StripeAppleLinearNotionAirbnbTesla
  • 用户想要视觉方向但不指定品牌:premium minimaleditorialdeveloper-firstplayful productivityenterprise clean
  • 用户请求重新设计、改版、落地页、仪表盘、设计系统或前端优化。
  • 用户想要多个设计方向和实施前的权衡。

路由规则

如果用户指定了品牌

  • 将该品牌作为主要参考。
  • 直接加载其 DESIGN.md
  • 如果用户指定多个品牌,保留一个主要参考用于字体、间距和布局节奏。
  • 最多使用一个辅助参考用于强调色、动效或组件氛围,除非用户明确要求更广泛的混合。

如果用户只给出氛围

  • 首先搜索 references/catalog.md
  • 按类别、 tone、密度、对比度和交互风格筛选 2-4 个参考。
  • 然后只读取最匹配的 1-3 个 DESIGN.md 文件。

如果项目已有设计系统

  • 保留现有产品模式,除非用户明确要求重新品牌。
  • 借用氛围、间距、对比度或层级,而不是覆盖整个系统。

合成工作流

1. 提取参考系统

提取对实施真正重要的部分:

  • 视觉氛围
  • 颜色角色和对比度模式
  • 字体层级和字体特征
  • 间距、圆角、边框和层级
  • 组件行为
  • 布局密度和页面节奏
  • 做/不做的约束

2. 适配到真实项目

  • 保持产品的内容模型、信息架构和可访问性要求。
  • 如果参考使用了专有字体或艺术方向,用可用的替代品模拟节奏并说明。
  • 保留焦点状态、语义 HTML、可读对比度和合理的触摸目标。
  • 适合项目优于像素模仿。

3. 生成可实施的输出

根据任务,将参考转化为以下一项或多项:

  • 简洁的设计简报
  • 带有权衡的方向简选
  • CSS 变量 / 设计令牌
  • 组件样式规则
  • 实际的前端代码

多参考混合的冲突解决

  • 主要参考拥有字体、间距和结构节奏。
  • 辅助参考可以影响颜色、图像或动效。
  • 第三次要影响应该很小且明确。
  • 如果混合开始感觉不协调,简化为一个主要方向。

交付清单

在完成之前,确保你:

  • 命名你使用的参考
  • 指出主要参考
  • 指出任何字体或资源替代
  • 保持输出可访问且适合产品
  • 保留参考中最强的「做」并避免最大的「不做」

文件地图

  • references/catalog.md - 所有参考的人类可读索引
  • references/catalog.json - 机器可读索引
  • references/design-md//DESIGN.md - 完整设计参考文件

搜索技巧

rg -n "monochrome|gradient|editorial|premium|dashboard|developer|playful" references/catalog.md

示例请求

  • "Use Stripe as the base direction for this pricing page."
  • "Give me 3 directions for an AI developer tool: one like Linear, one like Vercel, one like Apple."
  • "参考 Notion 和 Airtable,做一个更温和的 B2B 数据产品首页。"
数据来源ClawHub ↗ · 中文优化:龙虾技能库