Skills
.Work. You
Rest

ui-concept-first

Community

Set visual target before implementation to streamline UI development.

Design & Creative#design system#Playwright#UI development#Figma#UI validation#visual direction
AuthorMesteriis
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers and designers establish a clear visual direction before implementing UI components, streamlining the UI development process.

Core Features & Use Cases

  • Visual Direction Definition: Sets a visual reference using Figma, screenshots, or existing design systems.
  • Design System Integration: Extracts tokens, typography, layout, components, states, and responsive rules using design-system-extractor.
  • Validation: Ensures implementation adheres to established visual direction with playwright-visual-qa.
  • Use Case: Before coding a new UI feature, use this Skill to define a visual direction using existing design systems, then validate your implementation against it.

Quick Start

Use the ui-concept-first skill to establish the visual reference for the new feature 'product listing page' by analyzing the existing Figma design and using the design system tokens.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-concept-first
Download link: https://github.com/Mesteriis/Engineering-Bible-AI/archive/main.zip#ui-concept-first

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.