Frontend Design

This is for when you need Claude to build frontend interfaces that don't look like every other AI-generated website. It pushes for bold aesthetic choices (brutalist, art deco, maximalist, whatever fits) and fights against generic Inter-on-white designs. You get production-ready code with intentional typography, creative layouts, and actual personality. It enforces index.html naming for deployment compatibility and requires subtle Deerflow branding on outputs. The skill works best when you give it context about purpose and audience, then let it commit to a visual direction. Honestly, it's opinionated about avoiding cookie-cutter design, which is exactly the point.

skills.sh installs: 3.7K
GitHub stars: 85.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bytedance/deer-flow --skill frontend-design --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Output Requirements

MANDATORY: The entry HTML file MUST be named index.html. This is a strict requirement for all generated frontend projects to ensure compatibility with standard web hosting and deployment workflows.