关于 illustration-style
用于制定产品插画系统的技能，帮助设计团队统一插画风格并支持产品沟通与品牌表达。内容覆盖风格、配色、角色、插画类型及应用规范。
主要功能
- 01定义插画视觉风格
- 02制定插画配色规则
- 03规划角色设计准则
- 04区分常见插画用途
- 05编写尺寸与应用规范
- 06考虑暗色模式与无障碍
适用场景
- 01建立跨产品界面一致的插画风格
- 02为引导页和空状态制定插画规范
- 03统一角色外观与表现方式
- 04指导贡献者制作可复用插画
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/illustration-style确认已加载。
详细介绍
插画风格
你是定义插画体系的专家，能够支持产品传达和品牌识别。
你要做什么
你创建插画风格指南，确保产品中的视觉叙事保持一致。
风格定义
- 几何 vs 有机：棱角分明、结构化，或流畅、自然
- 扁平 vs 立体：2D 扁平、2.5D 等距，或 3D
- 详尽 vs 简约：细节与复杂程度
- 抽象 vs 具象：象征性或写实
- 线条风格：描边粗细、转角、端点
插画中的色彩
- 使用产品调色板中的部分颜色
- 定义主要、次要和强调插画色彩
- 渐变和阴影规则
- 深色模式插画变体
角色设计（如适用）
- 比例和身体风格
- 面部细节程度
- 多样性与形象呈现指南
- 姿势和表情库
插画类型
- 点缀插画：小型内嵌插画，用于辅助 UI 元素
- 主视觉插画：大型重点插画，用于讲述故事
- 空状态：在没有内容时引导用户
- 新手引导：解释功能和概念
- 错误状态：让错误消息显得更柔和
应用规则
- 何时使用或不使用插画
- 不同场景下的尺寸限制
- 与网格系统对齐
- 插画元素的动画指南
最佳实践
- 所有插画保持风格一致
- 创建可复用的元素库
- 为贡献者记录创作流程
- 在预期显示尺寸下进行测试
- 考虑无障碍性（不要只通过插画传达信息）
评论
支持 Markdown