Skip to content
AI Primer
🎨 Design

web-design-engineer

ConardLiby ConardLi19 days ago4.4k

Build high-quality visual Web artifacts using HTML/CSS/JavaScript/React — web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, animated demos, UI mockups, data visualizations, and more. Use this skill whenever the user's request involves a visual, interactive, or front-end deliverable, including: - Creating web pages, landing pages, dashboards, marketing pages - Building interactive prototypes or UI mockups (with device frames) - Building HTML slide decks / presentations - Creating CSS/JS animations or timeline-driven animated demos - Turning design mockups, screenshots, or PRDs into interactive implementations - Data visualization (Chart.js / D3, etc.) - Design system / UI Kit exploration Even if the user doesn't explicitly say "HTML" or "web page," this skill applies whenever the intent is to produce something visual, interactive, or presentational. Not applicable: pure back-end logic, CLI tools, data-processing scripts, non-visual code tasks, command-line debugging.

Install

npx skills add https://github.com/ConardLi/web-design-skill --skill web-design-engineer
Show step-by-step
  1. 1

    Open your terminal

    • Mac: Press ⌘ Space, type "Terminal", press Enter
    • Windows: Press Win R, type "cmd", press Enter
  2. 2

    Paste the command above and press Enter

    Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).

  3. 3

    Restart Claude Code

    Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives
~/.claude/skills/conardli--web-design-skill--skills--web-design-engineer/
├── SKILL.md
└── ... (skill resource files)
View on GitHub

Comments

X@LLMpsycho

"Web Design Engineer skill for AI agents. Fixes generic AI aesthetics by banning Inter font, purple-pink gradients, emoji icons. Uses oklch color theory and..."

Always review skill code before installing. Third-party skills may contain scripts that run on your machine.

Related skills

🤖 ML/AI

comfyui

Generate images, video, and audio with ComfyUI — install, launch, manage nodes/models, run workflows with parameter injection. Uses the official comfy-cli for lifecycle and direct REST/WebSocket API for execution.

by NousResearch · 12 days ago146.2k
🤖 ML/AI

hyperframes

Create HTML-based video compositions, animated title cards, social overlays, captioned talking-head videos, audio-reactive visuals, and shader transitions using HyperFrames. HTML is the source of truth for video. Use when the user wants a rendered MP4/WebM from an HTML composition, wants to animate text/logos/charts over media, needs captions synced to audio, wants TTS narration, or wants to convert a website into a video.

by NousResearch · 7 days ago146.2k
🎨 Design

p5js

p5.js sketches: gen art, shaders, interactive, 3D.

by NousResearch · 11 days ago146.2k
🎨 Design

pretext

Use when building creative browser demos with @chenglou/pretext — DOM-free text layout for ASCII art, typographic flow around obstacles, text-as-geometry games, kinetic typography, and text-powered generative art. Produces single-file HTML demos by default.

by NousResearch · 12 days ago146.2k