Function generateFrame

src/nodes/code/utils.ts:110–143

(node: Protocol, state: GraphState, assetFilesList: string, progressInfo: string)

 * Frames compose multiple child components based on layout
 */
export async function generateFrame(node: Protocol, state: GraphState, assetFilesList: string, progressInfo: string): Promise<void> {
    const frameName = node.data.name;
    logger.printInfoLog(`${progressInfo} 🖼️  Generating Frame: ${frameName}`);

    // Build children imports information
    const childrenImports = (node.children || []).map(child => ({
        name: child.data.name || '',
        path: child.data.path,
    }));

    // Detect rendering modes
    const renderingModes = detectRenderingModes(node);

    // Generate prompt
    const prompt = generateFramePrompt({
        frameDetails: JSON.stringify(node.data),
        childrenImports: JSON.stringify(childrenImports),
        styling: JSON.stringify(DEFAULT_STYLING),
        assetFiles: assetFilesList,
        renderingModes,
    });

    // Call AI model
    const code = await callModel({
        question: prompt,
        imageUrls: state.figmaInfo.thumbnail,
    });

    // Save generated files
    const componentPath = node.data.path || '';
    const filePath = workspaceManager.resolveAppSrc(state.workspace, workspaceManager.resolveComponentPath(componentPath));
    saveGeneratedCode(code, filePath);
    logger.printSuccessLog(`Successfully generated frame: ${frameName}`);
}

/**
 * Generate a component (leaf or reusable)