claude-design

Generate high-fidelity HTML design artifacts with verified brand assets.

Updated Jun 23, 2026
One-click install
npx skills add https://github.com/JesusLeos16/DashboardTD --skill claude-design-jesusleos16
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/JesusLeos16/DashboardTD/tree/main/.agents/skills/claude-design
Command: npx skills add https://github.com/JesusLeos16/DashboardTD --skill claude-design-jesusleos16

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill transforms Claude into a high-fidelity design partner, eliminating the guesswork and generic AI-generated aesthetics when creating visual artifacts like landing pages, slide decks, and interactive prototypes.

Core Features & Use Cases

  • Design Direction Advisor: Proposes differentiated visual philosophies when your brief is vague, ensuring you explore diverse creative paths.
  • Core Asset Protocol: Enforces a rigorous 5-step process to gather and verify brand assets (logos, product shots, UI screenshots) so your designs are grounded in reality.
  • Anti-Slop Discipline: Applies strict craft rules to avoid common AI design tropes like aggressive gradients, emoji bullets, and generic CSS silhouettes.

Quick Start

Use the claude-design skill to create a 5-slide pitch deck for my new SaaS product using a Swiss Editorial design style.

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 landing pages that avoid generic AI design aesthetics?▼

Generate high-fidelity HTML landing pages by enforcing strict anti-slop design discipline, which eliminates generic gradients and emoji bullets to ensure professional visual output. This process applies structured design systems to maintain craft and originality.

Can I build interactive prototypes in HTML using React and Babel for visual artifacts?▼

Yes, you can build interactive prototypes in HTML using React and Babel. This integration handles complex UI logic while maintaining strict adherence to structured design principles and professional-grade visual output.

What is the best way to ensure my UI design uses accurate brand assets and product shots?▼

The best way to ensure UI design uses accurate brand assets is applying a rigorous 5-step core asset protocol. This process gathers and verifies logos and product shots, grounding your HTML artifacts in factual brand reality.

How do I choose a visual direction when my branding or UI design brief is vague?▼

Choosing a visual direction for a vague UI design brief involves using a design direction advisor. This mechanism proposes differentiated visual philosophies, allowing you to explore diverse creative paths before committing to a final HTML output.

Does this HTML prototyping approach work for creating structured slide decks?▼

Yes, this HTML prototyping approach works for creating structured slide decks. It produces high-fidelity visual artifacts by enforcing fact verification and structured design systems to ensure professional-grade presentation output.

Why do my AI-generated HTML artifacts look generic, and how can I fix them?▼

AI-generated HTML artifacts look generic due to common design tropes like aggressive gradients and generic CSS silhouettes. Fix them by applying anti-slop discipline and strict craft rules to enforce professional-grade visual output.