skills.rest
marsley01
marsley01COMMUNITY
Explore all skills by this author →
WebsiteGitHub

vc-frontend-design

Create production-grade frontend interfaces from screenshots, videos, or design briefs with anti-slop aesthetic rules.

2|Updated Sep 15, 2025
Search Tags:#design system#tailwind#webgl#frontend design#anti-slop#framer motion#ui replication
One-click install
npx skills add https://github.com/marsley01/Marsley-Portfolio-Web --skill vc-frontend-design-marsley01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vc-frontend-design
Source: https://github.com/marsley01/Marsley-Portfolio-Web/tree/main/.agents/skills/vc-frontend-design
Command: npx skills add https://github.com/marsley01/Marsley-Portfolio-Web --skill vc-frontend-design-marsley01

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires animejs, and includes references (resource) components.

What problem does it solve? AI-generated interfaces tend to converge on generic, recognizable patterns—Inter fonts, purple gradients, three-column card layouts, and placeholder copy. This Skill guides the creation of distinctive, production-grade frontend interfaces that avoid these "AI slop" fingerprints while remaining functional and performant. ## Core Features & Use Cases - Multi-Input Workflows: Replicate UIs from screenshots or videos, build 3D/WebGL experiences with Three.js, run rapid prototypes, or execute full immersive redesigns via dedicated workflow references. - Design Dials System: Configure DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY (1-10 scales) to drive layout, animation, and density decisions consistently. - Anti-Slop Rulebook: Enforces concrete alternatives to overused AI defaults across typography, color, layout, content, effects, and components, plus performance guardrails for animations and blur. - Use Case: Given a screenshot of an award-winning landing page, extract its design tokens, plan the build with a UI/UX subagent, and implement a matching Next.js + Tailwind + Framer Motion page with spring physics and scroll-triggered reveals. ## Quick Start Ask the agent to build a landing page from an attached screenshot using the vc-frontend-design skill with high design variance and medium motion intensity.

Frequently Asked Questions about vc-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?▼

Analyze the screenshot with multimodal vision to extract colors, fonts, and spacing, then plan the build with the ui-ux-designer subagent and implement to match the source. The workflow-screenshot reference defines the full analyze-plan-implement-verify-document sequence.

What fonts should I use instead of Inter or Roboto?▼

The anti-slop rules recommend Geist, Outfit, Cabinet Grotesk, Satoshi, or Plus Jakarta Sans as alternatives to Inter, Roboto, and Arial. Pair a distinctive display font with a refined body font rather than relying on browser defaults.

Does this skill support 3D and WebGL interfaces?▼

Yes, a dedicated workflow-3d reference covers Three.js and immersive WebGL builds. It is selected when the input request involves 3D experiences rather than standard page replication.

Which Anime.js version syntax should generated code use?▼

All animation code must use Anime.js v4 syntax: named imports like animate and createTimeline, ease instead of easing, to instead of value, and durations in seconds after setting engine.timeUnit once in the app entry point.

Why does backdrop-blur cause mobile performance issues?▼

backdrop-blur triggers continuous GPU compositing on every scroll frame, causing frame drops on mid-range mobile devices. The performance guardrails restrict it to fixed elements like navbars and modals, never scrolling containers.

When should I not use this frontend design skill?▼

It is not suited for backend logic, data pipelines, or non-visual engineering tasks. It also defers to explicit user requests that conflict with anti-slop rules, such as a specifically requested Inter font or purple palette.

Related Skills

Explore More Design & Creative Skills→
jscraikjscraik
8

ui-cloner

Generate UI replication and brand adaptation plans from a reference website URL.

Community
Advanced
ilanf23ilanf23
1

responsive-design

Create flexible layouts that adapt to device screen sizes and input methods.

Community
Intermediate
zrt-ai-labzrt-ai-lab
266

image-service

Generate, edit, and analyze multimodal images via prompts and references.

Community
Advanced
ZoyaAfzalZoyaAfzal

shadcn

Compose accessible React UI components with Tailwind CSS and shadcn.

Community
Intermediate