One file that teaches Claude how I design.

What a skill is

---
name: design-process
description: From screenshots to a
  tested redesign. Use when a brief
  says redesign, explore or compare.
---

The eight stages

1. 01

   Capture what exists

   Start from the real screens: the App Store, the live product or the Figma file. Rebuild one, show it, then do the rest. The rebuild is working material and stays out of the case study.

2. 02

   Name the problems

   Three to five, each as a short title and one plain sentence on why it hurts. Contrast and accessibility checks on the originals turn them into measured facts.

3. 03

   Research references

   About twenty screens from strong products doing the same task. Borrow the pattern several of them share, not the pixels. The references stay private.

4. 04

   Explore wide

   Several options for each problem, labelled A to F, beside the screen they change: in HTML to react to quickly, and in Figma to build on. Each round ends with a suggested combination, built as a whole screen.

5. 05

   Decide narrow

   I pick, and the pick gets built properly: the brand as variables, repeated parts as components, one clear action per screen.

6. 06

   Test

   Contrast again, empty and edge states, and one task walked end to end. Then a synthetic check: AI personas try the old and new screens blind, on the same tasks. It is labelled synthetic and comes before real users, never instead of them. The notes stay next to the screens, so each version shows what changed and why.

7. ↻

   Then round again

   Stages 2 to 6 repeat. Each round starts from the last test, not from scratch, and keeps the earlier versions beside the new one. It stops when no problem comes up twice, when two rounds in a row find only small fixes, or after three rounds. Then the design goes to real people.

8. 07

   Animate in Figma

   Motion is added in Figma with keyframes, so a transition can be shown as it would feel in the app.

9. 08

   Turn it into a case study

   Only when asked. The product problem comes first and AI is the method. Pictures move, numbers mean something to a reader, and nothing goes up that isn’t public.

What it never does

Examples

BeforeOptionsAfter

A

B

C

D

Picked B · built and tested

BeforeOptionsAfter

A

B

C

D

Picked D · built and tested

The file

---
name: design-process
description: Jordy's design process for redesigning or designing app screens
  with AI, from screenshots to a tested proposal and a portfolio case study.
  Use when Jordy asks to redesign, enhance or explore screens, compare
  options, set up a brand or variables for a design, or turn design work
  into a case study.
---

# Jordy's design process

AI drafts and explores. Jordy frames the problem, chooses, and owns the
result. Work in this order, and show each stage before moving on.

Before starting, check whether this is a first pass. If an earlier round
exists, follow Next passes instead of starting at stage 1.

## 1. Capture what exists

- Start from the real thing: App Store screenshots, the live product, or
  Jordy's Figma file. Put the originals on the canvas untouched.
- Rebuild one screen first and show it. Do the rest only after Jordy confirms.
- A rebuild is working material. Don't present it as an achievement.

## 2. Name the problems

- Write down the few real problems (usually 3–5), each as a short title
  plus one plain sentence on why it hurts the user.
- Check contrast and accessibility on the originals so the problems are
  facts, not opinions.
…