);
}SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.
Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.These styles are contained in the design: Roboto/12 tips: Font(family: "Roboto", style: Regular, size: 12, weight: 400, lineHeight: 16, letterSpacing: 0), L3 shadow: Effect(type: DROP_SHADOW, color: #00000008, offset: (0, 12), radius: 48, spread: 16); Effect(type: DROP_SHADOW, color: #0000000D, offset: (0, 9), radius: 28, spread: 0); Effect(type: DROP_SHADOW, color: #00000014, offset: (0, 6), radius: 16, spread: -8).Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: . Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.