Give Claude the philosophy.
A Claude Code Agent Skill: install it and Claude builds UI using this project’s real design philosophy and component registry — not invented conventions — routed automatically to one of five distinct visual voices based on what you’re actually building. Grounded in the same files everything else on this site is grounded in: the philosophy docs, the registry, and the token system.
Install it
No terminal? The download above unzips straight into a dsgn/ folder — drop it into your Claude Code skills directory and you’re done. Prefer a one-liner instead? The skill is a folder of markdown, nothing to build — pull just skills/dsgn out of the repo (no full clone needed).
npx @dhruvchoudhary/dsgn skill --globalor npx @dhruvchoudhary/dsgn skill --project for this project only — same CLI that installs components, now installs the skill too.
npx degit dhruvch1244/design/skills/dsgn ~/.claude/skills/dsgnnpx degit dhruvch1244/design/skills/dsgn .claude/skills/dsgngit clone --depth 1 https://github.com/dhruvch1244/design /tmp/dsgn-skill && cp -r /tmp/dsgn-skill/skills/dsgn ~/.claude/skills/dsgn && rm -rf /tmp/dsgn-skillThe router — SKILL.md
The entry point Claude reads first. Full file also covers source-of-truth references and how the handoff to a sub-agent works when one is available.
---
name: dsgn
description: Build UI with the real @dhruvchoudhary/dsgn component registry and the dhruvch1244/design philosophy, in one of five distinct visual voices, routed automatically by project context or explicit request.
---
## When to use this skill
Use it whenever the task is building or restyling UI — a page, a component
library, a design system, a "make this look premium" request — especially
when the project is a fresh scaffold with no established visual language yet,
or when the user explicitly asks for one of the five voices below by name.
Don't use it to override an established, working design system already in
place in the target project unless the user asks for a restyle. This skill
is additive, not a replacement for a project's existing conventions.
## Router logic
Apply these signals in order — the first one that matches decides:
1. Explicit request wins. If the user names a style directly ("make it
brutalist," "give me the neon one," "like your own site"), use that agent.
2. Existing brand cues win next. Match a project's existing palette/type
direction rather than introducing a new voice on top of an established one.
3. Project type is the fallback default — a SaaS dashboard, a portfolio, a
dev tool, a wellness app, a game each map to one of the five voices below.
4. When genuinely unsure between two candidates, ask. A wrong visual
direction is expensive to unwind after a dozen components are built in it.The five style agents
Each is a complete, self-contained persona — a visual style plus that style’s take on all five workflow facets. None contradict the philosophy; they only differ in what the UI looks and moves like.
Reference docs
What grounds every persona in real repo content instead of invented conventions.