# Design Style

> Apply design systems from 58 popular websites to your UI projects. Use when user mentions "like [website]", "use [brand] style", "设计风格", "design system", or wants consistent UI with a specific brand aesthetic. Brands include claude, cursor, stripe, vercel, figma, notion, apple, tesla, and 50+ more. TRIGGER whenever user references a specific website/brand for UI design or asks about design systems/style guides.

- Skill: `binfen1/design-style` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add binfen1/design-style`
- Raw SKILL.md: https://api.skillmd.com/api/skills/binfen1/design-style/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: binfen1 (https://skillmd.com/u/binfen1)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/binfen1/design-style

---


# Design Style Skill

将 58 个热门网站的设计规范应用到你的 UI 项目中。

## 何时使用

**自动触发场景：**
- 用户说 "用 Claude 风格设计..." 或 "像 Stripe 一样..."
- 用户问 "某个网站的设计规范/设计系统"
- 用户想要 "一致的 UI" 并提到品牌参考
- 用户说 "design-style" 或 "/design-style"

## 快速开始

### 1. 查看可用设计

当用户没有指定具体网站时，先读取索引文件展示选项：

```
Read: references/design_index.md
```

然后根据用户需求推荐适合的设计风格。

### 2. 加载设计规范

用户指定网站后（如 `claude`、`stripe`、`cursor`），读取对应的 DESIGN.md：

```
路径: C:\Users\Sloan\awesome-design-md\design-md\{name}\DESIGN.md
```

例如：
- Claude → `awesome-design-md/design-md/claude/DESIGN.md`
- Stripe → `awesome-design-md/design-md/stripe/DESIGN.md`
- Cursor → `awesome-design-md/design-md/cursor/DESIGN.md`

### 3. 应用设计

根据 DESIGN.md 内容，可以：

**查询模式**：解释设计规范
- 颜色系统：主色、次要色、背景色、边框色
- 字体：家族、大小层级、权重
- 组件：按钮样式、卡片、输入框
- 布局：间距系统、网格

**生成模式**：生成代码
- CSS 样式
- Tailwind 配置
- React/Vue 组件
- 设计 token 文件

## 使用示例

### 示例 1：直接指定风格

**用户**: "用 Claude 风格设计一个登录页"

**流程**:
1. 读取 `awesome-design-md/design-md/claude/DESIGN.md`
2. 提取关键元素：
   - 背景：羊皮纸色 `#f5f4ed`
   - 主色：赤陶色 `#c96442`
   - 字体：Anthropic Serif（标题）+ Sans（正文）
   - 按钮：温暖沙色 `#e8e6dc`，圆角 8-12px
3. 根据这些规范生成登录页代码

### 示例 2：交互选择

**用户**: "我想用一个设计风格，给我推荐几个适合开发工具的"

**流程**:
1. 读取 `references/design_index.md`
2. 推荐 Developer Tools 类别：cursor、vercel、linear.app、warp
3. 简述每个风格特点让用户选择
4. 用户选择后加载对应 DESIGN.md

### 示例 3：查询规范

**用户**: "Stripe 的颜色系统是什么样的"

**流程**:
1. 读取 `awesome-design-md/design-md/stripe/DESIGN.md`
2. 总结颜色部分：
   - 主品牌色、次要色
   - 背景色层级
   - 语义色（成功、错误、警告）
3. 可选生成 CSS 变量或 Tailwind 配置

## 设计文件结构

每个 DESIGN.md 包含：

| 章节 | 内容 |
|------|------|
| Visual Theme & Atmosphere | 整体视觉氛围描述 |
| Color Palette & Roles | 详细颜色定义和用途 |
| Typography Rules | 字体家族、大小、权重、行高 |
| Component Stylings | 按钮、卡片、输入、导航样式 |
| Layout Principles | 间距系统、网格、容器 |
| Depth & Elevation | 阴影层级定义 |
| Do's and Don'ts | 设计原则和禁忌 |
| Responsive Behavior | 断点、折叠策略 |
| Agent Prompt Guide | 给 AI 的提示示例 |

## 代码生成模板

### CSS 变量模板

```css
/* {品牌名} Design System */
:root {
  /* Colors */
  --color-primary: {主色};
  --color-secondary: {次要色};
  --color-background: {背景色};
  --color-text: {主文字色};
  --color-text-secondary: {次要文字色};
  --color-border: {边框色};
  
  /* Typography */
  --font-heading: {标题字体};
  --font-body: {正文字体};
  --font-code: {代码字体};
  
  /* Spacing */
  --spacing-base: {基础间距}px;
  
  /* Radius */
  --radius-sm: {小圆角}px;
  --radius-md: {中等圆角}px;
  --radius-lg: {大圆角}px;
  
  /* Shadows */
  --shadow-sm: {小阴影};
  --shadow-md: {中等阴影};
}
```

### Tailwind 扩展模板

```javascript
// tailwind.config.js 扩展
module.exports = {
  theme: {
    extend: {
      colors: {
        // {品牌名} 颜色
        '{brand}-primary': '{主色}',
        '{brand}-secondary': '{次要色}',
        ...
      },
      fontFamily: {
        '{brand}-heading': ['{标题字体}'],
        '{brand}-body': ['{正文字体}'],
      },
    },
  },
}
```

## 注意事项

1. **路径正确**：设计文件在 `C:\Users\Sloan\awesome-design-md\design-md\{name}\DESIGN.md`
2. **名称匹配**：使用索引中的名称（如 `claude` 而非 `Claude.ai`）
3. **按需加载**：只加载用户需要的设计，不要预加载多个
4. **保持一致**：生成代码时严格遵守 DESIGN.md 中的规范
5. **注明来源**：生成时注明使用的是哪个设计系统

---

**设计文件路径**: `C:\Users\Sloan\awesome-design-md\design-md\`
**索引文件**: `references/design_index.md`