skills.rest
fol2
fol2COMMUNITY
Explore all skills by this author →
GitHub

claude-design

Generate HTML/CSS/JS design artifacts from natural language prompts and references.

Updated Apr 25, 2026
Search Tags:#design#html#javascript#css#figma#prototyping#visual-design
One-click install
npx skills add https://github.com/fol2/claude-design --skill claude-design-fol2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/fol2/claude-design/tree/main
Command: npx skills add https://github.com/fol2/claude-design --skill claude-design-fol2

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Crafting polished HTML/CSS/JS design artefacts from vague requests and references can be time-consuming and inconsistent. This skill streamlines the process by turning user input into craft-ready front-end outputs while preserving design intent.

Core Features & Use Cases

  • Generate landing pages, decks, prototypes, and interactive experiences as ready-to-run HTML/CSS/JS artefacts.
  • Accept references such as Figma links or screenshots and produce variations, iterations, and responsive layouts.
  • Maintain design system coherence and export clean, production-ready code suitable for deployment or handoff.

Quick Start

Ask for a polished HTML/CSS/JS design artifact based on your input (such as a Figma link or screenshot) and request multiple design variations.

Frequently Asked Questions about claude-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate production-ready HTML from a Figma design link?▼

Yes, you can create interactive HTML prototypes from natural language prompts. The skill processes plain text descriptions alongside visual references to output functional HTML, CSS, and JavaScript artefacts suitable for interactive experiences and design explorations.

What's the best way to create multiple design variations for a landing page?▼

The best way to create design variations is to provide a screenshot or Figma link and request iterations. The skill generates multiple polished HTML and CSS landing page variations from your input, maintaining visual cohesion across different outputs for easy comparison.

Does this approach export clean HTML and CSS suitable for developer handoff?▼

Yes, this approach exports clean, production-ready HTML, CSS, and JavaScript code suitable for deployment or developer handoff. It transforms vague requests into craft-level front-end outputs that preserve your original design intent without manual code cleanup.

Can I maintain design system coherence when generating front-end code from screenshots?▼

Yes, you can maintain design system coherence when generating code from screenshots. The skill enforces adherence to established design systems or branding guidelines, ensuring that exported HTML and CSS artefacts remain visually consistent with your foundational components.

Related Skills

Explore More Design & Creative Skills→
acquiaacquia
16

nebula-scrape-url

Capture desktop, tablet, and mobile screenshots and HTML from web pages.

Official
Basic
whichguywhichguy

popular-web-designs

Provide HTML/CSS templates for popular brand design systems.

Community
Basic
kaikunnnnkaikunnnn

design

Map Figma design nodes to Tailwind CSS tokens and component structures.

Community
Advanced
xiaoyuge886xiaoyuge886
196

playground

Generate self-contained HTML playgrounds with live previews and prompt output.

Community
Advanced