Vc Frontend Design
Create polished frontend interfaces from designs/screenshots/videos.
Install
npx skills add withkynam/vibecode-pro-max-kit --skill vc-frontend-design -g -a claude-code -y- Repository
- withkynam/vibecode-pro-max-kit1.2k
- Category
- Design
- Updated
- 5mo ago
- License
- Complete terms in LICENSE.txt
- Context cost
- Mediumabout 2,334 tokens
- Runs scripts
- No, instructions only
What it does
Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.
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.
