skills.rest
Quill-Agent
Quill-AgentCOMMUNITY
Explore all skills by this author →
𝕏@QuillAgentGitHub

claude-design

Design custom HTML artifacts with local HTML, CSS, and JavaScript.

3|1|Updated May 19, 2026
Search Tags:#design#ui#html#prototype#creative#ux#artifact
One-click install
npx skills add https://github.com/Quill-Agent/Quill-Agent --skill claude-design-quill-agent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/Quill-Agent/Quill-Agent/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/Quill-Agent/Quill-Agent --skill claude-design-quill-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the need for creating one-off HTML artifacts, such as landing pages, prototypes, and decks, with a focus on design process and taste, tailored for CLI/API environments.

Core Features & Use Cases

  • Design Custom Artifacts: Create landing pages, prototypes, and decks from scratch.
  • Design System Integration: Incorporate existing design systems or define new ones.
  • Use Case: When you need a unique design for a landing page that aligns with a specific brand or design system, this Skill can help you produce a high-fidelity HTML artifact.

Quick Start

Use the claude-design skill to create a landing page for a new product, specifying the desired colors, typography, and layout.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I design custom HTML artifacts for CLI or API environments?▼

To design custom HTML artifacts for CLI or API environments, you can use local HTML, CSS, and JavaScript to create landing pages or prototypes tailored to your specific design system and context.

Can I integrate an existing design system when creating HTML prototypes?▼

Yes, you can integrate an existing design system when creating HTML prototypes by defining the context and system parameters to ensure the generated artifact aligns with your brand standards.

What is the best way to generate a landing page from scratch using HTML and CSS?▼

The best way to generate a landing page from scratch using HTML and CSS is to follow a structured design process that includes context gathering, design system definition, and artifact creation.

Does this approach work for building high-fidelity UI prototypes without a visual editor?▼

Yes, this approach works for building high-fidelity UI prototypes without a visual editor by leveraging local code and design system definitions to produce precise, ready-to-use HTML artifacts.

When do I need to define a new design system for a custom HTML artifact?▼

You need to define a new design system for a custom HTML artifact when you lack an existing system to incorporate, requiring you to establish typography, colors, and layout rules from scratch.

Are there limitations to creating HTML prototypes in a CLI environment?▼

Creating HTML prototypes in a CLI environment requires providing detailed text prompts for context and system definition, as it lacks the interactive visual feedback of a traditional drag-and-drop editor.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
Monjyu1101Monjyu1101
1

claude-design

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

Community
Advanced
fauzanazzfauzanazz

generative-ui-preview

Generate an interactive HTML preview of a UI/UX design concept.

Community
Intermediate
ArieGoldkinArieGoldkin

design-to-production

Convert HTML prototypes into React components with shadcn/ui and validation.

Community
Intermediate