skills.rest
ghufronbagaskara
ghufronbagaskaraCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

Generate self-contained HTML design artifacts for CLI and API environments.

Updated Jul 6, 2026
Search Tags:#design#ui#html#prototype#ux#artifact
One-click install
npx skills add https://github.com/ghufronbagaskara/agent-im --skill claude-design-ghufronbagaskara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/ghufronbagaskara/agent-im/tree/main/hermes-home/skills/creative/claude-design
Command: npx skills add https://github.com/ghufronbagaskara/agent-im --skill claude-design-ghufronbagaskara

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill bridges the gap for agents running in CLI or API environments that need to produce high-fidelity design artifacts like landing pages, prototypes, and decks without relying on hosted web-based design tools.

Core Features & Use Cases

  • Artifact Generation: Creates self-contained HTML/CSS/JS files for landing pages, prototypes, and presentations.
  • Design System Integration: Provides a structured process to incorporate existing brand tokens, typography, and layout systems into generated code.
  • Slop Prevention: Uses a rigorous diagnostic framework to ensure generated UI avoids common AI-design pitfalls like generic card grids and unearned gradients.

Quick Start

Use the claude-design skill to create a high-fidelity landing page prototype for a new product dashboard using the existing design tokens in the repository.

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 in a CLI agent environment?▼

You can generate self-contained HTML prototypes in CLI environments by applying surface-first composition rules to produce high-fidelity design artifacts without relying on hosted web-based design tools.

Can I create landing pages and UI components directly from a terminal or API workflow?▼

Yes, you can create landing pages, decks, and UI components directly from terminal or API workflows by generating self-contained HTML, CSS, and JS files that incorporate existing design tokens.

How do I prevent generic AI design slop like unearned gradients when generating UI artifacts?▼

To prevent AI design slop when generating UI artifacts, you must apply a rigorous diagnostic framework that identifies and eliminates common pitfalls like generic card grids and unearned gradients.

Does this approach support integrating existing brand tokens and typography into generated code?▼

Yes, this approach supports design system integration by providing a structured process to incorporate existing brand tokens, typography, and layout systems directly into the generated HTML and CSS code.

What is the best way to produce visual design exploration output when standard hosted design tools are unavailable?▼

The best way to produce visual design exploration output without hosted tools is to use a CLI or API-based agent to generate professional, self-contained HTML artifacts that serve as interactive prototypes.

Related Skills

Explore More Design & Creative Skills→
Pabloprogramador23Pabloprogramador23

reversa-design-system

Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.

Community
Advanced
Monjyu1101Monjyu1101
1

claude-design

Translate Claude Design prompts into self-contained HTML prototypes for CLI/API workflows.

Community
Advanced
krzemienskikrzemienski
2

design-validation

Compare implementation screenshots against design references to measure visual and structural fidelity.

Community
Advanced
LamseyahEliasLamseyahElias

claude-design

Convert design briefs into self-contained HTML artifacts with embedded CSS and JavaScript.

Community
Advanced