- name
- design-screen
- description
- Design or build a page, screen, landing page, website, app or UI from a request - the whole job, end to end. Use this for "design a landing page", "build a settings screen", "make me a website", "design the onboarding", "ออกแบบหน้าเว็บ", "ทำหน้า landing", "ออกแบบ UI", "ทำแอป". It runs the pipeline no single skill covers: the house doctrine, a written Brief Inference so the result is not the statistical mean, a committed visual direction, tokens, build, the objective gates, then an adversarial critic. Hands off to data-dashboard for dense data screens, redesign for existing UI, and image-to-code when a reference image is given.
Skill: Design a screen
Do this first, before anything else
Write the Brief Inference block into your reply now. Not after reading the rest of this file, not in your head, not "once the layout is clearer" - now, before any markup, any file, any tool call.
Domain: fintech | editorial | dev-tool | healthcare | consumer | ...
Audience & tone: expert vs first-time, calm vs energetic, premium vs utilitarian
Mood: the one adjective the result must earn - "expensive", "precise", "warm", "brutal"
Motion depth: none | subtle feedback | expressive choreography
Layout family: the section sequence you will use, named, varied per section
Reference anchor: an archetype, or a named system - see step 3
Fill in every line with a decision. Mood: clean is not a decision; Mood: expensive is. If you cannot name the mood and the layout family, you have not
decided anything yet and whatever you generate will regress to the mean.
The stop condition: if you are about to write markup, create a file, or call a tool that produces UI, and this block is not already in your reply, stop and write it first. Measured on 2026-10-07, one run in three skipped it - the skill loaded, the block did not get written, and the result was a screen designed by nobody. This section is at the top of the file because it was previously below twenty-nine lines of background, and background is not an instruction.
Everything below is how to execute the decisions above.
Requirements
This skill needs the full UX/UI Agent Skills kit: the gates, the references and
the design-system library. Install it with npx [email protected] init
or as the Claude Code plugin. npx [email protected] add copies the skill folder and
nothing else. Installed that way, this skill runs in guidance-only mode: no gate
runs, so it gives no verdict.
Step 0: is the kit here? Check once:
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSINGOnKIT_MISSING, open your reply with: "Guidance-only mode: the UX/UI Agent Skills kit is not installed here, so no gate ran and nothing below is measured." Then work from this file and general practice, under three rules. Do not guess or cite the contents of a kit file you could not open. State no measured number (no contrast ratio, no N/N, no "passes WCAG"): write "not verified" where one would go. End with a line that names every gate script this file tells you to run, then the install command above.