skills.rest
broomva
broomvaCOMMUNITY
Explore all skills by this author →
Website𝕏@broomva_techGitHub

design-engineering

Synchronize visual contracts across Pencil, Figma, and Google Stitch.

3|2|Updated Mar 17, 2026
Search Tags:#accessibility#figma#design-system#visual-validation#stitch#design-engineering#pencil
One-click install
npx skills add https://github.com/broomva/skills --skill design-engineering-broomva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-engineering
Source: https://github.com/broomva/skills/tree/main/skills/design/design-engineering
Command: npx skills add https://github.com/broomva/skills --skill design-engineering-broomva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires arcan-glass, and includes references (resource) components.

What problem does it solve?

This skill solves the problem of generic, low-quality AI-generated UI by providing a rigorous, multi-tool design engineering framework that enforces professional design standards, accessibility, and visual consistency.

Core Features & Use Cases

  • Portable Design Contract: Uses DESIGN.md to maintain a single source of truth across Pencil, Figma, and Google Stitch.
  • Visual Validation: Enforces WCAG 2.2 AA accessibility, perceptually uniform color systems, and screenshot-driven quality gates.
  • Use Case: When building a new SaaS dashboard, use this skill to generate a DESIGN.md spec, explore high-fidelity UI directions in Stitch, refine components in Figma, and validate the final implementation against accessibility and visual quality checklists.

Quick Start

Use the design-engineering skill to generate a new DESIGN.md file for the current project based on the existing CSS and UI components.

Frequently Asked Questions about design-engineering

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

FAQPage Schema
How do I enforce WCAG 2.2 AA accessibility compliance in AI-generated UI?▼

To enforce WCAG 2.2 AA accessibility in AI-generated UI, use a design engineering framework that applies automated visual validation and perceptually uniform OKLCH color tokenization to all interface components.

How do I synchronize design contracts between Figma and Google Stitch?▼

Synchronize design contracts between Figma and Stitch by generating a portable DESIGN.md specification file that acts as a single source of truth across both platforms during high-end UI generation.

What is OKLCH color tokenization for design systems?▼

OKLCH color tokenization is a perceptually uniform color system required for interface components, ensuring visual consistency and accessibility compliance across agentic workflows and multi-tool design environments.

Do I need a DESIGN.md file to use design engineering for agentic workflows?▼

Yes, a DESIGN.md file is required to maintain a portable design contract that enforces premium design engineering standards and synchronizes visual contracts across Pencil, Figma, and Google Stitch.

Can I validate visual quality automatically when building a SaaS dashboard?▼

Yes, you can validate visual quality automatically by applying screenshot-driven quality gates that check your SaaS dashboard implementation against accessibility and visual checklists during the generation process.

Why does my AI-generated UI lack professional design consistency?▼

AI-generated UI lacks professional design consistency when it is not governed by a rigorous design engineering framework that enforces strict visual contracts, accessibility standards, and OKLCH color tokenization.

Related Skills

Explore More Design & Creative Skills→
okgoogle13okgoogle13
1

component-builder

Generate M3-compliant React components with MUI and design tokens.

Community
Advanced
JongsixJongsix

moai-design-tools

Translate Figma metadata and .pen designs into React/Tailwind components.

Community
Advanced
CJ-1981CJ-1981

moai-design-tools

Fetch Figma design context and export Pencil designs to React and Tailwind CSS code.

Community
Advanced
curtiv3curtiv3

frontend-governance

Enforce semantic tokens and anti-slop protocols in React UI generation.

Community
Advanced