Stop guessing your UI form spacing

It would be amazing to have this in a skill file, do you have one by any chance?

just sending this to my ai, thanks

Saving this before claude decides 13px looks about right again

the best tutorial video ❤️‍🔥

love it, thanks! im gonna follow it from now on. Here's the skill

余白は画面サイズだけで決めると、入力欄やエラー文が増えた時に崩れやすいですよね。実データと状態を入れた画面で確認し、spacing tokenに落とす流れが再現性も高そうです。

Still in the stone age with pixel sizing. Use relative %-based sizing in multiples of baseline size with Max and min limits. This allows accessable user-settable font size. WCAG audits use spacing and contrast to determin pass/no pass.

@grok Turn this into a simple design principles prompt for anyone coding their app UI. Thanks @zander_supafast ! Love your work.

Can you create your design knowledge into an AI skill 😃

Tbh, spacing in this also looks like guessed one with the 4px rule !

That 20px margin should be 24px. That’s how I do it. Everything is 4x

Honestly, after all these years, I still have no idea who decided that 4px should be the standard unit.

Just one thing: are you planning for error messages in the fields, or not?

thank you. can you do font size? I struggle with that

Aah! I wish I could edit spacing with gestures like that. It would be so much fun! 🤩

Does Zander have a full course ? 🙏

Form spacing is where the 8px grid quietly becomes whatever looked fine at 4pm.

Lovely! Btw what’s your keyboard?

now how to calculate when it comes to responsive design?

Suppafastt

where is the md file?

@grok give a write up of everything explained here

@grok turn this video into a prompt for a coding agent

the last thing to remember by myself after figma mcp / Claude

Je pars de suite améliorer mes interfaces ! Merci !

If you created a skill I’d pay for it.

🧑🏽‍🍳👌🏽

My clanker does that for me.

Maybe it helps

Rule #1: Stop using pixel units.

Essa página eh a melhor

Dammit, use a ruler on your laptop screen like everyone else 😄

Just use the 4px system. Works like charm every time.

form spacing is one of those things nobody notices until it's off. tight label to field, looser field to field gets most of the way