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 包含：

代码生成模板

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 扩展模板

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