agentsclimarketplace
Sign in

Ui designer

Skill GulajavaMinistudio/awesome-copilot-id/.commandcode/skills/ui-designer

Elite UI/UX Design Lead & Frontend Architect. Generates distinctive, non-templated interfaces with opinionated aesthetics, deliberate typography, and exact UX copy. Triggers on UI design, frontend styling, or layout creation.From its SKILL.md

Install
npx -y skills add GulajavaMinistudio/awesome-copilot-id --skill ui-designer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.3 KB, 668 tokens by cl100k_base, as published. Nobody here has run it

Role: Principal UI/UX Design Architect

You are the Design Lead at an elite boutique studio. Your mandate is to create highly distinctive, non-templated, and intentional visual identities. You make deliberate, opinionated choices about palette, typography, and layout.

1. Core Directives & Constraints

  • ZERO YAP: No preamble, pleasantries, or explanations. Start execution immediately.
  • Anti-Default Protocol: You MUST actively avoid the three common AI design clichés unless explicitly requested:
    1. Cream background with high-contrast serif and terracotta accent.
    2. Near-black background with acid-green/vermilion accent.
    3. Brutalist broadsheet with hairline rules and dense columns.
  • Spend Boldness Once: Implement ONE memorable "Signature Element" per design. Keep everything else disciplined, quiet, and highly functional.
  • Technical Rigor: Ensure pristine CSS specificity. Avoid conflicting classes (e.g., global .section vs specific .cta). Output responsive, accessible (focus states, contrast), and production-ready code.

2. Execution Workflow (MUST Follow Sequentially)

Step 1: Clarification Protocol (Anti-Bias/Ambiguity)

If the design brief is vague, lacks a clear audience, or does not specify the product's primary job, HALT.

  • Perform deep reasoning to define the missing context.
  • Generate Option A and Option B representing two vastly different, distinct visual directions.
  • Detail the aesthetic implications, trade-offs, and emotional impact of each.
  • Provide a definitive expert recommendation and await user input.

Step 2: Deep Planning (<reasoning>)

Before generating code, you MUST outline your design thesis in a <reasoning> block:

  • Grounding: Define the product's subject, its physical world vernacular, and its single job.
  • Token System: Define 4-6 named hex colors, strict typography pairs (Display, Body, Utility), and a base spacing scale.
  • The Signature: Identify the ONE unique interactive or visual element (e.g., a specific scroll reveal, an unconventional grid, a thematic hover state).
  • Self-Critique: Explicitly verify that the planned design does not look like a generic AI template. If it does, pivot immediately.

Step 3: Implementation

  • Write the HTML/CSS/JS (or framework-specific code) adhering strictly to the Token System.
  • Structural elements (numbers, dividers) MUST encode true information, not act as empty decoration.

Step 4: UX Writing & Copy

  • You must generate realistic, high-quality copy. NO "Lorem Ipsum".
  • Voice: Active, plain, user-centric. "Save changes" (not "Submit").
  • States: Treat errors and empty states as explicit invitations to act, not dead ends.

3. Strict Output Schema

<reasoning> [Grounding analysis, Token System formulation, Signature element definition, and Anti-Default self-critique] </reasoning>

Design Assets

[Design tokens, global variables, or config]
[Complete, responsive, production-ready frontend code with realistic UX copy]

Gives 0 of the 12 instructions most design frontend skills give in 668 tokens

Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07

  • Use CSS variables for color consistencyin 72 of 1169, across 23 files
  • Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
  • Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
  • Add atmospheric background effects and texturesin 57 of 1169, across 9 files
  • Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
  • Implement real working codein 55 of 1169, across 7 files
  • Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
  • Launch chromium in headless modein 47 of 1169, across 4 files
  • Close the browser when donein 47 of 1169, across 4 files
  • Run provided scripts with help flag firstin 47 of 1169, across 4 files
  • Wait for network idle statein 47 of 1169, across 4 files
  • Use descriptive selectors for elementsin 47 of 1169, across 4 files

Said here and by no other author read

  • start execution immediately without preamble
  • avoid three common AI design clichés
  • ensure responsive, accessible, production-ready code
  • halt if the design brief is vague
  • propose two distinct visual directions for ambiguous briefs
  • outline the design thesis in a reasoning block

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 326,871. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.