playbooks

home / skills / jjuidev / jss / frontend-design

frontend-design skill

/.claude/skills/frontend-design

This skill helps you translate design inputs into production-grade frontend interfaces with precise replication and aesthetic polish.

npx playbooks add skill jjuidev/jss --skill frontend-design

Review the files below or copy the command above to add this skill to your agents.

Files (23)
SKILL.md
3.8 KB
---
name: frontend-design
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.
license: Complete terms in LICENSE.txt
---

Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.

## 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` |
| From scratch | Design Thinking below | - |

**All workflows**: Activate `ui-ux-pro-max` skill FIRST for design intelligence.

## Screenshot/Video Replication (Quick Reference)

1. **Analyze** with `ai-multimodal` skill - extract colors, fonts, spacing, effects
2. **Plan** with `ui-ux-designer` subagent - create phased implementation
3. **Implement** - match source precisely
4. **Verify** - compare to original
5. **Document** - update `./docs/design-guidelines.md` if approved

See specific workflow files for detailed steps.

## Design Thinking (From Scratch)

Before coding, commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Execute with precision. Bold maximalism and refined minimalism both work - intentionality is key.

## Aesthetics Guidelines

- **Typography**: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
- **Color**: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
- **Motion**: CSS-first, anime.js for complex (`./references/animejs.md`). Orchestrated page loads > scattered micro-interactions.
- **Spatial**: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
- **Backgrounds**: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
- **Assets**: Generate with `ai-multimodal`, process with `media-processing`

## Asset & Analysis References

| Task | Reference |
|------|-----------|
| Generate assets | `./references/asset-generation.md` |
| Analyze quality | `./references/visual-analysis-overview.md` |
| Extract guidelines | `./references/design-extraction-overview.md` |
| Optimization | `./references/technical-overview.md` |
| Animations | `./references/animejs.md` |

Quick start: `./references/ai-multimodal-overview.md`

## Anti-Patterns (AI Slop)

NEVER use:
- Overused fonts: Inter, Roboto, Arial, Space Grotesk
- Cliched colors: purple gradients on white
- Predictable layouts, cookie-cutter patterns

DO:
- Vary themes (light/dark), fonts, aesthetics per project
- Match complexity to vision (maximalist = elaborate; minimalist = precise)
- Make unexpected, context-specific choices

Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.

Overview

This skill transforms designs, screenshots, and videos into polished, production-ready frontend interfaces with strong aesthetic intent. It creates working code for web components, immersive 3D experiences, and rapid prototypes while avoiding generic AI output. Use it to faithfully replicate visual sources or design distinctive interfaces from scratch with deliberate style choices.

How this skill works

The skill selects a workflow based on the input type (screenshot, video, 3D request, quick task, or full immersive build). It analyzes visual input to extract colors, fonts, spacing, and motion; plans phased implementation with a UI/UX design pass; implements precise HTML/CSS/JS or Three.js code; then verifies and documents the result. For original designs, it begins with a design-thinking brief that defines purpose, tone, constraints, and a memorable differentiator.

When to use it

  • You have screenshots or recorded UI and need an exact, production-ready replication.
  • You want animated interactions reproduced from video with matching motion and timing.
  • You need a rapid, high-fidelity prototype for user testing or stakeholder review.
  • You request a Three.js or WebGL immersive interface or 3D scene for the web.
  • You want a bold, distinctive UI designed from scratch with a clear aesthetic direction.

Best practices

  • Always run the visual analysis step first to extract colors, type, spacing, and effects.
  • Activate the UI/UX design pass before implementation to produce phased, testable milestones.
  • Favor CSS-first motion and reserve JS libraries (e.g., anime.js) for complex choreography.
  • Use distinctive fonts and cohesive palettes; avoid overused fonts and cookie-cutter layouts.
  • Document final design tokens (CSS variables, spacing scale, font pairs) for handoff.

Example use cases

  • Recreate a marketing page from a screenshot into responsive HTML/CSS with pixel-accurate visuals.
  • Convert a demo video into interactive UI components with matching entrance and micro-interactions.
  • Build a Three.js product showcase with atmospheric backgrounds and controlled camera motion.
  • Produce a quick, testable prototype that demonstrates a new onboarding flow or dashboard layout.
  • Create an award-quality landing page that prioritizes a bold aesthetic and memorable detail.

FAQ

Can this skill replicate motion from screen recordings?

Yes. The workflow extracts timing and easing from video, then implements matching CSS/JS animations.

What counts as a quick task versus an immersive build?

Quick tasks are scoped, fast implementations (single component or page). Immersive builds are complex, multi-screen or 3D experiences with polished visuals and motion.

How do you ensure production readiness?

Deliverables include clean, modular code, documented design tokens, accessibility checks, and a verification pass comparing the result to the source.