skills.rest
LynxLabVN
LynxLabVNOFFICIAL
Explore all skills by this author →
GitHub

claude-design

Design custom HTML artifacts with embedded CSS/JS for high-fidelity prototypes.

Updated Jul 3, 2026
Search Tags:#ui/ux#design systems#prototyping#landing pages#html design
One-click install
npx skills add https://github.com/LynxLabVN/office-agent --skill claude-design-lynxlabvn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/LynxLabVN/office-agent/tree/main/agent-core/skills/creative/claude-design
Command: npx skills add https://github.com/LynxLabVN/office-agent --skill claude-design-lynxlabvn

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the problem of creating one-off HTML artifacts, such as landing pages, prototypes, and decks, with precision and style, catering to the needs of CLI/API agents.

Core Features & Use Cases

  • Custom HTML Artifacts: Design unique HTML pages tailored to specific requirements.
  • Design Systems: Utilize and define design systems for consistency and coherence.
  • Prototyping: Generate high-fidelity prototypes for product visualization.
  • Use Case: If you need a custom landing page for a product, this Skill can help you design it with all the necessary components and aesthetics.

Quick Start

Generate a landing page design with a modern design system, targeting a tech startup audience.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate a custom HTML landing page with an embedded design system?▼

You can design custom HTML artifacts by utilizing a defined design system for consistency, outputting local HTML files with embedded CSS and JS for high-fidelity product visualization and branding tasks.

What is the best way to create high-fidelity HTML prototypes for product visualization?▼

Creating high-fidelity prototypes involves generating local HTML files with embedded CSS and JS, utilizing design systems to ensure precise styling and coherence for product visualization and branding tasks.

Can I use this to design HTML artifacts in a CLI or API environment?▼

Yes, this Skill is intended for CLI/API environments, enabling agents to design custom HTML artifacts and output local HTML files with embedded CSS and JS for automated workflows.

Does the generated HTML require external dependencies or separate CSS files?▼

No, the generated HTML does not require external dependencies. It outputs local HTML files with embedded CSS and JS, ensuring self-contained custom artifacts that function independently.

What do I need to know to design custom UI components for a tech startup landing page?▼

To design custom UI components for a tech startup landing page, you need HTML/CSS/JS skills and design system knowledge to accurately generate local HTML files with embedded CSS and JS for high-fidelity prototypes.

Related Skills

Explore More Design & Creative Skills→
aayushsoamaayushsoam
1

claude-design

Design custom HTML artifacts like landing pages, prototypes, and decks via CLI/API.

Community
Advanced
anilcan-karaanilcan-kara

claude-design

Translate design briefs into self-contained local HTML artifacts with embedded CSS and JS.

Community
Advanced
zeronx798zeronx798

popular-web-designs

Generate brand-aligned HTML and CSS using design tokens from 54 web design systems.

Community
Intermediate
Monjyu1101Monjyu1101
1

claude-design

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

Community
Advanced