skills.rest
Cyapstaye
CyapstayeCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

Generate HTML, CSS, and JS design artifacts from repository context.

9|Updated Jul 1, 2026
Search Tags:#design#ui#html#prototype#creative#ux
One-click install
npx skills add https://github.com/Cyapstaye/Adame_ver.open --skill claude-design-cyapstaye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/Cyapstaye/Adame_ver.open/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/Cyapstaye/Adame_ver.open --skill claude-design-cyapstaye

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Artifact Generation: Creates self-contained HTML, CSS, and JS files for prototypes, decks, and design systems.
  • Context-Aware Design: Analyzes existing repository files, tokens, and brand documentation to ensure visual consistency.
  • Design Process: Provides a structured workflow for scoping, gathering context, and verifying design deliverables locally.

Quick Start

Use the claude-design skill to create a high-fidelity landing page prototype for a new product feature based on 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 HTML prototypes in a local CLI or API agent environment?▼

You generate HTML prototypes locally by creating self-contained HTML, CSS, and JS files directly within your local agent environment, bypassing the need for hosted web-UI design tools.

Can I build UI mockups that match my existing repository design tokens?▼

Yes, the process analyzes your repository files, tokens, and brand documentation to ensure generated UI mockups and design artifacts maintain strict visual consistency with your existing styles.

What is the best way to create high-fidelity design artifacts without hosted design tools?▼

The best way is applying a structured local design workflow that scopes requirements, gathers repository context, and verifies deliverables to produce high-fidelity artifacts like landing pages and slide decks.

Does local artifact generation work for product mockups and design system documentation?▼

Yes, local artifact generation works for product mockups and design system documentation by producing self-contained HTML files and component explorations tailored for UI/UX design tasks.

Are there limitations to generating design prototypes locally compared to using hosted web-UI tools?▼

A key limitation is the strict requirement to manually verify design deliverables and integrate with existing repository styles, replacing the automated visual checks found in hosted web-UI tools.

Related Skills

Explore More Design & Creative Skills→
dmedina-devdmedina-dev
1

ckm:brand

Synchronize brand guidelines, design tokens, and marketing assets across projects.

Community
Advanced
rickyanandarickyananda
1

claude-design

Design local HTML artifacts with embedded CSS and JavaScript from briefs or screenshots.

Community
Advanced
matthew-johnsonmatthew-johnson

claude-design

Generate self-contained HTML artifacts with embedded CSS and JS from design briefs.

Community
Advanced
projectedanxprojectedanx
1

claude-design

Generate high-fidelity HTML design artifacts like prototypes and UI components.

Community
Advanced