skills.rest
Design-System-ET
Design-System-ETOFFICIAL
Explore all skills by this author →
GitHub

ui-creator

Convert UI images and OpenAPI specs into Angular or React components and services.

Updated Jun 16, 2026
Search Tags:#automation#web development#frontend#react#openapi#angular#ui generation
One-click install
npx skills add https://github.com/Design-System-ET/genexus-dev-opencode --skill ui-creator-design-system-et
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-creator
Source: https://github.com/Design-System-ET/genexus-dev-opencode/tree/main/skills/ui-creator
Command: npx skills add https://github.com/Design-System-ET/genexus-dev-opencode --skill ui-creator-design-system-et

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, tsx, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill bridges the gap between visual design and functional code by automating the creation of web components from UI screenshots and OpenAPI specifications.

Core Features & Use Cases

  • Visual-to-Code Generation: Converts UI images into responsive Angular or React components using screenshot-validated procedures.
  • API-Driven Scaffolding: Automatically generates pages, services, and mock servers from OpenAPI specifications.
  • Use Case: Rapidly prototype a full-stack application by providing a set of screen mockups and an API spec, allowing the agent to build the entire frontend architecture and service layer in one continuous workflow.

Quick Start

Use the ui-creator skill to generate a React application from the provided UI images and the openapi.yaml specification file.

Frequently Asked Questions about ui-creator

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

FAQPage Schema
How do I convert UI design images into functional React or Angular components?▼

To convert UI design images into web components, this Skill uses screenshot-validated procedures to automate scaffolding responsive React or Angular code. It bridges visual design and functional code by transforming UI images directly into web application components.

Can I generate a mock server and service layer from an OpenAPI specification?▼

Yes, you can generate a mock server and service layer from an OpenAPI specification. This Skill performs API-driven scaffolding to automatically create web application pages, services, and mock servers directly from your provided OpenAPI configuration.

What is the best way to scaffold a full-stack frontend application from mockups and an API spec?▼

The best way to scaffold a full-stack frontend application is providing screen mockups and an API spec to this Skill. It builds the entire frontend architecture and service layer in one continuous workflow, rapidly prototyping the web application from visual designs.

Do I need Playwright and TSX to generate web apps from UI designs?▼

Yes, you need Playwright and TSX to generate web apps from UI designs. Playwright is required for screenshot-based visual consistency verification, and TSX is required for executing the build-time scripts during the automated web application generation process.

Does visual-to-code generation support both React and Angular projects?▼

Yes, visual-to-code generation supports both React and Angular projects. The automated scaffolding process converts UI design images into functional web application components and service layers tailored specifically for either Angular or React frameworks.

Related Skills

Explore More Software Engineering Skills→
tann200tann200

react-vite

Generate React + Vite frontends using pnpm-workspace guidelines and a design subagent.

Community
Intermediate
skatedduskateddu
27

webapp-testing

Automate local web app UI testing with Playwright in Python.

Community
Intermediate
wmeintswmeints

Frontend Components

Create reusable frontend components for React, Vue, Svelte, Angular, or Web Components.

Community
Intermediate
NITRR-OfficialNITRR-Official
4

frontend-design

Create unique frontend web designs with HTML/CSS and React.

Official
Advanced