yanliudesign

SaaS Illustration — Design skill for Claude Code

Design community

SaaS product hero illustrations — real UI card × line-art scene × single accent color · Claude Code Skill.

How to install SaaS Illustration

This entry records only its repository, not the path inside it, so there is no exact command to give. Open yanliudesign/saas-illustration and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What SaaS Illustration does

SaaS product hero illustrations — real UI card × line-art scene × single accent color · Claude Code Skill.

Alternatives in Design

Algorithmic Art — Create generative art using p5.js with seeded randomness, flow fields, and particle systems 94.1k ★
Weather Orchestrator Command — Fetch the current temperature for Dubai, UAE and create a visual SVG weather card 20.2k ★
Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★

README

[中文](./README.zh.md) · **English**

🎨 SaaS Illustration

**One-brand-color SaaS product hero illustrations — real UI card × line-art scene × single accent color.**

[![License](https://img.shields.io/badge/LICENSE-MIT-4c8bf5?style=flat-square&labelColor=333)](./LICENSE) [![Version](https://img.shields.io/badge/VERSION-1.0.0-2ea44f?style=flat-square&labelColor=333)]() [![Examples](https://img.shields.io/badge/EXAMPLES-3-2ea44f?style=flat-square&labelColor=333)](./examples) [![Stars](https://img.shields.io/github/stars/yanliudesign/saas-illustration?style=flat-square&label=STARS&color=e37f2c&labelColor=333)](https://github.com/yanliudesign/saas-illustration/stargazers)

[![Claude Code](https://img.shields.io/badge/Claude_Code-Skill-d97757?style=flat-square&labelColor=1a1a1a&logo=anthropic&logoColor=white)](https://claude.ai/code) [![Codex](https://img.shields.io/badge/Codex-Skill-2ea44f?style=flat-square&labelColor=1a1a1a)]() [![OpenCode](https://img.shields.io/badge/OpenCode-Skill-4c8bf5?style=flat-square&labelColor=1a1a1a)]() [![OpenClaw](https://img.shields.io/badge/OpenClaw-Skill-8b5cf6?style=flat-square&labelColor=1a1a1a)]() [![Hermes](https://img.shields.io/badge/Hermes-Skill-e879a8?style=flat-square&labelColor=1a1a1a)]()

A design-taste skill that turns any SaaS product brief into a **clean, professional hero illustration** — the kind that lives on a landing page, blog header, or feature section. Signature move: a **real product UI card floating in the foreground**, a **line-art scene behind it**, and **one brand color** doing all the accent work.

Not a coloring book. Not a concept illustration. Not a hand-drawn zine. This is the disciplined SaaS look — Linear · Superhuman · Tactiq · Notion — but generated from a prompt.

**Also works for adjacent digital-product scenarios** — technical talk covers, portfolio featured-project cards, workshop / course landing pages, research paper announcement graphics, product-launch email