nomaan5541

4 — Design skill for Claude Code

Design community

Build a high-fidelity, production-ready Hero section for a SaaS product called "Datacore" using React, Tailwind CSS, and Lucide Icons.

How to install 4

Installs to ~/.claude/skills/nomaan5541-motionsites-prompt-collection-4/SKILL.md

Terminal

mkdir -p ~/.claude/skills/nomaan5541-motionsites-prompt-collection-4 && curl -fsSL https://raw.githubusercontent.com/nomaan5541/motionsites-prompt-collection/HEAD/prompts/4.md -o ~/.claude/skills/nomaan5541-motionsites-prompt-collection-4/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What 4 does

Build a high-fidelity, production-ready Hero section for a SaaS product called "Datacore" using React, Tailwind CSS, and Lucide Icons.

Design Style

Theme: Dark mode, modern, clean, "Linear-style" aesthetic.
Background: Full-screen background video with a black overlay (bg-black/60) for text readability.
Responsiveness: Fully responsive for mobile (with a hamburger menu) and desktop.

Tech Stack Requirements

Use React with Tailwind CSS.
Use *lucide-react

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★