What kind of output does the skill produce?

It generates interactive HTML files (galleries) in a dated topic directory, and once a direction is chosen, it produces a Markdown 'Design Direction' document.

Does this skill work with existing design systems?

Yes, it can be configured to respect existing visual boundaries like color palettes and font stacks, focusing its variations on interaction models while maintaining brand consistency.

How do I iterate on a design I've already generated?

You can use the built-in feedback system in the generated HTML gallery to export structured feedback, then paste that back into Claude to trigger a refined iteration round.

Is this skill for building production-ready code?

No, this skill is meant for the exploration and planning phase. It creates 'working artifacts' to help you choose a direction before you start building the final production component.

What is the primary purpose of the Design Exploration skill?

The primary purpose is divergent thinking—helping you see several fundamentally different takes on the same UI or UX problem before committing to a single implementation path.

Design Exploration

Name: Design Exploration
Author: tmchow

bytmchow

•

디자인 도구

Explores diverse UI/UX design approaches by generating interactive galleries for side-by-side comparison of interaction models and visual styles.

The Design Exploration skill facilitates divergent thinking during the product development process by presenting multiple, fundamentally different takes on a UI problem. Instead of building a single specific design, it generates self-contained HTML galleries containing various interaction models or visual identities. This allows teams to compare different UX flows or aesthetic directions early, providing a feedback loop that leads to a solidified Design Direction document before technical implementation begins.

주요 기능

01Generates multi-variation HTML galleries for side-by-side design comparison

02Automates the creation of a 'Design Direction' summary for durable project documentation

03Adapts to existing design systems or greenfield projects with context-aware scoping

04Supports both interaction-based and visual-based divergence axes

0521 GitHub stars

06Includes a built-in rating and feedback system for iterative refinement

사용 사례

01Brainstorming visual identities and layout approaches for new landing pages

02Exploring different interaction models for complex components like data grids or multi-step forms

03Iterating on feature designs based on structured feedback to converge on a final UX direction

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tmchow/tmc-marketplace design-exploration

For use in Claude.ai and ChatGPT

주요 기능

01Generates multi-variation HTML galleries for side-by-side design comparison

02Automates the creation of a 'Design Direction' summary for durable project documentation

03Adapts to existing design systems or greenfield projects with context-aware scoping

04Supports both interaction-based and visual-based divergence axes

0521 GitHub stars

06Includes a built-in rating and feedback system for iterative refinement

사용 사례

01Brainstorming visual identities and layout approaches for new landing pages

02Exploring different interaction models for complex components like data grids or multi-step forms

03Iterating on feature designs based on structured feedback to converge on a final UX direction

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tmchow/tmc-marketplace design-exploration

For use in Claude.ai and ChatGPT