Skip to main content
affpapa.org
RU EN
skill CX Codex

frontend-design-ui-ux — Claude Code skill: design and install

This skill creates a locked design language and UX/UI specification for a feature or screen. Use it before handing the build to an engineering agent.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a claude-code
Open on GitHub

What frontend-design-ui-ux does

The skill turns a feature, screen, or UX problem into a design package under .ulpi/design/. It defines the visual identity, palette, type roles, scales, signature, and voice. A feature spec then covers user flows, loading and error states, components, responsive behavior, and accessibility rules.

The output is meant for an engineering handoff: this skill produces the specification, not production UI code. It can also inspect reference links through the browse skill and distill them into design guidance. The project needs read/write access to its files, and linked references require an available browse skill.

What it helps with

  • define a visual language for a new feature
  • map a UX flow across its states
  • specify component behavior and accessibility
  • prepare a build handoff for an engineering agent

Example prompts for the agent

  • Design the onboarding flow and write the spec under .ulpi/design/.
  • Create a visual identity for the dashboard and document its component states.
  • Use the browse skill to inspect these references, then prepare a design spec for the new feature.

How to install frontend-design-ui-ux

1Skills CLI (Vercel)

npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a claude-code

2Manually: put the files in place

~/.claude/skills/frontend-design-ui-ux/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/frontend-design-ui-ux/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about frontend-design-ui-ux

How do I install frontend-design-ui-ux in Claude Code?

Run npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a claude-code, then check ~/.claude/skills/frontend-design-ui-ux/SKILL.md.

What does frontend-design-ui-ux do?

It creates a locked design language and UX/UI specification in .ulpi/design/, covering identity, flows, states, components, and accessibility. It does not write production UI code.

Which platforms support the skill?

The skill is available for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor