({
childrenImports,
frameDetails,
assetFiles,
styling,
renderingModes,
}: {
childrenImports: string;
frameDetails: string;
assetFiles?: string;
styling: string;
renderingModes: {
hasStates: boolean;
hasIndependentChildren: boolean;
};
})
| 131 | } |
| 132 | |
| 133 | export const generateFramePrompt = ({ |
| 134 | childrenImports, |
| 135 | frameDetails, |
| 136 | assetFiles, |
| 137 | styling, |
| 138 | renderingModes, |
| 139 | }: { |
| 140 | childrenImports: string; |
| 141 | frameDetails: string; |
| 142 | assetFiles?: string; |
| 143 | styling: string; |
| 144 | renderingModes: { |
| 145 | hasStates: boolean; |
| 146 | hasIndependentChildren: boolean; |
| 147 | }; |
| 148 | }) => { |
| 149 | return ` |
| 150 | <system_instructions> |
| 151 | <role> |
| 152 | You are a React Architect. |
| 153 | Your task is to assemble a "Frame" component that composes multiple child components based on Figma layout data. |
| 154 | </role> |
| 155 | |
| 156 | <input_context> |
| 157 | <frame_details>${frameDetails}</frame_details> |
| 158 | <children>${childrenImports}</children> |
| 159 | <styling>${styling}</styling> |
| 160 | ${assetFiles ? `<available_assets>Available asset files: ${assetFiles}</available_assets>` : ''} |
| 161 | |
| 162 | <frame_structure> |
| 163 | The \`frame_details\` parameter contains: |
| 164 | - \`layout\`: Layout information for the frame (flex/grid/absolute) |
| 165 | - \`elements\`: Array of CSS styles and asset URLs for all elements in this component (colors, spacing, fonts, backgrounds, etc.) |
| 166 | - \`states\` (optional): If present, this frame contains reusable components. Each state entry includes: |
| 167 | * \`state\`: Array of data objects to be used as props for component instances |
| 168 | * \`componentName\`: Name of the reusable component |
| 169 | * \`componentPath\`: Import path for the component |
| 170 | Use \`states\` data to render multiple instances of reusable components via \`.map()\`. |
| 171 | </frame_structure> |
| 172 | </input_context> |
| 173 | |
| 174 | <requirements> |
| 175 | <req_1> |
| 176 | **Children Components & Props (CRITICAL)**: |
| 177 | - The \`<children>\` field describes child components with their import paths and prop types. |
| 178 | ${generateChildrenPropsInstructions(renderingModes)} |
| 179 | |
| 180 | - **Component Imports (CRITICAL)**: |
| 181 | - You MUST use the exact import path provided in the \`<children>\` list for each component. |
| 182 | - **Example**: |
| 183 | - Provided: \`{"name": "TaskGrid", "path": "@/components/tasks-section/task-grid"}\` |
| 184 | - CORRECT: \`import TaskGrid from "@/components/tasks-section/task-grid";\` |
| 185 | - WRONG: \`import TaskGrid from "@/components/task-grid";\` (Do NOT do this!) |
| 186 | </req_1> |
| 187 | |
| 188 | <req_2> |
| 189 | **Layout & Styling**: |
| 190 | - Use \`layout_data\` for dimensions, spacing, and flow (flex/grid). |
no test coverage detected