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

frontend-design · aladicf — Claude Code skill: UI without generic AI looks

Walks the agent through a decision order: task and hierarchy first, systems next, colour and decoration last. Useful when building or reworking interfaces.

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

What frontend-design does

The skill sets a working order for frontend work. Start from the specific user task, not the shell around it. Then check hierarchy in grayscale — if it does not read without colour, colour will not fix it. Constrained scales for spacing, type, radius and elevation come next, and only after that does the agent add colour, depth, motion and finishing touches.

Context gathering is a separate gate. The skill wants the target audience, the use cases and the brand tone, and it states plainly that you cannot read those out of the codebase: code shows what was built, not who it is for. If no context exists in the loaded instructions, in .better-web-ui.md, or in the legacy .better-ui.md and .impeccable.md, the agent must run $setup before anything else. Worth knowing: on a fresh project with none of those files, work starts with setup rather than markup.

The library stays framework-agnostic on purpose. Precedence runs from the existing project stack, to explicit user choices, to a default matrix only for a new unspecified project. For Next.js it advises reading the bundled docs under node_modules/next/dist/docs/ instead of trusting stale memory about the installed version. Reference material covers component anatomy, shadcn/ui accelerators, and focused patterns such as accordions, carousels and complex tables.

What it helps with

  • build an interface that does not look like default model output
  • get hierarchy right before adding colour
  • lock spacing and type scales instead of one-off tweaking
  • pick a component strategy that matches the existing stack
  • rework an existing page or flow without a rewrite

Example prompts for the agent

  • Build the pricing page: grayscale hierarchy first, colour after
  • Rework the signup form — it looks generic right now
  • Run $setup and record the project context before you start

How to install frontend-design

1Skills CLI (Vercel)

npx skills add aladicf/better-web-ui --skill frontend-design -a claude-code

2Manually: put the files in place

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

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

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

Questions about frontend-design

How do I install frontend-design in Claude?

Run npx skills add aladicf/better-web-ui --skill frontend-design -a claude-code. The skill file then lives at ~/.claude/skills/frontend-design/SKILL.md.

What does frontend-design do?

It gives the agent an order of operations for interface work: feature before shell, hierarchy in grayscale, constrained scales, polish last. It also requires confirmed context — audience, use cases and brand tone.

What does the skill need to work?

Project context, taken from loaded instructions, a .better-web-ui.md file at the project root, or the legacy .better-ui.md and .impeccable.md. If none of those exist, the agent runs $setup first.

Similar skills

Everything for Frontend and UI →

frontend-design by other authors comes first.

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 frontend-design bytedance The skill picks an aesthetic direction before the agent writes any code. Useful when you want a landing page, dashboard or component that does not look auto-generated. CX Codex +1 3,700installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. CX Codex +1 4,800installs frontend-design sickn33 Teaches the agent to create memorable interfaces instead of generic layouts: picks an aesthetic direction, checks accessibility, writes clean code. CX Codex +1 2,600installs frontend-design julianoczkowski Generates production-grade UI based on established design philosophies. It checks existing tokens and components before writing any new code. CX Codex +1 5,500installs avoid-ai-design ungspirit A skill that audits frontend code for the patterns that make a UI look AI-generated, then rewrites it around one deliberate design direction. Useful when a Claude or Codex build looks like everyone else's. CX Codex +1 641installs designing-frontend-interfaces osmontero The skill makes the agent write a design brief and lock a token block before touching component code. Useful when your UI looks like default AI output. CX Codex +1 642installs design-taste-frontend nexu-io Skill for landing pages, portfolios and redesigns. The agent reads the brief, picks a design system and ships interfaces without AI templates. CX Codex +1 808installs design-brief julianoczkowski Interviews you about a feature, scans the codebase, and saves a design brief as markdown. Useful before you start building a page. CX Codex +1 5,300installs ui-design frappe A skill that gives the agent design rules for layout, type, color and spacing. Useful when no product design-system skill exists. CX Codex +1 832installs design-with-taste cristicretu A skill that gives the agent a design philosophy: gradual revelation, fluid transitions and selective emphasis. Useful when generated UI keeps looking generic. CX Codex +1 758installs

From the same set22

polish A skill for the last pass over a UI: alignment, spacing, states, consistent copy. Run it once the work is functionally done and needs finishing touches. CX Codex +1 637installs search Walks an agent through designing site search: autocomplete, filters, result lists and recovery from zero results. CX Codex +1 626installs add-ui Generates five distinct UI directions for a new or existing section, then walks you through comparing them and applying the one you pick. CX Codex +1 636installs audit Runs code-level checks on accessibility, performance, theming, responsive design and anti-patterns. Returns a scored report with a fix plan. CX Codex +1 625installs animate Adds movement to an interface: transitions, micro-interactions, gestures, hover states. Useful when the UI feels dead or stutters under frequent use. CX Codex +1 607installs hierarchy A skill that reads an interface for visual hierarchy: where the primary action gets lost, what competes for attention, and which labels get in the way. CX Codex +1 606installs arrange A skill that fixes weak spatial composition: arbitrary spacing, crowded groups, monotonous card grids. CX Codex +1 577installs typeset Audits fonts, type scale and text hierarchy in a UI, then rebuilds them as a system. Useful when the layout looks generic. CX Codex +1 557installs

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