design-guide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Guide

设计指南

This skill helps an agent turn broad design requests into concrete implementation guidance by loading the most relevant brand or product design references from

references/

Use this skill when the user asks for a website, app, dashboard, landing page, tool UI, component, or redesign that should feel:

like a known company or product
premium, polished, elegant, refined, cinematic, minimal, futuristic, playful, product-grade, or "high-end"
similar to phrases such as "像 Figma 一样", "参考 Apple", "做成 Linear 风格", "页面精美一点", "像大厂产品一样"

Do not use this skill for:

backend-only tasks
invisible infrastructure work
bug fixes that do not affect presentation
cases where the user explicitly wants to preserve an existing design system and does not want outside inspiration

该技能可帮助Agent从

references/

目录加载最相关的品牌或产品设计参考，将宽泛的设计需求转化为具体的实现指南。

当用户要求制作的网站、应用、仪表盘、落地页、工具UI、组件或重设计符合以下特征时可使用本技能：

对标知名公司或产品
高端、精致、优雅、考究、有电影感、极简、未来感、活泼、产品级或「高质感」
出现类似「像 Figma 一样」、「参考 Apple」、「做成 Linear 风格」、「页面精美一点」、「像大厂产品一样」的表述

以下场景不要使用本技能：

仅涉及后端的任务
不可见的基础设施工作
不影响展示效果的bug修复
用户明确要求保留现有设计系统、不需要外部灵感参考的场景

Goal

目标

Pick the minimum number of reference docs needed, extract implementable constraints, and apply them to the user's request without loading the entire design library into context.

The references are already bundled in

references/

. Each file is a brand- or product-specific design guide derived from a real interface and usually includes:

visual theme and atmosphere
typography and spacing
color system
component patterns
depth, motion, and interaction cues
responsive behavior
agent prompt guidance

选择最少所需的参考文档，提取可落地的约束，将其应用到用户需求中，不要把整个设计库都加载到上下文里。

参考资料已经打包在

references/

目录下。每个文件都是基于真实界面整理的特定品牌/产品设计指南，通常包含：

视觉主题与氛围
排版与间距
色彩系统
组件模式
层次、动效与交互提示
响应式表现
Agent提示词指南

Reference Provenance

参考来源

The markdown files under

references/

are sourced from the

getdesign.md

collection:

https://getdesign.md/

They are included here so the skill can use them locally without fetching remote content at runtime.

references/

下的markdown文件来源于

getdesign.md

合集：

https://getdesign.md/

这些文件已经内置在本技能中，运行时无需拉取远程内容即可本地使用。

Directory Layout

目录结构

text

design-guide/
├── SKILL.md
└── references/
    ├── Figma.md
    ├── Linear.md
    ├── Apple.md
    ├── Stripe.md
    ├── Notion.md
    ├── ...

references/

is a flat folder. Each markdown file represents one design reference. Filenames are the lookup keys.

Important naming notes:

Many references are exact brand names:
```
Figma.md
```
,
```
Apple.md
```
,
```
Linear.md
```
Some names contain spaces:
```
Mistral AI.md
```
,
```
Together AI.md
```
Some names use underscores:
```
Cal_com.md
```
Preserve the existing filenames when reading them

text

design-guide/
├── SKILL.md
└── references/
    ├── Figma.md
    ├── Linear.md
    ├── Apple.md
    ├── Stripe.md
    ├── Notion.md
    ├── ...

references/

是平级文件夹，每个markdown文件对应一个设计参考，文件名就是查询索引。

命名注意事项：

多数参考是精准的品牌名：
```
Figma.md
```
、
```
Apple.md
```
、
```
Linear.md
```
部分名称包含空格：
```
Mistral AI.md
```
、
```
Together AI.md
```
部分名称使用下划线：
```
Cal_com.md
```
读取文件时请保留原有文件名

Reference Index

参考索引

These are all files currently available under

references/

. Use these exact names when selecting and opening references:

```
Airbnb.md
```
```
Airtable.md
```
```
Apple.md
```
```
BMW.md
```
```
Cal_com.md
```
```
Claude.md
```
```
Clay.md
```
```
ClickHouse.md
```
```
Cohere.md
```
```
Coinbase.md
```
```
Composio.md
```
```
Cursor.md
```
```
ElevenLabs.md
```
```
Expo.md
```
```
Ferrari.md
```
```
Figma.md
```
```
Framer.md
```
```
HashiCorp.md
```
```
IBM.md
```
```
Intercom.md
```
```
Kraken.md
```
```
Lamborghini.md
```
```
Linear.md
```
```
Lovable.md
```
```
MiniMax.md
```
```
Mintlify.md
```
```
Miro.md
```
```
Mistral AI.md
```
```
MongoDB.md
```
```
NVIDIA.md
```
```
Notion.md
```
```
Ollama.md
```
```
OpenCode.md
```
```
Pinterest.md
```
```
PostHog.md
```
```
Raycast.md
```
```
Renault.md
```
```
Replicate.md
```
```
Resend.md
```
```
Revolut.md
```
```
Runway.md
```
```
Sanity.md
```
```
Sentry.md
```
```
SpaceX.md
```
```
Spotify.md
```
```
Stripe.md
```
```
Supabase.md
```
```
Superhuman.md
```
```
Tesla.md
```
```
Together AI.md
```
```
Uber.md
```
```
Vercel.md
```
```
VoltAgent.md
```
```
Warp.md
```
```
Webflow.md
```
```
Wise.md
```
```
Zapier.md
```
```
xAI.md
```

以下是

references/

目录下当前所有可用的文件，选择和打开参考时请使用以下精确名称：

```
Airbnb.md
```
```
Airtable.md
```
```
Apple.md
```
```
BMW.md
```
```
Cal_com.md
```
```
Claude.md
```
```
Clay.md
```
```
ClickHouse.md
```
```
Cohere.md
```
```
Coinbase.md
```
```
Composio.md
```
```
Cursor.md
```
```
ElevenLabs.md
```
```
Expo.md
```
```
Ferrari.md
```
```
Figma.md
```
```
Framer.md
```
```
HashiCorp.md
```
```
IBM.md
```
```
Intercom.md
```
```
Kraken.md
```
```
Lamborghini.md
```
```
Linear.md
```
```
Lovable.md
```
```
MiniMax.md
```
```
Mintlify.md
```
```
Miro.md
```
```
Mistral AI.md
```
```
MongoDB.md
```
```
NVIDIA.md
```
```
Notion.md
```
```
Ollama.md
```
```
OpenCode.md
```
```
Pinterest.md
```
```
PostHog.md
```
```
Raycast.md
```
```
Renault.md
```
```
Replicate.md
```
```
Resend.md
```
```
Revolut.md
```
```
Runway.md
```
```
Sanity.md
```
```
Sentry.md
```
```
SpaceX.md
```
```
Spotify.md
```
```
Stripe.md
```
```
Supabase.md
```
```
Superhuman.md
```
```
Tesla.md
```
```
Together AI.md
```
```
Uber.md
```
```
Vercel.md
```
```
VoltAgent.md
```
```
Warp.md
```
```
Webflow.md
```
```
Wise.md
```
```
Zapier.md
```
```
xAI.md
```

How To Read References

如何读取参考资料

Read only the files you need.

Preferred workflow:

Check whether the user named a brand, product, or aesthetic directly.
If yes, read that exact file first.
If the user did not name a reference, infer the closest 1-3 files from the routing guide below.
Extract 5-10 concrete design constraints before implementing.
Use those constraints to design and build the UI.

Never load all of

references/

into context.

仅读取你需要的文件。

推荐工作流：

检查用户是否直接提到了品牌、产品或设计风格。
如果是，优先读取对应文件。
如果用户没有指定参考，从下方的路由指南中推断最匹配的1-3个文件。
实现前先提取5-10条具体的设计约束。
使用这些约束来设计和搭建UI。

绝对不要把整个

references/

目录加载到上下文里。

Exact-match examples

精确匹配示例

"像 Figma 一样" -> read
```
references/Figma.md
```
"做成 Apple 官网那种感觉" -> read
```
references/Apple.md
```
"要有 Linear 那种产品感" -> read
```
references/Linear.md
```
"参考 Together AI 或 Mistral 的 AI 公司官网" -> read
```
references/Together AI.md
```
or
```
references/Mistral AI.md
```
"像 cal.com 那种排版" -> read
```
references/Cal_com.md
```

"像 Figma 一样" -> 读取
```
references/Figma.md
```
"做成 Apple 官网那种感觉" -> 读取
```
references/Apple.md
```
"要有 Linear 那种产品感" -> 读取
```
references/Linear.md
```
"参考 Together AI 或 Mistral 的 AI 公司官网" -> 读取
```
references/Together AI.md
```
或
```
references/Mistral AI.md
```
"像 cal.com 那种排版" -> 读取
```
references/Cal_com.md
```

Reading examples

读取示例

When opening files, use exact paths and quote names with spaces:

text

references/Figma.md
references/Linear.md
references/Apple.md
references/Together AI.md
references/Mistral AI.md
references/Cal_com.md

If you need discovery first, list or search the folder and then open only the best matches.

打开文件时请使用精确路径，名称包含空格的需要保留引号：

text

references/Figma.md
references/Linear.md
references/Apple.md
references/Together AI.md
references/Mistral AI.md
references/Cal_com.md

如果需要先查找参考，可以先列出或搜索文件夹内容，之后仅打开最匹配的文件即可。

Selection Rules

选择规则

Choose references in this order:

Explicit user mention
Product category match
Visual mood match
Interaction density match
Content model match

Default to:

1 primary reference
1 secondary reference for component language or motion
optional 1 tertiary reference only if the first two are insufficient

Avoid mixing more than 3 references unless the user explicitly asks for a hybrid.

按以下优先级选择参考：

用户明确提及的内容
产品类别匹配
视觉风格匹配
交互密度匹配
内容模型匹配

默认选择：

1个主参考
1个辅助参考，用于补充组件规范或动效
仅当前两个参考不足时，可选择1个额外的第三参考

除非用户明确要求混合风格，否则不要混合超过3个参考。

Routing Guide

路由指南

Use this as a starting point when the user does not give an exact brand.

当用户没有给出明确品牌时，可使用以下内容作为参考起点。

Creative tools and modern design software

创意工具与现代设计软件

Good defaults:

```
Figma.md
```
```
Framer.md
```
```
Webflow.md
```
```
Miro.md
```

Use when the user wants:

creative tool UI
sophisticated hero sections
colorful visual output inside a restrained shell
design-forward productivity software

推荐参考：

```
Figma.md
```
```
Framer.md
```
```
Webflow.md
```
```
Miro.md
```

适用于用户需要以下内容的场景：

创意工具UI
精致的首屏区块
克制外壳内的多彩视觉输出
设计导向的生产力软件

Productive, dense, high-craft SaaS

高效、高密度、高完成度SaaS

Good defaults:

```
Linear.md
```
```
Raycast.md
```
```
Superhuman.md
```
```
Notion.md
```
```
Airtable.md
```

Use when the user wants:

product precision
premium dashboards
compact tooling
strong hierarchy and polished interaction states

推荐参考：

```
Linear.md
```
```
Raycast.md
```
```
Superhuman.md
```
```
Notion.md
```
```
Airtable.md
```

适用于用户需要以下内容的场景：

产品级精准度
高端仪表盘
紧凑型工具
清晰的层级和精致的交互状态

Developer tools and technical trust

开发者工具与技术信任感

Good defaults:

```
Stripe.md
```
```
Vercel.md
```
```
Supabase.md
```
```
Mintlify.md
```
```
MongoDB.md
```
```
Sentry.md
```
```
PostHog.md
```
```
ClickHouse.md
```
```
HashiCorp.md
```

Use when the user wants:

developer credibility
documentation-heavy or product-led interfaces
fintech/developer product hybrid
clean technical storytelling

推荐参考：

```
Stripe.md
```
```
Vercel.md
```
```
Supabase.md
```
```
Mintlify.md
```
```
MongoDB.md
```
```
Sentry.md
```
```
PostHog.md
```
```
ClickHouse.md
```
```
HashiCorp.md
```

适用于用户需要以下内容的场景：

开发者可信度
重文档或产品驱动的界面
金融科技/开发者产品混合场景
简洁的技术向内容呈现

AI-native and futuristic interfaces

AI原生与未来感界面

Good defaults:

```
Claude.md
```
```
Runway.md
```
```
Replicate.md
```
```
ElevenLabs.md
```
```
Mistral AI.md
```
```
Together AI.md
```
```
MiniMax.md
```
```
xAI.md
```
```
Lovable.md
```

Use when the user wants:

AI lab aesthetics
cinematic gradients
futuristic interaction language
model, agent, or media product presentation

推荐参考：

```
Claude.md
```
```
Runway.md
```
```
Replicate.md
```
```
ElevenLabs.md
```
```
Mistral AI.md
```
```
Together AI.md
```
```
MiniMax.md
```
```
xAI.md
```
```
Lovable.md
```

适用于用户需要以下内容的场景：

AI实验室风格
电影感渐变
未来感交互语言
模型、Agent或媒体产品展示

Premium hardware, automotive, and cinematic product pages

高端硬件、汽车与电影感产品页

Good defaults:

```
Apple.md
```
```
Tesla.md
```
```
SpaceX.md
```
```
BMW.md
```
```
Ferrari.md
```
```
Lamborghini.md
```
```
Renault.md
```

Use when the user wants:

luxury presentation
object-focused product showcase
dramatic sections with large imagery and restrained UI chrome

推荐参考：

```
Apple.md
```
```
Tesla.md
```
```
SpaceX.md
```
```
BMW.md
```
```
Ferrari.md
```
```
Lamborghini.md
```
```
Renault.md
```

适用于用户需要以下内容的场景：

奢侈品展示
聚焦产品本身的展示
大尺寸图片+克制UI元素的戏剧化区块

Consumer, marketplace, and lifestyle polish

消费级、市场类与生活方式质感

Good defaults:

```
Airbnb.md
```
```
Pinterest.md
```
```
Spotify.md
```
```
Uber.md
```
```
Revolut.md
```
```
Wise.md
```

Use when the user wants:

approachable but polished consumer design
content browsing
marketplace or travel product feel
editorial or lifestyle-led presentation

推荐参考：

```
Airbnb.md
```
```
Pinterest.md
```
```
Spotify.md
```
```
Uber.md
```
```
Revolut.md
```
```
Wise.md
```

适用于用户需要以下内容的场景：

平易近人但精致的消费级设计
内容浏览
市场或旅行产品风格
编辑或生活方式导向的呈现

Finance, trust, and transaction-heavy products

金融、信任与重交易产品

Good defaults:

```
Stripe.md
```
```
Revolut.md
```
```
Wise.md
```
```
Coinbase.md
```
```
Kraken.md
```

Use when the user wants:

trust and clarity
conversion-focused flows
polished financial product UI

推荐参考：

```
Stripe.md
```
```
Revolut.md
```
```
Wise.md
```
```
Coinbase.md
```
```
Kraken.md
```

适用于用户需要以下内容的场景：

信任感与清晰度
转化导向的流程
精致的金融产品UI

Implementation Workflow

实现工作流

After selecting references:

Summarize the user's product, audience, and page type in one sentence.
Name the chosen references and why they fit.
Extract a compact design brief from the docs:
- color direction
- typography choices
- spacing rhythm
- border radius language
- card, button, input, and navigation patterns
- motion and depth
Convert that brief into implementation constraints for the actual UI.
Build the requested interface.
Ensure the result still fits the user's product and content, not just the reference aesthetic.

选择参考后：

用一句话总结用户的产品、受众和页面类型。
说明选择的参考以及匹配理由。
从文档中提取精简的设计 brief：
- 色彩方向
- 排版选择
- 间距节奏
- 圆角规范
- 卡片、按钮、输入框和导航模式
- 动效与层次
将上述brief转化为实际UI的实现约束。
搭建用户要求的界面。
确保最终成果适配用户的产品和内容，而不仅仅是符合参考的风格。

Output Requirements

输出要求

When using this skill, the resulting implementation should:

feel intentionally designed, not generic
preserve the main structural patterns of the user's existing product if one already exists
borrow design principles, not copy trademarks, logos, or exact branded assets
turn reference insights into CSS tokens, layout rules, and component constraints
stay coherent if multiple references are combined

Before implementation, keep a short internal checklist:

Which file(s) did I read?
What 5-10 constraints did I extract?
Which parts of the final UI come from the primary reference?
Which parts, if any, come from the secondary reference?

使用本技能时，最终实现的成果需要：

有明确的设计感，而非通用模板
如果用户已有现有产品，保留其主要结构模式
借鉴设计原则，不要复制商标、logo或专属品牌资产
将参考的洞察转化为CSS token、布局规则和组件约束
如果混合了多个参考，整体风格要保持统一

实现前，请对照内部检查清单确认：

我读取了哪些文件？
我提取了哪5-10条约束？
最终UI的哪些部分来自主参考？
如果有辅助参考，哪些部分来自辅助参考？

Conflict Resolution

冲突解决

If references conflict:

prioritize the explicitly named reference
prioritize the user's product category over visual novelty
prefer one strong visual system over a muddy blend

Examples:

"像 Figma 一样，但更像 Apple 一点" -> Figma for layout energy, Apple for restraint and polish
"做个 AI 工具站，但不要太花" -> start with
```
Claude.md
```
or
```
Linear.md
```
, not the most gradient-heavy AI reference
"做个漂亮的 todolist，像 Figma 一样" -> primary
```
Figma.md
```
, optional secondary
```
Linear.md
```
for productivity-app density

如果参考之间存在冲突：

优先选择用户明确提及的参考
优先匹配用户的产品类别，而非视觉新鲜感
优先使用一个清晰的视觉系统，而非模糊的混合风格

示例：

"像 Figma 一样，但更像 Apple 一点" -> 布局活力参考Figma，克制与精致感参考Apple
"做个 AI 工具站，但不要太花" -> 从
```
Claude.md
```
或
```
Linear.md
```
开始，不要选择渐变最多的AI参考
"做个漂亮的 todolist，像 Figma 一样" -> 主参考
```
Figma.md
```
，可选辅助参考
```
Linear.md
```
来适配生产力应用的密度

Efficiency Rules

效率规则

Do not read the whole library
Do not paraphrase entire reference files into the response
Do not expose large excerpts unless needed
Prefer extracting only the design constraints necessary to implement the user's request

This skill is successful when the agent can map vague design intent to the right references quickly and produce a UI that feels specific, credible, and implementation-ready.

不要读取整个参考库
不要把整个参考文件转述到响应里
除非必要，不要暴露大段参考摘录
优先仅提取实现用户需求所需的设计约束

当Agent能够快速将模糊的设计意图匹配到正确的参考，并产出风格明确、可信度高、可直接实现的UI时，本技能就达到了预期效果。