Star200+

Illustrator Html Design Skill

Revoir · 70
Indexé par la communauté

A 2026 Claude Code learning package for converting Adobe Illustrator designs into responsive, accessible HTML, CSS, and SVG implementations ready for browser development.

Verified installs0
Stars40
Version1.0.0
Qualité71/100 · Solide
Confiance70/100 · Sandbox uniquement
Audit82/100 · Revue nécessaire

Profil de l’actif

Agents de code et de développement

Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.

Voir la catégorie

Scénario

Agents de code

I need a coding agent that can understand a repository, edit code, and review pull requests.

Adéquation Agent

Claude Code + OpenAI Agents + Cursor

Compatible avec Codex, Claude Code, Cursor, CLI ou des Agents personnalisés.

Installer

Prêt

npx skills add masonpsreed8378/illustrator-html-design-skill

Maintenance

À jour

17 jours depuis le dernier push

Risque

Revue nécessaire

Low GitHub adoption signal

Qualité GitHub

40

71/100 Qualité · 78/100 Confiance

Tags de couverture

CodingAgents de codeOutil généralskilleducation-workflow

Notes de revue

Low GitHub adoption signal · Quality score needs review

Carte d’adoption Agent

Confiance, audit et préparation à l’installation en un coup d’œil

Ces scores combinent les métadonnées publiques du dépôt, les signaux de revue OpenAgentSkill, la fraîcheur de maintenance et la préparation à l’installation. Ils servent à présélectionner et ne remplacent pas la revue humaine.

Qualité

Solide
71

Solid option that is likely worth shortlisting for production workflows.

Confiance

Sandbox uniquement
70

Candidate utile avec des signaux de confiance incomplets ou mixtes. Gardez-la dans un espace isolé jusqu’à ce que la boucle de résultats confirme son adéquation.

Audit

Revue nécessaire
82

Revue lisible par machine de la préparation à l’installation, des métadonnées de sécurité, de la maintenance et du risque d’adoption.

Trust Score OpenAgentSkill v5

Revue humaine avant installation

Exécutez uniquement dans un sandbox et comparez les alternatives proches avant usage réel.

HTMLCodexClaude CodeCursorOpenAgentSkill CLI

Stars

40 stars GitHub

Activité du dépôt

40 stars et 0 forks

Maintenance

17 jours depuis le dernier push

Licence

GPL-3.0

Installer

npx skills add masonpsreed8378/illustrator-html-design-skill

Sécurité d’installation

Chemin d’installation standard de package ou runtime

Surface de permissions

network or browser access

Résultats Agent

Pas encore de données de résultats Agent

Documentation

Contexte README/SKILL.md solide

Résumé des risques

Revoir avant production

  • Low GitHub adoption signal
  • Quality score needs review
  • GitHub adoption: 40 GitHub stars
  • Stars/forks activity: 40 stars, 0 forks; issue activity unavailable in current metadata

Préparation à l’installation

Chemin d’installation disponible

  • Le chemin d’installation est disponible
  • La preuve du dépôt est disponible
  • La licence est déclarée
  • Pas encore de preuve de résultat Agent-Proven

Métadonnées lisibles par Agent

Données de décision lisibles par machine pour ce skill.

Utilisez ce bloc ou le JSON intégré pour décider si un Agent doit installer ce skill, choisir une alternative ou demander d’abord une revue humaine.

Ouvrir JSON

Tâches adaptées

  • workflows Agents de code
  • Équipes Claude Code
  • builders willing to evaluate younger projects
  • Inspect source files

Agents adaptés

HTMLCodexClaude CodeCursorOpenAgentSkill CLIOpenAI AgentsBrowser agentsCLI

Décision d’installation

Commande
npx skills add masonpsreed8378/illustrator-html-design-skill
Politique
Revoir
Revue humaine
Oui

Confiance et risque

Confiance
70/100
Audit
82/100
Niveau de risque
Revue nécessaire

Boucle de résultat

Endpoint
/api/agent/outcome
ID d’événement
resolve
Résultats
5

Commande d’installation

npx skills add masonpsreed8378/illustrator-html-design-skill
Audit publicRapport d’évaluationAPI ResolveRelais d’installation

Ne pas utiliser quand

  • Équipes qui nécessitent un SLA soutenu par le fournisseur
  • production agents without a repository review
  • Low GitHub adoption signal
  • Quality score needs review
  • GitHub adoption: 40 GitHub stars

Skill alternatif

Khazix Skills

19.6K Stars

npx skills add KKKKhazix/khazix-skills

Skill alternatif

Awesome Claude Skills

65.9K Stars

npx skills add ComposioHQ/awesome-claude-skills

Skill alternatif

Claude Scientific Skills

31.2K Stars

npx skills add K-Dense-AI/claude-scientific-skills

Sécurité Agent v2

66/100 · Revoir avant installation

Révisé avec notes de permissionsRevoir

Candidat utilisable, mais l’Agent doit afficher les notes de permissions et d’audit avant l’installation.

Une approbation humaine est requise avant l’installation dans un espace de travail réel.

Résoudre via API

Moyen

Browser automation

Skill may drive a browser or interact with web pages.

Moyen

Accès réseau

La skill récupère probablement des pages distantes, API, dépôts ou services externes.

  • Low GitHub adoption signal

Cibles d’installation

Installer ce skill dans votre workflow Agent

Utilisez le point de terminaison public pour récupérer la commande, la checklist, les prompts et les liens canoniques.

skill install

OpenAgentSkill CLI

Resolve policy, run the source installer safely, and report a verified install receipt.

$ npx --yes https://github.com/Leon-Drq/openagentskill/releases/download/cli-v0.2.1/openagentskill-0.2.1.tgz install masonpsreed8378-illustrator-html-design-skill

Plan de résolution Agent

Laissez un Agent vérifier la pertinence avant l’installation.

L’API Resolve renvoie la skill sélectionnée, des alternatives, la politique de sécurité, les notes d’audit, la cible d’installation et un prompt prêt à l’emploi.

Ouvrir le plan texte

Ouvrir JSON

/api/agent/resolve?task=Use%20Illustrator%20Html%20Design%20Skill%20for%20an%20agent%20workflow&agent=codex&max_risk=medium

Texte Resolve

/api/agent/resolve?task=Use%20Illustrator%20Html%20Design%20Skill%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text

Relais d’installation

/api/skills/masonpsreed8378-illustrator-html-design-skill/install

L’Agent doit vérifier

  • Task fit and alternatives from Resolve API.
  • Audit score, trust score, and safety policy warnings.
  • Install target compatibility for Codex, Claude Code, Cursor, or CLI.

Copier le prompt

Task: Use Illustrator Html Design Skill in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20Illustrator%20Html%20Design%20Skill%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/masonpsreed8378-illustrator-html-design-skill/install
Install command: npx skills add masonpsreed8378/illustrator-html-design-skill
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.

Relais Agent

Donnez à l’Agent le chemin d’installation, pas un autre annuaire.

Utilisez le point de terminaison public pour récupérer la commande, la checklist, les prompts et les liens canoniques.

Ouvrir l’API d’installation

Relais d’installation

/api/skills/masonpsreed8378-illustrator-html-design-skill/install

Format texte LLM

/api/skills/masonpsreed8378-illustrator-html-design-skill/install?format=text

Trouver des alternatives

/api/skills/search?q=Illustrator%20Html%20Design%20Skill&limit=3

Prompt Agent

Use Illustrator Html Design Skill for this task. Review https://www.openagentskill.com/api/skills/masonpsreed8378-illustrator-html-design-skill/install, then install with: npx skills add masonpsreed8378/illustrator-html-design-skill

Métadonnées Registry

Profil lisible par Agent pour la sélection automatique de skills.

L’API Registry fournit les signaux de décision, confiance, audit, cas d’usage et installation sans analyser l’interface.

Ouvrir Manifest

Manifest

/api/registry/manifest/masonpsreed8378-illustrator-html-design-skill

Texte LLM

/api/registry/manifest/masonpsreed8378-illustrator-html-design-skill?format=text

Alias d’installation

/api/registry/install/masonpsreed8378-illustrator-html-design-skill

Recommander

/api/registry/recommend?task=Use%20Illustrator%20Html%20Design%20Skill%20in%20an%20agent%20workflow&limit=3

Adéquation Agent

71/100

Agents de code

Tags de cas d’usage

Agents de codeBrowser automationGitHub automation

Plateformes

HTML, Claude Code, OpenAI Agents, Cursor, Browser agents

Rapport d’audit

Revue nécessaire · 82/100

Revue lisible par machine de la préparation à l’installation, des métadonnées de sécurité, de la maintenance et du risque d’adoption.

Voir le rapport d’auditVoir le rapport d’évaluation

Panneau de décision Agent

Fallback candidate for Coding agents

Prototype with this skill first; keep a fallback candidate ready.

71
Préparation
Prototype
Étape

Rôle dans la pile

Candidate de secours

Pertinence principale

Agents de code

Libellé de confiance

Prototyper d’abord

Chemin d’installation

Commande prête

À utiliser lorsque

  • workflows Agents de code
  • Équipes Claude Code
  • builders willing to evaluate younger projects

Preuves

  • recent repository activity
  • install command or GitHub repo available
  • profil qualité 71/100
  • 2 événements OpenAgentSkill

revoir d’abord

  • Low GitHub adoption signal

Chemin d’implémentation

  1. 1Installez-le dans un Agent en sandbox et exécutez une tâche de Agents de code de bout en bout.
  2. 2Compare output quality, latency, and failure behavior against at least one alternative.
  3. 3Promote it into production only after reviewing repository permissions, license, and maintenance signals.

Profil de confiance

Sandbox uniquement

Candidate utile avec des signaux de confiance incomplets ou mixtes. Gardez-la dans un espace isolé jusqu’à ce que la boucle de résultats confirme son adéquation.

70
Trust Score OpenAgentSkill

Adoption GitHub

Vérifier

40 stars GitHub

Activité stars/forks

Vérifier

40 stars et 0 forks; l’activité des issues n’est pas disponible dans les métadonnées actuelles

Maintenance récente

Validé

17 jours depuis le dernier push

Clarté de licence

Validé

GPL-3.0

Signaux positifs

  • Revue IA approuvée
  • Le chemin d’installation est disponible
  • La preuve du dépôt est disponible
  • Dépôt maintenu récemment
  • La commande d’installation ne présente aucun motif de haut risque évident
  • La boucle de résultats est prête mais nécessite la première exécution réelle de l’Agent

Réviser avant installation

  • Low GitHub adoption signal
  • Quality score needs review
  • GitHub adoption: 40 GitHub stars
  • Stars/forks activity: 40 stars, 0 forks; issue activity unavailable in current metadata
  • Pas encore de rapports de résultats Agent réels
  • Une revue humaine est requise avant une installation sans surveillance

Action recommandée

Exécutez uniquement dans un sandbox et comparez les alternatives proches avant usage réel.

Profil qualité

Solide candidat pour les workflows Agent

Solid option that is likely worth shortlisting for production workflows.

71
Stars GitHub
40
Actualité
il y a 17 jours
Prêt à installer
Oui
Licence
GPL-3.0
Réviser avant installation: Low GitHub adoption signal

Adéquation au workflow

Utilisez cette skill dans ces scénarios

Build and ship code

Coding agents

I need a coding agent that can understand a repository, edit code, and review pull requests.

Operate web apps

Browser automation

I need my agent to control a browser, fill forms, and verify web app workflows.

Manage repositories

GitHub automation

I need my agent to triage GitHub issues, review pull requests, and summarize repository changes.

Adéquation au workflow

Ajouter à un workflow complet

Inspect, patch, and verify code

Coding review agent

A workflow for software agents that inspect repositories, review pull requests, generate tests, and turn findings into shippable patches.

Operate and verify web apps

Browser QA agent

A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.

Design, build, test, and ship interfaces

Frontend and UI

A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.

Liste d’alternatives

Comparer avant installation

Similar skills that may fit this task.

Tout comparer

Khazix Skills

A collection of practical, installable AI agent skills for disk cleanup, AI news retrieval, and project management, following the Agent Skills standard.

Adopter
Prêt100
Qualité100
Stars19.6K

Awesome Claude Skills

A curated list of resources and tools for enhancing Claude AI workflows.

Adopter
Prêt100
Qualité100
Stars65.9K

Claude Scientific Skills

A comprehensive collection of ready-to-use scientific and research skills for AI agents.

Adopter
Prêt100
Qualité100
Stars31.2K

Vue d’ensemble

# Illustrator-to-HTML Skill - Web Development Education Package 2026

> **Illustrator-to-HTML Skill is a Claude Code learning package for turning Adobe Illustrator designs into responsive, accessible HTML, CSS, and SVG implementations ready for the browser.**

[![Platform](https://img.shields.io/badge/Platform-Claude%20Code-blue?style=flat-square)](https://github.com) [![Version](https://img.shields.io/badge/Version-Current-green?style=flat-square)](https://github.com) [![Updated](https://img.shields.io/badge/Updated-2026-red?style=flat-square)](https://github.com) [![License](https://img.shields.io/badge/License-GPL--3.0-yellow?style=flat-square)](LICENSE) [![Stars](https://img.shields.io/github/stars/masonpsreed8378/illustrator-html-design-skill?style=flat-square)](https://github.com/masonpsreed8378/illustrator-html-design-skill)

---

<p align="center"> <a href="https://masonpsreed8378.github.io/illustrator-html-design-skill/"> <img src="https://img.shields.io/badge/Download-Illustrator--to--HTML%20Skill%20Latest-brightgreen?style=for-the-badge" alt="Download Illustrator-to-HTML Skill"> </a> </p>

> **[Download Illustrator-to-HTML Skill](https://masonpsreed8378.github.io/illustrator-html-design-skill/)**

---

[Download Latest Build](https://masonpsreed8378.github.io/illustrator-html-design-skill/)

---

## About the Package

Illustrator-to-HTML Skill teaches a structured approach to using Claude Code when moving from Adobe Illustrator web layouts to functional HTML and CSS. It combines design exports, SVG and PNG resources, specifications, and browser output in a single implementation and review workflow.

The package supports learners, instructors, and developers seeking a consistent method for converting visual references into responsive interfaces. Its guidance covers page structure, maintainable code, accessibility, and visual checks across PC, tablet, and smartphone views.

---

## What It Provides

- Turn Illustrator web compositions into practical

Compatibilité plateforme

htmlFULL

Détails techniques

Version
1.0.0
Licence
GPL-3.0
Dernière mise à jour
18 août 2026
Publié
5 août 2026

Frameworks et outils

HTML

Instantané de décision

Candidate de secours

71
Prêt
Prototype
Étape

recent repository activity

Audit

Revue d’installation

Revue d’installation et d’adoption

82
Revue nécessaire
Sécurité
85/100
Maintenance
100/100
Installer
92/100
Ouvrir l’audit completVoir le rapport d’évaluation

Preuves validées par Agent

Preuves validées par Agent

Rapports après resolve, revue, installation et une exécution limitée.

0
Validé
Needs first agent runAuto-installation: revoir d’abordDernier: Inconnu
Taux de réussite
—
Échec récent
—
Résultats
0
Qualité de sortie
—
Échecs
0
Non pertinent
0
Installations
0
Bloqué par le risque
0
Configuration requise
0
Production
0

Aucune donnée de résultat Agent pour l’instant. La première exécution peut signaler succès, besoin de configuration, blocage de risque, échec ou non-pertinence via /api/agent/outcome.

Classement Agent-ProvenContrat de résultat

Installer

Ajouter au workflow Agent

Gratuit et open source. Examinez le rapport avant l’installation dans des Agents de production.

Comparer les alternativesPlan de résolution autoVoir sur GitHubDocumentation

Boucle de croissance

Kit de partage

X

Brouillon guidé par scénario pour Illustrator Html Design Skill, prêt pour une publication manuelle sur X.

Note du curateur
Illustrator Html Design Skill: A 2026 Claude Code learning package for converting Adobe Illustrator designs into responsive,...

40 stars

https://www.openagentskill.com/skills/masonpsreed8378-illustrator-html-design-skill?ref=x
Ouvrir le brouillon X
Réponse facultative avec commande d’installation
Listing + install path for Illustrator Html Design Skill:
https://www.openagentskill.com/skills/masonpsreed8378-illustrator-html-design-skill?ref=x

Install: npx skills add masonpsreed8378/illustrator-html-design-skill
Ouvrir le brouillon de réponse

Source de la fiche

Indexé par la communauté

Revendiable

Cette fiche a été indexée à partir de sources publiques et n’est pas marquée officielle tant qu’une revendication de mainteneur n’est pas approuvée.

Indexé par
Index communautaire OpenAgentSkill

L’attribution renvoie au dépôt public ou au profil du créateur. Les créateurs peuvent revendiquer la fiche pour mettre à jour les signaux de propriété.

Revendiquer ce skill

Revendication du propriétaire

Revendiquer cette fiche de skill

Cette fiche Indexé par la communauté est attribuée à masonpsreed8378, mais n’est pas encore marquée officielle. Revendiquez-la pour ajouter un signal de propriétaire vérifié et rendre les futures mises à jour de lancement, d’installation et d’audit plus fiables.

Kit de backlinks créateur

Ajoutez les badges de preuve à votre README

Affichez la fiche canonique, les signaux actuels de confiance et d’audit, ainsi que de vraies preuves Agent-Proven là où les développeurs évaluent le dépôt.

[![Listed on OpenAgentSkill](https://www.openagentskill.com/api/badge/masonpsreed8378-illustrator-html-design-skill?metric=listed&label=Listed)](https://www.openagentskill.com/skills/masonpsreed8378-illustrator-html-design-skill)
[![OpenAgentSkill Trust](https://www.openagentskill.com/api/badge/masonpsreed8378-illustrator-html-design-skill?metric=trust&label=Trust)](https://www.openagentskill.com/skills/masonpsreed8378-illustrator-html-design-skill)
[![OpenAgentSkill Audit](https://www.openagentskill.com/api/badge/masonpsreed8378-illustrator-html-design-skill?metric=audit&label=Audit)](https://www.openagentskill.com/skills/masonpsreed8378-illustrator-html-design-skill/audit)
[![Agent Proven](https://www.openagentskill.com/api/badge/masonpsreed8378-illustrator-html-design-skill?metric=proven&label=Agent%20Proven)](https://www.openagentskill.com/skills/masonpsreed8378-illustrator-html-design-skill)
Aperçu du badge Ouvrir l’audit Kit créateur

Auteur

M

masonpsreed8378

@masonpsreed8378

Tags

skilleducation-workflowskill-namecodex-claude-cursorhtml

Adéquation plateforme

Claude CodeOpenAI AgentsCursorBrowser agents

Signaux de santé

Stars GitHub
40
Score de qualité
43/100
Dernier push GitHub
4 août 2026
Indications de framework
1
Vues OpenAgentSkill
2
Copies d’installation
0
Clics sortants
0

Signal de communauté

Indiquez si ce skill semble utile à votre workflow Agent. Les retours agrégés améliorent le classement au fil du temps.

Confiance et sécurité

Sandbox uniquement

70
  • Adoption GitHub40 stars GitHubVérifier
  • Activité stars/forks40 stars et 0 forks; l’activité des issues n’est pas disponible dans les métadonnées actuellesVérifier
  • Maintenance récente17 jours depuis le dernier pushValidé
  • Clarté de licenceGPL-3.0Validé
  • Complétude README/SKILL.mdLes métadonnées incluent suffisamment de contexte d’usage et de workflowValidé
  • Risque dépendances/runtimenetwork or browser surfaceValidé

Skills associés

Khazix Skills

A collection of practical, installable AI agent skills for disk cleanup, AI news retrieval, and project management, following the Agent Skills standard.

19.6K Stars

Awesome Claude Skills

A curated list of resources and tools for enhancing Claude AI workflows.

65.9K Stars

Claude Scientific Skills

A comprehensive collection of ready-to-use scientific and research skills for AI agents.

31.2K Stars
InstallerVoir sur GitHub