Design Style Explorer

Q: What is a Claude Code skill and how does the Design Style Explorer skill fit in?

A Claude Code skill is a SKILL.md file that lives under ~/.claude/skills/<name>/ and tells the Claude Code CLI agent how to perform a specific task (instructions, prompts, allowed tools). Skills are auto-discovered at session start. Design Style Explorer is one of 67,000+ skills indexed in the open ClaudSkills catalog, classified under the General category. Learn more at https://claudskills.com/learn/what-is-skill-md/.

Category: General · Sub-category: design-creative · Last updated: 2026-07-22

사용자가 도메인(제품·서비스 주제)을 지정하면 그 도메인의 대표 화면을 30가지 디자인 스타일(SF HUD, 공공포털, 트렌디 SaaS, 고밀도 터미널, 브루탈리즘, 글래스모피즘, 미니멀 모노크롬, 럭셔리 다크, 레트로 픽셀, 에디토리얼, 네이처 오가닉, 뉴모피즘, 오로라 그라디언트, 벤토 그리드, 클레이모피즘, 머티리얼, Y2K 베이퍼웨이브, 스위스, 맥시멀리즘, 다크 대시보드, AI 프로덕트, 핀테크 소프트, 엔터프라이즈 B2B, 헬스케어 웰니스, 커머스 리테일, 다크 프로 미니멀, 웜 프로페셔널, 하이컨트라스트 접근성, 컬러풀 모던, 데이터 리치 라이트)의 HTML 시안으로 만들어 비교하게 해주는 스킬. 사용자가 "디자인 시안 뽑아줘", "스타일 비교", "30개 디자인", "○○ 도메인으로 디자인 보여줘", "디자인 탐색", "어떤 스타일이 어울릴지" 등을 말하거나, 새 제품/화면의 비주얼 방향을 고민할 때 반드시 이 스킬을 사용할 것. 특정 스타일 이름(브루탈리즘, 글래스모피즘 등)을 언급하며 화면을 요청할 때도 사용.

Security AStatic scan found no risk patternsHow grading works ›

From the source SKILL.md

도메인 하나를 받아 동일한 콘텐츠를 30가지 스타일로 렌더링한 HTML 시안을 만들고, 비교 → 조합 → 확정 → 디자인 시스템 프롬프트 역추출까지 진행하는 워크플로.

What this skill does

Design Style Explorer is a community-contributed Claude Code skill in the design-creative sub-category. It ships as a SKILL.md file that Claude Code auto-discovers under ~/.claude/skills/design-style-explorer/ and loads when your prompt matches the skill's trigger.

Who uses this skill

The Design Style Explorer Claude Code skill is built for Claude Code users and developers across all disciplines looking for general-purpose AI assistance. It's part of ClaudSkills (also referred to as Claude Skills or Claude Code Skills) — the open community-curated registry of 157,000+ SKILL.md files for Anthropic's Claude Code agent and the wider Claude ecosystem (Claude API, Claude Agent SDK).

How to install

Free

Manual install (2 steps)

mkdir -p ~/.claude/skills/design-style-explorer
curl -L https://claudskills.com/skills/design-style-explorer/SKILL.md \
  -o ~/.claude/skills/design-style-explorer/SKILL.md

Or just download SKILL.md directly and drop it into ~/.claude/skills/design-style-explorer/. Claude Code auto-discovers it on next session.

Skills live at ~/.claude/skills/design-style-explorer/SKILL.md on macOS/Linux, or %USERPROFILE%\.claude\skills\design-style-explorer\SKILL.md on Windows. See the full install guide for step-by-step instructions.

📱 Install from your phone or desktop Telegram

Open @claudskills_bot on Telegram, tap Open Desktop App, and the desktop app installs this skill for you. Or share the bot link with a colleague — they get the same one-tap install. Learn more →

Pro

One-click install via the desktop app

The ClaudSkills desktop app installs any skill directly into ~/.claude/skills/ with one click — no terminal required. Pro starts at $9/mo or $149 lifetime.

Pro

For the full experience including quality scoring and one-click install features for each skill — upgrade to Pro.

See pricing → Download desktop app

Frequently asked questions

How do I install the Design Style Explorer Claude Code skill?

Install via the ClaudSkills desktop app (one click) or copy SKILL.md from the source repository to ~/.claude/skills/design-style-explorer/SKILL.md and restart Claude Code. Both flows are detailed at claudskills.com/install/.

What does the Design Style Explorer skill do?

Is this skill free to install?

Yes. ClaudSkills is an open registry — every skill keeps its source repository's license, and manual install via copy is free. ClaudSkills Pro ($9/mo, $79/yr, or $149 one-time) adds one-click install via the desktop app and a multi-signal Quality Score.

When should I use the Design Style Explorer skill?

Use Design Style Explorer when your Claude Code task falls under the General category — specifically in the design creative area. Claude Code auto-discovers installed skills and invokes the right one based on the task description, so you can also ask Claude directly (e.g. "use Design Style Explorer" or describe the task and let Claude pick). Browse related skills at /category/general/.

What is a Claude Code skill and how does the Design Style Explorer skill fit in?

A Claude Code skill is a SKILL.md file that lives under ~/.claude/skills/<name>/ and tells the Claude Code CLI agent how to perform a specific task (instructions, prompts, allowed tools). Skills are auto-discovered at session start. Design Style Explorer is one of 67,000+ skills indexed in the open ClaudSkills catalog, classified under the General category. Learn more at /learn/what-is-a-claude-skill/.

Attribution & license

Source: https://github.com/deokjinlog/design-explosion-30-styles/blob/HEAD/skills/design-style-explorer/SKILL.md
License: MIT
Author: deokjinlog
Website: https://deokjinlog.github.io/design-explosion-30-styles/

Cite this skill

If you reference this skill in a blog post, paper, or documentation, you can cite it as:

APA

deokjinlog. (2026). Design Style Explorer [Claude Code skill]. ClaudSkills. https://claudskills.com/skills/design-style-explorer/

BibTeX

@misc{design-style-explorer-2026,
  author    = {deokjinlog},
  title     = {Design Style Explorer [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/design-style-explorer/}
}

Embed this skill

Promote, attribute, or link this skill from your own README, blog post, or documentation. All three snippets are free to use — no sign-up, no API key. More distribution surfaces →

Badge

[![ClaudSkills](https://claudskills.com/badge/design-style-explorer.svg)](https://claudskills.com/skills/design-style-explorer/?utm_source=badge&utm_medium=readme&utm_campaign=skill_badge)

Security scan

Grade A · scanned 2026-07-22 — free static scan against the OWASP Agentic Skills Top 10.

No risk patterns were found in any of the ten OWASP-aligned categories. How grading works ›

✓ Prompt injection
✓ Data exfiltration
✓ Supply chain
✓ Reverse shell
✓ Credentials
✓ Execution
✓ Filesystem
✓ Persistence
✓ Obfuscation
✓ Network

Show this grade on your repo (click to copy):

[![Security: A](https://img.shields.io/badge/Security-A-2e7d32)](https://claudskills.com/skills/design-style-explorer/#security)

More General skills

Browse all General skills in the ClaudSkills registry, or explore these other picks from the same category:

Browse all General skills → Top 100 skills

Part of ClaudSkills — the open registry for Claude Skills & Claude Code Skills. · What's New · Install guide · About · llms.txt

Part of Acreator Store — Adam Lankamer's AI tools: PerfectStudio · Ucaption · UTagger · AutoXPoster · TestYourSkills · AutomationFlows · Au Naturel · Telegram @acreatorstore