What UI/UX section design does
A design-only skill for planning and reviewing website pages and sections: hero, services, about, process, testimonials, FAQ, CTA and contact. The output is decisions, not markup, so you can build the result in Gutenberg, Elementor or anything else.
What you give it
The client, the audience, the goal of the page, the tone, any brand colours or fonts, and the page type.
What you get back
- A short design system: pattern, style words, four to six named hex values, one or two fonts with a size scale, and an avoid list
- A section plan, in order, each with its purpose, layout, content needed and single supported action
- Build notes in plain terms: columns, spacing, colour use, font sizes at desktop and mobile, image sizes
Use cases
Deciding the layout before you build
Settle the section order and the structure first, so the build is execution rather than exploration.
A design review of a page that is not working
Get specific decisions to change, checked against accessibility rules first.
Professional and medical sites
The section guide is written for practices and service businesses, where trust signals and one clear action matter more than visual novelty.
How to use UI/UX section design
Install the WordPress toolkit
/plugin install wordpress-toolkit@claude-skills
Give the brief
Client and specialty, audience, the main goal of the page, the tone, and any brand assets.
Get the design system and section plan
Both come back in plain English, with the answer first and the reasoning after.
Save it as DESIGN.md
Offered for any client, so every later page on that site matches the first one.
Benefits
Tool-neutral
Layouts are described as "full-width section, two columns, 24px gap". Builder-specific terms only appear once you say which builder you are using.
Accessibility checked first
4.5:1 contrast, 16px+ body text, 44px touch targets and reduced motion are rules, not suggestions.
No invented client facts
Credentials, awards, results and testimonials are left as clear placeholders.
Pairs with the section designer
Decide the design here, then hand it to wp-section-designer to produce the blocks.
Install ui-ux-section-design
This skill ships in the wordpress-toolkit plugin. Add the marketplace once, then install the plugin in Claude Code.
/plugin marketplace add rodneylungayan/claude-skills
/plugin install wordpress-toolkit@claude-skillsAfter that the skill loads on its own whenever your request matches it. You can also invoke it by name with /ui-ux-section-design.
Questions about ui-ux-section-design
- Does this write code?
- No, not unless you ask. The deliverable is design decisions that survive any page builder.
- Where did this skill come from?
- It is a condensed, self-contained adaptation of the MIT-licensed ui-ux-pro-max-skill project by Next Level Builder, credited in the repository's NOTICE file.