design-extractor

Name: design-extractor
Rating: 5 (3 reviews)
Author: billhector

Extract a visual design system from any website URL and generate a DESIGN.md, Tailwind v4 theme, and accessibility report. Use when the user says "extract the design from <url>", "grab the design from <url>", "get the design system from <url>", "pull the design from <url>", or similar. Requires Firecrawl CLI.

3estrelas

Atualizado há 2 meses

Ver no GitHub ↗Licença: MIT

Como adicionar

/plugin marketplace add billhector/design-skills

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Listada na Skillteca](https://www.skillteca.com.br/api/badge/design-extractor-billhector/svg)](https://www.skillteca.com.br/skills/design-extractor-billhector?utm_source=badge&utm_medium=readme&utm_campaign=badge)

#ai #tailwind

Skills relacionadas

Ver todas de Design e Frontend →

webapp-testing

143.8k

Kit de ferramentas para interagir e testar aplicações web locais usando Playwright. Suporta a verificação de funcionalidades de frontend, depuração de comportamento da UI, captura de screenshots do navegador e visualização de logs do navegador.

Design e Frontend#testpor anthropics

brand-guidelines

143.8k

Aplica as cores e tipografia oficiais da marca Anthropic a qualquer artefato que se beneficie de sua identidade visual. Use-o quando diretrizes de estilo, formatação visual ou padrões de design da empresa forem aplicáveis.

Design e Frontendpor anthropics

frontend-design

143.8k

Cria interfaces frontend distintas e de nível de produção com alta qualidade de design, gerando código criativo e polido e design de UI que evita a estética genérica de IA. Use para construir componentes web, páginas e aplicações, ou para estilizar/embelezar UIs web.

Design e Frontend#css#aipor anthropics

web-artifacts-builder

143.8k

Conjunto de ferramentas para criar artefatos HTML elaborados e multi-componentes para claude.ai, utilizando tecnologias web frontend modernas (React, Tailwind CSS, shadcn/ui). Use para artefatos complexos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui, não para artefatos HTML/JSX simples de arquivo único.

Design e Frontend#css#aipor anthropics

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Design Extractor

Scrapes a URL, analyzes the visual design system, and generates: DESIGN.md, tailwind-theme.css, accessibility-report.md, and a preview screenshot.

Announce at start: "I'm using the design-extractor skill."

Workflow

Ask for name — "What should I call this design?" (used for folder naming and frontmatter). Convert the answer to lowercase kebab-case for the folder name.

Scrape the URL — run:

firecrawl scrape "<url>" --format html -o /tmp/de

[Description truncada. Veja o README completo no GitHub.]

CompartilharX LinkedIn

Comentários · Nenhum comentário

Entre para comentar. Entrar

Ainda não há comentários. Seja o primeiro.