中文Saved
Designer Skills
Project page on GitHub

This picture is from one run by SkillLift on an invented brief. It is not from the project.

Open source

Designer Skills

A working designer's method as short skills: hierarchy, type sizes, line length, colour, grids and grouping.

Designer Skills · MC Dean · MIT

Install

Inside Claude Code

/plugin marketplace add Owl-Listener/designer-skills
/plugin install ui-design@designer-skills

Commands are copied word for word from the project's README. Read them before you run them.

We ran it once

The brief: Invented: a fictional community bicycle repair shop in the fictional town of Saltmere wants to redesign its booking page, where people miss the booking button on a phone.

The skill produced a four-part text critique (Entry Point, Eye Flow, Weight, Emphasis), each with observation, problem and fix, all rated major issue, and named the buried call-to-action as the cause. Its fixes are sound but generic: make the button solid, full width and the heaviest element.

What we thought: Does what the listing says: a clear, structured hierarchy critique that correctly names a buried button. Useful as a checklist for a designer or a prompt for an agent, but it gives advice, not a redesign, and a normal person would still need someone to build the fix.

Open the full output

One run by an AI agent on 2026-11-02, at commit 9a6930c. No person has judged it, and your result will differ.

Why it was picked

Its interface design plugin explains the ideas behind good layout, such as hierarchy, readable line length and grouping, one short skill at a time. It reads like a good design course.

Why it exists

Most people can only say they do not like something. These give the reason behind it.

What you get

Advice applied to your screen or document, with the reasoning.

Skills in this pack

  • visual-hierarchy What should be seen first, and how to make it so.
  • typography-scale A set of type sizes that work together.
  • readable-measure A line length people can read comfortably.
  • color-system A colour system for a product.
  • layout-grid A grid that holds a page together.
  • spacing-system Space that follows rules, not guesses.
  • law-of-similarity Why alike things read as a group.
  • aesthetic-usability Why things that look good feel easier to use.

How it works

  1. Add the marketplace and the plugin.
  2. Ask about a screen, naming a skill.
  3. Fix one thing and look again.

What it needs

Claude Code. The project also supports other agents.

In short

Pick this to learn why a design works or does not.

Worth knowing

The collection is large and mostly for working designers; we list one plugin. A separate plugin of the same project, visual-critique, reviews a screen on seven points and installs the same way. Some thresholds are web conventions rather than laws. There is no sample output to show.