09 / Semantic preparation inspector

Name the thing it does.

Select a node in a local design hierarchy, assign its role, and inspect the actual HTML produced. Decoration can flatten while content remains editable.

GENERATED HTML / LOCAL FIXTURE

Static view · less motion

Motion starts only when requested. All inputs are local.

What this study teaches

An independent preparation inspector maps stable node identities to native HTML elements and named layout constraints. Node selection, role editing and a shared spacing variable update the rendered fixture and its generated markup together. It studies semantic preparation, not a provider import.

Independent implementation informed by “From Figma to WordPress in Minutes with Kirki”, Kirki, Codrops. This is newly authored code and artwork, not a recovered original project. Keep this study tied to actual preparation rules, without claiming a tested provider import. Share canonical article evidence with codrops-c1eddb7eff7b while retaining both IDs.