https://github.com/ethanz-code/caoliao-skills
A skills collection project
https://github.com/ethanz-code/caoliao-skills
Last synced: 25 days ago
JSON representation
A skills collection project
- Host: GitHub
- URL: https://github.com/ethanz-code/caoliao-skills
- Owner: ethanz-code
- Created: 2026-06-04T02:56:39.000Z (29 days ago)
- Default Branch: main
- Last Pushed: 2026-06-04T05:01:56.000Z (29 days ago)
- Last Synced: 2026-06-04T07:04:17.299Z (29 days ago)
- Language: CSS
- Size: 75.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 草料风格 (caoliao-style) Skills 项目
从草料二维码 (cli.im) 提取的中国简约设计系统，追求**克制优雅**的高端质感。
## 项目结构
```
caoliao-skills/
├── README.md # 项目说明
├── caoliao-style/ # 草料风格设计系统
│ ├── SKILL.md # 主技能文档
│ ├── assets/ # 静态资源
│ └── references/ # 参考文档
│ ├── design/ # 设计理念
│ │ ├── brand-spirit.md # 品牌精神与设计哲学
│ │ ├── design-principles.md # 设计原则与决策指南
│ │ ├── design-analysis.md # 设计系统分析报告
│ │ ├── design-checklist.md # 设计质量检查清单
│ │ └── design-decisions.md # 设计决策文档
│ ├── tokens/ # 设计 Token
│ │ ├── design-tokens.css # CSS变量设计token
│ │ └── design-tokens.json # JSON格式设计token
│ ├── components/ # 组件相关
│ │ ├── component-library.md # 组件库设计规范
│ │ └── component-styles.css # 组件样式库
│ ├── animations/ # 动画相关
│ │ ├── animations.css # 动画系统CSS
│ │ ├── micro-interactions.md # 微交互动画详解
│ │ └── real-interactions.md # 真实交互行为记录
│ ├── templates/ # 模板相关
│ │ ├── quick-start-templates.md # 快速起步模板
│ │ ├── login-template.md # 登录页模板
│ │ └── layout-patterns.md # 页面布局模板库
│ ├── guides/ # 指南相关
│ │ ├── responsive-design.md # 响应式设计规则
│ │ ├── mobile-dark-mode.md # 移动端深色模式
│ │ ├── i18n.md # 国际化指南
│ │ └── accessibility-performance.md # 可访问性与性能
│ ├── reference/ # 快速参考
│ │ ├── quick-reference.md # 快速参考卡片
│ │ └── snippets.css # 常用代码片段
│ └── screenshots/ # 参考图目录
│ ├── README.md # 参考图使用指南
│ ├── homepage/ # 首页截图
│ ├── components/ # 组件截图
│ └── interactions/ # 交互状态截图
└── style-extractor/ # 通用风格提取工具
├── SKILL.md # 提取工具文档
├── assets/ # 静态资源
└── references/ # 参考文档
```
## 快速开始
### 使用草料风格
1. 阅读 `caoliao-style/SKILL.md` 了解整体设计系统
2. 阅读 `caoliao-style/references/design/brand-spirit.md` 理解品牌精神
3. 阅读 `caoliao-style/references/design/design-principles.md` 掌握设计原则
4. 阅读 `caoliao-style/references/components/component-library.md` 了解组件规范
5. 引入 `caoliao-style/references/tokens/design-tokens.css` 到你的项目
6. 参考 `caoliao-style/references/components/component-styles.css` 使用组件样式
### 提取其他网站风格
1. 阅读 `style-extractor/SKILL.md` 了解提取流程
2. 使用提取工具分析目标网站
3. 生成设计 token 和组件样式
## 设计哲学
草料风格的核心是：**简单实用、克制优雅、专业可信、温和友善**
> "好的设计是看不见的设计。当用户专注于内容本身，而非界面时，设计就成功了。"
### 四个原则
1. **内容优先**：设计是为内容服务的，不是为了展示设计技巧
2. **克制优雅**：优雅不是加法，是减法
3. **实用主义**：每个设计决策都有功能性理由
4. **温暖柔和**：设计应该给人温暖感，不冷漠
### 关键特征
- **品牌绿** `#00A13B`：代表成长、安全、信任
- **链接蓝** `#166BC7`：代表可点击、可交互
- **蓝色调阴影** `rgba(21,37,70,0.08)`：温暖、柔和、不冷漠
- **小圆角** 2-4px：专业、可信、不浮夸
- **统一过渡** 0.3s：刚好能感知，不拖沓
- **下划线展开动画**：从中间往外展开，优雅精致
## 组件库
草料风格包含以下组件：
### 基础组件
- **Button** 按钮：无上浮，只有背景色变化
- **Input** 输入框：聚焦时蓝色光晕
- **Textarea** 文本域：聚焦时无光晕，避免干扰
- **Tag** 标签：药丸形，品牌色浅底
- **Link** 链接：悬浮时变品牌绿
### 导航组件
- **Header** 导航栏：60px 高度，sticky 定位
- **NavMenu** 导航菜单：下划线展开动画
- **Tabs** 标签页：药丸形，横向滚动
- **Breadcrumb** 面包屑：清晰的层级指示
### 数据展示组件
- **Card** 卡片：蓝色调阴影 + 微上浮
- **PricingCard** 价格卡片：大数字 + 小单位组合
- **SceneCard** 场景卡片：图标 + 标题 + 描述
- **TemplateCard** 模板卡片：绿色调阴影 + 品牌感
- **StatCard** 数据统计卡片：大数字突出显示
### 反馈组件
- **Popover** 弹出菜单：淡入动画，优雅出现
- **Dropdown** 下拉菜单：清晰的层级关系
- **Tooltip** 提示框：即时反馈，不干扰
### 布局组件
- **Container** 容器：最大宽度 1200px
- **Grid** 网格：响应式布局
- **Footer** 页脚：多列布局，信息层次清晰
## 参考图
参考图目录 `caoliao-style/references/screenshots/` 包含草料网站的截图，用于支持多模态模型的理解。
### 目录结构
```
screenshots/
├── README.md # 参考图使用指南
├── homepage/ # 首页截图
│ └── full-page.png # 全页截图
├── components/ # 组件截图
│ └── pricing-cards.png # 价格卡片
└── interactions/ # 交互状态截图
├── nav-hover.png # 导航悬浮态
├── scene-card-hover.png # 场景卡片悬浮态
├── button-hover.png # 按钮悬浮态
├── input-focus.png # 输入框聚焦态
├── popover-menu.png # 弹出菜单
├── pricing-card-hover.png # 价格卡片悬浮态
└── support-popover.png # 支持菜单
```
## 许可证
MIT