skills.rest
adeonir
adeonirCOMMUNITY
Explore all skills by this author →
Website𝕏@adeonirGitHub

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
One-click install
npx skills add https://github.com/adeonir/agent-skills --skill design-builder
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
whimzyLivewhimzyLive
3

hallmark

Automate page design, audits, redesigns, and design extraction from URLs or screenshots.

Community
Advanced
Joseph-N1Joseph-N1

figma-to-code

Generate React/Next.js code from Figma designs using Figma MCP tools.

Community
Advanced
yolo-labs-hqyolo-labs-hq

frontend-design

Generate production-ready frontend components and pages with HTML/CSS/JS.

Official
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate