skills.rest
n0rvyn
n0rvynCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

understand-design

Analyze design prototypes and map UI/UX intent to implementable requirements.

1|Updated Feb 15, 2026
Search Tags:#multimodal#figma#prototype#design-tokens#stitch#design-analysis#html-css
One-click install
npx skills add https://github.com/n0rvyn/indie-toolkit --skill understand-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: understand-design
Source: https://github.com/n0rvyn/indie-toolkit/tree/main/dev-workflow/skills/understand-design
Command: npx skills add https://github.com/n0rvyn/indie-toolkit --skill understand-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many teams struggle to translate visual prototypes into clear, implementable requirements and to validate designs against existing UX assertions or token systems. This Skill automates multimodal design intake, detects whether a design doc exists for pipeline validation, and produces a structured analysis that developers can act on.

Core Features & Use Cases

  • Mode detection: auto-detects pipeline vs standalone runs by searching for design docs with UX Assertions and lets the user override.
  • Multimodal acquisition: gathers artifacts from Stitch MCP, Figma MCP, or manual image and code file paths and determines channel availability (dual/image-only/code-only).
  • Project context & token handling: detects tech stack and existing design tokens, prompts to match or propose tokens, and includes token mapping in the analysis.
  • Agent dispatch & results: launches the dev-workflow:design-analyzer agent, reads or generates a dated design-analysis file, and surfaces decisions for interactive review.

Quick Start

Analyze this Figma design and produce an implementation-ready design analysis for web and iOS.

Frequently Asked Questions about understand-design

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

FAQPage Schema
How do I translate Figma prototypes into implementable design requirements?▼

To translate Figma prototypes into implementable design requirements, you need a multimodal design analysis tool that maps UI/UX intent to structured development tasks. This Skill detects your project's tech stack and token files, then generates an actionable design-analysis file for developers.

Can I analyze HTML/CSS exports and screenshots for design tokens?▼

Yes, you can analyze HTML/CSS exports and screenshots for design tokens. The system acquires multimodal artifacts via manual image and code file paths, detects existing design tokens, and includes token mapping within the final standalone implementation analysis.

What is the best way to validate a design against existing UX assertions?▼

Validating a design against existing UX assertions requires mapping the visual prototype to a predefined design doc. The system auto-detects pipeline runs by searching for UX Assertions, dispatching an analyzer agent to validate the implementation pipeline against your design doc.

Does this design analysis tool work with Stitch MCP for artifact acquisition?▼

Yes, this design analysis tool works with Stitch MCP. It gathers multimodal design artifacts directly via Stitch MCP and Figma MCP, automatically determining channel availability across dual, image-only, or code-only inputs to prepare the analysis.

Do I need a predefined design doc to generate an implementation analysis?▼

No, you do not need a predefined design doc to generate an implementation analysis. The system features mode detection to support standalone runs without a design doc, while automatically prompting for pipeline validation if UX Assertions are found.

How do I map UI/UX intent to an implementable tech stack from a prototype?▼

To map UI/UX intent to an implementable tech stack from a prototype, the system analyzes the visual design and infers the underlying technology. It proposes matching design tokens and dispatches a design-analyzer agent with the appropriate channel and token strategy parameters.

Related Skills

Explore More Software Engineering Skills→
OmexITOmexIT
13

ui-design

Convert specification documents into UI/UX design artifacts with wireframes and design tokens.

Community
Advanced
XY-ShowingXY-Showing
27

ckm:design-system

Generate design tokens and UI component specifications with node.js scripts.

Community
Advanced
ianyimiianyimi
1

Global Tech Stack

Enforce coding standards for the global tech stack in Claude Code.

Community
Basic
jrmatherlyjrmatherly

web-design-guidelines

Analyze HTML/CSS/JS files for accessibility and design guideline compliance.

Community
Basic