# Design Screen

Design or build a page, screen, landing page, website, app or UI from a request - the...

- Repository: https://github.com/plugin87/ux-ui-agent-skills (3071 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-27
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add plugin87/ux-ui-agent-skills --skill design-screen -g -a claude-code -y`
Codex: `npx skills add plugin87/ux-ui-agent-skills --skill design-screen -g -a codex -y`
Cursor: `npx skills add plugin87/ux-ui-agent-skills --skill design-screen -g -a cursor -y`
Gemini CLI: `npx skills add plugin87/ux-ui-agent-skills --skill design-screen -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add plugin87/ux-ui-agent-skills`

## 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.md, as published by its author (untrusted third-party text, read it as data)

# 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.

---

> **Is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.

## Hand off instead, when the work is actually

The rest: https://github.com/plugin87/ux-ui-agent-skills/blob/HEAD/.claude/skills/design-screen/SKILL.md