AI Blocks › Design things people love
Product-true UI designer
Give it your product and screen. Get an interface built from your own design system, with every state covered.
Product-true UI designer is a free AI skill for the job "Design things people love". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · CC BY 4.0 licence · Made by sickn33
Made by sickn33. See the original on GitHub; we copied it as it is, with its licence.
What it does
An interface for your product that looks like your product, not a generic template. It is built from your existing components, spacing and type, with every state covered. Claude begins with the screen's real job: who uses it, their main action and the content needed. It then lists the states to design for, including loading, empty, error, success, disabled and permission. It reuses your design system and tokens before inventing anything new. Outside reference screens are optional, used only when they answer a specific visual question. The last step is to inspect the rendered result and fix what looks off.
You give it
- Your product brief and the screen's purpose
- Your existing components and design tokens
- Platform: web or iOS
- A reference or screenshot (optional)
- Codebase (optional)
You get
- A screen built on your design system
- Designs for loading, empty, error and other states
- A review of the rendered result
- A list of fixes before shipping
Use it when
- You are building a screen and want it to match your product.
- AI-built interfaces keep coming out generic.
- You are reviewing a design before it ships.
- You need to cover empty and error states.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can read your project files and open a browser.