open-design

Routes design generation tasks across 7+ LLM providers (Claude, Gemini, Copilot, Qwen, Hermes, Kimi, OpenCode) using a skill-registry pattern that maps user intents to provider-specific APIs. Implements provider abstraction layer that normalizes function-calling schemas and response formats, enabling seamless switching between models without code changes. Uses local-first architecture to avoid vendor lock-in while maintaining compatibility with cloud-based models.

Implements a modular skill system where each of 19 discrete design capabilities (layout generation, component creation, color theming, responsive adaptation, etc.) is independently callable and composable. Uses a task-decomposition pattern that breaks user design briefs into skill sequences, executing them in dependency order with intermediate state passing. Each skill encapsulates design logic (e.g., layout skill uses CSS Grid/Flexbox generation, color skill applies WCAG contrast validation) and can be invoked standalone or as part of a larger design workflow.

Enables batch processing of multiple design requests using template-based workflows that define generation parameters, design system constraints, and export formats. Implements a workflow engine that queues design generation tasks, executes them sequentially or in parallel (depending on resource availability), and aggregates results. Uses a template system where users define once (design system, export formats, quality rules) and apply to many designs without repetition.

Analyzes the user's existing codebase (React components, design system files, utility functions) and generates code that integrates seamlessly with existing patterns and conventions. Uses AST parsing to extract codebase patterns (component structure, naming conventions, import organization) and applies them to generated code. Implements a context-injection system that embeds relevant codebase snippets into the LLM prompt, enabling generation of code that matches existing style and architecture.

Enables iterative design refinement through a feedback loop where users provide visual or textual feedback on generated designs, and the agent regenerates designs incorporating the feedback. Implements a diff-based approach that highlights changes between iterations, helping users understand what changed. Uses a feedback-parsing system that interprets natural language feedback (e.g., 'make the button bigger', 'use a warmer color palette') and translates it into generation parameters for the next iteration.

Analyzes reference designs (images, Figma files, existing websites) and extracts design system tokens (colors, typography, spacing, shadows) automatically. Uses image analysis and DOM parsing to identify visual patterns, then generates a design system JSON file with extracted tokens. Implements a token-mapping system that normalizes extracted values (e.g., 'font-size: 16px' → 'body-text') and creates semantic token names.

Generates design code and automatically profiles it for performance (bundle size, render time, CSS specificity, unused styles), then optimizes based on profiling results. Uses tools like Lighthouse, Bundle Analyzer, and CSS analysis to identify bottlenecks, then applies optimizations (code splitting, CSS purging, lazy loading, image optimization). Generates a performance report with metrics before and after optimization.

Generates design code in multiple frameworks and languages (React, Vue, Angular, Svelte, HTML/CSS, Tailwind, Bootstrap) from a single design specification. Uses a framework-agnostic intermediate representation (AST-like) that each framework exporter transforms into target syntax. Implements framework-specific optimizations (e.g., Vue's scoped styles, React hooks patterns, Angular dependency injection) so generated code follows framework conventions.

Bundles 71 curated design systems (Material Design, Tailwind, Bootstrap, custom brand systems) as reusable templates that inject design tokens (colors, typography, spacing, components) into generated designs. Uses a template-injection pattern where selected design system is applied as a constraint layer during code generation, ensuring all outputs conform to the system's visual language. Templates include semantic token mappings (e.g., 'primary-color' → specific hex value) and component libraries that the generation skills reference.

Generates design prototypes in 5+ output formats (HTML, React, PDF, PPTX, MP4) with a sandboxed iframe-based preview system that renders outputs without executing untrusted code. Uses a format-agnostic intermediate representation (AST-like structure) that each exporter transforms into target format. Sandboxing is implemented via iframe isolation with Content Security Policy (CSP) headers, preventing XSS attacks while allowing interactive preview of generated designs.

Automatically generates responsive layouts that adapt to mobile, tablet, and desktop viewports using a breakpoint-aware code generation approach. Implements CSS media queries and responsive component patterns (e.g., mobile-first Flexbox, desktop Grid) based on device specifications. Uses a device-profile system that defines breakpoints, touch targets, and viewport constraints, then generates code that respects these constraints across all output formats.

Generates HTML/React code with semantic markup, ARIA labels, color contrast validation, and keyboard navigation support built-in. Uses an accessibility-constraint layer that validates generated code against WCAG 2.1 AA standards during generation, automatically fixing issues like insufficient color contrast, missing alt text, and non-semantic HTML. Implements a11y linting that runs post-generation to flag remaining accessibility issues.

Extracts reusable components from generated designs and organizes them into a component library with props, variants, and composition patterns. Uses a component-detection algorithm that identifies repeated patterns in generated code and abstracts them into parameterized components. Generates component documentation (Storybook-compatible format) and TypeScript type definitions for each component, enabling seamless integration into existing codebases.

Generates interactive prototypes with click-through flows, state management, and user interactions (form submissions, animations, navigation) using a HyperFrames abstraction that maps design interactions to executable code. Implements a state-machine pattern for managing prototype states and transitions, generating JavaScript/React code that handles user interactions without requiring manual event handler implementation. Supports linking between frames, conditional navigation, and data binding.

Generates initial design code, then uses the LLM to review, refactor, and optimize the generated code for performance, maintainability, and best practices. Implements a multi-pass generation approach where the first pass creates functional code, subsequent passes apply code quality improvements (reducing bundle size, improving accessibility, optimizing CSS), and a final review pass flags potential issues. Uses static analysis (ESLint, Prettier) integrated with LLM feedback for comprehensive code quality.

Validates generated designs against design system rules (color palette, typography scale, spacing grid, component usage) and enforces compliance by rejecting or auto-correcting non-compliant code. Uses a constraint-validation layer that checks generated code against design system specifications before export, flagging violations and suggesting corrections. Implements a compliance report that documents which design system rules were applied and which violations were found.