𝗪𝗵𝗮𝘁 𝗧𝗼 𝗗𝗼 𝗕𝗲𝗳𝗼𝗿𝗲 𝗔𝗜 𝗪𝗿𝗶𝘁𝗲𝘀 𝗬𝗼𝘂𝗿 𝗨𝗜

𝗪𝗵𝗮𝘁 𝗧𝗼 𝗗𝗼 𝗕𝗲𝗳𝗼𝗿𝗲 𝗔𝗜 𝗪𝗿𝗶𝘁𝗲𝘀 𝗬𝗼𝘂𝗿 𝗨𝗜

Claude Code writes good code. Instructions like make it look nice produce bad results. You need a plan before you write code.

Follow these steps to avoid rework.

• Get specs in Markdown. List every screen. List every UI element. Keep it as text.

• Build a component tree. Map the parent and child relationships. Define the state and props.

• Set the design system. Create your Tailwind config and CSS variables. Define colors and fonts. This stops hardcoded values.

• Create a DESIGN.md file. List your colors and spacing. Write why you chose them. Link this file to your AI agent.

• Use specific references. Stop asking for a clean look. Ask for a style like shadcn/ui. Name the exact padding.

• Define all states. List the default, hover, disabled, and loading states.

• Use screenshots for feedback. Do not read the code to check the design. Take a screenshot. Tell the AI what to change.

• Build one piece at a time. Do not generate the whole app at once. Build one component. Confirm it. Move to the next.

This process stops the AI from breaking your layout. It saves time.

Source: https://dev.to/kent-tokyo/what-i-do-before-letting-claude-code-touch-web-app-design-53n0