design-engineeringlisted

Premium design engineering skill for agentic workflows — produces high-end, distinctive UI designs using DESIGN.md as the portable contract across Pencil MCP (in-IDE canvas), Figma MCP (team handoff + design tokens), and Google Stitch (vibe exploration + AI generation). Enforces anti-generic principles, WCAG 2.2 AA accessibility, perceptually uniform color, tiered animation timing, and screenshot-driven visual validation at every stage. Use when: (1) creating or reviewing UI designs from an agent, (2) generating DESIGN.md for a project, (3) implementing designs from Pencil .pen files or Figma URLs, (4) enforcing visual quality standards on AI-generated interfaces, (5) setting up a multi-tool design pipeline, (6) converting between design tools and production code. Triggers on: 'design engineering', 'design system', 'DESIGN.md', 'premium design', 'high-end UI', 'pencil design', 'figma to code', 'stitch design', 'vibe design', 'visual design review', 'glass design', 'design tokens', 'UI quality'.
broomva/skills · ★ 3 · AI & Automation · score 75

Install: claude install-skill broomva/skills

# Design Engineering Premium design engineering for agentic workflows. Produce distinctive, high-end interfaces — not generic AI output — using DESIGN.md as the portable design contract across three complementary tools. ``` DESIGN.md (contract) ───────────────────────────────────────────────── │ │ │ ▼ ▼ ▼ Stitch Pencil Figma (explore) (design in IDE) (refine + handoff) │ │ │ └─────────────────────────┴────────────────────────┘ │ ▼ Production Code (validated via screenshots) ``` ## Quick Start ### 1. Create or Load DESIGN.md Every project needs a DESIGN.md at its root. Generate one from an existing project: ```bash # From existing code (read globals.css, extract tokens) # Agent analyzes CSS → generates DESIGN.md in Stitch spec format # From a reference website (via Stitch) # Use stitch-design skill → extract_design_context → synthesize DESIGN.md # From a Figma file # Use Figma MCP → get_variable_defs + get_design_context → synthesize DESIGN.md ``` ### 2. Design Pipeline | Stage | Tool | Action | |-------|------|--------| | **Explore** | Stitch | Vibe-design multiple directions from a goal/feeling/inspiration | | **Design** | Pencil MCP | Create .pen files i