Asif Ali

Product designer building AI-native design systems in public. Brief → design → code. Sharing what I learn. DMs open.

[Asif Ali @as_if_so]

Our buttons looked perfect in Figma.

Then they hit code and every screen had a slightly different one. Padding off by a few px. A one-off colour here. A missing disabled state there.

Here's the system that fixed it for good 👇

[Asif Ali @as_if_so]

Day 11/45 · Select field

Same anatomy as the input, so the form reads as one family. The label floats, the list opens on brand, not the browser default.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

@ozzyxs1a love how the white mark is helping the rotation animation

[Asif Ali @as_if_so]

Day 10/45 · OTP input

Six cells, one thumb flow. Type and it advances, backspace walks you back. Nobody should have to tap every box.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

Day 9/45 · Toast

Quiet confirmation. It rises in, says its piece and gets out of the way. The type bar and icon pull from the same system colours as everything else.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

Day 7/45 · Input

The label floats up and stays inside the field. No border notch, no layout jump. Focus, error and disabled states all come from the same tokens.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

@privetavdey great detail. how did you decide the hired icon?

[Asif Ali @as_if_so]

@alxui_ux clarity around their business model and target KPI

[Asif Ali @as_if_so]

@AdityaSur11 smooth!

[Asif Ali @as_if_so]

Day 6/45 · Coupon Input

Type, apply, done. The success state shows the saving inline, with one tap to remove it. Small moment, done properly.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

@privetavdey seamless. though i feel the cards can have a hover animation.

[Asif Ali @as_if_so]

Day 5/45 · Variant selector

Designed two choices in one glance. Unavailable options stay visible but clearly disabled, never hidden, so nothing feels broken.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

Day 4/45 · Add to cart

The tap has to feel like something happened. The count ticks up, the button confirms, no reload, no doubt you added it.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

Day 3/45 · Accordion

Designed a long product info without a wall of text. Smooth height, clear open and closed states, so the page never jumps under your thumb.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

@gregisenberg having something and mastering something are two different things 😭

[Asif Ali @as_if_so]

Day 2/45 · Quantity stepper

Small control, lots of edges: min and max limits, disabled states, the press feedback. The system handles all of them so every stepper behaves the same.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

@Tunbxsun crazyy!

[Asif Ali @as_if_so]

@saen_dev So the components are the top-level outcome. Under the hood, the design system defines the foundational elements like: colours, icons, radius, etc, which define the visual language and consistency across components.

[Asif Ali @as_if_so]

I'm shipping one component from my design system every day for 45 days.

All built the AI-native way: brief → tokens → code. 45 components, 45 days, in public.

Follow along 👇

[Asif Ali @as_if_so]

Day 1/45 · Range slider

Designed a filter that shows its value as you move it. The fill, the thumb, the steps, all tokens, so it looks identical everywhere it's used.

One component a day, from an AI-native design system.

[Asif Ali @as_if_so]

I'm building a full design system in public: AI-native, brief → design → code.

Fighting the same button mess on your team? DM me, happy to compare notes.

[Asif Ali @as_if_so]

Our buttons looked perfect in Figma.

Then they hit code and every screen had a slightly different one. Padding off by a few px. A one-off colour here. A missing disabled state there.

Here's the system that fixed it for good 👇

[Asif Ali @as_if_so]

Don't design buttons.

Design the rules that make every button. Then let the system build them.

That's the line between a sticker sheet and a design system.