visual-taste-lab

Distill visual identity and design language from references before applying UI redesigns.

Updated Aug 13, 2026
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill visual-taste-lab-mjlike123
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-taste-lab
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/monkren-design/skills/01-research/visual-taste-lab
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill visual-taste-lab-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? UI polish requests like "make it look better" often produce inconsistent, generic-looking pages because styling starts before a coherent brand visual identity exists. This Skill turns vague taste requests into a repeatable workflow: audit the visual identity first, choose a site archetype, distill a reusable design language, then apply it system-wide. ## Core Features & Use Cases - VI-First Audit: Identifies logo anchors, color roles, typography attitude, geometry, and imagery before any redesign, and separates company websites from product websites. - Archetype Classification: Selects from ten visual archetypes (credible company brief, institutional clarity, transactional utility, dashboard, technical console, and more) via the bundled references. - Design Language Output: Produces a concrete docs/design-language.md with tokens for color, typography, spacing, components, motion, and anti-patterns. - Use Case: Given screenshots of a B2B company site that looks like a generic SaaS template, distill a credible company-brief design language, then restyle shared components and key pages with honest, placeholder-free content. ## Quick Start Use visual-taste-lab to audit my site's visual identity from these screenshots, pick an archetype, and write a design language doc before restyling the key pages.

Frequently Asked Questions about visual-taste-lab

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

FAQPage Schema
How do I make my website look less AI-generated?

Start with a visual identity audit instead of restyling pages directly. Identify logo anchors, assign roles to brand colors, pick one archetype such as credible company brief or editorial brand system, then define reusable tokens and component rules before touching individual pages.

How to create a design language from screenshots or URLs?

Collect full-page screenshots, URLs, or 3-5 inspiration links, then extract palette, typography attitude, geometry, and imagery patterns. Distill these into a design-language document with concrete tokens for color, type, spacing, components, and motion using the provided template.

What is the difference between a company website and a product website design?

A company website foregrounds the organization, business structure, credibility, partners, and contact paths, while a product website foregrounds value, features, demos, pricing, and conversion. The audit step forces this decision explicitly so a company site does not accidentally become a single-product landing page.

When should I not use a visual design language workflow?

Skip it for pure copy editing, backend work, accessibility-only audits, or small bug fixes where no visual language decisions are involved. It is designed for redesigns, rebrands, and new visual systems, not isolated defect repairs.

Does the workflow handle confidential brand or client information?

Yes. The privacy boundary forbids exposing private project names, customer details, internal metrics, credentials, or unreleased plans in generated docs. References are reduced to visual attributes like palette and typography, with generic placeholders for examples.