brand-to-design-md

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Brand To DESIGN.md

品牌转DESIGN.md

Overview

概述

Use this skill to turn public brand evidence into a token-ready

DESIGN.md

that a coding agent can use to generate consistent UI. When useful, also create a demo HTML page and verify it in a browser.

Start from the Google Labs

DESIGN.md

standard, not from example directories or third-party showcase pages. The output should be practical, source-aware, and executable by an agent.

使用此技能将公开品牌相关信息转换为可直接用于编码Agent的、支持令牌化的

DESIGN.md

文件。如有需要，还可创建演示HTML页面并在浏览器中验证效果。

需以Google Labs的

DESIGN.md

标准为基础，而非示例目录或第三方展示页面。输出内容需具备实用性、源数据关联性，且可被Agent执行。

Workflow

工作流程

1. Confirm Scope And Standard

1. 确认范围与标准

Clarify only if needed:

Target brand URL or brand name.
Required outputs:
```
DESIGN.md
```
only, or
```
DESIGN.md
```
plus demo HTML and screenshots.
Target context: website, app UI, developer docs, product page, editorial asset, or general system.

Use the Google Labs

DESIGN.md

format as the structural reference: metadata, design tokens, component guidance, imagery rules, logo boundaries, and Do/Don't guidance.

仅在必要时进行澄清：

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

以Google Labs的

DESIGN.md

格式作为结构参考：元数据、设计令牌、组件指南、图像规则、Logo使用边界以及注意事项（Do/Don't）。

2. Gather Evidence

2. 收集相关信息

Prefer primary and high-signal sources:

Official homepage and product pages.
Official brand, press, newsroom, media kit, or legal trademark pages.
Public CSS, font declarations, SVG logos, favicons, images, and screenshots.
Design agency case studies when they explain the identity system.
Third-party brand databases only as secondary support.

Record evidence in four groups:

Direct evidence: observed CSS, SVG fills, image colors, font names, layout behavior.
Official prose: brand usage rules, typography descriptions, press-kit notes.
Design rationale: motifs, concepts, color names, type-system explanations.
Inference: practical agent decisions not explicitly stated by sources.

If access is blocked by a CAPTCHA, login, or security challenge, do not bypass it. Use accessible official pages, cached/search snippets, press kits, downloaded public assets, or clearly mark the limitation.

优先选择主要且高价值的来源：

官方主页及产品页面。
官方品牌、新闻、新闻中心、媒体资料包或法律商标页面。
公开的CSS、字体声明、SVG Logo、网站图标、图片及截图。
解释品牌标识系统的设计机构案例研究。
仅将第三方品牌数据库作为次要支持来源。

将收集到的信息分为四类记录：

直接信息：观察到的CSS、SVG填充色、图像颜色、字体名称、布局行为。
官方说明：品牌使用规则、排版描述、媒体资料包备注。
设计理念：主题、概念、颜色名称、字体系统说明。
推断内容：未被来源明确说明但Agent需做出的实用决策。

如果访问被CAPTCHA、登录或安全限制阻挡，请勿绕过限制。使用可访问的官方页面、缓存/搜索片段、媒体资料包、已下载的公开资源，或明确标注限制情况。

3. Extract Tokens

3. 提取设计令牌

Translate evidence into roles, not just values.

Core token groups:

```
colors
```
: primary, secondary, tertiary, neutral, surface, on-primary, text, border, status/accent colors.
```
typography
```
: display, h1, h2, body, label, mono/code when present.
```
rounded
```
: small, medium, large, special brand shapes.
```
spacing
```
: base scale, common section gaps.
```
components
```
: buttons, cards, inputs, links, code panels, notices, navigation.
```
imagery
```
: photography style, illustration style, texture, gradient, motion, icon rules.

For each major token, prefer a role explanation:

Where it came from.
What it should be used for.
What should not use it.

将信息转换为角色定义，而非单纯的数值。

核心令牌类别：

```
colors
```
：主色、辅助色、第三色、中性色、背景色、主色文本色、文本色、边框色、状态/强调色。
```
typography
```
：展示字体、h1、h2、正文、标签等，若存在则包含等宽/代码字体。
```
rounded
```
：小圆角、中等圆角、大圆角、特殊品牌形状。
```
spacing
```
：基础间距比例、常用区块间距。
```
components
```
：按钮、卡片、输入框、链接、代码面板、通知、导航。
```
imagery
```
：摄影风格、插画风格、纹理、渐变、动效、图标规则。

对于每个主要令牌，优先添加角色说明：

来源出处。
使用场景。
禁用场景。

4. Compile DESIGN.md

4. 编译DESIGN.md

Write a concise but usable file:

markdown

---
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}"
---

编写简洁但实用的文件：

markdown

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

...


Keep the writing concrete. Avoid generic claims such as "modern, clean, innovative" unless the evidence supports them and they are translated into specific design actions.

...


内容需具体明确。除非有信息支持且可转化为具体设计操作，否则避免使用“现代、简洁、创新”等通用表述。

5. Generate A Demo When Useful

5. 按需生成演示页面

If asked for a demo, build a single-file HTML artifact in the workspace.

The demo should prove that the

DESIGN.md

is usable:

First screen should be an actual branded product or site experience, not an explanation page.
Include palette, typography, buttons, cards, forms, data/code panels, and one brand-specific motif.
Use extracted public assets when allowed and useful.
Recreate the brand's behavior and hierarchy, not only its colors.
Keep the page responsive and readable on mobile.

For browser-based artifacts, use real browser or preview-environment verification:

Open the file in an available browser or preview environment.
Check console errors.
Check horizontal overflow.
Capture desktop and mobile screenshots.
Confirm critical images and fonts fall back cleanly.

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

演示页面需证明

DESIGN.md

的可用性：

首屏应呈现真实的品牌产品或网站体验，而非说明页面。
包含调色板、排版、按钮、卡片、表单、数据/代码面板，以及一个品牌特有元素。
在允许且有用的情况下使用提取的公开资源。
还原品牌的交互行为和层级结构，而非仅还原颜色。
确保页面响应式，在移动端可正常阅读。

对于浏览器端制品，需使用真实浏览器或预览环境进行验证：

在可用浏览器或预览环境中打开文件。
检查控制台错误。
检查横向溢出情况。
截取桌面端和移动端截图。
确认关键图片和字体可正常降级显示。

6. Report Output

6. 输出报告

Return:

```
DESIGN.md
```
path.
Demo HTML path if created.
Screenshot paths if created.
Source summary.
Verification result.
Any limitations or inferred choices.

返回以下内容：

```
DESIGN.md
```
文件路径。
若已创建，返回演示HTML文件路径。
若已创建，返回截图路径。
来源摘要。
验证结果。
任何限制条件或推断决策。

Quality Bar

质量标准

A good output lets a future coding agent produce a page that feels recognizably tied to the brand without needing more context.

Check for:

Tokens map to meaningful roles.
The brand has distinct visual behavior beyond color.
Logo and trademark boundaries are respected.
Demo page uses the system in several UI contexts.
The output distinguishes evidence from inference.

优质输出应能让后续编码Agent无需额外上下文，即可生成具有明显品牌辨识度的页面。

检查要点：

令牌映射到有意义的角色。
品牌拥有颜色之外的独特视觉行为。
Logo和商标使用边界得到尊重。
演示页面在多个UI场景中使用该设计系统。
输出区分了事实信息与推断内容。

When To Read More

扩展阅读

For a compact checklist and output templates, read

references/workflow-checklist.md

如需简洁的检查清单和输出模板，请阅读

references/workflow-checklist.md

。