Design with shadcn/ui and free libraries

Let’s do this

1. 1
   In your browser

   Pick a direction using a real example

   Take a screenshot of a site you like with Shift + Command + 4, or share its public link. Say what you like: the clear heading, generous space or simple navigation. Use it for direction and your own wording and pictures. A reference is more useful than “make it premium”.

2. 2
   In your AI helper

   Use shadcn/ui for controls

   It provides editable React components such as buttons, forms and dialogs. Ask the AI to use the official Vite setup for an existing project, then add only the parts needed. Components belong in your project so the AI can adapt them. The core library is free; you do not need a paid block collection.

   shadcn/ui: Vite setup (opens a new tab)
3. 3
   In your AI helper

   Keep the rest of the toolbox small

   Tailwind CSS helps set spacing, colours and sizes. Lucide supplies consistent free icons. Motion can add useful animation later, such as showing a panel opening. Start with CSS and the parts already installed; adding more libraries does not automatically improve the design.

   Lucide: free icons (opens a new tab)
4. 4
   In your AI helper

   Ask for specific improvements

   Try: “Use readable body text, one strong page heading, a clear Add plant button and consistent spacing. On a narrow screen stack the columns. Give inputs visible labels and show keyboard focus.” Ask it to keep the working behaviour while changing the appearance.

5. 5
   In your browser

   Check it yourself

   Read the text without zooming out. Use Tab to reach controls and Enter to activate them. Narrow the browser window. Check long plant names and an empty list. Ready-made components still need checking after the AI customises them.

   W3C: easy accessibility checks (opens a new tab)