design

Name: design
Availability: InStock
Author: heximao

Generate HTML design artifacts and DESIGN.md design-system specifications.

Updated May 11, 2026

Search Tags:#design system #ux design #ui design #DESIGN.md #design process

Ready to run

npx skills add https://github.com/heximao/agents --skill design-heximao

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/heximao/agents/tree/main/skill-archive/docker-hermes/creative/design
Command: npx skills add https://github.com/heximao/agents --skill design-heximao

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps users streamline the design process by providing expert guidance on design principles and a formal mechanism to author and manage design system specifications.

Core Features & Use Cases

Design Process: Offers a structured approach to design from scoping to verification, covering UX, visual, motion, and component design.
DESIGN.md Tokens: Generates machine-readable design system specifications in the DESIGN.md format for consistent UI/brand across multiple projects.
Use Case: For a new web application, use the Skill to create a design system, define typography, color schemes, and layout guidelines.

Quick Start

Generate a design system specification for a new project by providing the required context and using the 'generate-design-spec' command.

Frequently Asked Questions about design

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

FAQPage Schema

How do I generate a formal design system specification for my web application?▼

To generate a design system specification, provide your project context and use the generate-design-spec command. This creates a formal DESIGN.md file containing machine-readable design tokens for consistent UI and branding across multiple projects.

What is the DESIGN.md format for UX design tokens?▼

DESIGN.md is a formal design system specification format used to author and manage machine-readable design tokens. It defines typography, color schemes, and layout guidelines to ensure consistent UI and brand application across web product projects.

How do I structure a UI design process from scoping to verification?▼

You can structure your UI design process by following a guided workflow that covers scoping, visual, motion, and component design, ending with verification. This approach provides expert design principles and generates HTML artifacts for frontend prototyping.

Can I use this design process workflow for frontend prototyping?▼

Yes, this structured design workflow is applicable to frontend prototyping and web product design artifacts. It guides you through UX, visual, and component design to produce tangible HTML artifacts for your application.

Do I need prior knowledge of design tokens to generate a design system spec?▼

Yes, understanding design tokens is required to execute this structured workflow and generate the formal design system specification. This knowledge allows you to effectively manage UI consistency and define layout guidelines.