{"id":50685569,"url":"https://github.com/ethanz-code/caoliao-skills","last_synced_at":"2026-06-08T22:32:58.313Z","repository":{"id":362420019,"uuid":"1258902219","full_name":"ethanz-code/caoliao-skills","owner":"ethanz-code","description":"A skills collection project","archived":false,"fork":false,"pushed_at":"2026-06-04T05:01:56.000Z","size":77,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-04T07:04:17.299Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ethanz-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-04T02:56:39.000Z","updated_at":"2026-06-04T05:02:00.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ethanz-code/caoliao-skills","commit_stats":null,"previous_names":["ethanz-code/caoliao-skills"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ethanz-code/caoliao-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fcaoliao-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fcaoliao-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fcaoliao-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fcaoliao-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ethanz-code","download_url":"https://codeload.github.com/ethanz-code/caoliao-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fcaoliao-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34083848,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-08T22:32:57.664Z","updated_at":"2026-06-08T22:32:58.308Z","avatar_url":"https://github.com/ethanz-code.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 草料风格 (caoliao-style) Skills 项目\n\n从草料二维码 (cli.im) 提取的中国简约设计系统，追求**克制优雅**的高端质感。\n\n## 项目结构\n\n```\ncaoliao-skills/\n├── README.md                    # 项目说明\n├── caoliao-style/               # 草料风格设计系统\n│   ├── SKILL.md                 # 主技能文档\n│   ├── assets/                  # 静态资源\n│   └── references/              # 参考文档\n│       ├── design/              # 设计理念\n│       │   ├── brand-spirit.md      # 品牌精神与设计哲学\n│       │   ├── design-principles.md # 设计原则与决策指南\n│       │   ├── design-analysis.md   # 设计系统分析报告\n│       │   ├── design-checklist.md  # 设计质量检查清单\n│       │   └── design-decisions.md  # 设计决策文档\n│       ├── tokens/              # 设计 Token\n│       │   ├── design-tokens.css    # CSS变量设计token\n│       │   └── design-tokens.json   # JSON格式设计token\n│       ├── components/          # 组件相关\n│       │   ├── component-library.md # 组件库设计规范\n│       │   └── component-styles.css # 组件样式库\n│       ├── animations/          # 动画相关\n│       │   ├── animations.css       # 动画系统CSS\n│       │   ├── micro-interactions.md # 微交互动画详解\n│       │   └── real-interactions.md # 真实交互行为记录\n│       ├── templates/           # 模板相关\n│       │   ├── quick-start-templates.md # 快速起步模板\n│       │   ├── login-template.md    # 登录页模板\n│       │   └── layout-patterns.md   # 页面布局模板库\n│       ├── guides/              # 指南相关\n│       │   ├── responsive-design.md # 响应式设计规则\n│       │   ├── mobile-dark-mode.md  # 移动端深色模式\n│       │   ├── i18n.md              # 国际化指南\n│       │   └── accessibility-performance.md # 可访问性与性能\n│       ├── reference/           # 快速参考\n│       │   ├── quick-reference.md   # 快速参考卡片\n│       │   └── snippets.css         # 常用代码片段\n│       └── screenshots/         # 参考图目录\n│           ├── README.md        # 参考图使用指南\n│           ├── homepage/        # 首页截图\n│           ├── components/      # 组件截图\n│           └── interactions/    # 交互状态截图\n└── style-extractor/             # 通用风格提取工具\n    ├── SKILL.md                 # 提取工具文档\n    ├── assets/                  # 静态资源\n    └── references/              # 参考文档\n```\n\n## 快速开始\n\n### 使用草料风格\n\n1. 阅读 `caoliao-style/SKILL.md` 了解整体设计系统\n2. 阅读 `caoliao-style/references/design/brand-spirit.md` 理解品牌精神\n3. 阅读 `caoliao-style/references/design/design-principles.md` 掌握设计原则\n4. 阅读 `caoliao-style/references/components/component-library.md` 了解组件规范\n5. 引入 `caoliao-style/references/tokens/design-tokens.css` 到你的项目\n6. 参考 `caoliao-style/references/components/component-styles.css` 使用组件样式\n\n### 提取其他网站风格\n\n1. 阅读 `style-extractor/SKILL.md` 了解提取流程\n2. 使用提取工具分析目标网站\n3. 生成设计 token 和组件样式\n\n## 设计哲学\n\n草料风格的核心是：**简单实用、克制优雅、专业可信、温和友善**\n\n\u003e \"好的设计是看不见的设计。当用户专注于内容本身，而非界面时，设计就成功了。\"\n\n### 四个原则\n\n1. **内容优先**：设计是为内容服务的，不是为了展示设计技巧\n2. **克制优雅**：优雅不是加法，是减法\n3. **实用主义**：每个设计决策都有功能性理由\n4. **温暖柔和**：设计应该给人温暖感，不冷漠\n\n### 关键特征\n\n- **品牌绿** `#00A13B`：代表成长、安全、信任\n- **链接蓝** `#166BC7`：代表可点击、可交互\n- **蓝色调阴影** `rgba(21,37,70,0.08)`：温暖、柔和、不冷漠\n- **小圆角** 2-4px：专业、可信、不浮夸\n- **统一过渡** 0.3s：刚好能感知，不拖沓\n- **下划线展开动画**：从中间往外展开，优雅精致\n\n## 组件库\n\n草料风格包含以下组件：\n\n### 基础组件\n- **Button** 按钮：无上浮，只有背景色变化\n- **Input** 输入框：聚焦时蓝色光晕\n- **Textarea** 文本域：聚焦时无光晕，避免干扰\n- **Tag** 标签：药丸形，品牌色浅底\n- **Link** 链接：悬浮时变品牌绿\n\n### 导航组件\n- **Header** 导航栏：60px 高度，sticky 定位\n- **NavMenu** 导航菜单：下划线展开动画\n- **Tabs** 标签页：药丸形，横向滚动\n- **Breadcrumb** 面包屑：清晰的层级指示\n\n### 数据展示组件\n- **Card** 卡片：蓝色调阴影 + 微上浮\n- **PricingCard** 价格卡片：大数字 + 小单位组合\n- **SceneCard** 场景卡片：图标 + 标题 + 描述\n- **TemplateCard** 模板卡片：绿色调阴影 + 品牌感\n- **StatCard** 数据统计卡片：大数字突出显示\n\n### 反馈组件\n- **Popover** 弹出菜单：淡入动画，优雅出现\n- **Dropdown** 下拉菜单：清晰的层级关系\n- **Tooltip** 提示框：即时反馈，不干扰\n\n### 布局组件\n- **Container** 容器：最大宽度 1200px\n- **Grid** 网格：响应式布局\n- **Footer** 页脚：多列布局，信息层次清晰\n\n## 参考图\n\n参考图目录 `caoliao-style/references/screenshots/` 包含草料网站的截图，用于支持多模态模型的理解。\n\n### 目录结构\n\n```\nscreenshots/\n├── README.md                    # 参考图使用指南\n├── homepage/                    # 首页截图\n│   └── full-page.png           # 全页截图\n├── components/                  # 组件截图\n│   └── pricing-cards.png       # 价格卡片\n└── interactions/                # 交互状态截图\n    ├── nav-hover.png           # 导航悬浮态\n    ├── scene-card-hover.png    # 场景卡片悬浮态\n    ├── button-hover.png        # 按钮悬浮态\n    ├── input-focus.png         # 输入框聚焦态\n    ├── popover-menu.png        # 弹出菜单\n    ├── pricing-card-hover.png  # 价格卡片悬浮态\n    └── support-popover.png     # 支持菜单\n```\n\n## 许可证\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethanz-code%2Fcaoliao-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fethanz-code%2Fcaoliao-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethanz-code%2Fcaoliao-skills/lists"}