How do I install the Design skill?

Run npx skillmds@latest add kimjinwoo4/design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design?

KIMJINWOO4 (@kimjinwoo4) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design

Name: Design
Author: KIMJINWOO4

Frontend design & UI guide. Production-grade interface building, Web Interface Guidelines compliance review, UnoCSS semantic token system (antfu-design). Use when building web components, pages, dashboards, landing pages, or when reviewing UI/accessibility/design quality.

KIMJINWOO4 6e99a20 4 files · 8.3 KB Updated Sep 17, 2026

Web & Frontend

Install

Press C to copy

$ npx skillmds@latest add kimjinwoo4/design

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download .zip

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/kimjinwoo4/design.svg)](https://skillmd.com/skills/kimjinwoo4/design)

Trust & safety

Audits pending

Not yet audited · commit 6e99a20

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

Frontend Design Skill

Reference Map

Read the reference you need to load detailed knowledge.

Area	Description	Path
Frontend Aesthetics	Typography, color, motion, layout, avoiding AI-generated-looking UI	frontend-aesthetics
Web Interface Guidelines	Vercel Web Interface Guidelines compliance review	web-guidelines
UnoCSS Semantic Tokens	antfu-design condensed: semantic shortcuts, dual light/dark tokens, named z-index	unocss-semantic-tokens

For accessibility-specific reviews (WCAG, focus, ARIA) use the vue-a11y skill.

KIMJINWOO4/vue-skills/tree/main/skills/design commit 6e99a201e8

Frequently asked questions

npx skillmds@latest add kimjinwoo4/design