菜单
Use when commissioning or creating illustrations for a SaaS product. Covers the canonical illustration styles (geometric, isometric, hand-drawn, abstract), when each works, sourcing strategies, and how to maintain consistency.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/x3allamerican/design-skills-fleetsafety --skill illustration-system-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Use when designing 404 pages and the broader empty-state pattern library. Covers tone, illustration, search recovery, and the difference between 'no data yet' and 'this URL doesn't exist'.
Use when designing A/B tests. Covers hypothesis-driven testing, sample-size calculation, the test-design template, and the cultural rituals that make testing productive.
Use when shipping any user-facing UI. Covers the non-negotiable accessibility baseline: contrast, focus states, semantic HTML, keyboard navigation, screen-reader support, motion preferences. The minimum to avoid embarrassment and ADA risk.
| name | illustration-system-design |
| description | Use when commissioning or creating illustrations for a SaaS product. Covers the canonical illustration styles (geometric, isometric, hand-drawn, abstract), when each works, sourcing strategies, and how to maintain consistency. |
Illustrations carry brand personality where photography can't. Choose a system, commit, maintain consistency.
| Style | Examples | Best for |
|---|---|---|
| Geometric / minimal | Linear, Vercel | Tech-forward, neutral |
| Isometric | Old Stripe, Notion | Tools that connect things |
| Hand-drawn / squiggly | Notion's recent work | Friendly, approachable |
| Photographic + filter | Unsplash + treatment | Real-world businesses |
| 3D rendered | Apple, modern AI tools | Premium, futuristic |
| Abstract / generative | Vercel, AI products | AI / data products |
Pick ONE and commit. Mixing illustration styles screams startup.
Illustrations should use the brand palette (max 4-5 colors from your tokens). Don't introduce new colors via illustration.
If your illustration provider gives you full-color rainbow versions, ask for monochrome + accent variants.
| Option | Cost | Quality | Speed |
|---|---|---|---|
| Custom illustrator | $$$ | Highest | Slow (weeks) |
| Illustration library | $-$$ | Variable | Instant |
| Generative AI (Midjourney, etc.) | $ | Variable | Fast |
| In-house designer | $$ | Brand-fit | Medium |
Common libraries: unDraw (free), Storyset, Humaaans, Open Doodles.
If using a library, customize: change colors to match your tokens, NEVER use them with their stock colors.
Don't use illustrations:
| Use | Size |
|---|---|
| Empty state | 80-160px |
| 404 / error page | 200-320px |
| Hero illustration | 400-600px |
| Inline / spot | 40-64px |
X3 Compass currently uses zero illustrations (pure typography + gradient). Future: abstract geometric illustrations for empty states (subtle, monochrome with accent gradient).