Skip to content
AI Primer
๐ŸŽจ Design

web-design-engineer

ConardLiby ConardLi2 months ago8.6k

Build polished visual web artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use when the user wants a browser-rendered, interactive, or presentational front-end deliverable. Not for back-end, CLI, or non-visual coding tasks.

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

๐ŸŽจ Design

baoyu-comic

Knowledge comics (็Ÿฅ่ฏ†ๆผซ็”ป): educational, biography, tutorial.

by NousResearch ยท 1 month ago200.5k
๐Ÿค– 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 ยท 1 month ago200.5k
๐Ÿค– 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 ยท 1 month ago200.5k
๐ŸŽจ Design

p5js

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

by NousResearch ยท 1 month ago200.5k