# Vc Frontend Design

Create polished frontend interfaces from designs/screenshots/videos.

- Repository: https://github.com/withkynam/vibecode-pro-max-kit (1164 stars)
- Category: Design
- License: Complete terms in LICENSE.txt
- Last updated: 2026-06-21
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add withkynam/vibecode-pro-max-kit --skill vc-frontend-design -g -a claude-code -y`
Codex: `npx skills add withkynam/vibecode-pro-max-kit --skill vc-frontend-design -g -a codex -y`
Cursor: `npx skills add withkynam/vibecode-pro-max-kit --skill vc-frontend-design -g -a cursor -y`
Gemini CLI: `npx skills add withkynam/vibecode-pro-max-kit --skill vc-frontend-design -g -a gemini-cli -y`

## Description

Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

> **Output style:** Follow `process/development-protocols/communication-standards.md`, answer-first, plain language, no unexplained jargon, TL;DR on long responses.

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

**IMPORTANT**: MUST follow Design Thinking, Frontend Aesthetics Guidelines, Asset & Analysis References, and Anti-Patterns (AI Slop) sections below. DO NOT skip these rules.

## Workflow Selection

Choose workflow based on input type:

| Input | Workflow | Reference |
|-------|----------|-----------|
| Screenshot | Replicate exactly | `./references/workflow-screenshot.md` |
| Video | Replicate with animations | `./references/workflow-video.md` |
| Screenshot/Video (describe only) | Document for devs | `./references/workflow-describe.md` |
| 3D/WebGL request | Three.js immersive | `./references/workflow-3d.md` |
| Quick task | Rapid implementation | `./references/workflow-quick.md` |
| Complex/award-quality | Full immersive | `./references/workflow-immersive.md` |
| Existing project upgrade | Redesign Audit | `./references/redesign-audit-checklist.md` |
| From scratch | Design Thinking below | - |

**All workflows**: Invoke the `ui-ux-designer` subagent FIRST for design intelligence.

**Precedence:** When anti-slop rules (below) conflict with `ui-ux-designer` recommendations (e.g., Inter font, AI Purple palette, Lucide-only icons), substitute with alternatives from `./references/anti-slop-rules.md` unless the user explicitly requested the conflicting choice.

## Screenshot/Video Replication (Quick Reference)

The rest: https://github.com/withkynam/vibecode-pro-max-kit/blob/HEAD/.claude/skills/vc-frontend-design/SKILL.md