mcpField
B
brand-to-design-md

brand-to-design-md

github.com/shaom设计与 UI209117 次安装12 周前更新
代码仓库

关于 brand-to-design-md

brand-to-design-md 可将公开品牌资料整理为适用于编码 Agent 的设计令牌型 DESIGN.md；需要时还可生成演示 HTML 并在浏览器中验证。

主要功能

  1. 01从公开品牌来源收集证据
  2. 02提取按角色组织的设计令牌
  3. 03生成结构化 DESIGN.md 文件
  4. 04按需生成演示 HTML
  5. 05验证浏览器产物并记录限制

适用场景

  1. 01为品牌建立设计参考
  2. 02指导编码 Agent 生成一致的 UI
  3. 03根据记录的品牌令牌制作演示
  4. 04记录资料依据与访问限制

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shaom/brand-to-design-md-skill --skill brand-to-design-md

安装后在 Claude Code 中输入/brand-to-design-md确认已加载。

附带文件references/workflow-checklist.md

详细介绍

品牌转化为 DESIGN.md

概述

使用此技能将公开的品牌资料转化为可直接用于设计令牌的 DESIGN.md，供编码 Agent 用于生成风格一致的 UI。在适用时，还可创建演示 HTML 页面并在浏览器中验证。

从 Google Labs 的 DESIGN.md 标准着手，而不是从示例目录或第三方展示页面着手。输出应切实可用、注明来源，并能由 Agent 执行。

工作流

1. 确认范围和标准

仅在必要时澄清：

  • 目标品牌网址或品牌名称。
  • 所需输出：仅 DESIGN.md，还是 DESIGN.md 加演示 HTML 和截图。
  • 目标场景：网站、应用 UI、开发者文档、产品页面、编辑类素材或通用系统。

将 Google Labs 的 DESIGN.md 格式用作结构参考：元数据、设计令牌、组件指南、图像规则、Logo 使用边界，以及应做和不应做的事项。

2. 收集证据

优先选择一手且可信度高的来源：

  • 官方主页和产品页面。
  • 官方品牌、新闻、媒体资料或法律商标页面。
  • 公开 CSS、字体声明、SVG Logo、网站图标、图片和截图。
  • 能说明品牌识别系统的设计机构案例研究。
  • 第三方品牌数据库仅作辅助参考。

将证据分为四组记录：

  • **直接证据：**观察到的 CSS、SVG 填充色、图片颜色、字体名称和布局行为。
  • **官方说明：**品牌使用规则、字体排版说明、媒体资料包备注。
  • **设计原理：**图案、概念、颜色名称、字体系统说明。
  • **推断：**来源未明确说明的实用 Agent 决策。

如果访问被 CAPTCHA、登录或安全验证拦截，不要尝试绕过。请改用可访问的官方页面、缓存或搜索摘要、媒体资料包、下载的公开素材，或明确注明限制。

3. 提取令牌

将证据转化为角色，而不只是值。

核心令牌组：

  • colors：主色、辅助色、三级色、中性色、表面色、主色上的文字色、文字色、边框色、状态色／强调色。
  • typography：展示文字、h1、h2、正文、标签、等宽字体／代码（如适用）。
  • rounded：小、中、大，以及特殊品牌形状。
  • spacing：基础间距比例、常见区块间距。
  • components：按钮、卡片、输入框、链接、代码面板、提示框、导航。
  • imagery：摄影风格、插画风格、纹理、渐变、动效、图标规则。

对于每个主要令牌，优先说明其用途：

  • 来源是什么。
  • 应用于何处。
  • 不应应用于何处。
4. 编写 DESIGN.md

编写简洁且实用的文件：

---
version: alpha
name: Brand Name
description: One sentence identity summary.
sources:
  - https://...
notes:
  - Evidence and limitation notes.
colors:
  primary: "#..."
typography:
  display:
    fontFamily: ...
components:
  button-primary:
    backgroundColor: "{colors.primary}"
---

## Overview
...

## Colors
...

## Typography
...

## Layout
...

## Components
...

## Imagery
...

## Logo And Usage
...

## Do's and Don'ts
...

内容要具体。除非证据能够支持并将其转化为明确的设计操作，否则避免使用“现代、简洁、创新”等泛泛表述。

5. 在适用时生成演示

如果用户要求演示，请在工作区中创建单文件 HTML 成品。

演示应证明 DESIGN.md 可供实际使用：

  • 首屏应呈现真实的品牌产品或网站体验，而不是说明页面。
  • 包含调色板、字体排版、按钮、卡片、表单、数据／代码面板，以及一种品牌专属图案。
  • 在允许且有用时，使用提取的公开素材。
  • 复现品牌的行为模式和层级，而不只是颜色。
  • 确保页面响应式，并在移动设备上易于阅读。

对于基于浏览器的成品，请在真实浏览器或预览环境中验证：

  • 在可用的浏览器或预览环境中打开文件。
  • 检查控制台错误。
  • 检查是否存在水平溢出。
  • 截取桌面端和移动端截图。
  • 确认关键图片和字体失效时能正常回退。
6. 报告输出

返回：

  • DESIGN.md 路径。
  • 如已创建，提供演示 HTML 路径。
  • 如已创建，提供截图路径。
  • 来源摘要。
  • 验证结果。
  • 任何限制或推断选择。

质量标准

好的输出应让未来的编码 Agent 无需更多上下文，就能制作出明显契合品牌风格的页面。

请检查：

  • 设计令牌是否对应有意义的角色。
  • 除颜色之外，品牌是否具有鲜明的视觉表现。
  • 是否尊重 Logo 和商标的使用边界。
  • 演示页面是否在多个 UI 场景中运用了这套系统。
  • 输出是否区分了证据与推断。

何时阅读更多内容

如需查看精简检查清单和输出模板，请阅读 references/workflow-checklist.md。

评论

支持 Markdown