Skills
.Work. You
Rest

design-builder

Community

Turn design into frontend code instantly.

Design & Creative#design-to-code#design-tokens#content-extraction#penpot#variant-generation#frontend-generation#figma-export
Authoradeonir
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-builder
Download link: https://github.com/adeonir/agent-skills/archive/main.zip#design-builder

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.