skills.rest
quanganh208
quanganh208COMMUNITY
Explore all skills by this author →
GitHub

ck:frontend-design

Create frontend interfaces from screenshots, videos, or design briefs.

1|Updated Mar 6, 2026
Search Tags:#animation#ui-ux#design-system#threejs#visual-analysis#frontend-design#asset-generation
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-frontend-design-quanganh208
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-design
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-frontend-design-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Transform vague design assets (screenshots, videos, briefs) and high-level aesthetic goals into production-ready, visually distinctive frontend implementations while avoiding generic AI-generated visuals. The skill reduces ambiguity between design intent and code output by enforcing design-thinking, anti-slop guidelines, and concrete asset-driven workflows so teams can ship polished interfaces faster.

Core Features & Use Cases

  • Pixel-accurate replication: Recreate UIs from screenshots or videos with extracted colors, fonts, spacing, and motion specs.
  • Asset-driven generation & analysis: Generate and analyze hero images, textures, and UI assets with explicit color palettes and integration checks.
  • Animation & 3D support: Implement high-fidelity animations and Three.js experiences following performance and anime.js/framer conventions.
  • Design guardrails & audits: Enforce anti-slop rules, typography choices, accessibility checks, and performance guardrails for production quality.
  • Use Case: Convert a product mockup screenshot into a responsive React component with matching styles, animations, and documented design tokens.

Quick Start

Ask: "Replicate this screenshot into a responsive React component, extract exact colors and fonts, and provide CSS variables and animation specs."

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 screenshot into a production-grade React component?▼

Pixel-accurate replication extracts exact colors, fonts, and spacing from your screenshot to generate a responsive React component with matching CSS variables and documented design tokens.

Can I reproduce animated video UIs and 3D WebGL scenes?▼

Yes, you can reproduce animated video UIs and 3D WebGL scenes using high-fidelity animation reproduction and Three.js experiences that follow performance constraints and anime.js or framer conventions.

How do I avoid generic AI-generated visuals in frontend design?▼

To avoid generic AI-generated visuals in frontend design, the workflow enforces design-thinking, anti-slop guardrails, and concrete asset-driven rules to ensure visually distinctive, production-ready interfaces.

Does this workflow support asset generation and visual analysis for UI?▼

Yes, the workflow supports asset generation and visual analysis for UI by generating and analyzing hero images, textures, and UI assets with explicit color palettes and integration checks.

What are the limitations when implementing accessible frontend interfaces?▼

Limitations when implementing accessible frontend interfaces are mitigated by built-in design guardrails and audits that enforce accessibility checks, typography choices, and performance guardrails to maintain production quality.

Related Skills

Explore More Design & Creative Skills→
lengo0951lengo0951

ck:frontend-design

Generate frontend interfaces from design briefs, screenshots, and videos.

Community
Advanced
Selfdb-ioSelfdb-io

frontend-design

Generate production-grade frontend interfaces with CSS variables and design tokens.

Community
Basic
hgxszhj-pixelhgxszhj-pixel
2

frontend-dev

Automate full-stack frontend page creation with AI-driven design and asset generation.

Community
Advanced
SignmanalSignmanal
1

popular-web-designs

Generate HTML and CSS replicating design systems from 54 popular websites.

Community
Intermediate