Context: Design tooling
The question
How can visual page composition stay connected to the components developers actually render?
The approach
KISDD is a visual drag-and-drop page builder organised around a designer-to-code loop. Figma supplies the design, Storybook acts as the component contract, and Next.js is the render target.
The defining behaviour
The loop is kept in sync in both directions. The project goes beyond a one-time design export by keeping the design and implementation connected.
Status and limits
The documented build connects visual composition, a shared component reference and a render target. The important idea is a continuing design-to-code relationship rather than a disconnected export.
This case describes the tooling experiment. It does not establish adoption by a design team, production deployment or compatibility across arbitrary components and design changes.
Skills in practice
- Component systems: using Storybook as the shared reference between design and implementation.
- Workflow integration: connecting Figma and a Next.js render target.
- Visual tooling: exposing page composition through a drag-and-drop interface.