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.