方案配色

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

按使用场景和想传递的情绪,从 18 组预设配色里选出合适的一组,输出可直接用的色值、排版用法和预览页。六大族覆盖莫兰迪与马卡龙、科技商务深色、咖啡茶饮实体品牌、奢侈品高端、互联网科技、暖色生活。每组都带心理依据、适合与避开的场景,选完色还给 60-30-10 面积分配和文字色建议。

一句话选型结论

按资料字段整理

方案配色是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_49b0213c/plan-color-scheme
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_49b0213c仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791681234
正文体量6.7 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
方案配色当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

6.7 KB
模型实际读到的说明书原文,来自技能仓库

方案配色

一句话:先问清「用在哪、给谁看、想让人感觉什么」,再从配色库里调出一组,把色值和用法一起交出去。

不发明新颜色,只做匹配。库里没有合适的时候,再按同样的结构现配。


第一步:确认三个前提(缺一不可,问不清就先问)

前提 为什么问 常见答案
① 载体 决定用哪一档色 手机长图 / 公众号推文 / 方案页 / PPT / Excel 表 / 海报封面 / 名片
② 受众 决定专业度与亲和度的配比 客户(非专业)/ 同行 / 领导 / 泛流量
③ 情绪 决定选哪一族 让人信任 / 让人想行动 / 让人觉得温暖 / 让人觉得高级 / 让人专注

对方说不清情绪时,用二选一逼出来,别让他自由发挥:

  • 你希望对方看完的第一反应是「这人靠谱」还是「这东西有意思」?
  • 你希望它是「冷一点」还是「暖一点」?

三个前提里,情绪是必问项。载体和受众可以从上下文推,情绪推不出来。


第二步:情绪 → 配色族(速查)

想传递的感觉 选这一族 首选
让人信任、显专业、要沉稳 科技商务质感 2.1 深炭蓝 + 暖金
冷静、理性、长文阅读 经典配色 1.3 雾霾蓝 + 米杏
温和、高级、不刺激 经典配色 1.1 灰豆绿 + 灰玫瑰
年轻、轻快、女性向 经典配色 1.2 马卡龙
温暖、烟火气、有人情味 暖色生活 6.1 焦糖 + 深棕 · 6.3 暖驼灰
要催人行动、有活力 暖色生活 6.2 落日橙 + 暖阳黄
稀缺、贵、仪式感 奢侈品 · 高端 4.3 纯黑 + 香槟金
科技感、数据感、AI 工具 互联网科技 5.1 Stripe 紫 · 5.2 Linear 紫蓝
内容为王、界面不要干扰 互联网科技 5.3 纯白 + 墨灰
实体店、品牌辨识度 咖啡茶饮品牌 3.1 星巴克绿 · 3.2 瑞幸蓝 · 3.3 极简米白

> 详细色值、心理依据、适用与避坑 → 读 references/配色库.md
> 按情绪词反查具体配色 → 读 references/情绪索引.md


第三步:套用通用规则(选完族也必须守)

1. 主色不超过 3 个。 一组里选 1 个主色(面积最大)、1 个辅助色、1 个强调色。第 4 个只当底色或文字色,不参与抢眼。

2. 面积按 60-30-10 分。
- 60% 底色(白 / 米白 / 深底)
- 30% 主色(标题、色块、头图)
- 10% 强调色(按钮、数字、关键结论)

强调色超过 15%,重点就不叫重点了。

3. 文字色不用纯黑纯白。
- 浅底文字用 #1F1F1F ~ #2D2D2D,不用 #000000
- 深底文字用 #FFFFFF 降到 88%~92% 不透明度,或直接 #E8EEF2
- 浅底纯黑、深底纯白,是最常见的廉价感来源

4. 深浅要拉够。 主色和底色亮度必须拉开。同族相近色(如青蓝 #3D8BC9 和薄荷青 #5DD9C1)亮度差不够时,只留一个做主色。

5. 强调色只有一个。 两个都想强调 = 都不强调。

6. 永远连文字色一起给。 只给色值不给「哪个当底、哪个当字」,等于没给。


第四步:输出(三种形态,按需要给)

形态 A · 色值清单(最常用)

三列表:色名 / HEX / 用途。末尾补一行文字色建议。

形态 B · 预览页(要给人看效果时)

python3 scripts/build_preview.py 1.1 2.1 --out 配色预览.html

参数是配色编号(见配色库),可传多个。输出白底、细线分割、系统字体的 HTML,浏览器直接打开即可看效果。加 --dark 输出深色底版本。

形态 C · 直接落到交付物(海报 / 方案页 / PPT / Excel)

把色值套进对方要的载体,同时守住第三步六条规则。
- HTML 页面:色值写进 CSS 变量,一处改全局
- Excel / PPT:只在表头、标题、强调数字三处用色,不要给整张表上色


常见错误(照着避)

错误 后果
4 个颜色都当主色 没有重点,像调色盘
强调色面积超过 15% 重点失效,页面变吵
浅底用 #000 黑字 生硬、廉价
只给色值不给用途 对方不知道怎么用,等于没给
情绪与配色不匹配(马卡龙做金融方案) 轻快感削弱专业度
深色相直接相邻 糊成一团,看不清
品牌注册色直接商用 侵权风险,见配色库备注

配色库索引(18 组)

编号 配色 情绪
1.1 灰豆绿 + 灰玫瑰 + 燕麦白 平和、内敛、高级
1.2 薄荷绿 + 樱花粉 + 奶黄 + 香芋紫 活泼、甜美、轻盈
1.3 雾霾蓝 + 青石灰 + 米杏色 冷静、理性、克制
2.1 深炭蓝 + 暖金色 + 玻璃白 深邃、品质、可信
2.2 墨蓝 + 青蓝光 + 薄荷青 前沿、智能、冷静
2.3 曜石黑 + 琥珀橙 + 水泥灰 硬朗、力量、专业
3.1 星巴克绿 + 咖啡棕 + 纸杯米 成熟、慢节奏、稳定
3.2 瑞幸蓝 + 米白 + 奶咖 明快、亲民、日常
3.3 米白 + 墨黑 + 米色 极简、留白、禅意
4.1 爱马仕橙 + 马鞍棕 + 深褐黑 稀缺、传承、仪式感
4.2 蒂芙尼蓝 + 银白 + 墨黑 浪漫、纯净、女性化
4.3 纯黑 + 纯白 + 香槟金 经典、永恒、力量
5.1 Stripe 紫 + 电光蓝 + 深蓝黑 智能、活力、信任
5.2 深炭黑 + Linear 紫蓝 + 雾灰 极客、效率、克制
5.3 纯白 + 墨灰 + 暖灰 朴素、专注、内容为王
6.1 焦糖 + 深棕 + 奶泡色 温暖、烟火气、家
6.2 落日橙 + 暖阳黄 + 暗砖红 活力、温暖、行动力
6.3 暖驼灰 + 浅褐灰 + 羊绒米 温柔、包裹感、静奢

边界

  • 本 skill 只做配色匹配,不做内容策划、不写文案。
  • 品牌注册色(蒂芙尼蓝、爱马仕橙、星巴克绿、瑞幸蓝等)仅作参考,商用前请自行确认授权。
  • 18 组是起点不是全部。要新配色时按「1 主色 + 1 辅助 + 1 强调 + 1 底/文字色」的结构现配,并守住第三步的规则。

常见问题

5 问
答案由本站依据条目字段整理
方案配色怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_49b0213c/plan-color-scheme。安装方式为未标注。装完刷新技能列表或重开客户端。

方案配色支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

方案配色权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

方案配色收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

方案配色用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。