skills.rest
heliohq
heliohqOFFICIAL
Explore all skills by this author →
WebsiteGitHub

visual-design

Extract a project's visual design system into DESIGN.md and preview.html.

88|6|Updated Mar 25, 2026
Search Tags:#typography#design system#color palette#visual identity#ui components#preview html#codebase extraction
One-click install
npx skills add https://github.com/heliohq/ship --skill visual-design-heliohq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design
Source: https://github.com/heliohq/ship/tree/main/skills/visual-design
Command: npx skills add https://github.com/heliohq/ship --skill visual-design-heliohq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill turns an existing product, website, or design idea into a clear, reproducible visual design system so AI agents can build consistently styled interfaces.

Core Features & Use Cases

  • Design System Extraction: Capture colors, typography, spacing, shadows, radii, and component patterns from a current codebase or live site.
  • From-Scratch Design Creation: Collaboratively develop a full visual direction when starting from a brand mood, reference, or rough concept.
  • Preview Generation: Produce a companion preview page so the design system can be reviewed visually before implementation.
  • Use Case: A product team wants their app UI to match an existing aesthetic across new pages, so this Skill documents the system in a structured format that agents can follow reliably.

Quick Start

Use the visual-design skill to extract the current project’s visual system into a DESIGN.md and matching preview page.

Frequently Asked Questions about visual-design

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

FAQPage Schema
How do I extract a visual design system from an existing codebase or website?▼

Yes, you can generate a full visual identity from scratch. Starting from a brand mood, reference, or rough concept, this Skill collaboratively develops the entire visual direction and outputs a structured DESIGN.md file along with a preview.html artifact.

Can I create a visual design system from scratch starting from just a brand mood or rough concept?▼

Yes, you can generate a full visual identity from scratch. Starting from a brand mood, reference, or rough concept, this Skill collaboratively develops the entire visual direction and outputs a structured DESIGN.md file along with a preview.html artifact.

How do I generate an HTML preview for a UI component and color palette design system?▼

This approach distinguishes itself by producing a structured DESIGN.md containing semantic token extraction, validated color foundations, and component recipes. Unlike manual documentation, it ensures AI agents can reliably follow and reproduce the visual system across new pages.

What is the best way to document UI components and typography rules for AI agents to follow?▼

You do not need any external dependencies to use this Skill. It operates independently to analyze your current codebase or URL and outputs the visual design system directly into DESIGN.md and preview.html files without requiring extra packages.

Related Skills

Explore More Design & Creative Skills→
gleesonbgleesonb

brand-voice

Extracts or builds brand voice profiles from user input or URL scraping.

Community
Advanced
soeiroosoeiroo

dark-mode-design

Define dark mode design guidelines for luminance, contrast, and elevation.

Community
Intermediate
AradotsoAradotso
3

claude-design-studio-ui-generator

Convert UI design intent into styled React, Vue, or Svelte components.

Official
Advanced
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate