การจัดรูปแบบและธีม

You can generate a working UI in seconds — but the difference between an amateur and a polished app is styling: color, spacing, typography, and a cohesive theme.

In this lesson you'll learn to control all of it by prompt, set up a reusable theme, and add a slick dark mode — without touching a color picker if you don't want to.

A theme is a small set of design decisions — your colors, fonts, and spacing — defined once and reused everywhere. Change the theme, and the whole app updates.

Ask the AI to set up design tokens: named values like 'primary color' or 'spacing-large' that components reference instead of hard-coding.

You don't need color theory. Describe a feeling and let the AI propose a palette, then tweak.

Ask for a primary (your brand), an accent (for highlights), and neutrals (backgrounds and text). Request the actual hex codes so you can lock them in.

Most amateur UIs look cramped. The fix is consistent spacing and whitespace. Designers use a spacing scale (multiples of 4 or 8px) so gaps feel intentional.

If something feels 'off,' it's usually spacing. Just say "more breathing room" and the AI knows what to do.

Type carries a huge amount of personality. Ask for a type scale (clear sizes for h1, h2, body, captions) and good line height for readability.

Pairing a distinctive heading font with a clean body font instantly elevates a design.

Most AI UI tools style with Tailwind CSS — utility classes like p-4 (padding) or text-lg (large text) written right in the markup.

You rarely write these by hand, but recognizing them helps you give precise feedback like "use a larger text size here."

Dark mode is expected in modern apps. The right way is to define light and dark versions of your theme tokens, then let a toggle switch between them.

Ask the AI to make colors theme-aware rather than hard-coded, so dark mode 'just works' everywhere.

Under the hood, switching themes is just choosing a different set of color values. Here's a tiny JavaScript model of that idea — run it to see how a toggle picks colors from a theme object.

A beautiful app isn't one with the fanciest button — it's one where everything matches. Same corner radius, same shadow style, same accent color, same spacing rhythm.

When you spot inconsistency, prompt the AI to unify it across the whole app in one pass.

Small touches signal quality: subtle hover effects, smooth transitions, and clear focus states for accessibility. Ask for gentle animation — never overdo it.

These finishing moves make a generated UI feel handcrafted.

Take any UI you've generated and give it a whole new identity with just a palette swap and a font change. Watch how a theme-driven design transforms instantly. This is the power of styling by tokens instead of by hand.

Why is setting up a theme with design tokens better than styling each component with hard-coded colors?

You learned to control the look of an app with words: define a theme with design tokens, choose a palette by feeling, fix 'cramped' with consistent spacing, set a type scale, and add dark mode by making colors theme-aware.

Polish with subtle motion and, above all, chase consistency. Next lesson: making your beautiful design look great on phones and desktops alike — responsive design by prompt.