variant-design-skill

Solve the blank canvas problem. Prompt → 3 distinct designs → vary → export. A Claude Code skill inspired by the Variant design community.

Active — Updated in the last 14 days

Works with

Claude

View on GitHub

47 GitHub stars (47)

Steady at 47 stars — no new stars in the 36 days since Sep 30.

1 skill (1 skills found in its SKILL.md files)
0 forks (0 forks)
1d ago last update (Last updated 1d ago)

Install

Skills CLI

npx skills add YuqingNicole/variant-design-skill

Asks which agents to install it for. Add -g to install it for every project.

Claude Code

git clone https://github.com/YuqingNicole/variant-design-skillcp -r "variant-design-skill" ~/.claude/skills/variant-design-skill

Copies the variant-design skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project).

Plugin

/plugin marketplace add YuqingNicole/variant-design-skill

Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.

Skills can run code on your machine — read the SKILL.md first.

What it does

In the author's own words, from each skill's SKILL.md.

variant-design

Create, vary, review, or extend product interfaces. Routes design generation, design systems, components, existing-site analysis, UX review, presentations, WeChat layouts, brand color, and anti-AI copywriting to focused references while preserving project context and producing runnable code when requested.
SKILL.md on GitHub (opens in a new tab)

Review before you install

A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.

Encoders & Decoders

Hash Generators

Code Formatters

HTML Tools

JavaScript Tools

Network Tools

Database Tools

Development Tools

Miscellaneous Tools

variant-design-skill