Extract copy and design from references to build React frontend or Figma designs
npx claudepluginhub adeonir/claude-code-extras --plugin design-builderExtract structured content from URLs
Extract design tokens from reference images
Generate HTML and export to Figma via YashiTech plugin
Build frontend components from design tokens
Define product vision, data models, and features from scratch
Content Strategist that extracts structured content from URLs. Use to generate copy.yaml with navigation and sections.
Creative Director that extracts design tokens from reference images. Use to generate design.json with colors, typography, and components.
Design Engineer that generates HTML for Figma import. Use to export designs to Figma via YashiTech plugin.
Frontend Engineer that builds production-grade React components from design tokens. Use to generate frontend code directly with Claude Code.
Product Strategist that defines vision, data models, and features from scratch. Use when starting without reference URL or images.
Design Engineer that generates 4 HTML+CSS preview variants from design tokens. Use to explore layouts before building React.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
AI-native product management for startups. Transform Claude into an expert PM with competitive research, gap analysis using the WINNING filter, PRD generation, and GitHub Issues integration.
Cloud architecture design for AWS/Azure/GCP, Kubernetes cluster configuration, Terraform infrastructure-as-code, hybrid cloud networking, and multi-cloud cost optimization
Application profiling, performance optimization, and observability for frontend and backend systems
React, Next.js, and React Native best practices. 64 React/Next.js rules and 35+ React Native/Expo rules covering performance, rendering, state, animations, and navigation.