Distinctive Frontend Design Brief skill for Claude and Codex

Distinctive Frontend Design Brief as an AI skill. It asks for What is being built, Audience, Personality and 3 more, then does the rest. Free to install in…

Install it once and Claude or Codex runs it for you. When your request matches, your AI loads the skill, asks for anything it is missing, and works through the template itself. Prefer to fill it in by hand? See the full prompt template.

Download the skill (.zip) · View SKILL.md

When it is used

Use when a web page or app interface needs a distinctive visual direction covering type, colour, layout, and motion instead of a default template look. Do not use for implementing the front end or running a usability review of an existing design. Related topics: design, coding.

What it will ask you for

• What is being built (longer free text)
• Audience (free text, e.g. "Who uses it and in what setting")
• Personality (choose any: Calm, Bold, Playful, Technical, Editorial, Luxurious, Warm, Raw)
• Reference points (longer free text)
• Things to avoid (free text, e.g. "purple gradients or stock icons")
• Stack constraints (free text, e.g. "Tailwind or plain CSS")

How it works

1. State one design concept in a sentence that follows from the product, the audience, and the chosen personality.
2. Choose a type pairing and size scale with a reason for each face, ensuring body text stays readable.
3. Build a palette of dominant colour, sharp accent, and neutrals, and check contrast ratios against accessibility minimums.
4. Define the layout grid, spacing rhythm, one deliberate rule-break, and a restrained motion plan that honours reduced-motion settings.
5. Output everything as paste-ready tokens and name three defaults that would make the result look generic.

What you get

A one-sentence concept, then type, colour, layout, and motion specs as paste-ready tokens, and a list of three generic defaults to avoid.

What it watches out for

• Defaulting to a safe sans-serif and a purple gradient, which is exactly the look this brief exists to avoid.
• Choosing an accent colour that fails contrast on the background, so buttons look striking but read poorly.
• Adding motion everywhere, which feels busy and ignores people who set reduced motion.

How to install

Claude.ai and the Claude desktop app

1. Download the skill .zip.
2. Open Settings, then Capabilities, and find Skills.
3. Choose Upload skill and select the .zip.
4. Ask Claude for help with the task. It loads the skill when your request matches.

Claude Code

1. Download the skill .zip.
2. Unzip it into ~/.claude/skills/ (or .claude/skills/ inside a project).
3. Start a new session. Claude Code loads the skill when your request matches.

Codex

1. Download the skill .zip.
2. Unzip it into ~/.agents/skills/ (or .agents/skills/ inside a project).
3. Codex picks it up on its own. Type $ and the skill name to use it, or just ask for the task.

Cursor

1. Download the Cursor rule (.mdc).
2. Save it in .cursor/rules/ inside your project.
3. Cursor's agent applies the rule when your request matches its description.

AGENTS.md (Codex, Cursor, and other coding agents)

1. Copy the AGENTS.md section.
2. Paste it into AGENTS.md at the root of your repository, creating the file if needed.
3. Coding agents that read AGENTS.md follow it when your request fits.