design-template-sketch

Hand-Drawn — authentic imperfection paper. One template in design-template family. Copy this folder to create next template: Copy-Item design-template-sketch design-template-<nama>.

Before proposing or writing any code, first build a clear mental model of the current system:

• Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).
• Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
• Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.
• Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).

Ask the user focused questions to understand the user's goals. Do they want:

• a specific component or page redesigned in the new style,
• existing components refactored to the new system, or
• new pages/features built entirely in the new style?