claude-design

Generate landing pages, slide decks, and interactive prototypes with HTML and React.

4|1|Updated Jun 19, 2026
One-click install
npx skills add https://github.com/Sma1lboy/mc --skill claude-design-sma1lboy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/Sma1lboy/mc/tree/main/.claude/skills/claude-design
Command: npx skills add https://github.com/Sma1lboy/mc --skill claude-design-sma1lboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill bridges the gap between creative intent and technical execution, allowing you to generate professional-grade design artifacts like landing pages, slide decks, and interactive prototypes without needing to manually code from scratch.

Core Features & Use Cases

  • Multi-Format Design: Generate slide decks, interactive prototypes, animated videos, and wireframes using HTML as the medium.
  • System-First Approach: Enforces a coherent visual system (type scale, color logic, layout rhythm) to ensure professional consistency.
  • Use Case: When you need to pitch a new product concept, use this Skill to build a clickable, high-fidelity prototype that demonstrates the user flow and visual identity, complete with tweakable design options.

Quick Start

Use the claude-design skill to create a three-slide pitch deck for a new mobile app concept using a modern minimalist aesthetic.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate high-fidelity HTML prototypes for UI/UX mockups?

Generate high-fidelity HTML prototypes by enforcing a coherent visual system with type scale, color logic, and layout rhythm. This approach produces professional-grade UI/UX mockups, interactive prototypes, and landing pages without manual coding from scratch.

Can I create slide decks and presentation materials using HTML?

Yes, you can create slide decks and presentation materials using HTML and React. The system supports multi-format design outputs including animated videos and wireframes, functioning as a structured medium for professional pitch decks and presentations.

Do I need React knowledge to build interactive wireframes and landing pages?

No React knowledge is required to build interactive wireframes and landing pages. The system bridges creative intent and technical execution, generating the underlying HTML and React code automatically to satisfy professional presentation requirements.

What is the best way to maintain visual consistency across multiple design artifacts?

Maintain visual consistency by using a system-first approach that enforces a coherent visual system across type scale, color logic, and layout rhythm. This ensures professional consistency across all generated design artifacts and interactive prototypes.

Does this approach support iterative design workflows and variation exploration?

Yes, the approach supports iterative design workflows by enforcing design context gathering and variation exploration. This allows you to refine high-fidelity artifacts through tweakable design options while maintaining the established visual system.

What are the limitations of using HTML for motion design and animated videos?

Using HTML for motion design and animated videos confines output to web-based rendering formats rather than native video files. Complex animations rely on HTML and React execution, meaning outputs require a browser environment to display interactive motion design.