bbucle-road-create

Figma design analysis for UI page creation is automated by extracting design requirements and aligning them with existing data structures. The workflow infers page needs directly from the provided Figma URL to prepare for data integration and rendering.

Browser rendering validation against Figma designs is handled by verifying the new UI page matches the source design across both desktop and mobile views. This ensures the rendered output aligns with the original design specifications.

Updating frontend data schemas involves modifying the bbucleRoadData.ts configuration file with a new page entry. This integrates the page requirements inferred from the Figma design into the existing data structure.

YAML frontmatter is mandatory to create a Bbucle Road page, specifically requiring a name and description. Optional resources directories for scripts, references, and assets are also supported to enable a complete UI-page creation workflow.

An optional kebab-case page ID can be provided alongside a Figma URL to generate a new page. This ID is used during the data update and UI rendering validation workflow to uniquely identify the new page entry.

End-to-end design-to-implementation workflows fail when Figma design analysis does not properly infer page requirements or update the bbucleRoadData.ts file. Ensuring the mandatory YAML frontmatter is present and providing a valid Figma URL resolves alignment issues.