getdesign

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

getdesign

Generate a grounded, production-grade

design.md

for any public URL using the coding agent's own tools. This skill is the portable twin of the hosted getdesign.app agent — same 9-section output, no sandbox required.

使用编码Agent的内置工具，为任意公开URL生成一份基于实际内容的生产级

design.md

文档。该技能是托管版getdesign.app Agent的可移植孪生版本——输出同样包含9个部分，无需沙箱环境。

When to use

使用场景

Activate when the user:

Pastes a URL and asks for a "design system", "design spec", "style guide",
```
design.md
```
, or brand tokens.
Asks to "make this look like <site>", "clone the design of <site>", or "extract the palette/typography from <site>".
Asks you to reverse-engineer or document a live site's visual design.

Do not use this skill for: generating runnable code from a URL, Figma/Sketch export, auth-gated pages, or localhost.

当用户提出以下请求时激活该技能：

粘贴URL并要求生成“设计系统”“设计规范”“样式指南”
```
design.md
```
或品牌令牌。
请求“让这个看起来像<网站>”“克隆<网站>的设计”或“从<网站>提取调色板/排版样式”。
请求逆向工程或记录实时网站的视觉设计。

请勿将该技能用于：从URL生成可运行代码、Figma/Sketch导出、需授权的页面或本地主机（localhost）页面。

Output contract

输出约定

The single deliverable is a markdown file — default name

design.md

— containing exactly these 9 H2 sections in this order:

Visual Theme & Atmosphere
Color Palette & Roles
Typography Rules
Component Stylings
Layout Principles
Depth & Elevation
Interaction & Motion
Responsive Behavior
Agent Prompt Guide

Full section schemas, field lists, and a worked example are in TEMPLATE.md. Read it before writing the final file.

唯一交付物是一个Markdown文件——默认名称为

design.md

——必须严格按照以下顺序包含这9个H2章节：

视觉主题与氛围
调色板与角色定义
排版规则
组件样式
布局原则
深度与层级
交互与动效
响应式行为
Agent提示指南

完整的章节schema、字段列表及示例可参考TEMPLATE.md。在编写最终文件前请先阅读该文档。

Grounding rule (non-negotiable)

溯源规则（不可违反）

Every concrete value — hex color, font family, font size, spacing number, radius, shadow, breakpoint — must be traceable to something you actually fetched: a CSS rule, a computed style, a

<link>

ed stylesheet, a

:root

variable, or a visible pixel in a screenshot. If you cannot ground a value, describe the role qualitatively ("neutral warm gray") instead of fabricating a hex.

Do not invent palette values. Do not hallucinate Tailwind classes the site does not use. Do not copy defaults from other sites.

每一个具体值——十六进制颜色、字体族、字号、间距数值、圆角、阴影、断点——必须能追溯到实际获取的内容：CSS规则、计算样式、

<link>

引入的样式表、

:root

变量或截图中的可见像素。如果无法为某个值溯源，请定性描述其角色（如“中性暖灰色”），而非编造十六进制值。

请勿编造调色板值。请勿虚构网站未使用的Tailwind类。请勿复制其他网站的默认值。

Workflow

工作流程

Follow this sequence. Copy the checklist into your working notes and tick items as you go.

- [ ] 1. Validate URL
- [ ] 2. Fetch HTML + linked CSS
- [ ] 3. Capture at least one screenshot (hero viewport)
- [ ] 4. Extract tokens (colors, type, spacing, radii, shadows, breakpoints)
- [ ] 5. Draft DesignDoc (9 sections) grounded in tokens + screenshot
- [ ] 6. Render design.md from the draft
- [ ] 7. Verify grounding + section order, then write the file

遵循以下步骤。将检查清单复制到工作笔记中，完成一项勾选一项。

- [ ] 1. 验证URL
- [ ] 2. 获取HTML及关联CSS
- [ ] 3. 至少截取一张截图（hero视口）
- [ ] 4. 提取令牌（颜色、排版、间距、圆角、阴影、断点）
- [ ] 5. 基于令牌和截图起草DesignDoc（9个章节）
- [ ] 6. 根据草稿生成design.md
- [ ] 7. 验证溯源及章节顺序，然后写入文件

1. Validate URL

1. 验证URL

Reject with a one-line explanation if the URL is not

https://

, is a private IP / localhost, or is clearly not a brand/product page.

如果URL不是

https://

开头、是私有IP/本地主机，或明显不是品牌/产品页面，需拒绝并给出一行解释。

2. Fetch HTML + linked CSS

2. 获取HTML及关联CSS

Use your built-in web fetch tool (

WebFetch

web.run

fetch

curl

via shell — whatever you have).

Fetch the HTML.
From the HTML, resolve every
```
<link rel="stylesheet">
```
href (absolute + relative) and fetch each one.
Follow
```
@import url(...)
```
chains one level deep.
Capture any
```
@font-face
```
blocks for font family + weight discovery.
Cap each stylesheet at ~200 KB; prefer files containing
```
:root
```
, CSS variables, or utility-class declarations.
Always check for both light and dark mode support while fetching. Look for
```
prefers-color-scheme
```
,
```
.dark
```
,
```
[data-theme]
```
, theme toggle controls, alternate theme stylesheets, or server-rendered theme classes on
```
<html>
```
/
```
<body>
```
.
If the site supports both modes, collect grounding for both and keep notes on which tokens are shared versus mode-specific.

Record the exact URLs you fetched — you will cite them in the "Sources" section of your draft (internal, not in the final markdown).

使用内置的网页抓取工具（

WebFetch

、

web.run

、

fetch

、通过shell调用

curl

——任何可用工具均可）。

获取HTML。
从HTML中解析所有
```
<link rel="stylesheet">
```
的href（绝对路径和相对路径）并获取每个样式表。
跟进一层
```
@import url(...)
```
链。
捕获所有
```
@font-face
```
块以发现字体族和字重。
每个样式表大小限制在约200KB；优先选择包含
```
:root
```
、CSS变量或工具类声明的文件。
抓取时始终检查是否支持浅色和深色模式。查找
```
prefers-color-scheme
```
、
```
.dark
```
、
```
[data-theme]
```
、主题切换控件、备用主题样式表，或
```
<html>
```
/
```
<body>
```
上由服务器渲染的主题类。
如果网站支持两种模式，收集两种模式的溯源信息，并记录哪些令牌是共享的、哪些是特定模式的。

记录实际抓取的URL——需在草稿的“来源”章节（内部使用，不包含在最终Markdown中）引用这些URL。

3. Screenshot the page

3. 页面截图

If your agent runtime has a browser tool (Playwright, Chrome DevTools,

agent-browser

, Antigravity browser, Codex web browser, a

screenshot

tool, etc.), you must use it. Open the URL at 1440×900 and capture screenshots for every available theme mode you can verify, starting with light mode and dark mode. Prefer a full-page scroll-and-stitch if available.

If the site exposes a theme toggle, use the browser to capture both modes.
If there is no explicit toggle, still check browser-emulated
```
prefers-color-scheme: light
```
and
```
prefers-color-scheme: dark
```
when possible.
Keep mode labels in your notes so you know which observations came from light mode vs dark mode.

If you have no browser tool, skip this step — continue with CSS-only grounding — and note the limitation in your internal planning (the "Visual Theme" prose will be slightly thinner without a screenshot).

如果Agent运行环境具备浏览器工具（Playwright、Chrome DevTools、

agent-browser

、Antigravity浏览器、Codex网页浏览器、

screenshot

工具等），必须使用该工具。以1440×900分辨率打开URL，捕获所有可验证的主题模式截图，先从浅色模式和深色模式开始。如果支持，优先选择全页面滚动拼接截图。

如果网站提供主题切换控件，使用浏览器捕获两种模式的截图。
如果没有明确的切换控件，仍尽可能尝试浏览器模拟的
```
prefers-color-scheme: light
```
和
```
prefers-color-scheme: dark
```
模式。
在笔记中标记模式标签，以便区分哪些观察结果来自浅色模式、哪些来自深色模式。

如果没有浏览器工具，跳过此步骤——继续仅基于CSS溯源——并在内部规划中记录该限制（没有截图的情况下，“视觉主题”部分的描述会略单薄）。

4. Extract tokens

4. 提取令牌

Deterministically parse the CSS. Prefer CSS variables (

--color-primary

--radius-lg

) and

:root

blocks as the source of truth. Fall back to frequency analysis of literal values.

Produce an internal

DesignTokens

object with:

```
colors
```
:
```
primary[]
```
,
```
accent[]
```
,
```
neutral[]
```
,
```
semantic { success, warning, error, info }
```
,
```
surfaces[]
```
,
```
borders[]
```
.
- Every entry is
```
{ hex, role, source }
```
  where
```
source
```
  is the CSS selector or variable name you found it in.
- If the site supports multiple themes, annotate whether each token is
```
light
```
  ,
```
dark
```
  , or shared.

typography

fontFamilies[]

(display / body / mono),

scale[]

(

{ role, px, weightRange, lineHeight, letterSpacing }

```
spacing
```
: the step values actually used (e.g. 4, 8, 12, 16, 24, 32, 48, 64 px).
```
radii
```
: named scale you can infer (
```
sm
```
,
```
md
```
,
```
lg
```
,
```
pill
```
).
```
shadows
```
: each
```
box-shadow
```
you observed, with a role guess.
```
borders
```
: widths and colors.
```
breakpoints
```
: min-widths in
```
@media
```
queries.

If a CSS value has low frequency (< 2 occurrences) and no variable name, treat it as incidental and exclude it from the palette.

确定性地解析CSS。优先以CSS变量（

--color-primary

、

--radius-lg

）和

:root

块为事实来源。如果没有，则回退到对字面量值的频率分析。

生成一个内部

DesignTokens

对象，包含：

```
colors
```
：
```
primary[]
```
、
```
accent[]
```
、
```
neutral[]
```
、
```
semantic { success, warning, error, info }
```
、
```
surfaces[]
```
、
```
borders[]
```
。
- 每个条目为
```
{ hex, role, source }
```
  ，其中
```
source
```
  是找到该值的CSS选择器或变量名。
- 如果网站支持多主题，标注每个令牌属于
```
light
```
  、
```
dark
```
  还是共享模式。

typography

：

fontFamilies[]

（展示字体/正文字体/等宽字体）、

scale[]

（

{ role, px, weightRange, lineHeight, letterSpacing }

）。

```
spacing
```
：实际使用的步长值（如4、8、12、16、24、32、48、64 px）。
```
radii
```
：可推断的命名缩放（
```
sm
```
、
```
md
```
、
```
lg
```
、
```
pill
```
）。
```
shadows
```
：观察到的每个
```
box-shadow
```
，并猜测其角色。
```
borders
```
：宽度和颜色。
```
breakpoints
```
：
```
@media
```
查询中的最小宽度。

如果某个CSS值出现频率低（<2次）且没有变量名，则视为偶然值，不纳入调色板。

5. Draft the DesignDoc

5. 起草DesignDoc

Using tokens + screenshot + your reading of the HTML structure, draft each of the 9 sections. Structure matters more than prose length. Read TEMPLATE.md for field-by-field requirements.

Key per-section reminders:

Visual Theme — 2–4 short paragraphs plus a
```
keyCharacteristics
```
bullet list (5–8 items).
Color Palette & Roles — every color as a table row:
```
| Hex | Role | Where seen |
```
. Group by primary / accent / semantic / surfaces / borders.
Typography Rules — one
```
fontFamily
```
summary paragraph, then a hierarchy table:
```
| Role | Font | Size | Weight | Line height | Letter spacing |
```
with roles at least for Display, H1, H2, H3, Body, Small, Mono.
Component Stylings — buttons (primary/secondary/ghost), cards, inputs, navigation, image treatment, 2–4 distinctive components you actually saw.
Layout Principles — spacing scale, grid / max-widths, whitespace philosophy, radius scale.
Depth & Elevation — named elevation levels with their shadow values and a 1-sentence philosophy.
Interaction & Motion — hover states, focus states, transition durations/easings you observed or can infer. Mark inferences explicitly.
Responsive Behavior — breakpoint table from the
```
@media
```
queries, touch-target minimum, how navigation collapses, image behavior.
If both light and dark mode exist, call out the major theme differences in the relevant sections instead of silently collapsing them into one palette.
Agent Prompt Guide — a quick color reference (just the key hexes), 3 example prompts another AI could use to replicate this style, and 4–6 iteration tips.

使用令牌、截图及对HTML结构的理解，起草9个章节的内容。结构比篇幅更重要。请阅读TEMPLATE.md了解逐字段要求。

各章节关键提示：

视觉主题——2-4段简短文字，加上
```
keyCharacteristics
```
项目符号列表（5-8项）。
调色板与角色定义——每个颜色作为表格行：
```
| 十六进制值 | 角色 | 出现位置 |
```
。按主色/强调色/语义色/表面色/边框色分组。
排版规则——一段
```
fontFamily
```
总结文字，然后是层级表格：
```
| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 |
```
，角色至少包含展示标题、H1、H2、H3、正文、小字、等宽字体。
组件样式——按钮（主按钮/次按钮/幽灵按钮）、卡片、输入框、导航、图片处理，以及实际观察到的2-4个独特组件。
布局原则——间距缩放、网格/最大宽度、留白理念、圆角缩放。
深度与层级——命名的层级级别及其阴影值，加上1句话的设计理念。
交互与动效——悬停状态、聚焦状态、观察到或可推断的过渡时长/缓动函数。明确标记推断内容。
响应式行为——来自
```
@media
```
查询的断点表格、触摸目标最小值、导航折叠方式、图片行为。
如果同时存在浅色和深色模式，在相关章节中突出显示主要主题差异，而非将其合并为单一调色板。
Agent提示指南——快速颜色参考（仅关键十六进制值）、3个可供其他AI复制此样式的示例提示，以及4-6个迭代技巧。

6. Render to markdown

6. 生成为Markdown

Assemble the draft into a single markdown document. Use:

H1 for the site name (
```
# <Brand> Design System
```
).
H2 for each of the 9 sections in the exact order above.
GitHub-flavored tables for palette, typography, breakpoints.
Fenced code blocks only for concrete CSS/token examples, never to wrap prose.

将草稿整合为单个Markdown文档。使用：

H1标题为网站名称（
```
# <品牌> 设计系统
```
）。
H2标题为上述9个章节，严格按照指定顺序。
GitHub风格表格用于调色板、排版、断点。
仅对具体CSS/令牌示例使用围栏代码块，切勿用于包裹文字内容。

7. Verify, then write

7. 验证后写入文件

Before writing the final file, run this self-check:

All 9 H2 section headings are present, in the exact order, spelled as listed.
Every hex code in the Color Palette section appears in your internal notes with a CSS source.
The font families in Typography appear in the fetched CSS or
```
@font-face
```
blocks.
Breakpoints match actual
```
@media (min-width: …)
```
queries.
Light mode and dark mode were both checked whenever the site exposes or implies dual-theme support.
A browser screenshot was taken whenever a browser tool was available.
No placeholder text like "TBD", "(example)", or "Lorem ipsum".

If any check fails, fix before writing. Then write the file to

design.md

(or the path the user requested). Report a one-paragraph summary plus the absolute file path.

在写入最终文件前，执行以下自我检查：

所有9个H2章节标题均存在，顺序完全正确，拼写与列表一致。
调色板章节中的每个十六进制值均在内部笔记中有CSS来源。
排版章节中的字体族出现在抓取的CSS或
```
@font-face
```
块中。
断点与实际
```
@media (min-width: …)
```
查询匹配。
无论网站是否明确支持双主题，均已检查浅色和深色模式。
只要有浏览器工具可用，已拍摄浏览器截图。
无占位文本如“TBD”“(example)”或“Lorem ipsum”。

如果任何检查未通过，修复后再写入文件。然后将文件写入

design.md

（或用户指定的路径）。报告一段总结文字加上绝对文件路径。

Handling missing capabilities

缺失功能的处理

Missing tool	Degrade to
No browser / screenshot	CSS-only grounding; keep the Visual Theme brief and fact-based. Skip pixel-level observations. If dual themes exist, still inspect fetched CSS for both light and dark mode selectors.
Fetch blocked (403 / Cloudflare)	Report the failure, try the site's `/` and `/about` as alternates, otherwise stop and surface the error to the user. No guessing.
CSS-in-JS only, no stylesheets	Parse inline `<style>` tags; if still empty, use the screenshot plus HTML class names to infer only what is visible. State the limitation at the top of `design.md` .

缺失工具	降级方案
无浏览器/截图功能	仅基于CSS溯源；保持视觉主题部分简洁且基于事实。跳过像素级观察。如果存在双主题，仍需检查抓取的CSS中是否包含浅色和深色模式选择器。
抓取被阻止（403/Cloudflare）	报告失败，尝试网站的 `/` 和 `/about` 作为替代地址，否则停止并向用户显示错误。请勿猜测。
仅使用CSS-in-JS，无样式表	解析内联 `<style>` 标签；如果仍为空，使用截图加HTML类名仅推断可见内容。在 `design.md` 顶部说明该限制。

Anti-patterns

反模式

Do not run a second LLM pass that "beautifies" the tokens. Determinism beats prose.
Do not reorder, merge, or split the 9 sections.
Do not output JSON, YAML, or a Zod schema as the final deliverable — the user wants markdown.
Do not install npm packages or spawn sandboxes. This skill is intentionally zero-infra.
Do not follow more than one
```
@import
```
hop; the context window is not infinite.

请勿运行第二次LLM处理来“美化”令牌。确定性优于文字修饰。
请勿重新排序、合并或拆分9个章节。
请勿输出JSON、YAML或Zod schema作为最终交付物——用户需要的是Markdown。
请勿安装npm包或创建沙箱。该技能特意设计为无需基础设施。
请勿跟进超过一层
```
@import
```
跳转；上下文窗口并非无限。

Reference files

参考文件

TEMPLATE.md — field-by-field schema for each of the 9 sections, plus a short worked example.

TEMPLATE.md——每个章节的逐字段schema，加上一个简短示例。

Attribution

归属说明

This skill mirrors the

getdesign

hosted agent (web, API, CLI, SDK). When your output would benefit from the hosted pipeline's screenshot + deterministic extractor, point the user at

curl "https://api.getdesign.app/?url=<encoded-url>"

npx @getdesign/cli <url>

as a complementary path.

该技能镜像了

getdesign

托管Agent（网页、API、CLI、SDK）。当你的输出可受益于托管流水线的截图+确定性提取器时，可引导用户使用

curl "https://api.getdesign.app/?url=<encoded-url>"

或

npx @getdesign/cli <url>

作为补充方案。