·design-builder
*

design-builder

✓
adeonir/agent-skillsGitHub: adeonir/agent-skillsSource: adeonir/agent-skills

Design-to-code pipeline (extract copy from URLs, extract design tokens from images, then build React components or HTML preview variants). Use when extracting content from websites, extracting design systems, generating frontend code, previewing design variants, sending to Figma via MCP. Also use when the user wants to build a page from a reference URL or screenshot, redesign an existing site, create visual prototypes, or generate code from a design. Triggers on "extract copy", "extract design", "build frontend", "generate variants", "export design", "send to Figma", "build from reference", "redesign this", "create prototype".

adeonir·design·builder
33Installs·3Trend·@adeonir

Installation

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

How to Install design-builder

Quickly install design-builder AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/adeonir/agent-skills --skill design-builder
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: adeonir/agent-skills.

SKILL.md

View raw

Each step is independent. Can run isolated or chained. Discovery is always the first step -- never skip it.

If found: read and extract purpose, audience, tone, and key features. Skip to the relevant trigger operation.

If the user answers "I don't know" to any question, mark as TBD and move forward. Summarize understanding before proceeding.

Design-to-code pipeline (extract copy from URLs, extract design tokens from images, then build React components or HTML preview variants). Use when extracting content from websites, extracting design systems, generating frontend code, previewing design variants, sending to Figma via MCP. Also use when the user wants to build a page from a reference URL or screenshot, redesign an existing site, create visual prototypes, or generate code from a design. Triggers on "extract copy", "extract design", "build frontend", "generate variants", "export design", "send to Figma", "build from reference", "redesign this", "create prototype". Source: adeonir/agent-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/adeonir/agent-skills --skill design-builder
Source
adeonir/agent-skills
Category
*Creative Media
Verified
✓
First Seen
2026-03-08
Updated
2026-03-10
URL
https://www.learn-skills.dev/en/skills/adeonir/agent-skills/design-builder

Browse more skills from adeonir/agent-skills

Quick answers

What is design-builder?

Design-to-code pipeline (extract copy from URLs, extract design tokens from images, then build React components or HTML preview variants). Use when extracting content from websites, extracting design systems, generating frontend code, previewing design variants, sending to Figma via MCP. Also use when the user wants to build a page from a reference URL or screenshot, redesign an existing site, create visual prototypes, or generate code from a design. Triggers on "extract copy", "extract design", "build frontend", "generate variants", "export design", "send to Figma", "build from reference", "redesign this", "create prototype". Source: adeonir/agent-skills.

How do I install design-builder?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/adeonir/agent-skills --skill design-builder Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/adeonir/agent-skills

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-03-08

Related Skills

spec-driven
41 Installs
docs-writer
37 Installs
git-helpers
36 Installs
debug-tools
27 Installs
product-naming
15 Installs