interface-design
Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.
npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill interface-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Learns and enforces craft-forward interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. It emphasizes making every design decision explicit and producing production-grade UI with direction, visual hierarchy, design-system architecture, polish, and motion essentials. It is intended when shaping, building, reviewing, auditing, or refining product UI where visual craft and consistency matter.
How it works
The skill instructs the agent to approach UI design with a strong emphasis on intent and systematization before touching code. It requires identifying the human user, the task they must accomplish, and the desired feel; then it guides exploration of domain concepts, color world, and a signature element to differentiate the product. It prescribes producing a signature element, exploring defaults, and rendering components when tools are available. It stresses rendering when an inline visual tool exists, and adhering to a three-moment rendering pattern: proposing direction, designing components, and critiquing/auditing. It advocates a strong focus on visual hierarchy (one focal point per view), a type scale plan (ratio-based), and deliberate density, spacing, and surface layering.
When to use it
Use for dashboards, admin panels, SaaS apps, tools, settings pages, and data interfaces. Not for landing pages, marketing sites, campaigns, or brand-only work. If your task involves product UI where tokens, states, or design-system consistency matter, apply this skill.
What it can touch
It references tools and artifacts such as an inline rendering widget and design-system concepts, and it expects to produce inline visual specimens when possible. It specifies using a design workflow that includes typography, spacing, depth (borders, shadows), and surface elevation, aligned with a system-like approach. It instructs documenting intent, hierarchy, palette, depth, surfaces, typography, and spacing for every UI write.
Caveats
License: MIT. Declares focus on craft and systemic design rather than generic template output; not for marketing pages. It emphasizes avoiding default outputs and requires explicit, product-specific reasoning for decisions. The skill mentions a subtraction of generic outputs and insists on presenting reasoning through the described checkpoints and a careful rendering workflow.
# Interface Design Build product interfaces with the craft of a top design team — Linear, Vercel, Stripe, Apple. The difference between those and generic output is not talent. It is that every decision was *decided*, the hierarchy is unmistakable, and a hundred small details are correct at once. This skill is how you get there. ## Scope **Use for:** Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces. **Not for:** Landing pages, marketing sites, campaigns, brand-only work. Use a marketing/frontend design skill for those. This skill is self-contained: direction, visual hierarchy, design-system architecture, and the polish and motion essentials needed to ship production-grade UI all live here. --- # The Problem You will generate generic output. Your training has seen thousands of dashboards, and the patterns are strong. You can follow this entire process — explore the domain, name a signature, state your intent — and still produce a template: warm colors on cold structures, friendly fonts on generic layouts. This happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win. Process helps, but it doe
- Scope
- One focal point per view
- Type scale is a ratio, and weight beats size
- Density is a decision, expressed in px
- Spatial rhythm — breathe unevenly
- Proportions speak
- Distribution and restraint (the "expensive" look)
- Subtle Layering (the backbone)
- Infinite Expression
- Color Lives Somewhere
- Controls: native → primitive → hand-roll
- Styling: system → component → token → utility
- Static polish
- Motion
What does the interface-design skill do?
Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.
How do I install it?
Run `npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill interface-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Infrasity-Labs/dev-gtm-claude-skills, a repository with 97 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.