design-builder

Generate copy.yaml, design.json, and React frontend artifacts from URLs or images.

8|Updated Feb 9, 2026

Search Tags:#design-to-code #design-tokens #content-extraction #penpot #variant-generation #frontend-generation #figma-export

Ready to run

npx skills add https://github.com/adeonir/agent-skills --skill design-builder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-builder
Source: https://github.com/adeonir/agent-skills/tree/main/skills/%28design%29/design-builder
Command: npx skills add https://github.com/adeonir/agent-skills --skill design-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridges the content-to-code gap by unifying content extraction, design tokenization, and frontend generation into a single, repeatable pipeline.

Core Features & Use Cases

Copy extraction from URLs to structure content for design and frontend planning.
Design tokenization from images to produce design.json tokens and style guidelines.
Frontend generation, HTML preview variants, and design-tool exports (Figma/Penpot) from unified outputs.
Use Case: Kick off a new product by converting a website's copy and visuals into ready-to-implement React components and export-ready HTML.

Quick Start

Describe your project, supply URLs or reference images, and let this skill generate copy.yaml, design.json, and frontend artifacts.

Frequently Asked Questions about design-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I turn Figma designs into frontend React components automatically?▼

To turn designs into frontend React components, this skill connects content extraction, design tokenization, and frontend generation to output ready-to-implement React component artifacts.

What is design tokenization and how does it work with images?▼

Design tokenization from images extracts visual styles into a structured design.json file, translating visual design elements into standardized tokens for frontend generation and style guidelines.

Can I extract website copy from a URL for frontend planning?▼

Yes, you can extract website copy from URLs. The skill processes provided URLs to extract structured content, outputting a copy.yaml file that unifies content for design and frontend planning.

Does this design-to-code pipeline support exporting to Penpot?▼

Yes, the design-to-code pipeline supports design-tool exports including Penpot and Figma. It triggers export workflows to generate artifacts from unified design and frontend outputs.

Do I need reference assets to generate HTML preview variants?▼

No, reference assets are optional. You can generate HTML preview variants by describing your project and supplying URLs or images, which the pipeline processes into frontend artifacts.

What's the best way to structure a unified design-to-code workflow?▼

The best way to structure a design-to-code workflow is enforcing a unified .specs/docs structure, connecting copy extraction, design tokens, and frontend generation into a single repeatable pipeline.