skills.rest
marcmarti9
marcmarti9COMMUNITY
Explore all skills by this author →
GitHub

design-inspiration-research

Research visual references and extract design DNA before greenfield or redesign art direction.

3|Updated Jul 28, 2026
Search Tags:#design system#provenance#web design#ui components#art direction#design research#visual references
One-click install
npx skills add https://github.com/marcmarti9/agentit --skill design-inspiration-research-marcmarti9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-inspiration-research
Source: https://github.com/marcmarti9/agentit/tree/main/skills/design-inspiration-research
Command: npx skills add https://github.com/marcmarti9/agentit --skill design-inspiration-research-marcmarti9

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Design work on greenfield websites or total redesigns often starts from vague adjectives or a single copied site, producing generic layouts with no traceable reasoning. This Skill structures the research pass so visual references actually change design decisions, with provenance recorded for every material influence. ## Core Features & Use Cases - Structured reference research: Run 4-8 experience-focused queries, collect 6-12 references, cluster them into patterns, and identify clichés before choosing a direction. - Design-DNA extraction: Pull dimensions like macrostructure, typography roles, color systems, and motion grammar from each reference instead of copying pixels. - Component scouting workflow: Evaluate external UI components with explicit ADOPT, ADAPT, COMPOSE, REFERENCE, BUILD, or REJECT outcomes, checking license, accessibility, and project fit. - Use Case: Before redesigning a marketing homepage, use this Skill to research cross-domain references, synthesize 2-3 original directions, and produce an INSPIRATION_SYNTHESIS plus REFERENCE_TO_DECISION_MAP that feeds the frontend implementation skills. ## Quick Start Research current design references for a greenfield portfolio site and synthesize original art directions with a reference-to-decision map before any code is written.

Frequently Asked Questions about design-inspiration-research

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

FAQPage Schema
How do I research design inspiration before building a website?▼

Run 4-8 search queries describing the desired experience rather than the industry, inspect promising pages directly, and collect 6-12 references. Then cluster observations into 2-4 patterns, identify clichés, and synthesize 2-3 original project-specific directions before writing any code.

What is design DNA extraction in web design research?▼

Design DNA extraction means pulling dimensions from a reference instead of copying pixels: macrostructure, hierarchy, grid, typography roles, color systems, imagery strategy, motion grammar, and responsive behavior. You record why each principle fits the project and what should not be copied.

When should I skip design reference research?▼

Skip the research pass only when the user explicitly opts out, current-source tooling is unavailable, or the surface is routine repeated-use product UI where references add no material decision. If live research is unavailable, say so instead of presenting memory as current research.

How do I evaluate external UI components before using them?▼

Check project fit, system fit, license, dependencies, accessibility, responsive behavior, performance, and state completeness before adopting external component code. Each candidate ends in an explicit outcome: ADOPT, ADAPT, COMPOSE, REFERENCE, BUILD, or REJECT.

Can I copy a reference site's layout for my redesign?▼

No. Reference research never grants permission to copy proprietary copy, brand assets, illustrations, or a distinctive page wholesale, and you must not invent metrics or testimonials to make a layout work. Extract principles and adapt them to the project's own content and identity.

Related Skills

Explore More Design & Creative Skills→
AIDotNetAIDotNet
634

creative-production-positioning-explorer

Generate image-led commercial positioning routes from a business brief before visual production.

Official
Advanced
juicesharpjuicesharp
730

design-slice

Designs one vertical slice from a slice map and writes a per-slice design document.

Community
Intermediate
LeviLeckenbyLeviLeckenby

research

Coordinate parallel research threads to synthesize findings with confidence levels and recommendations.

Community
Advanced
adityasingh2400adityasingh2400
2

design-shotgun

Generate multiple AI-driven UI variants and present them on a live comparison board.

Community
Advanced