安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install html-css-style-color-guide
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 html-css-style-color-guide。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

HTML CSS 样式配色指南可帮助 AI 编码代理在创建或更新浏览器渲染的 HTML 和 CSS 时选择并应用颜色。它将颜色分为暖色、冷色、中性色和二元色，并运用 60-30-10 规则，在界面中平衡主色、辅色和强调色。
本指南针对背景、文本、渐变以及醒目颜色的克制使用，提供元素专属建议。它强调易读的对比度和专业、统一的视觉效果，是 Openclaw Skills 中适用于前端样式任务的实用补充。本指南提供设计建议，而非自动化对比度测试或现成的 CSS 主题。

应用场景

创建或更新网页的 HTML 和 CSS 样式。
为背景、文本、按钮、卡片和导航选择平衡的配色方案。
运用 60-30-10 规则分配主色、辅色和强调色。
在设置文本和表面样式时提升颜色对比度和可读性。
为区块、卡片、悬停状态和页眉设计柔和的渐变。
将暖色限制用于警报、警告、错误或小面积强调区域。

工作原理

确定样式任务，例如选择页面颜色或更新组件的 CSS。
将候选颜色归类为暖色、冷色、中性色或二元色，以指导配色决策。
建立 60-30-10 的比例：约 60% 使用冷色或浅色作为主色，约 30% 使用冷色或浅色作为辅色，约 10% 使用互补的暖色作为强调色。
背景选择白色、米白色、浅冷色或柔和的中性色；避免使用暖色背景。
为文本搭配适当的浅色或深色背景，避免对比度低的组合以及指南指出难以阅读的颜色。
谨慎使用暖色表示紧急或重要状态，并在统一的色系内应用柔和的渐变，最好使用线性渐变。
将这些选择应用于相关 HTML/CSS 元素，并检查渲染后的界面是否易读且视觉平衡。

配置指南

此技能包含设计指导，不指定软件包、安装命令、配置文件或运行时依赖。按照兼容的 AI 编码代理所采用的技能加载流程提供此技能，然后在创建或更新 HTML/CSS 样式时调用它。
本指南不要求进行 shell 安装或构建：

SKILL.md 中未指定安装命令

HTML CSS 样式配色指南 数据架构与分类体系
这是一项仅提供指南的技能：SKILL.md 未定义生成的数据文件、持久化存储、机器可读的架构，也未定义技能自身 frontmatter 之外的元数据分类体系。
区域 指引
技能元数据 名称：html-css-style-color-guide；描述注明适用于 HTML/CSS 配色和样式任务。
颜色分组 暖色（橙色、红色、黄色）、冷色（蓝色、绿色、紫色）、中性色（灰色）和二元色（黑色和白色）。
配色比例 60% 主色、30% 辅色和 10% 强调色；主色和辅色为冷色或浅色，强调色则为互补的暖色。
样式对象 背景、文本、按钮、卡片、渐变、页眉、导航和交互状态。
输出产物 未规定任何文件；这些指引用于编写或编辑 HTML 和 CSS。

高级特性

将 60-30-10 配色比例规则应用于界面元素。
按角色区分配色建议，包括背景、文本、强调色和渐变。
建议谨慎使用暖色来表示警报、警告和错误，而非用于大面积区域。
建议使用柔和的渐变、尽量减少颜色变化，并避免混合暖色与冷色的渐变组合。
提供外部配色和设计系统资源，供进一步研究配色方案。
未指定钩子、自动化对比度检查、多代理工作流或内置验证功能。

name: html-css-style-color-guide description: 'Color usage guidelines and styling rules for HTML and CSS elements to ensure accessible, professional designs. Use when creating or updating HTML/CSS styles, choosing colors for web pages, styling backgrounds, text, buttons, or gradients. Applies the 60-30-10 rule for balanced color schemes.'

HTML CSS Style Color Guide

Follow these guidelines when updating or creating HTML/CSS styles for browser rendering. Color names represent the full spectrum of their respective hue ranges (e.g., "blue" includes navy, sky blue, etc.).

When to Use This Skill

Creating or updating HTML/CSS styles

Choosing colors for web page elements

Styling backgrounds, text, buttons, cards, or gradients

Ensuring accessible color combinations

Applying professional color schemes

Color Definitions

Hot Colors: Oranges, reds, and yellows
Cool Colors: Blues, greens, and purples
Neutral Colors: Grays and grayscale variations
Binary Colors: Black and white 60-30-10 Rule Primary Color: Use 60% of the time (cool or light color)
Secondary Color: Use 30% of the time (cool or light color)
Accent: Use 10% of the time (complementary hot color)

Color Usage Guidelines

Balance the colors used by applying the 60-30-10 rule to graphic design elements like backgrounds, buttons, cards, etc...

Background Colors

Never Use:

Purple or magenta

Red, orange, or yellow

Pink

Any hot color

Recommended:

White or off-white

Light cool colors (e.g., light blues, light greens)

Subtle neutral tones

Light gradients with minimal color shift

Text Colors

Never Use:

Yellow (poor contrast and readability)

Pink

Pure white or light text on light backgrounds

Pure black or dark text on dark backgrounds

Recommended:

Dark neutral colors (e.g., #1f2328, #24292f)
Near-black variations (#000000 to #333333)

Ensure background is a light color

Dark grays (#4d4d4d, #6c757d)

High-contrast combinations for accessibility

Near-white variations (#ffffff to #f0f2f3)

Ensure background is a dark color

Colors to Avoid

Unless explicitly required by design specifications or user request, avoid:

Bright purples and magentas

Bright pinks and neon colors

Highly saturated hot colors

Colors with low contrast ratios (fails WCAG accessibility standards)

Colors to Use Sparingly

Hot Colors (red, orange, yellow):

Reserve for critical alerts, warnings, or error messages

Use only when conveying urgency or importance

Limit to small accent areas rather than large sections

Consider alternatives like icons or bold text before using hot colors

Gradients

Apply gradients with subtle color transitions to maintain professional aesthetics.

Best Practices

Keep color shifts minimal (e.g., #E6F2FF to #F5F7FA)

Use gradients within the same color family

Avoid combining hot and cool colors in a single gradient

Prefer linear gradients over radial for backgrounds

Appropriate Use Cases

Background containers and sections

Button hover states and interactive elements

Drop shadows and depth effects

Header and navigation bars

Card components and panels

Additional Resources

Color Tool

Government or Professional Color Standards

UI Color Palette Best Practices

Color Combination Resource

定稿智能体提示词
撰写博客文章