What assets does the Design System skill generate?

The skill produces a comprehensive markdown style guide and eight PNG assets, including a hero character, concept icons, framework diagrams, background textures, and UI elements.

Does this skill require other plugins to work?

Yes, this skill utilizes the art:nanobanana skill for high-quality image generation and the WebFetch tool if you provide a URL as a visual reference.

Can I use my existing brand images as inspiration?

Yes, Phase 0 allows you to provide folder paths, individual image files, or website URLs. The skill analyzes these references to suggest smart defaults for your new design system.

Where are the generated design systems saved?

You can choose to save the output locally in your current project directory or at a system-wide user level, making the brand assets accessible across all your Claude Code projects.

Design System Generator

Name: Design System Generator
Author: kenneth-liao

bykenneth-liao

•

109

•

디자인 도구

Generates comprehensive visual design systems, style guides, and AI-powered brand assets through a guided discovery process.

The Design System Generator is a specialized branding tool that transforms abstract creative visions into concrete, documented visual identities. It leads users through a structured multi-phase workflow—from analyzing reference images to defining color strategies, typography, and character systems—culminating in a professional markdown style guide. By integrating with the art:nanobanana skill, it produces a cohesive eight-element style board including icons, textures, and hero characters, ensuring your brand remains consistent across all digital touchpoints.

주요 기능

01Integration with art:nanobanana for 8-element visual asset generation

02Guided 10-dimension discovery process for precise aesthetic definition

03109 GitHub stars

04Flexible storage options for local project-specific or system-wide design systems

05Automated generation of comprehensive, self-contained markdown style guides

06Visual reference analysis of images and websites for smart style defaults

사용 사례

01Establishing a cohesive visual identity for a new software project or application

02Generating professional design documentation and assets for client-facing presentations

03Building a consistent brand style for content creators, newsletters, or social media

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kenneth-liao/ai-launchpad-marketplace design-system

For use in Claude.ai and ChatGPT

Download Skill