skills.rest
heximao
heximaoCOMMUNITY
Explore all skills by this author →
GitHub

design

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
One-click install
npx skills add https://github.com/heximao/agents --skill design-heximao
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ibnuhalimmibnuhalimm

Architect

Gather project context and produce a detailed architecture plan.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
vigoliumvigolium
965

frontend-design

Convert UI requirements into cohesive frontend designs with HTML/CSS/JS code.

Official
Intermediate
gil-kapelgil-kapel
2

ui-design-system

Generates design tokens and documentation for scalable UI systems.

Community
Intermediate