frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill frontend-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.
# Frontend Design Approach this as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. This client has already rejected proposals that felt templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take one real aesthetic risk you can justify. ## Design Intelligence Before writing any code or finalising a design plan, get a data-backed starting point: ```bash python3 skills/ui-ux-pro-max/scripts/search.py "<product type> <industry> <keywords>" --design-system ``` This returns a complete design system recommendation — style, color palette, typography, and anti-patterns to avoid — based on the product type and audience. Use it to seed the token system in the brainstorm pass below. If the brief already specifies a direction, use it to validate rather than replace that direction. If a brand already exists, inject brand context first: ```bash node .claude/skills/brand/scripts/inject-brand-context.cjs ``` Once the design plan is done and approved, hand implementation off to the `ui-styling` skill for co
- Design Intelligence
- Ground it in the subject
- Design principles
- Process: brainstorm, explore, plan, critique, build, critique again
- Restraint and self-critique
- More on writing in design
- Related Skills
python3 skills/ui-ux-pro-max/scripts/search.py "<product type> <industry> <keywords>" --design-system node .claude/skills/brand/scripts/inject-brand-context.cjs
What does the frontend-design skill do?
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
How do I install it?
Run `npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill frontend-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.