Interface Design Skills

Interfaces that look like a senior designer made them.

Eight skills for hierarchy, layout, type, colour and motion.

Buy the bundle, $249Get two free
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI

One-time purchase. Works with Claude Code, Codex, Cursor and Gemini CLI.

You ask your agent for an interface and get something that works and looks like every other interface . The spacing is a little off. The type has no rhythm . Nothing tells the eye where to go first.

You can feel it is wrong and cannot say why. So you nudge pixels for an afternoon.

These eight skills teach your agent hierarchy, layout, type, colour, states, dark mode and motion, so the first pass already follows the principles a senior designer would apply.

You nudge pixels until it feels right

Your agent starts from a spacing and type scale

Colours are picked by eye

Contrast is checked as colours are chosen

States are discovered in review

Every component state is defined up front

See it work

An example conversation. Your output depends on your project.

ui-design
You9:41

Design the pricing page for the app. Three tiers, one recommended.

AgentAgent9:41

Using Visual hierarchy, Layout and spacing and Colour and contrast. Setting the scale first.

Agent is working

Pricing page, draft 1

  • The recommended tier leads the eye, with the others in support
  • An 8-point spacing scale applied throughout
  • Text and buttons checked against contrast requirements

Caveats

I assumed light mode only. Say if you want dark mode designed alongside.

You9:48

Add dark mode.

Quick start, 30 seconds

  1. 01

    Download the files.

    From your Methodloop library, in the format for your tool.

  2. 02

    Drop them into your project.

    Add them to your repo or your tool's skills folder.

  3. 03

    Name the skill.

    Tell your agent which one to use. Claude Code, Codex, Cursor and Gemini CLI all work.

What you will be able to do

First hour

In your first hour you have one screen with a clear hierarchy, a spacing scale and checked colours.

First week

By the end of the week every component has defined states, in light and dark.

Next quarter

By next quarter new screens start from your own tokens and scales.

What is inside

Each one is a skill file you drop into your agent, so it works in Claude Code, Codex, Cursor and Gemini CLI.

  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
SKILL 01

Visual hierarchy

Decide what the eye sees first, second and third.

Skill file for
SKILL 02

Layout and spacing

Apply a consistent grid and spacing scale.

Skill file for
SKILL 03

Typography

Choose, pair and size type for readability.

Skill file for
SKILL 04

Colour and contrast

Build a palette that meets contrast requirements.

Skill file for
SKILL 05

Responsive patterns

Adapt layouts across screen sizes and keep their intent.

Skill file for
SKILL 06

Component states

Define default, hover, focus, disabled and error states.

Skill file for
SKILL 07

Dark mode

Design and check a dark theme alongside the light one.

Skill file for
SKILL 08

Motion and micro-interactions

Add motion that helps people follow what changed.

Skill file for

Choose your skills

0 of 8 paid skills selected

Total: $0

Buy selected skillsBuy the bundle, $249

Why this works

Each skill is a plain markdown file that tells your agent the steps, the questions to ask and the format to produce. The method is written down, so the output follows it.

Who wrote them

Anton has spent sixteen years doing this work inside Myer, Telstra Health and Flybuys. The methods in these files are the ones used on real projects. Two skills are free, so you can judge the quality before you spend anything.

Everything in the bundle

$249one time

Bought one at a time, $392.

The bundle is $249. You keep $143.

Buy the bundle, $249Choose your skills
  • All 8 skills
  • Every skill in four formats: Claude Code, Codex, Cursor and Gemini CLI
  • Example prompts for each skill
  • A Methodloop library with every file in one place
  • Updates while the skills are on sale

The One Real Project guarantee

Use the skills on one real screen. If they do not save you time, ask within 14 days and I refund every dollar.

This is for you if:

  • You build interfaces and are not a trained designer
  • You are a junior designer who wants stronger first passes
  • You want consistent output from your agent

This is probably not for you if:

  • You already have a design system your team enforces
  • You want an agent to make brand decisions for you

Fair questions.

The skills give your agent principles and scales, and your brand supplies the personality. Feed it your colours, type and tone and the output follows them.

No. The skills explain each decision in plain language, so you learn the reasons as you go.

The skills set the principles. Your agent applies them in whatever format your tool produces.

Claude Code, Codex, Cursor and Gemini CLI. Every purchase includes all four formats.

In your Methodloop library. Your account is created at checkout, or sign in if you already have one.

Yes, while the skills are on sale.

Make the next screen look senior.

8 skills for $249, one time. Or start with the two that are free.

Buy the bundle, $249Get two free

P.S. 8 skills for $249. Bought one at a time they come to $392.

P.S. Two skills are free. Start there and judge the work yourself.

P.S. At checkout you can add related material and save.