skills.rest
dthuy62
dthuy62COMMUNITY
Explore all skills by this author →
GitHub

ck:frontend-design

Transform screenshots, videos, and design briefs into frontend implementation plans.

Updated May 10, 2026
Search Tags:#frontend design#visual analysis#aesthetic direction#ui implementation#design replication#redesign audit
One-click install
npx skills add https://github.com/dthuy62/kollet-app --skill ck-frontend-design-dthuy62
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-design
Source: https://github.com/dthuy62/kollet-app/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/dthuy62/kollet-app --skill ck-frontend-design-dthuy62

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create polished, distinctive frontend interfaces instead of generic, forgettable UI. It turns design intent, screenshots, videos, and project briefs into implementation-ready direction for real products.

Core Features & Use Cases

  • Design replication: Recreate a screenshot or video as closely as possible with attention to layout, spacing, motion, and visual detail.
  • Frontend ideation: Translate a rough brief into a bold aesthetic direction for a landing page, app screen, or interactive experience.
  • Redesign support: Audit an existing project, identify weak patterns, and upgrade it without changing the underlying stack.
  • Asset-aware workflow: Use references, analysis, and optional generated assets to keep the interface cohesive and production-grade.
  • Use case: A product team uploads a competitor screen and asks for a refined version that keeps the same structure but feels more premium and original.

Quick Start

Use this skill to analyze your design reference and produce a clear frontend implementation plan with a strong aesthetic direction.

Frequently Asked Questions about ck:frontend-design

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

FAQPage Schema
How do I replicate a UI design from a screenshot into a frontend implementation?▼

Frontend ideation translates rough project briefs into bold aesthetic directions for landing pages, app screens, and interactive experiences, preventing generic UI through strict visual analysis rules.

Can I audit and redesign an existing web project without changing the underlying stack?▼

Redesign audits evaluate existing projects to identify weak visual patterns and upgrade the interface with a distinctive aesthetic direction, without requiring changes to the underlying tech stack.

What is the best way to avoid generic AI slop when generating frontend interfaces?▼

Avoiding AI slop requires applying anti-slop rules, workflow-specific references, asset guidance, and performance guardrails during frontend implementation to ensure distinctive, production-grade visual direction.

Does this frontend design workflow support 3D experiences and interactive prototypes?▼

Frontend design supports web components, prototypes, and 3D experiences by transforming design briefs and references into implementation-ready direction with cohesive asset-aware workflows.

Do I need design references to generate a production-ready frontend interface?▼

Workflow-specific references are required to analyze visual direction and maintain consistent implementation quality, ensuring the final frontend interface remains cohesive and production-grade.

Related Skills

Explore More Design & Creative Skills→
lengo0951lengo0951

ck:frontend-design

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

Community
Advanced
quanganh208quanganh208

ck:frontend-design

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

Community
Advanced
DataCoveyDataCovey
27

frontend-design

Design and implement frontend interfaces with HTML, CSS, JavaScript, and React or Vue.

Official
Advanced
Artag-ChrisArtag-Chris
1

frontend-design

Align frontend projects with a distinctive design direction and high-quality UI execution.

Community
Advanced