design-mockup

To translate affordances into visual mockups, you identify UI elements from your structural definitions, check existing component inventories for reusable parts, and generate exploratory stories in Storybook to visualize the layout. This process ensures design consistency and efficient component utilization.

Checking your component inventory involves identifying existing UI components, flagging needs for new ones or variants, and ensuring proposed designs align with or extend the existing design system. This integration prevents duplicate work and maintains visual consistency across the project.

Yes, the mockup generation process works with shadcn and Storybook by checking external component registries like shadcn for available elements, then generating exploratory stories within Storybook to compose and review the final visual representations of your UI design.

The best way to compose final page layouts and update design tokens is to compose the visual representations in Paper MCP, which allows you to finalize page structures and propose necessary design token updates to keep your design system synchronized.

Yes, you need a breadboard document before generating UI mockups because the process specifically translates the abstract design concepts and affordances defined in that breadboard into tangible visual mockups, serving as the foundational input for identifying UI elements.

A key limitation is that the process requires integration with design system skills and external component registries like shadcn; if a needed component or variant is missing from the inventory, you must flag the need for new ones rather than generating a mockup independently.