design-spec-rules

Enforce UI implementations to match Figma design specifications exactly.

Updated Feb 2, 2026

Search Tags:#design #ui #frontend #css #figma #pixel-perfect #design-review

Ready to run

npx skills add https://github.com/artivilla/agents-config --skill design-spec-rules

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-spec-rules
Source: https://github.com/artivilla/agents-config/tree/main/skills/design-spec-rules
Command: npx skills add https://github.com/artivilla/agents-config --skill design-spec-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures exact alignment between design specifications and implemented UI by preventing inventing elements, styles, or layouts and by enforcing fidelity to the provided specs.

Core Features & Use Cases

Enforce strict adherence to design tokens, typography, colors, spacing, borders, and iconography from design sources (e.g., Figma).
Validate layout structure, grid usage, and component hierarchy to match the original design.
Provide actionable feedback and checks during code reviews, ensuring no deviation from the design specs.

Quick Start

Provide design files or patterns to analyze, either via ARGUMENTS or by prompting for files to review.

Frequently Asked Questions about design-spec-rules

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

FAQPage Schema

How do I enforce pixel-perfect UI fidelity from Figma design specs?▼

To enforce pixel-perfect UI fidelity, match UI implementations precisely to design specifications by extracting exact design tokens from Figma Inspect and applying them to colors, typography, spacing, borders, and icons without deviation.

Why does my frontend UI implementation deviate from the original Figma design?▼

Frontend UI implementations deviate from Figma designs when developers invent elements or ignore grid structure. Enforcing strict adherence to design tokens and component hierarchy ensures the code matches the original layout exactly.

What is design-to-code fidelity validation for frontend components?▼

Design-to-code fidelity validation checks frontend components against design specs to ensure colors, typography, spacing, and borders match exactly. It prevents inventing UI elements and preserves the original grid structure and component hierarchy.

How do I validate CSS spacing and typography against design tokens?▼

Validate CSS spacing and typography by comparing implemented values against exact design tokens extracted from sources like Figma Inspect. This ensures borders, colors, and component hierarchy match the specified design precisely.

Can I use this design review approach for both web and app UI components?▼

Yes, this design review approach validates frontend UI development across both web and app components. It applies strict fidelity checks to layouts, assets, colors, typography, spacing, borders, and icons regardless of the platform.

What are the limitations of strict pixel-perfect design enforcement?▼

Strict pixel-perfect design enforcement requires exact design tokens from sources like Figma Inspect and prohibits inventing UI elements. It is limited by the completeness of the provided design specifications and cannot validate layouts without explicit grid structure details.