Enforce UI implementations to match Figma design specifications exactly.
npx skills add https://github.com/artivilla/agents-config --skill design-spec-rules
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
Ensures exact alignment between design specifications and implemented UI by preventing inventing elements, styles, or layouts and by enforcing fidelity to the provided specs.
Provide design files or patterns to analyze, either via ARGUMENTS or by prompting for files to review.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
daffy0208Convert Figma designs into React components and design tokens.
romiluz13Design UI layouts with visual hierarchy, spacing, color, and state design.
kurtstohrerScan web app repositories to generate a .annotask/design-spec.json with design tokens.
alvarettoCompare generated images against originals and report visual differences.
