skills.rest
felix-howard
felix-howardCOMMUNITY
Explore all skills by this author →
GitHub

ck:frontend-design

Generate React/HTML/CSS code from design screenshots and videos.

Updated Jan 11, 2026
Search Tags:#frontend#css#animation#react components#ui generation#design replication
One-click install
npx skills add https://github.com/felix-howard/ella --skill ck-frontend-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-design
Source: https://github.com/felix-howard/ella/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/felix-howard/ella --skill ck-frontend-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill bridges the gap between design mockups and functional code, ensuring that frontend interfaces are implemented with exceptional aesthetic fidelity and technical precision.

Core Features & Use Cases

  • Replicate Designs: Precisely match screenshots or videos, including complex layouts, typography, and color palettes.
  • Generate UI Code: Produce production-ready React/HTML/CSS code for web components, prototypes, and immersive experiences.
  • Use Case: You have a Figma screenshot of a new product page. Use this Skill to generate the React code for that page, ensuring it looks exactly like the design and includes any specified animations.

Quick Start

Use the ck:frontend-design skill to create a React component that replicates the design in the provided screenshot.

Frequently Asked Questions about ck:frontend-design

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

FAQPage Schema
How do I convert a Figma screenshot to React code?▼

You can generate React components from a screenshot by processing the visual input to produce production-grade frontend code. This Skill precisely replicates complex layouts, typography, and color palettes from screenshots into functional UI elements.

Can I replicate UI animations from a video design mockup?▼

Yes, you can replicate UI animations from a video mockup. This Skill accepts video inputs to analyze and implement interactive UI elements, ensuring the generated React and CSS code matches the specified motion and aesthetic fidelity.

What is the best way to generate pixel-perfect CSS from a design image?▼

The best way to generate pixel-perfect CSS from a design image is using a design replication workflow. This process translates visual inputs into production-ready HTML and CSS code with exceptional aesthetic attention to layout and color accuracy.

Does this frontend UI generation tool work with descriptive text inputs?▼

Yes, frontend UI generation works with descriptive text inputs. The Skill supports specific workflows for screenshots, videos, and text, translating descriptive prompts into production-ready React components and interactive elements.

How do I build a React component from a website screenshot?▼

To build a React component from a website screenshot, process the image through the design replication workflow. It generates functional React code that precisely matches the visual design, including complex layouts and interactive elements.

Related Skills

Explore More Design & Creative Skills→
IoT-VNIoT-VN

frontend-design

Generate production-grade frontend interfaces from visual or descriptive inputs.

Community
Advanced
sadamkhan7679sadamkhan7679
2

shadcn-shared-form-fields

Provide type-safe React form components for react-hook-form and shadcn/ui.

Community
Basic
mchien15mchien15

ui-styling

Automates component styling with shadcn/ui and Tailwind CSS for React projects.

Community
Advanced
mulyovedmulyoved

design-html

Convert approved UI mockups into responsive HTML/CSS using DESIGN.md tokens.

Community
Advanced