Component Builder
Build real Figma components from JSON — with variable and style bindings applied. The file name does not matter.
Skill (Builder)
- Full list: Skills
- GitHub: inked-colibri-skills
Minimum paste
Optional: builder-primitives, rtc-color-system if the component uses RTC colors.
What you can do with the skill
- Buttons, cards, headers, inputs
- Component sets (variants)
- Export a component → edit with AI → bring it back
- Keep fill / text / spacing paths valid against your file
Example commands
Build a primary button: horizontal layout, hug sizing, label text. cmp JSON only.Create a card with title, body, and CTA. Bind padding only if I supplied paths.Create a Button set: Primary / Secondary × Default / Hover.RTC paths
In component JSON, color paths usually need the collection prefix (e.g.
RTC/primary-shades/…). Manager variable JSON uses bare paths inside the RTC collection. The skill files spell this out.In the plugin
- Get JSON from the Builder skill (or a scheme below).
- Open Component Builder.
- Paste and Process.
- Export selection or full structure when you want another AI pass.
Scheme options (boilerplates)
Shared under JSON Schemes:
- Button — Component tab (styles tab is for Token Commander)
- More component schemes can be added there as flat pages
Or generate with the skill + builder-examples.
FAQ
You load the Builder skill into any AI, get component JSON, and Process it here. Prefer generating variables and styles in Token Commander first when the component should bind to those styles.