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